@selfcommunity/react-ui 0.8.0-alpha.0 → 0.8.0-alpha.2

package/lib/cjs/components/Events/Events.js

@@ -20,6 +20,8 @@ const Event_1 = tslib_1.__importStar(require("../Event"));
 const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
 const constants_1 = require("./constants");
 const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filters`,
@@ -101,6 +103,8 @@ function Events(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     // HANDLERS
     const handleChipClick = () => {
         setShowFollowed(!showFollowed);
@@ -146,6 +150,28 @@ function Events(inProps) {
             query === '' && fetchEvents();
         }
     }, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setEvents((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [events]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (events) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [events]);
     const handleNext = (0, react_1.useMemo)(() => () => {
         if (!next) {
             return;

package/lib/cjs/components/MyEventsWidget/MyEventsWidget.js

@@ -20,6 +20,8 @@ const Event_1 = tslib_1.__importDefault(require("../Event"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     titleWrapper: `${constants_1.PREFIX}-title-wrapper`,
@@ -66,6 +68,8 @@ function MyEventsWidget(inProps) {
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { features } = (0, react_core_1.useSCPreferences)();
     const eventsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.EVENT) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -120,6 +124,30 @@ function MyEventsWidget(inProps) {
             _fetchNext();
         }
     }, [eventIndex, state.results]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        const _events = [...state.results];
+        if (_events.some((e) => e.id === deleted)) {
+            const updatedEvents = _events.filter((e) => e.id !== deleted);
+            dispatch({
+                type: widget_1.actionWidgetTypes.SET_RESULTS,
+                payload: { results: updatedEvents }
+            });
+        }
+    }, [state.results]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (state.results) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [state.results]);
     // RENDER
     if (!eventsEnabled || (state.initialized && state.count === 0)) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});

package/lib/cjs/components/SuggestedEventsWidget/SuggestedEventsWidget.js

@@ -20,6 +20,8 @@ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -58,6 +60,8 @@ function SuggestedEventsWidget(inProps) {
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     //HOOKS
     const theme = (0, material_1.useTheme)();
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         api_services_1.SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
             .then((payload) => {
@@ -106,6 +110,28 @@ function SuggestedEventsWidget(inProps) {
             }
         }
     }, [count, hideMarginLeft, hideMarginRight]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setEvents((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [events]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (events) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [events]);
     // RENDER
     if (!events && loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});

package/lib/cjs/constants/PubSub.d.ts

@@ -12,6 +12,7 @@ export declare enum SCTopicType {
 export declare enum SCGroupEventType {
     CREATE = "create",
     EDIT = "edit",
+    DELETE = "delete",
     MEMBERS = "members",
     ADD_MEMBER = "members.add_member",
     INVITE_MEMBER = "members.invite_member",

package/lib/cjs/constants/PubSub.js

@@ -16,6 +16,7 @@ var SCGroupEventType;
 (function (SCGroupEventType) {
     SCGroupEventType["CREATE"] = "create";
     SCGroupEventType["EDIT"] = "edit";
+    SCGroupEventType["DELETE"] = "delete";
     SCGroupEventType["MEMBERS"] = "members";
     SCGroupEventType["ADD_MEMBER"] = "members.add_member";
     SCGroupEventType["INVITE_MEMBER"] = "members.invite_member";

package/lib/cjs/shared/EventActionsMenu/index.js

@@ -15,6 +15,8 @@ const api_services_1 = require("@selfcommunity/api-services");
 const EventActionsMenu_1 = require("../../constants/EventActionsMenu");
 const utils_1 = require("@selfcommunity/utils");
 const notistack_1 = require("notistack");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const PREFIX = 'SCEventActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -105,6 +107,7 @@ function EventActionsMenu(inProps) {
             .then(() => {
             onDeleteConfirm();
             handleCloseDialog();
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, scEvent.id);
         })
             .catch((error) => {
             setOpenConfirmDialog(false);

package/lib/esm/components/Events/Events.js

@@ -8,7 +8,7 @@ import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@
 import { SCEventDateFilterType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
@@ -17,6 +17,8 @@ import Event, { EventSkeleton } from '../Event';
 import Skeleton from '../Events/Skeleton';
 import { PREFIX } from './constants';
 import PastEventsFilter from './PastEventsFilter';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filters`,
