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

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,23 @@ 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) => prev.filter((e) => e.id !== deleted));
+    }, [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/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,23 @@ export default function Events(inProps) {
             query === '' && fetchEvents();
         }
     }, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = useCallback((_msg, deleted) => {
+        setEvents((prev) => prev.filter((e) => e.id !== deleted));
+    }, [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/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);