@selfcommunity/react-ui 0.7.9-alpha.44 → 0.7.9-alpha.46

package/lib/cjs/components/CategoryHeader/Skeleton.js

@@ -7,7 +7,8 @@ const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
-    root: `${constants_1.PREFIX}-skeleton-root`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    cover: `${constants_1.PREFIX}-skeleton-cover`,
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -35,7 +36,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function CategoryHeaderSkeleton() {
     return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(Skeleton_1.default, { sx: { height: 230 }, animation: "wave", variant: "rectangular" }),
+        react_1.default.createElement(Skeleton_1.default, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }),
         react_1.default.createElement(material_1.Box, null,
             react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } })),
         react_1.default.createElement(material_1.Box, null,

package/lib/cjs/components/Composer/Composer.js

@@ -307,7 +307,7 @@ function Composer(inProps) {
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
     const handleChangeAudience = (0, react_1.useCallback)((value) => {
-        if (group || typeof value === 'object') {
+        if (group || Object.prototype.hasOwnProperty.call(value, 'managed_by')) {
             dispatch({ type: 'group', value });
         }
         else {

package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.js

@@ -46,7 +46,7 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
     // @ts-ignore
     defaultValue === null || defaultValue.length === 0
         ? AudienceTypes.AUDIENCE_ALL
-        : defaultValue && typeof defaultValue === 'object'
+        : defaultValue && Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
             ? AudienceTypes.AUDIENCE_GROUP
             : AudienceTypes.AUDIENCE_TAG);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -81,14 +81,14 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
                 , { 
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
-                    disabled: defaultValue && typeof defaultValue !== 'object', value: AudienceTypes.AUDIENCE_GROUP, icon: react_1.default.createElement(Icon_1.default, null, "groups"), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) }),
+                    disabled: defaultValue && !Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_GROUP, icon: react_1.default.createElement(Icon_1.default, null, "groups"), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) }),
                 react_1.default.createElement(material_1.Tab
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 , { 
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
-                    disabled: value && typeof defaultValue === 'object', value: AudienceTypes.AUDIENCE_TAG, icon: react_1.default.createElement(Icon_1.default, null, "label"), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })),
+                    disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: react_1.default.createElement(Icon_1.default, null, "label"), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })),
             react_1.default.createElement(material_1.Typography, { className: classes.message },
                 audience === AudienceTypes.AUDIENCE_ALL && (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })),
                 audience === AudienceTypes.AUDIENCE_GROUP && (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })),

package/lib/cjs/components/GroupAutocomplete/GroupAutocomplete.js

@@ -80,7 +80,7 @@ const GroupAutocomplete = (inProps) => {
         setValue(value);
     };
     // Render
