@selfcommunity/react-ui 0.7.9-alpha.30 → 0.7.9-alpha.31

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -89,6 +89,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function CommentObject(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -98,6 +99,7 @@ function CommentObject(inProps) {
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const scGroupsManager = scUserContext.managers.groups;
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // STATE
@@ -115,11 +117,21 @@ function CommentObject(inProps) {
         cacheStrategy
     });
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
+    const [status, setStatus] = (0, react_1.useState)(null);
     // HANDLERS
     const handleVoteSuccess = (contribution) => {
         setObj(contribution);
         onVote && onVote(contribution);
     };
+    /**
+     * If the obj has a group, checks the subscription status for the authenticated user
+     */
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) && (feedObject === null || feedObject === void 0 ? void 0 : feedObject.group)) {
+            setStatus(scGroupsManager.subscriptionStatus(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group));
+        }
+    }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, scGroupsManager.subscriptionStatus, feedObject === null || feedObject === void 0 ? void 0 : feedObject.group]);
     /**
      * Update state object
      * @param newObj
@@ -154,6 +166,12 @@ function CommentObject(inProps) {
         if (!scUserContext.user) {
             scContext.settings.handleAnonymousAction();
         }
+        else if ((feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) && status !== types_1.SCGroupSubscriptionStatusType.SUBSCRIBED) {
+            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.group.actions.unsubscribed", defaultMessage: "ui.common.group.actions.unsubscribed" }), {
+                variant: 'warning',
+                autoHideDuration: 3000
+            });
+        }
         else {
             setReplyComment(comment);
             onOpenReply && onOpenReply(comment);

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

@@ -4,6 +4,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 import { UserProps } from '../User';
+import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
 export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, WidgetProps {
     /**
      * Group Object
@@ -35,6 +36,16 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
      * @default {}
      */
     DialogProps?: BaseDialogProps;
+    /**
+     * Props to spread to group subscribe button component
+     * @default {}
+     */
+    GroupSubscribeButtonProps?: GroupSubscribeButtonProps;
+    /**
+     * onSubscribeAction callback
+     * @param user
+     */
+    onSubscribeActon?: (userId: number | string) => any;
     /**
      * Other props
      */

package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.js

@@ -75,7 +75,7 @@ function GroupRequestsWidget(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { groupId, group, limit = 5, className, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["groupId", "group", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps"]);
+    const { groupId, group, limit = 5, className, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {}, GroupSubscribeButtonProps = {}, onSubscribeActon } = props, rest = tslib_1.__rest(props, ["groupId", "group", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps", "GroupSubscribeButtonProps", "onSubscribeActon"]);
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
         isLoadingNext: false,
@@ -171,14 +171,15 @@ function GroupRequestsWidget(inProps) {
     const handleToggleDialogOpen = () => {
         setOpenDialog((prev) => !prev);
     };
-    const handleSubscribeAction = (0, react_1.useMemo)(() => (userId) => {
+    const handleSubscribeAction = (0, react_1.useMemo)(() => (user) => {
         const newRequests = [...state.results];
-        const _updated = newRequests.filter((u) => u.id !== userId);
+        const _updated = newRequests.filter((u) => u.id !== user.id);
         dispatch({
             type: widget_1.actionWidgetTypes.SET_RESULTS,
             payload: { results: newRequests.length > 1 ? _updated : [] }
         });
-    }, [dispatch, state.count, state.results]);
+        onSubscribeActon && onSubscribeActon(user);
+    }, [dispatch, state.count, state.results, onSubscribeActon]);
     // RENDER
     if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
         return react_1.default.createElement(HiddenPlaceholder_1.default, null);
@@ -191,14 +192,14 @@ function GroupRequestsWidget(inProps) {
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" })),
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(List_1.default, null, state.results.slice(0, state.visibleItems).map((user) => (react_1.default.createElement(material_1.ListItem, { key: user.id },
-                react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(GroupSubscribeButton_1.default, { group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user.id) }), user: user, userId: user.id }))))),
+                react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }))))),
             state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" })))),
         openDialog && (react_1.default.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.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.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.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: react_1.default.createElement(GroupSubscribeButton_1.default, { group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user.id) }), user: user, userId: user.id }))))))))));
+                    react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }))))))))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }
 exports.default = GroupRequestsWidget;