@@ -98,6 +100,8 @@ export default function Events(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = useRef(null);
     // HANDLERS
     const handleChipClick = () => {
         setShowFollowed(!showFollowed);
@@ -143,6 +147,28 @@ export default function Events(inProps) {
             query === '' && fetchEvents();
         }
     }, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = useCallback((_msg, deleted) => {
+        setEvents((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [events]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    useEffect(() => {
+        if (events) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [events]);
     const handleNext = useMemo(() => () => {
         if (!next) {
             return;

package/lib/esm/components/MyEventsWidget/MyEventsWidget.js

@@ -7,7 +7,7 @@ import { Endpoints, EventService, http } from '@selfcommunity/api-services';
 import { SCCache, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { SCEventSubscriptionStatusType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
-import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
@@ -18,6 +18,8 @@ import Event from '../Event';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     titleWrapper: `${PREFIX}-title-wrapper`,
@@ -64,6 +66,8 @@ export default function MyEventsWidget(inProps) {
     const scRoutingContext = useSCRouting();
     const { features } = useSCPreferences();
     const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    // REFS
+    const updatesSubscription = useRef(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -118,6 +122,30 @@ export default function MyEventsWidget(inProps) {
             _fetchNext();
         }
     }, [eventIndex, state.results]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = useCallback((_msg, deleted) => {
+        const _events = [...state.results];
+        if (_events.some((e) => e.id === deleted)) {
+            const updatedEvents = _events.filter((e) => e.id !== deleted);
+            dispatch({
+                type: actionWidgetTypes.SET_RESULTS,
+                payload: { results: updatedEvents }
+            });
+        }
+    }, [state.results]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    useEffect(() => {
+        if (state.results) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [state.results]);
     // RENDER
     if (!eventsEnabled || (state.initialized && state.count === 0)) {
         return _jsx(HiddenPlaceholder, {});

package/lib/esm/components/SuggestedEventsWidget/SuggestedEventsWidget.js

@@ -6,7 +6,7 @@ import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services'
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -18,6 +18,8 @@ import Widget from '../Widget';
 import Arrow from './Arrow';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -56,6 +58,8 @@ export default function SuggestedEventsWidget(inProps) {
     const scRoutingContext = useSCRouting();
     //HOOKS
     const theme = useTheme();
+    // REFS
+    const updatesSubscription = useRef(null);
     useEffect(() => {
         SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
             .then((payload) => {
@@ -104,6 +108,28 @@ export default function SuggestedEventsWidget(inProps) {
             }
         }
     }, [count, hideMarginLeft, hideMarginRight]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = useCallback((_msg, deleted) => {
+        setEvents((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [events]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    useEffect(() => {
+        if (events) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [events]);
     // RENDER
     if (!events && loading) {
         return _jsx(Skeleton, {});

package/lib/esm/constants/PubSub.d.ts

@@ -12,6 +12,7 @@ export declare enum SCTopicType {
 export declare enum SCGroupEventType {
     CREATE = "create",
     EDIT = "edit",
+    DELETE = "delete",
     MEMBERS = "members",
     ADD_MEMBER = "members.add_member",
     INVITE_MEMBER = "members.invite_member",

package/lib/esm/constants/PubSub.js

@@ -13,6 +13,7 @@ export var SCGroupEventType;
 (function (SCGroupEventType) {
     SCGroupEventType["CREATE"] = "create";
     SCGroupEventType["EDIT"] = "edit";
+    SCGroupEventType["DELETE"] = "delete";
     SCGroupEventType["MEMBERS"] = "members";
     SCGroupEventType["ADD_MEMBER"] = "members.add_member";
     SCGroupEventType["INVITE_MEMBER"] = "members.invite_member";

package/lib/esm/shared/EventActionsMenu/index.js

@@ -13,6 +13,8 @@ import { EventService } from '@selfcommunity/api-services';
 import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
 import { copyTextToClipboard } from '@selfcommunity/utils';
 import { enqueueSnackbar } from 'notistack';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const PREFIX = 'SCEventActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -103,6 +105,7 @@ export default function EventActionsMenu(inProps) {
             .then(() => {
             onDeleteConfirm();
             handleCloseDialog();
+            PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.DELETE}`, scEvent.id);
         })
             .catch((error) => {
             setOpenConfirmDialog(false);