-    return (react_1.default.createElement(Root, Object.assign({ freeSolo: true, className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+    return (react_1.default.createElement(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
         // renderTags={(value, getTagProps) => {
         //   return value.map((option: any, index) => (
         //     <Chip key={option.id} id={option.id} label={option.name} color={option.color} {...getTagProps({index})} />

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

@@ -115,7 +115,8 @@ function GroupHeader(inProps) {
      * Subscriber for pubsub callback
      */
     const onChangeGroupMembersHandler = (0, react_1.useCallback)((msg, data) => {
-        if (data && data.group.id === scGroup.id) {
+        var _a;
+        if (data && ((_a = data === null || data === void 0 ? void 0 : data.group) === null || _a === void 0 ? void 0 : _a.id) === (scGroup === null || scGroup === void 0 ? void 0 : 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;

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js

@@ -15,6 +15,8 @@ const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomple
 const User_1 = tslib_1.__importDefault(require("../User"));
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
         id: 'ui.groupInviteButton.searchBar.placeholder',
@@ -90,6 +92,16 @@ function GroupInviteButton(inProps) {
     const [list, setList] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [invited, setInvited] = (0, react_1.useState)([]);
+    /**
+     * Notify UI when a member is invited to a group
+     * @param group
+     * @param usersInvited
+     */
+    function notifyChanges(group, usersInvited) {
+        if (group && usersInvited) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.INVITE_MEMBER}`, usersInvited);
+        }
+    }
     function convertToInvitedUsersObject(data) {
         const invite_users = {};
         data.forEach((user, index) => {
@@ -182,6 +194,7 @@ function GroupInviteButton(inProps) {
                 setIsSending(false);
                 setOpen(false);
                 setInvited([]);
+                notifyChanges(scGroup, invited);
             })
                 .catch((error) => {
                 setOpen(false);

package/lib/cjs/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -20,6 +20,8 @@ const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
 const User_1 = tslib_1.__importStar(require("../User"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -95,6 +97,8 @@ function GroupInvitedWidget(inProps) {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     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]);
+    // 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
@@ -155,13 +159,33 @@ function GroupInvitedWidget(inProps) {
             return;
         }
     }, []);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupHandler = (0, react_1.useCallback)((_msg, newInvited) => {
+        dispatch({
+            type: widget_1.actionWidgetTypes.SET_RESULTS,
+            payload: { results: [...state.results, ...newInvited] }
+        });
+    }, [scGroup, dispatch, state.results]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        if (scGroup && state.results) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.INVITE_MEMBER}`, onChangeGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [scGroup, state.results]);
     // HANDLERS
     const handleNext = (0, react_1.useMemo)(() => () => {
         dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
         api_services_1.http
             .request({
             url: state.next,
-            method: api_services_1.Endpoints.GetGroupWaitingApprovalSubscribers.method
+            method: api_services_1.Endpoints.getGroupInvitedUsers.method
         })
             .then((res) => {
             dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -127,6 +127,7 @@ function PrivateMessageComponent(inProps) {
         id && setLayout('mobile');
         setOpenNewMessage(false);
         setObj(null);
+        setType(null);
         onThreadBack && onThreadBack();
     };
     /**

package/lib/cjs/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -109,13 +109,13 @@ function PrivateMessageSnippets(inProps) {
     const isSelected = (0, react_1.useMemo)(() => {
         return (message) => {
             var _a, _b;
-            if (type === types_1.SCPrivateMessageType.GROUP) {
+            if (threadObj && type === types_1.SCPrivateMessageType.GROUP) {
                 return ((_a = message === null || message === void 0 ? void 0 : message.group) === null || _a === void 0 ? void 0 : _a.id) === (isObj ? (_b = threadObj === null || threadObj === void 0 ? void 0 : threadObj.group) === null || _b === void 0 ? void 0 : _b.id : threadObj);
             }
-            else if (type === types_1.SCPrivateMessageType.USER) {
+            else if (threadObj && type === types_1.SCPrivateMessageType.USER) {
                 return messageReceiver(message, authUserId) === (isObj ? messageReceiver(threadObj, authUserId) : threadObj);
             }
-            return false;
+            return null;
         };
     }, [threadObj, authUserId, type]);
     //HANDLERS

package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -10,6 +10,7 @@ const types_1 = require("@selfcommunity/types");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
 const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
 const sizeCoverter_1 = require("../../utils/sizeCoverter");
@@ -21,6 +22,7 @@ const constants_1 = require("./constants");
 const thumbnailCoverter_1 = require("../../utils/thumbnailCoverter");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
+    username: `${constants_1.PREFIX}-username`,
     text: `${constants_1.PREFIX}-text`,
     img: `${constants_1.PREFIX}-img`,
     document: `${constants_1.PREFIX}-document`,
@@ -72,6 +74,7 @@ const Root = (0, styles_1.styled)(material_1.ListItem, {
  * @param inProps
  */
 function PrivateMessageThreadItem(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -80,6 +83,8 @@ function PrivateMessageThreadItem(inProps) {
     const { message = null, className = null, mouseEvents = {}, isHovering = null, showMenuIcon = false, onMenuIconClick = null } = props, rest = tslib_1.__rest(props, ["message", "className", "mouseEvents", "isHovering", "showMenuIcon", "onMenuIconClick"]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // STATE
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
@@ -167,6 +172,7 @@ function PrivateMessageThreadItem(inProps) {
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
             showMenuIcon &&
             message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }),
+        message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (react_1.default.createElement(material_1.Typography, { color: "secondary", variant: "h4", className: classes.username }, message.sender.username)),
         react_1.default.createElement(react_1.default.Fragment, null,
             hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (react_1.default.createElement(material_1.Box, { className: classes.text },
                 react_1.default.createElement(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }))),

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

@@ -13,6 +13,7 @@ export declare enum SCEventType {
     EDIT = "edit",
     MEMBERS = "members",
     ADD_MEMBER = "members.add_member",
+    INVITE_MEMBER = "members.invite_member",
     REMOVE_MEMBER = "members.remove_member"
 }
 /**

package/lib/cjs/constants/PubSub.js

@@ -17,5 +17,6 @@ var SCEventType;
     SCEventType["EDIT"] = "edit";
     SCEventType["MEMBERS"] = "members";
     SCEventType["ADD_MEMBER"] = "members.add_member";
+    SCEventType["INVITE_MEMBER"] = "members.invite_member";
     SCEventType["REMOVE_MEMBER"] = "members.remove_member";
 })(SCEventType = exports.SCEventType || (exports.SCEventType = {}));

package/lib/esm/components/CategoryHeader/Skeleton.js

@@ -4,7 +4,8 @@ import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-skeleton-root`
+    root: `${PREFIX}-skeleton-root`,
+    cover: `${PREFIX}-skeleton-cover`,
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -32,7 +33,7 @@ const Root = styled(Box, {
  */
 export default function CategoryHeaderSkeleton() {
     return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, { sx: { height: 230 }, animation: "wave", variant: "rectangular" }),
+        React.createElement(Skeleton, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }),
         React.createElement(Box, null,
             React.createElement(Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } })),
         React.createElement(Box, null,

package/lib/esm/components/Composer/Composer.js

@@ -305,7 +305,7 @@ export default function Composer(inProps) {
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
     const handleChangeAudience = useCallback((value) => {
-        if (group || typeof value === 'object') {
+        if (group || Object.prototype.hasOwnProperty.call(value, 'managed_by')) {
             dispatch({ type: 'group', value });
         }
         else {

package/lib/esm/components/Composer/Layer/AudienceLayer/AudienceLayer.js

@@ -43,7 +43,7 @@ const AudienceLayer = React.forwardRef((props, ref) => {
     // @ts-ignore
     defaultValue === null || defaultValue.length === 0
         ? AudienceTypes.AUDIENCE_ALL
-        : defaultValue && typeof defaultValue === 'object'
+        : defaultValue && Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
             ? AudienceTypes.AUDIENCE_GROUP
             : AudienceTypes.AUDIENCE_TAG);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -78,14 +78,14 @@ const AudienceLayer = React.forwardRef((props, ref) => {
                 , { 
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
-                    disabled: defaultValue && typeof defaultValue !== 'object', value: AudienceTypes.AUDIENCE_GROUP, icon: React.createElement(Icon, null, "groups"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) }),
+                    disabled: defaultValue && !Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_GROUP, icon: React.createElement(Icon, null, "groups"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) }),
                 React.createElement(Tab
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 , { 
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
-                    disabled: value && typeof defaultValue === 'object', value: AudienceTypes.AUDIENCE_TAG, icon: React.createElement(Icon, null, "label"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })),
+                    disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: React.createElement(Icon, null, "label"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })),
             React.createElement(Typography, { className: classes.message },
                 audience === AudienceTypes.AUDIENCE_ALL && (React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })),
                 audience === AudienceTypes.AUDIENCE_GROUP && (React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })),

package/lib/esm/components/GroupAutocomplete/GroupAutocomplete.js

@@ -78,7 +78,7 @@ const GroupAutocomplete = (inProps) => {
         setValue(value);
     };
     // Render
-    return (React.createElement(Root, Object.assign({ freeSolo: true, className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: React.createElement(FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+    return (React.createElement(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: React.createElement(FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
         // renderTags={(value, getTagProps) => {
         //   return value.map((option: any, index) => (
         //     <Chip key={option.id} id={option.id} label={option.name} color={option.color} {...getTagProps({index})} />

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

@@ -113,7 +113,8 @@ export default function GroupHeader(inProps) {
      * Subscriber for pubsub callback
      */
     const onChangeGroupMembersHandler = useCallback((msg, data) => {
-        if (data && data.group.id === scGroup.id) {
+        var _a;
+        if (data && ((_a = data === null || data === void 0 ? void 0 : data.group) === null || _a === void 0 ? void 0 : _a.id) === (scGroup === null || scGroup === void 0 ? void 0 : scGroup.id)) {
             let _group = Object.assign({}, scGroup);
             if (msg === `${SCTopicType.GROUP}.${SCEventType.ADD_MEMBER}`) {
                 _group.subscribers_counter = _group.subscribers_counter + 1;

package/lib/esm/components/GroupInviteButton/GroupInviteButton.js

@@ -13,6 +13,8 @@ import Autocomplete from '@mui/material/Autocomplete';
 import User from '../User';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
+import PubSub from 'pubsub-js';
 const messages = defineMessages({
     placeholder: {
         id: 'ui.groupInviteButton.searchBar.placeholder',
@@ -88,6 +90,16 @@ export default function GroupInviteButton(inProps) {
     const [list, setList] = useState([]);
     const [loading, setLoading] = useState(false);
     const [invited, setInvited] = useState([]);
+    /**
+     * Notify UI when a member is invited to a group
+     * @param group
+     * @param usersInvited
+     */
+    function notifyChanges(group, usersInvited) {
+        if (group && usersInvited) {
+            PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.INVITE_MEMBER}`, usersInvited);
+        }
+    }
     function convertToInvitedUsersObject(data) {
         const invite_users = {};
         data.forEach((user, index) => {
@@ -180,6 +192,7 @@ export default function GroupInviteButton(inProps) {
                 setIsSending(false);
                 setOpen(false);
                 setInvited([]);
+                notifyChanges(scGroup, invited);
             })
                 .catch((error) => {
                 setOpen(false);

package/lib/esm/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import List from '@mui/material/List';
 import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -18,6 +18,8 @@ import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { PREFIX } from './constants';
 import User, { UserSkeleton } from '../User';
+import PubSub from 'pubsub-js';
+import { SCEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -93,6 +95,8 @@ export default function GroupInvitedWidget(inProps) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     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]);
+    // REFS
+    const updatesSubscription = useRef(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -153,13 +157,33 @@ export default function GroupInvitedWidget(inProps) {
             return;
         }
     }, []);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupHandler = useCallback((_msg, newInvited) => {
+        dispatch({
+            type: actionWidgetTypes.SET_RESULTS,
+            payload: { results: [...state.results, ...newInvited] }
+        });
+    }, [scGroup, dispatch, state.results]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    useEffect(() => {
+        if (scGroup && state.results) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCEventType.INVITE_MEMBER}`, onChangeGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [scGroup, state.results]);
     // HANDLERS
     const handleNext = useMemo(() => () => {
         dispatch({ type: actionWidgetTypes.LOADING_NEXT });
         http
             .request({
             url: state.next,
-            method: Endpoints.GetGroupWaitingApprovalSubscribers.method
+            method: Endpoints.getGroupInvitedUsers.method
         })
             .then((res) => {
             dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });

package/lib/esm/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -125,6 +125,7 @@ export default function PrivateMessageComponent(inProps) {
         id && setLayout('mobile');
         setOpenNewMessage(false);
         setObj(null);
+        setType(null);
         onThreadBack && onThreadBack();
     };
     /**

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -107,13 +107,13 @@ export default function PrivateMessageSnippets(inProps) {
     const isSelected = useMemo(() => {
         return (message) => {
             var _a, _b;
-            if (type === SCPrivateMessageType.GROUP) {
+            if (threadObj && type === SCPrivateMessageType.GROUP) {
                 return ((_a = message === null || message === void 0 ? void 0 : message.group) === null || _a === void 0 ? void 0 : _a.id) === (isObj ? (_b = threadObj === null || threadObj === void 0 ? void 0 : threadObj.group) === null || _b === void 0 ? void 0 : _b.id : threadObj);
             }
-            else if (type === SCPrivateMessageType.USER) {
+            else if (threadObj && type === SCPrivateMessageType.USER) {
                 return messageReceiver(message, authUserId) === (isObj ? messageReceiver(threadObj, authUserId) : threadObj);
             }
-            return false;
+            return null;
         };
     }, [threadObj, authUserId, type]);
     //HANDLERS

package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -1,5 +1,5 @@
 import { __awaiter, __rest } from "tslib";
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { ListItem, Typography, IconButton, Box, useTheme, Button } from '@mui/material';
 import PrivateMessageThreadItemSkeleton from './Skeleton';
@@ -8,6 +8,7 @@ import { SCMessageFileType, SCPrivateMessageStatusType } from '@selfcommunity/ty
 import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
+import { SCUserContext } from '@selfcommunity/react-core';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
 import { bytesToSize } from '../../utils/sizeCoverter';
@@ -19,6 +20,7 @@ import { PREFIX } from './constants';
 import { isSupportedVideoFormat } from '../../utils/thumbnailCoverter';
 const classes = {
     root: `${PREFIX}-root`,
+    username: `${PREFIX}-username`,
     text: `${PREFIX}-text`,
     img: `${PREFIX}-img`,
     document: `${PREFIX}-document`,
@@ -70,6 +72,7 @@ const Root = styled(ListItem, {
  * @param inProps
  */
 export default function PrivateMessageThreadItem(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -78,6 +81,8 @@ export default function PrivateMessageThreadItem(inProps) {
     const { message = null, className = null, mouseEvents = {}, isHovering = null, showMenuIcon = false, onMenuIconClick = null } = props, rest = __rest(props, ["message", "className", "mouseEvents", "isHovering", "showMenuIcon", "onMenuIconClick"]);
     // INTL
     const intl = useIntl();
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
     // STATE
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -165,6 +170,7 @@ export default function PrivateMessageThreadItem(inProps) {
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
             showMenuIcon &&
             message.status !== SCPrivateMessageStatusType.HIDDEN && React.createElement(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }),
+        message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (React.createElement(Typography, { color: "secondary", variant: "h4", className: classes.username }, message.sender.username)),
         React.createElement(React.Fragment, null,
             hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (React.createElement(Box, { className: classes.text },
                 React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }))),

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

@@ -13,6 +13,7 @@ export declare enum SCEventType {
     EDIT = "edit",
     MEMBERS = "members",
     ADD_MEMBER = "members.add_member",
+    INVITE_MEMBER = "members.invite_member",
     REMOVE_MEMBER = "members.remove_member"
 }
 /**

package/lib/esm/constants/PubSub.js

@@ -14,5 +14,6 @@ export var SCEventType;
     SCEventType["EDIT"] = "edit";
     SCEventType["MEMBERS"] = "members";
     SCEventType["ADD_MEMBER"] = "members.add_member";
+    SCEventType["INVITE_MEMBER"] = "members.invite_member";
     SCEventType["REMOVE_MEMBER"] = "members.remove_member";
 })(SCEventType || (SCEventType = {}));