@selfcommunity/react-ui 0.7.9-alpha.8 → 0.7.9-alpha.81

package/lib/cjs/components/FeedObject/Poll/Poll.js

@@ -69,36 +69,36 @@ function PollObject(props) {
      * Handles choice upvote
      */
     const handleVote = (id) => {
+        const prevChoices = [...choices];
+        let updatedChoices;
         if (multipleChoices) {
-            setChoices((prevChoices) => {
-                return prevChoices.map((choice) => Object.assign({}, choice, {
-                    voted: choice.id === id ? true : choice.voted,
-                    vote_count: choice.id === id ? choice.vote_count + 1 : choice.vote_count
-                }));
-            });
+            updatedChoices = prevChoices.map((choice) => Object.assign({}, choice, {
+                voted: choice.id === id ? true : choice.voted,
+                vote_count: choice.id === id ? choice.vote_count + 1 : choice.vote_count
+            }));
             setVotes((prevVotes) => prevVotes + 1);
         }
         else {
-            setChoices((prevChoices) => {
-                const updatedChoices = prevChoices.map((choice) => {
-                    return Object.assign(Object.assign({}, choice), { voted: choice.id === id, vote_count: choice.id === id ? choice.vote_count + 1 : choice.vote_count > 0 && choice.voted ? choice.vote_count - 1 : choice.vote_count });
-                });
-                const newVotes = updatedChoices.reduce((totalVotes, choice) => totalVotes + choice.vote_count, 0);
-                setVotes(newVotes);
-                return updatedChoices;
-            });
+            updatedChoices = prevChoices.map((choice) => Object.assign({}, choice, {
+                voted: choice.id === id,
+                vote_count: choice.id === id ? choice.vote_count + 1 : choice.vote_count > 0 && choice.voted ? choice.vote_count - 1 : choice.vote_count
+            }));
+            setVotes(updatedChoices.reduce((totalVotes, choice) => totalVotes + choice.vote_count, 0));
         }
+        setChoices(updatedChoices);
+        onChange(updatedChoices);
     };
     /**
      * Handles choice unvote
      */
     const handleUnVote = (id) => {
-        setChoices((prevChoices) => {
-            return prevChoices.map((choice) => Object.assign({}, choice, {
-                voted: choice.id === id ? false : choice.voted,
-                vote_count: choice.id === id && choice.vote_count > 0 ? choice.vote_count - 1 : choice.vote_count
-            }));
-        });
+        const prevChoices = [...choices];
+        const updatedChoices = prevChoices.map((choice) => Object.assign({}, choice, {
+            voted: choice.id === id ? false : choice.voted,
+            vote_count: choice.id === id && choice.vote_count > 0 ? choice.vote_count - 1 : choice.vote_count
+        }));
+        setChoices(updatedChoices);
+        onChange(updatedChoices);
         setVotes((prevVotes) => prevVotes - 1);
     };
     /**

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/Footer/Footer.js

@@ -96,7 +96,7 @@ function Footer(inProps) {
     }
     return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }),
         startActions,
-        react_1.default.createElement(material_1.Box, { className: classes.itemList }, _menu.items.map((item, index) => (react_1.default.createElement(material_1.Button, { component: react_core_1.Link, key: item.id, className: classes.item, to: item.url, variant: "text" }, item.label)))),
+        react_1.default.createElement(material_1.Box, { className: classes.itemList }, (0, utils_1.sortByAttr)(_menu.items, 'order').map((item, index) => (react_1.default.createElement(material_1.Button, { component: react_core_1.Link, key: item.id, className: classes.item, to: item.url, variant: "text" }, item.label)))),
         endActions,
         react_1.default.createElement(material_1.Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })));
 }

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

@@ -27,6 +27,11 @@ export interface GroupProps extends WidgetProps {
      * @default false
      */
     hideActions?: boolean;
+    /**
+     * Prop to redirect the user to the group page
+     * @default false
+     */
+    actionRedirect?: boolean;
     /**
      * Props to spread to the button
      * @default {}
@@ -42,7 +47,7 @@ export interface GroupProps extends WidgetProps {
  *
  *
  * This component renders a group item.
- * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Group)
 
  #### Import
 
@@ -61,6 +66,9 @@ export interface GroupProps extends WidgetProps {
  |---|---|---|
  |root|.SCGroup-root|Styles applied to the root element.|
  |avatar|.SCGroup-avatar|Styles applied to the avatar element.|
+ |actions|.SCGroup-actions|Styles applied to the actions section.|
+ |icon|.SCGroup-icon|Styles applied to the group privacy icon element.|
+
 
  *
  * @param inProps

package/lib/cjs/components/Group/Group.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
+const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -22,7 +23,8 @@ const messages = (0, react_intl_1.defineMessages)({
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     avatar: `${constants_1.PREFIX}-avatar`,
-    actions: `${constants_1.PREFIX}-actions`
+    actions: `${constants_1.PREFIX}-actions`,
+    icon: `${constants_1.PREFIX}-icon`
 };
 const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
@@ -34,7 +36,7 @@ const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
  *
  *
  * This component renders a group item.
- * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Group)
 
  #### Import
 
@@ -53,21 +55,28 @@ const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
  |---|---|---|
  |root|.SCGroup-root|Styles applied to the root element.|
  |avatar|.SCGroup-avatar|Styles applied to the avatar element.|
+ |actions|.SCGroup-actions|Styles applied to the actions section.|
+ |icon|.SCGroup-icon|Styles applied to the group privacy icon element.|
+
 
  *
  * @param inProps
  */
 function Group(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { groupId = null, group = null, className = null, elevation, hideActions = false, groupSubscribeButtonProps = {}, visible = true } = props, rest = tslib_1.__rest(props, ["groupId", "group", "className", "elevation", "hideActions", "groupSubscribeButtonProps", "visible"]);
+    const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, groupSubscribeButtonProps = {} } = props, rest = tslib_1.__rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "groupSubscribeButtonProps"]);
     // STATE
     const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // 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]);
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
@@ -77,8 +86,8 @@ function Group(inProps) {
      */
     function renderAuthenticatedActions() {
         return (react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
-            react_1.default.createElement(material_1.Icon, null, !visible ? 'private' : 'public'),
-            react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps))));
+            isGroupAdmin && react_1.default.createElement(material_1.Icon, null, "face"),
+            actionRedirect ? (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })))) : (react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))));
     }
     /**
      * Renders group object
@@ -90,7 +99,10 @@ function Group(inProps) {
      * Renders root object
      */
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: react_1.default.createElement(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: scGroup.name, secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
+        react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: react_1.default.createElement(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: react_1.default.createElement(react_1.default.Fragment, null,
+                scGroup.name,
+                " ",
+                react_1.default.createElement(material_1.Icon, { className: classes.icon }, (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public')), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
         openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
 exports.default = Group;

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

@@ -28,7 +28,6 @@ export interface GroupAutocompleteProps extends Pick<AutocompleteProps<SCGroupTy
  *
  *
  * This component renders a bar that allows users to search (with autocomplete) for all the groups available in the application.
- * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/GroupAutocomplete)
  *
  * #### Import
  *  ```jsx

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

@@ -26,7 +26,6 @@ const Root = (0, styles_1.styled)(Autocomplete_1.default, {
  *
  *
  * This component renders a bar that allows users to search (with autocomplete) for all the groups available in the application.
- * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/GroupAutocomplete)
  *
  * #### Import
  *  ```jsx
@@ -80,7 +79,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/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',
@@ -90,6 +92,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
  * @param inProps
  */
 function GroupForm(inProps) {
+    var _a;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -142,6 +145,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();
@@ -155,8 +174,10 @@ function GroupForm(inProps) {
         if (field.emotionalImageOriginalFile) {
             formData.append('emotional_image_original', field.emotionalImageOriginalFile);
         }
-        for (const key in field.invitedUsers) {
-            formData.append(key, field.invitedUsers[key]);
+        if (!group) {
+            for (const key in field.invitedUsers) {
+                formData.append(key, field.invitedUsers[key]);
+            }
         }
         let groupService;
         if (group) {
@@ -168,6 +189,7 @@ function GroupForm(inProps) {
         groupService
             .then((data) => {
             onSuccess && onSuccess(data);
+            notifyChanges(data);
             onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         })
@@ -206,34 +228,63 @@ function GroupForm(inProps) {
                         endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_TITLE_MAX_LENGTH - field.name.length)
                     } }),
                 react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                        endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length)
+                        endAdornment: (react_1.default.createElement(material_1.Typography, { variant: "body2" }, ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
                     } }),
                 react_1.default.createElement(material_1.Box, { className: classes.privacySection },
                     react_1.default.createElement(material_1.Typography, { variant: "h4" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })),
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                            } })),
                     react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
                         react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) },
                             react_1.default.createElement(material_1.Icon, null, "private"),
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })),
-                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isPublic, onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))) }),
+                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE }),
                         react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) },
                             react_1.default.createElement(material_1.Icon, null, "public"),
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" }))),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.privacySectionInfo }, field.isPublic ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })))),
-                react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, !field.isPublic && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.privacySectionInfo }, field.isPublic ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                        } })) : (react_1.default.createElement(react_1.default.Fragment, null, group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                        } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                        } })))))),
+                react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, ((!field.isPublic && !group) || (group && !field.isPublic)) && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(material_1.Typography, { variant: "h4" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })),
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                            } })),
                     react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
                         react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) },
                             react_1.default.createElement(material_1.Icon, null, "visibility_off"),
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
-                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isVisible, onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
+                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
                         react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) },
                             react_1.default.createElement(material_1.Icon, null, "visibility"),
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } }))))))),
-            react_1.default.createElement(material_1.Divider, null),
-            react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
-                react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))));
+                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                        } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
+                        } }))))))),
+            !group && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Divider, null),
+                react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
+                    react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))))));
 }
 exports.default = GroupForm;

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import { SCGroupType } from '@selfcommunity/types';
 import { ChangeGroupCoverProps } from '../ChangeGroupCover';
 import { ChangeGroupPictureProps } from '../ChangeGroupPicture';
 import { GroupMembersButtonProps } from '../GroupMembersButton';