package/lib/esm/components/CommentObject/CommentObject.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
@@ -17,7 +17,7 @@ import { getContributionHtml, getContributionType, getRouteData } from '../../ut
 import { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
 import BaseItem from '../../shared/BaseItem';
-import { SCContributionType } from '@selfcommunity/types';
+import { SCContributionType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
 import { Link, SCCache, SCRoutes, SCUserContext, UserUtils, useSCContext, useSCFetchCommentObject, useSCFetchCommentObjects, useSCRouting } from '@selfcommunity/react-core';
@@ -87,6 +87,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function CommentObject(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -96,6 +97,7 @@ export default function CommentObject(inProps) {
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
+    const scGroupsManager = scUserContext.managers.groups;
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
     // STATE
@@ -113,11 +115,21 @@ export default function CommentObject(inProps) {
         cacheStrategy
     });
     const [openAlert, setOpenAlert] = useState(false);
+    const [status, setStatus] = useState(null);
     // HANDLERS
     const handleVoteSuccess = (contribution) => {
         setObj(contribution);
         onVote && onVote(contribution);
     };
+    /**
+     * If the obj has a group, checks the subscription status for the authenticated user
+     */
+    useEffect(() => {
+        var _a;
+        if (((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) && (feedObject === null || feedObject === void 0 ? void 0 : feedObject.group)) {
+            setStatus(scGroupsManager.subscriptionStatus(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group));
+        }
+    }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, scGroupsManager.subscriptionStatus, feedObject === null || feedObject === void 0 ? void 0 : feedObject.group]);
     /**
      * Update state object
      * @param newObj
@@ -152,6 +164,12 @@ export default function CommentObject(inProps) {
         if (!scUserContext.user) {
             scContext.settings.handleAnonymousAction();
         }
+        else if ((feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) && status !== SCGroupSubscriptionStatusType.SUBSCRIBED) {
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.group.actions.unsubscribed", defaultMessage: "ui.common.group.actions.unsubscribed" }), {
+                variant: 'warning',
+                autoHideDuration: 3000
+            });
+        }
         else {
             setReplyComment(comment);
             onOpenReply && onOpenReply(comment);

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

@@ -4,6 +4,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 import { UserProps } from '../User';
+import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
 export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, WidgetProps {
     /**
      * Group Object
@@ -35,6 +36,16 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
      * @default {}
      */
     DialogProps?: BaseDialogProps;
+    /**
+     * Props to spread to group subscribe button component
+     * @default {}
+     */
+    GroupSubscribeButtonProps?: GroupSubscribeButtonProps;
+    /**
+     * onSubscribeAction callback
+     * @param user
+     */
+    onSubscribeActon?: (userId: number | string) => any;
     /**
      * Other props
      */

package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js

@@ -73,7 +73,7 @@ export default function GroupRequestsWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { groupId, group, limit = 5, className, cacheStrategy = CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {} } = props, rest = __rest(props, ["groupId", "group", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps"]);
+    const { groupId, group, limit = 5, className, cacheStrategy = CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {}, GroupSubscribeButtonProps = {}, onSubscribeActon } = props, rest = __rest(props, ["groupId", "group", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps", "GroupSubscribeButtonProps", "onSubscribeActon"]);
     // STATE
     const [state, dispatch] = useReducer(dataWidgetReducer, {
         isLoadingNext: false,
@@ -169,14 +169,15 @@ export default function GroupRequestsWidget(inProps) {
     const handleToggleDialogOpen = () => {
         setOpenDialog((prev) => !prev);
     };
-    const handleSubscribeAction = useMemo(() => (userId) => {
+    const handleSubscribeAction = useMemo(() => (user) => {
         const newRequests = [...state.results];
-        const _updated = newRequests.filter((u) => u.id !== userId);
+        const _updated = newRequests.filter((u) => u.id !== user.id);
         dispatch({
             type: actionWidgetTypes.SET_RESULTS,
             payload: { results: newRequests.length > 1 ? _updated : [] }
         });
-    }, [dispatch, state.count, state.results]);
+        onSubscribeActon && onSubscribeActon(user);
+    }, [dispatch, state.count, state.results, onSubscribeActon]);
     // RENDER
     if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
         return React.createElement(HiddenPlaceholder, null);
@@ -189,13 +190,13 @@ export default function GroupRequestsWidget(inProps) {
             React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" })),
         React.createElement(React.Fragment, null,
             React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => (React.createElement(ListItem, { key: user.id },
-                React.createElement(User, { elevation: 0, actions: React.createElement(GroupSubscribeButton, { group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user.id) }), user: user, userId: user.id }))))),
+                React.createElement(User, { elevation: 0, actions: React.createElement(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }))))),
             state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                 React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" })))),
         openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.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.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" })) },
                 React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
-                    React.createElement(User, { elevation: 0, actions: React.createElement(GroupSubscribeButton, { group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user.id) }), user: user, userId: user.id }))))))))));
+                    React.createElement(User, { elevation: 0, actions: React.createElement(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }))))))))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }