@selfcommunity/react-ui 0.7.9-alpha.37 → 0.7.9-alpha.39

package/lib/cjs/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -57,7 +57,7 @@ function FeedUpdatesWidget(inProps) {
     const [updates, setUpdates] = (0, react_1.useState)(false);
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
-    // Subscripber for pubsub callback
+    // Subscriber for pubsub callback
     const subscriber = (msg, data) => {
         if (subscriptionChannelUpdatesCallback(msg, data)) {
             setUpdates(true);

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -15,10 +15,12 @@ const ChangeGroupPicture_1 = tslib_1.__importDefault(require("../ChangeGroupPict
 const ChangeGroupCover_1 = tslib_1.__importDefault(require("../ChangeGroupCover"));
 const Group_1 = require("../../constants/Group");
 const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButton"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const types_1 = require("@selfcommunity/types");
 const Errors_1 = require("../../constants/Errors");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
+const PubSub_1 = require("../../constants/PubSub");
 const messages = (0, react_intl_1.defineMessages)({
     name: {
         id: 'ui.groupForm.name.placeholder',
@@ -142,6 +144,22 @@ function GroupForm(inProps) {
             setError(error);
         }
     }
+    /**
+     * Notify when a group info changed
+     * @param data
+     */
+    function notifyChanges(data) {
+        if (data) {
+            if (group) {
+                // Edit group
+                pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.EDIT}`, data);
+            }
+            else {
+                // Create group
+                pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.CREATE}`, data);
+            }
+        }
+    }
     const handleSubmit = () => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
@@ -168,6 +186,7 @@ function GroupForm(inProps) {
         groupService
             .then((data) => {
             onSuccess && onSuccess(data);
+            notifyChanges(data);
             onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         })

package/lib/cjs/components/GroupHeader/GroupHeader.js

@@ -18,6 +18,8 @@ const GroupMembersButton_1 = tslib_1.__importDefault(require("../GroupMembersBut
 const EditGroupButton_1 = tslib_1.__importDefault(require("../EditGroupButton"));
 const GroupSubscribeButton_1 = tslib_1.__importDefault(require("../GroupSubscribeButton"));
 const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButton"));
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -81,6 +83,8 @@ function GroupHeader(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
     const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     // CONST
     const isGroupAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     /**
@@ -107,6 +111,33 @@ function GroupHeader(inProps) {
     const handleSubscribe = (group, status) => {
         setSCGroup(Object.assign(Object.assign({}, group), { subscribers_counter: group.subscribers_counter + (status ? 1 : -1) }));
     };
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupMembersHandler = (0, react_1.useCallback)((msg, data) => {
+        if (data && data.group.id === scGroup.id) {
+            let _group = Object.assign({}, scGroup);
+            if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.ADD_MEMBER}`) {
+                _group.subscribers_counter = _group.subscribers_counter + 1;
+            }
+            else if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.REMOVE_MEMBER}`) {
+                _group.subscribers_counter = Math.max(_group.subscribers_counter - 1, 0);
+            }
+            console.log(_group);
+            setSCGroup(_group);
+        }
+    }, [scGroup, setSCGroup]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        if (scGroup) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.MEMBERS}`, onChangeGroupMembersHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [scGroup]);
     // RENDER
     if (!scGroup) {
         return react_1.default.createElement(Skeleton_1.default, null);
@@ -143,7 +174,7 @@ function GroupHeader(inProps) {
                 isGroupAdmin) && (react_1.default.createElement(material_1.Box, { className: classes.members },
                 react_1.default.createElement(material_1.Typography, { className: classes.membersCounter, component: "div" },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } })),
-                react_1.default.createElement(GroupMembersButton_1.default, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps))))),
+                react_1.default.createElement(GroupMembersButton_1.default, Object.assign({ key: scGroup.subscribers_counter, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps))))),
             isGroupAdmin ? (react_1.default.createElement(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id })) : (react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps))))));
 }
 exports.default = GroupHeader;

package/lib/cjs/components/GroupInfoWidget/GroupInfoWidget.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -10,8 +10,10 @@ const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 const react_intl_1 = require("react-intl");
 const types_1 = require("@selfcommunity/types");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const react_core_1 = require("@selfcommunity/react-core");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -62,9 +64,33 @@ function GroupInfoWidget(inProps) {
     });
     const { className, group, groupId, onHeightChange, onStateChange } = props, rest = tslib_1.__rest(props, ["className", "group", "groupId", "onHeightChange", "onStateChange"]);
     // HOOKS
-    const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
     // INTL
     const intl = (0, react_intl_1.useIntl)();
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupHandler = (0, react_1.useCallback)((_msg, data) => {
+        if (data && scGroup.id === data.id) {
+            setSCGroup(data);
+        }
+    }, [scGroup, setSCGroup]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        if (scGroup) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.EDIT}`, onChangeGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [scGroup]);
+    /**
+     * Loading group
+     */
     if (!scGroup) {
         return react_1.default.createElement(Skeleton_1.default, null);
     }

package/lib/cjs/components/GroupMembersWidget/GroupMembersWidget.js

@@ -207,9 +207,12 @@ function GroupMembersWidget(inProps) {
             openDialog && (react_1.default.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
                 react_1.default.createElement(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: react_1.default.createElement(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: react_1.default.createElement(material_1.Typography, { className: classes.endMessage },
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" })) },
-                    react_1.default.createElement(List_1.default, null, state.results.map((user) => (react_1.default.createElement(material_1.ListItem, { key: user.id },
-                        react_1.default.createElement(User_1.default, { elevation: 0, actions: isGroupAdmin ? (react_1.default.createElement(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : (react_1.default.createElement(material_1.Button, null,
-                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))), user: user, userId: user.id }))))))))),
+                    react_1.default.createElement(List_1.default, null, state.results.map((user) => {
+                        var _a;
+                        return (react_1.default.createElement(material_1.ListItem, { key: user.id },
+                            react_1.default.createElement(User_1.default, { elevation: 0, actions: isGroupAdmin ? (react_1.default.createElement(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
+                                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
+                    })))))),
         react_1.default.createElement(material_1.CardActions, { className: classes.actions },
             react_1.default.createElement(GroupInviteButton_1.default, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));

package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.js

@@ -11,6 +11,8 @@ const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
 const api_services_1 = require("@selfcommunity/api-services");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const PREFIX = 'SCGroupSettingsIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -84,12 +86,23 @@ function GroupSettingsIconButton(inProps) {
         setOpenConfirmDialog(false);
         setAnchorEl(null);
     };
+    /**
+     * Notify UI when a user is removed from a group
+     * @param group
+     * @param user
+     */
+    function notifyChanges(group, user) {
+        if (group && user) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.REMOVE_MEMBER}`, { group, user });
+        }
+    }
     /**
      * Handles thread deletion
      */
     function handleRemoveUser() {
         api_services_1.GroupService.removeUserFromGroup(group.id, user.id)
             .then(() => {
+            notifyChanges(group, user);
             onRemoveSuccess && onRemoveSuccess();
             handleCloseDialog();
         })

package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.js

@@ -11,6 +11,8 @@ const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const Errors_1 = require("../../constants/Errors");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const PREFIX = 'SCGroupSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
@@ -73,14 +75,25 @@ function GroupSubscribeButton(inProps) {
             setStatus(scGroupsManager.subscriptionStatus(scGroup));
         }
     }, [authUserId, scGroupsManager.subscriptionStatus]);
-    const subscribe = (userId) => {
+    /**
+     * Notify UI when a member is added to a group
+     * @param group
+     * @param user
+     */
+    function notifyChanges(group, user) {
+        if (group && user) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.ADD_MEMBER}`, { group, user });
+        }
+    }
+    const subscribe = (user) => {
         scGroupsManager
-            .subscribe(scGroup, userId)
+            .subscribe(scGroup, user === null || user === void 0 ? void 0 : user.id)
             .then(() => {
-            onSubscribe &&
-                onSubscribe(scGroup, scGroup.privacy === types_1.SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== types_1.SCGroupSubscriptionStatusType.INVITED
-                    ? types_1.SCGroupSubscriptionStatusType.REQUESTED
-                    : types_1.SCGroupSubscriptionStatusType.SUBSCRIBED);
+            const _status = scGroup.privacy === types_1.SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== types_1.SCGroupSubscriptionStatusType.INVITED
+                ? types_1.SCGroupSubscriptionStatusType.REQUESTED
+                : types_1.SCGroupSubscriptionStatusType.SUBSCRIBED;
+            notifyChanges(scGroup, user);
+            onSubscribe && onSubscribe(scGroup, _status);
         })
             .catch((e) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
@@ -101,7 +114,7 @@ function GroupSubscribeButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else {
-            status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user === null || user === void 0 ? void 0 : user.id) : subscribe();
+            status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user) : subscribe();
         }
     };
     /**

package/lib/cjs/components/Groups/Groups.d.ts

@@ -10,7 +10,7 @@ export interface GroupsProps {
     /**
      * Endpoint to call
      */
-    endpoint: EndpointType;
+    endpoint?: EndpointType;
     /**
      * Props to spread to single group object
      * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}

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

@@ -124,11 +124,11 @@ function Groups(inProps) {
     if (!contentAvailability && !scUserContext.user) {
         return react_1.default.createElement(HiddenPlaceholder_1.default, null);
     }
-    const content = (react_1.default.createElement(react_1.default.Fragment, null, loading ? (react_1.default.createElement(Skeleton_1.default, null)) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
+    const content = (react_1.default.createElement(react_1.default.Fragment, null, loading ? (react_1.default.createElement(Skeleton_1.default, null)) : (react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
         react_1.default.createElement(material_1.Typography, { variant: "h4" },
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
         react_1.default.createElement(material_1.Typography, { variant: "body1" },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(react_1.default.Fragment, null, groups.map((group) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
+            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, groups.map((group) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: group.id, className: classes.item },
         react_1.default.createElement(Group_1.default, Object.assign({ group: group, groupId: group.id, groupSubscribeButtonProps: { onSubscribe: handleSubscribe } }, GroupComponentProps)))))))))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }

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

@@ -0,0 +1,27 @@
+import { SCUserType, SCGroupType } from '@selfcommunity/types';
+/**
+ * Define topics for pubsub
+ */
+export declare enum SCTopicType {
+    GROUP = "group"
+}
+/**
+ * Event types
+ */
+export declare enum SCEventType {
+    CREATE = "create",
+    EDIT = "edit",
+    MEMBERS = "members",
+    ADD_MEMBER = "members.add_member",
+    REMOVE_MEMBER = "members.remove_member"
+}
+/**
+ * Event structure
+ */
+export interface SCGroupChangeEventType {
+    group: SCGroupType;
+}
+export interface SCGroupMembersEventType {
+    group: SCGroupType;
+    user?: SCUserType;
+}

package/lib/cjs/constants/PubSub.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCEventType = exports.SCTopicType = void 0;
+/**
+ * Define topics for pubsub
+ */
+var SCTopicType;
+(function (SCTopicType) {
+    SCTopicType["GROUP"] = "group";
+})(SCTopicType = exports.SCTopicType || (exports.SCTopicType = {}));
+/**
+ * Event types
+ */
+var SCEventType;
+(function (SCEventType) {
+    SCEventType["CREATE"] = "create";
+    SCEventType["EDIT"] = "edit";
+    SCEventType["MEMBERS"] = "members";
+    SCEventType["ADD_MEMBER"] = "members.add_member";
+    SCEventType["REMOVE_MEMBER"] = "members.remove_member";
+})(SCEventType = exports.SCEventType || (exports.SCEventType = {}));

package/lib/esm/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -55,7 +55,7 @@ export default function FeedUpdatesWidget(inProps) {
     const [updates, setUpdates] = useState(false);
     // REFS
     const updatesSubscription = useRef(null);
-    // Subscripber for pubsub callback
+    // Subscriber for pubsub callback
     const subscriber = (msg, data) => {
         if (subscriptionChannelUpdatesCallback(msg, data)) {
             setUpdates(true);

package/lib/esm/components/GroupForm/GroupForm.js

@@ -13,10 +13,12 @@ import ChangeGroupPicture from '../ChangeGroupPicture';
 import ChangeGroupCover from '../ChangeGroupCover';
 import { GROUP_DESCRIPTION_MAX_LENGTH, GROUP_TITLE_MAX_LENGTH } from '../../constants/Group';
 import GroupInviteButton from '../GroupInviteButton';
+import PubSub from 'pubsub-js';
 import { SCGroupPrivacyType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { formatHttpErrorCode, GroupService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
 const messages = defineMessages({
     name: {
         id: 'ui.groupForm.name.placeholder',
@@ -140,6 +142,22 @@ export default function GroupForm(inProps) {
             setError(error);
         }
     }
+    /**
+     * Notify when a group info changed
+     * @param data
+     */
+    function notifyChanges(data) {
+        if (data) {
+            if (group) {
+                // Edit group
+                PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.EDIT}`, data);
+            }
+            else {
+                // Create group
+                PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.CREATE}`, data);
+            }
+        }
+    }
     const handleSubmit = () => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
@@ -166,6 +184,7 @@ export default function GroupForm(inProps) {
         groupService
             .then((data) => {
             onSuccess && onSuccess(data);
+            notifyChanges(data);
             onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         })

package/lib/esm/components/GroupHeader/GroupHeader.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Icon, Paper, Typography } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
@@ -16,6 +16,8 @@ import GroupMembersButton from '../GroupMembersButton';
 import EditGroupButton from '../EditGroupButton';
 import GroupSubscribeButton from '../GroupSubscribeButton';
 import GroupInviteButton from '../GroupInviteButton';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
+import PubSub from 'pubsub-js';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -79,6 +81,8 @@ export default function GroupHeader(inProps) {
     const scUserContext = useSCUser();
     // HOOKS
     const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
+    // REFS
+    const updatesSubscription = useRef(null);
     // CONST
     const isGroupAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     /**
@@ -105,6 +109,33 @@ export default function GroupHeader(inProps) {
     const handleSubscribe = (group, status) => {
         setSCGroup(Object.assign(Object.assign({}, group), { subscribers_counter: group.subscribers_counter + (status ? 1 : -1) }));
     };
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupMembersHandler = useCallback((msg, data) => {
+        if (data && data.group.id === scGroup.id) {
+            let _group = Object.assign({}, scGroup);
+            if (msg === `${SCTopicType.GROUP}.${SCEventType.ADD_MEMBER}`) {
+                _group.subscribers_counter = _group.subscribers_counter + 1;
+            }
+            else if (msg === `${SCTopicType.GROUP}.${SCEventType.REMOVE_MEMBER}`) {
+                _group.subscribers_counter = Math.max(_group.subscribers_counter - 1, 0);
+            }
+            console.log(_group);
+            setSCGroup(_group);
+        }
+    }, [scGroup, setSCGroup]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    useEffect(() => {
+        if (scGroup) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCEventType.MEMBERS}`, onChangeGroupMembersHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [scGroup]);
     // RENDER
     if (!scGroup) {
         return React.createElement(GroupHeaderSkeleton, null);
@@ -141,6 +172,6 @@ export default function GroupHeader(inProps) {
                 isGroupAdmin) && (React.createElement(Box, { className: classes.members },
                 React.createElement(Typography, { className: classes.membersCounter, component: "div" },
                     React.createElement(FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } })),
-                React.createElement(GroupMembersButton, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps))))),
+                React.createElement(GroupMembersButton, Object.assign({ key: scGroup.subscribers_counter, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps))))),
             isGroupAdmin ? (React.createElement(GroupInviteButton, { group: scGroup, groupId: scGroup.id })) : (React.createElement(GroupSubscribeButton, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps))))));
 }

package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { CardContent, Icon, Typography } from '@mui/material';
 import classNames from 'classnames';
@@ -8,8 +8,10 @@ import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { SCGroupPrivacyType } from '@selfcommunity/types';
+import PubSub from 'pubsub-js';
 import { useSCFetchGroup } from '@selfcommunity/react-core';
 import GroupInfoWidgetSkeleton from './Skeleton';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -60,9 +62,33 @@ export default function GroupInfoWidget(inProps) {
     });
     const { className, group, groupId, onHeightChange, onStateChange } = props, rest = __rest(props, ["className", "group", "groupId", "onHeightChange", "onStateChange"]);
     // HOOKS
-    const { scGroup } = useSCFetchGroup({ id: groupId, group });
+    const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
     // INTL
     const intl = useIntl();
+    // REFS
+    const updatesSubscription = useRef(null);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupHandler = useCallback((_msg, data) => {
+        if (data && scGroup.id === data.id) {
+            setSCGroup(data);
+        }
+    }, [scGroup, setSCGroup]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    useEffect(() => {
+        if (scGroup) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCEventType.EDIT}`, onChangeGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [scGroup]);
+    /**
+     * Loading group
+     */
     if (!scGroup) {
         return React.createElement(GroupInfoWidgetSkeleton, null);
     }

package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js

@@ -205,9 +205,12 @@ export default function GroupMembersWidget(inProps) {
             openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
                 React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
                         React.createElement(FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" })) },
-                    React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
-                        React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : (React.createElement(Button, null,
-                                React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))), user: user, userId: user.id }))))))))),
+                    React.createElement(List, null, state.results.map((user) => {
+                        var _a;
+                        return (React.createElement(ListItem, { key: user.id },
+                            React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (React.createElement(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
+                                    React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
+                    })))))),
         React.createElement(CardActions, { className: classes.actions },
             React.createElement(GroupInviteButton, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));

package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.js

@@ -9,6 +9,8 @@ import { useThemeProps } from '@mui/system';
 import { Link, SCRoutes, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import { GroupService } from '@selfcommunity/api-services';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
+import PubSub from 'pubsub-js';
 const PREFIX = 'SCGroupSettingsIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -82,12 +84,23 @@ export default function GroupSettingsIconButton(inProps) {
         setOpenConfirmDialog(false);
         setAnchorEl(null);
     };
+    /**
+     * Notify UI when a user is removed from a group
+     * @param group
+     * @param user
+     */
+    function notifyChanges(group, user) {
+        if (group && user) {
+            PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.REMOVE_MEMBER}`, { group, user });
+        }
+    }
     /**
      * Handles thread deletion
      */
     function handleRemoveUser() {
         GroupService.removeUserFromGroup(group.id, user.id)
             .then(() => {
+            notifyChanges(group, user);
             onRemoveSuccess && onRemoveSuccess();
             handleCloseDialog();
         })

package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js

@@ -9,6 +9,8 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
+import PubSub from 'pubsub-js';
 const PREFIX = 'SCGroupSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
@@ -71,14 +73,25 @@ export default function GroupSubscribeButton(inProps) {
             setStatus(scGroupsManager.subscriptionStatus(scGroup));
         }
     }, [authUserId, scGroupsManager.subscriptionStatus]);
-    const subscribe = (userId) => {
+    /**
+     * Notify UI when a member is added to a group
+     * @param group
+     * @param user
+     */
+    function notifyChanges(group, user) {
+        if (group && user) {
+            PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.ADD_MEMBER}`, { group, user });
+        }
+    }
+    const subscribe = (user) => {
         scGroupsManager
-            .subscribe(scGroup, userId)
+            .subscribe(scGroup, user === null || user === void 0 ? void 0 : user.id)
             .then(() => {
-            onSubscribe &&
-                onSubscribe(scGroup, scGroup.privacy === SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== SCGroupSubscriptionStatusType.INVITED
-                    ? SCGroupSubscriptionStatusType.REQUESTED
-                    : SCGroupSubscriptionStatusType.SUBSCRIBED);
+            const _status = scGroup.privacy === SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== SCGroupSubscriptionStatusType.INVITED
+                ? SCGroupSubscriptionStatusType.REQUESTED
+                : SCGroupSubscriptionStatusType.SUBSCRIBED;
+            notifyChanges(scGroup, user);
+            onSubscribe && onSubscribe(scGroup, _status);
         })
             .catch((e) => {
             Logger.error(SCOPE_SC_UI, e);
@@ -99,7 +112,7 @@ export default function GroupSubscribeButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else {
-            status === SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user === null || user === void 0 ? void 0 : user.id) : subscribe();
+            status === SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user) : subscribe();
         }
     };
     /**

package/lib/esm/components/Groups/Groups.d.ts

@@ -10,7 +10,7 @@ export interface GroupsProps {
     /**
      * Endpoint to call
      */
-    endpoint: EndpointType;
+    endpoint?: EndpointType;
     /**
      * Props to spread to single group object
      * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}