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

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

@@ -154,7 +154,12 @@ function Events(inProps) {
      * Subscriber for pubsub callback
      */
     const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
-        setEvents((prev) => prev.filter((e) => e.id !== 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)

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/esm/components/Events/Events.js

@@ -151,7 +151,12 @@ export default function Events(inProps) {
      * Subscriber for pubsub callback
      */
     const onDeleteEventHandler = useCallback((_msg, deleted) => {
-        setEvents((prev) => prev.filter((e) => e.id !== 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)

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, {});