@selfcommunity/react-ui 0.8.0-alpha.19 → 0.8.0-alpha.20

package/lib/cjs/components/Groups/Groups.js

@@ -18,6 +18,8 @@ const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importStar(require("../Group"));
 const Pagination_1 = require("../../constants/Pagination");
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+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}-filter`,
@@ -85,6 +87,8 @@ function Groups(inProps) {
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     // HANDLERS
     const handleScrollUp = () => {
         window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
@@ -121,6 +125,28 @@ function Groups(inProps) {
             fetchGroups();
         }
     }, [contentAvailability, authUserId, search]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteGroupHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setGroups((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [groups]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (groups) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [groups]);
     const handleNext = (0, react_1.useMemo)(() => () => {
         if (!next) {
             return;

package/lib/esm/components/Groups/Groups.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
@@ -16,6 +16,8 @@ import { PREFIX } from './constants';
 import Group, { GroupSkeleton } from '../Group';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import InfiniteScroll from '../../shared/InfiniteScroll';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
@@ -83,6 +85,8 @@ export default function Groups(inProps) {
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const updatesSubscription = useRef(null);
     // HANDLERS
     const handleScrollUp = () => {
         window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
@@ -119,6 +123,28 @@ export default function Groups(inProps) {
             fetchGroups();
         }
     }, [contentAvailability, authUserId, search]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteGroupHandler = useCallback((_msg, deleted) => {
+        setGroups((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [groups]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    useEffect(() => {
+        if (groups) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCGroupEventType.DELETE}`, onDeleteGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [groups]);
     const handleNext = useMemo(() => () => {
         if (!next) {
             return;