+import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
 export interface GroupHeaderProps {
     /**
      * Id of group object
@@ -35,14 +35,15 @@ export interface GroupHeaderProps {
      */
     ChangeCoverProps?: ChangeGroupCoverProps;
     /**
-     * Props to spread to the group memebers button
+     * Props to spread group button followed
      * @default {}
      */
-    GroupMembersButtonProps?: GroupMembersButtonProps;
+    GroupSubscribeButtonProps?: GroupSubscribeButtonProps;
     /**
-     *
+     * Props to spread to the group memebers button
+     * @default {}
      */
-    actions?: React.ReactNode;
+    GroupMembersButtonProps?: GroupMembersButtonProps;
     /**
      * Any other properties
      */
@@ -53,7 +54,6 @@ export interface GroupHeaderProps {
  *
  *
  * This component renders the groups top section.
- * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileHeader)
 
  #### Import
 

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

@@ -16,6 +16,10 @@ const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
 const ChangeGroupPicture_1 = tslib_1.__importDefault(require("../ChangeGroupPicture"));
 const GroupMembersButton_1 = tslib_1.__importDefault(require("../GroupMembersButton"));
 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`,
@@ -38,7 +42,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  *
  * This component renders the groups top section.
- * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileHeader)
 
  #### Import
 
@@ -72,22 +75,24 @@ function GroupHeader(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupMembersButtonProps = {}, actions } = props, rest = tslib_1.__rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupMembersButtonProps", "actions"]);
+    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps"]);
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
     // CONTEXT
     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 canEdit = (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]);
+    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]);
     /**
      * Handles Change Avatar
      * @param avatar
      */
     function handleChangeAvatar(avatar) {
-        if (canEdit) {
-            setSCGroup(Object.assign({}, scGroup, { image_bigger: avatar }));
+        if (isGroupAdmin) {
+            setSCGroup(Object.assign({}, scGroup, { image_big: avatar }));
         }
     }
     /**
@@ -95,10 +100,44 @@ function GroupHeader(inProps) {
      * @param cover
      */
     function handleChangeCover(cover) {
-        if (canEdit) {
+        if (isGroupAdmin) {
             setSCGroup(Object.assign({}, scGroup, { emotional_image: cover }));
         }
     }
+    /**
+     * Handles callback subscribe/unsubscribe group
+     */
+    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) => {
+        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;
+            }
+            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);
@@ -110,13 +149,13 @@ function GroupHeader(inProps) {
         react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
             react_1.default.createElement(material_1.Box, { className: classes.avatar },
                 react_1.default.createElement(material_1.Avatar, null,
-                    react_1.default.createElement("img", { alt: "group", src: scGroup.image_bigger ? scGroup.image_bigger : '' }))),
-            canEdit && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }))),
+            isGroupAdmin && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ChangeGroupPicture_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
                 react_1.default.createElement("div", { className: classes.changeCover },
                     react_1.default.createElement(ChangeGroupCover_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)))))),
         react_1.default.createElement(material_1.Box, { className: classes.info },
-            canEdit && react_1.default.createElement(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }),
+            isGroupAdmin && react_1.default.createElement(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }),
             react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.name }, scGroup.name),
             react_1.default.createElement(material_1.Box, { className: classes.visibility },
                 scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
@@ -130,10 +169,12 @@ function GroupHeader(inProps) {
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" }))) : (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
                     react_1.default.createElement(material_1.Icon, null, "visibility_off"),
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })))),
-            react_1.default.createElement(material_1.Box, { className: classes.members },
+            react_1.default.createElement(react_1.default.Fragment, null, ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
+                scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ||
+                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 }, GroupMembersButtonProps))),
-            actions && actions)));
+                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;