@selfcommunity/react-ui 0.7.9-alpha.20 → 0.7.9-alpha.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/cjs/components/GroupMembersWidget/GroupMembersWidget.js +10 -2
  2. package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.js +3 -3
  3. package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.d.ts +4 -12
  4. package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.js +14 -19
  5. package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.d.ts +3 -3
  6. package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.js +6 -4
  7. package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js +10 -2
  8. package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js +3 -3
  9. package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.d.ts +4 -12
  10. package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.js +14 -19
  11. package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.d.ts +3 -3
  12. package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js +6 -4
  13. package/lib/umd/react-ui.js +1 -1
  14. package/package.json +5 -5
package/lib/cjs/components/GroupMembersWidget/GroupMembersWidget.js CHANGED
@@ -175,6 +175,14 @@ function GroupMembersWidget(inProps) {
175
175
  const handleToggleDialogOpen = () => {
176
176
  setOpenDialog((prev) => !prev);
177
177
  };
178
+ const handleRefresh = (0, react_1.useMemo)(() => (userId) => {
179
+ const newMembers = [...state.results];
180
+ const _updated = newMembers.filter((u) => u.id !== userId);
181
+ dispatch({
182
+ type: widget_1.actionWidgetTypes.SET_RESULTS,
183
+ payload: { results: newMembers.length > 1 ? _updated : [] }
184
+ });
185
+ }, [dispatch, state.count, state.results]);
178
186
  // RENDER
179
187
  if ((autoHide && !state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup) {
180
188
  return react_1.default.createElement(HiddenPlaceholder_1.default, null);
@@ -191,7 +199,7 @@ function GroupMembersWidget(inProps) {
191
199
  react_1.default.createElement(List_1.default, null, state.results.slice(0, state.visibleItems).map((user) => {
192
200
  var _a;
193
201
  return (react_1.default.createElement(material_1.ListItem, { key: user.id },
194
- react_1.default.createElement(User_1.default, { elevation: 0, actions: isGroupAdmin ? (react_1.default.createElement(GroupSettingsIconButton_1.default, { group: scGroup, user: user })) : ((_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) },
202
+ 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) },
195
203
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
196
204
  })),
197
205
  state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
@@ -200,7 +208,7 @@ function GroupMembersWidget(inProps) {
200
208
  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 },
201
209
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" })) },
202
210
  react_1.default.createElement(List_1.default, null, state.results.map((user) => (react_1.default.createElement(material_1.ListItem, { key: user.id },
203
- react_1.default.createElement(User_1.default, { elevation: 0, actions: isGroupAdmin ? (react_1.default.createElement(GroupSettingsIconButton_1.default, { group: scGroup, user: user })) : (react_1.default.createElement(material_1.Button, null,
211
+ 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,
204
212
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))), user: user, userId: user.id }))))))))),
205
213
  react_1.default.createElement(material_1.CardActions, { className: classes.actions },
206
214
  react_1.default.createElement(GroupInviteButton_1.default, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }))));
package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.js CHANGED
@@ -173,7 +173,7 @@ function GroupRequestsWidget(inProps) {
173
173
  };
174
174
  const handleSubscribeAction = (0, react_1.useMemo)(() => (userId) => {
175
175
  const newRequests = [...state.results];
176
- const _updated = newRequests.findIndex((u) => u.id !== userId);
176
+ const _updated = newRequests.filter((u) => u.id !== userId);
177
177
  dispatch({
178
178
  type: widget_1.actionWidgetTypes.SET_RESULTS,
179
179
  payload: { results: newRequests.length > 1 ? _updated : [] }
@@ -191,14 +191,14 @@ function GroupRequestsWidget(inProps) {
191
191
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" })),
192
192
  react_1.default.createElement(react_1.default.Fragment, null,
193
193
  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 },
194
- 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, userId: user.id, onSubscribe: () => handleSubscribeAction(user.id) }), user: user, userId: user.id }))))),
194
+ 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 }))))),
195
195
  state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
196
196
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" })))),
197
197
  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),
198
198
  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 },
199
199
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" })) },
200
200
  react_1.default.createElement(List_1.default, null, state.results.map((user) => (react_1.default.createElement(material_1.ListItem, { key: user.id },
201
- 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, userId: user.id }), user: user, userId: user.id }))))))))));
201
+ 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 }))))))))));
202
202
  return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
203
203
  }
204
204
  exports.default = GroupRequestsWidget;
package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.d.ts CHANGED
@@ -7,25 +7,17 @@ export interface GroupSettingsIconButtonProps extends IconButtonProps {
7
7
  */
8
8
  className?: string;
9
9
  /**
10
- * Handles callback on menu item delete click
10
+ * Handles callback on delete success
11
11
  */
12
- onMenuItemRemoveClick?: () => void;
13
- /**
14
- * Handles callback on delete confirm
15
- */
16
- onItemRemoveConfirm?: () => void;
17
- /**
18
- * The deleting thread id
19
- */
20
- userToRemove?: any;
12
+ onRemoveSuccess?: () => void;
21
13
  /**
22
14
  * The user
23
15
  */
24
- user?: SCUserType;
16
+ user: SCUserType;
25
17
  /**
26
18
  * The group obj
27
19
  */
28
- group?: SCGroupType;
20
+ group: SCGroupType;
29
21
  /**
30
22
  * Any other properties
31
23
  */
package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.js CHANGED
@@ -10,6 +10,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
10
10
  const system_1 = require("@mui/system");
11
11
  const react_core_1 = require("@selfcommunity/react-core");
12
12
  const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
13
+ const api_services_1 = require("@selfcommunity/api-services");
13
14
  const PREFIX = 'SCGroupSettingsIconButton';
14
15
  const classes = {
15
16
  root: `${PREFIX}-root`,
@@ -58,7 +59,7 @@ function GroupSettingsIconButton(inProps) {
58
59
  props: inProps,
59
60
  name: PREFIX
60
61
  });
61
- const { className = null, onMenuItemRemoveClick, group, user, onItemRemoveConfirm, userToRemove } = props, rest = tslib_1.__rest(props, ["className", "onMenuItemRemoveClick", "group", "user", "onItemRemoveConfirm", "userToRemove"]);
62
+ const { className = null, group, user, onRemoveSuccess } = props, rest = tslib_1.__rest(props, ["className", "group", "user", "onRemoveSuccess"]);
62
63
  // STATE
63
64
  const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
64
65
  const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
@@ -82,22 +83,20 @@ function GroupSettingsIconButton(inProps) {
82
83
  const handleCloseDialog = () => {
83
84
  setOpenConfirmDialog(false);
84
85
  setAnchorEl(null);
85
- onItemRemoveConfirm && onItemRemoveConfirm();
86
+ onRemoveSuccess && onRemoveSuccess();
86
87
  };
87
88
  /**
88
89
  * Handles thread deletion
89
90
  */
90
91
  function handleRemoveUser() {
91
- console.log(userToRemove);
92
- // GroupService.removeUserFromGroup(group.id, userToRemove)
93
- // .then(() => {
94
- // PubSub.publish('snippetsChannelDelete', userToRemove);
95
- // handleCloseDialog();
96
- // })
97
- // .catch((error) => {
98
- // setOpenConfirmDialog(false);
99
- // console.log(error);
100
- // });
92
+ api_services_1.GroupService.removeUserFromGroup(group.id, user.id)
93
+ .then(() => {
94
+ handleCloseDialog();
95
+ })
96
+ .catch((error) => {
97
+ setOpenConfirmDialog(false);
98
+ console.log(error);
99
+ });
101
100
  }
102
101
  if (scUserContext.user.id === user.id) {
103
102
  return null;
@@ -110,9 +109,7 @@ function GroupSettingsIconButton(inProps) {
110
109
  return [
111
110
  react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "message", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
112
111
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" })),
113
- react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "report", onClick: () => console.log('report') },
114
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.report", defaultMessage: "ui.groupSettingsIconButton.item.report" })),
115
- react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "delete", onClick: userToRemove ? handleOpenDialog : onMenuItemRemoveClick },
112
+ react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "delete", onClick: handleOpenDialog },
116
113
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }))
117
114
  ];
118
115
  }
@@ -120,9 +117,7 @@ function GroupSettingsIconButton(inProps) {
120
117
  return [
121
118
  react_1.default.createElement(material_1.MenuItem, { className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), key: "message" },
122
119
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" })),
123
- react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: () => console.log('report'), key: "report" },
124
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.report", defaultMessage: "ui.groupSettingsIconButton.item.report" })),
125
- react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: userToRemove ? handleOpenDialog : onMenuItemRemoveClick, key: "delete" },
120
+ react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: handleOpenDialog, key: "delete" },
126
121
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }))
127
122
  ];
128
123
  }
@@ -132,6 +127,6 @@ function GroupSettingsIconButton(inProps) {
132
127
  react_1.default.createElement(Icon_1.default, null, "more_vert")),
133
128
  isMobile ? (react_1.default.createElement(SwipeableDrawerRoot, { className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
134
129
  react_1.default.createElement(material_1.List, null, renderList()))) : (react_1.default.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, renderList())),
135
- openConfirmDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openConfirmDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg" }), btnConfirm: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.confirm", defaultMessage: "ui.groupSettingsIconButton.dialog.confirm" }), onConfirm: handleRemoveUser, onClose: handleCloseDialog }))));
130
+ openConfirmDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openConfirmDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: { b: (...chunks) => react_1.default.createElement("strong", null, chunks), user: user.username, group: group.name } }), btnConfirm: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.confirm", defaultMessage: "ui.groupSettingsIconButton.dialog.confirm" }), onConfirm: handleRemoveUser, onClose: handleCloseDialog }))));
136
131
  }
137
132
  exports.default = GroupSettingsIconButton;
package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SCGroupType } from '@selfcommunity/types';
1
+ import { SCGroupType, SCUserType } from '@selfcommunity/types';
2
2
  export interface GroupSubscribeButtonProps {
3
3
  /**
4
4
  * Overrides or extends the styles applied to the component.
@@ -16,10 +16,10 @@ export interface GroupSubscribeButtonProps {
16
16
  */
17
17
  groupId?: number;
18
18
  /**
19
- * id of the user to be accepted into the group
19
+ * The user to be accepted into the group
20
20
  * @default null
21
21
  */
22
- userId?: number;
22
+ user?: SCUserType;
23
23
  /**
24
24
  * onSubscribe callback
25
25
  * @param user
package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.js CHANGED
@@ -49,7 +49,7 @@ function GroupSubscribeButton(inProps) {
49
49
  props: inProps,
50
50
  name: PREFIX
51
51
  });
52
- const { className, groupId, group, userId, onSubscribe } = props, rest = tslib_1.__rest(props, ["className", "groupId", "group", "userId", "onSubscribe"]);
52
+ const { className, groupId, group, user, onSubscribe } = props, rest = tslib_1.__rest(props, ["className", "groupId", "group", "user", "onSubscribe"]);
53
53
  // STATE
54
54
  const [status, setStatus] = (0, react_1.useState)(null);
55
55
  // CONTEXT
@@ -98,7 +98,7 @@ function GroupSubscribeButton(inProps) {
98
98
  scContext.settings.handleAnonymousAction();
99
99
  }
100
100
  else {
101
- status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && !userId ? unsubscribe() : userId ? subscribe(userId) : subscribe();
101
+ 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();
102
102
  }
103
103
  };
104
104
  /**
@@ -124,9 +124,11 @@ function GroupSubscribeButton(inProps) {
124
124
  }
125
125
  return _status;
126
126
  };
127
- if (!scGroup || (isGroupAdmin && userId === scUserContext.user.id) || (isGroupAdmin && !userId)) {
127
+ if (!scGroup || (isGroupAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isGroupAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
128
128
  return null;
129
129
  }
130
- return (react_1.default.createElement(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === types_1.SCGroupSubscriptionStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest), isGroupAdmin ? react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus()));
130
+ return (react_1.default.createElement(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: (user && user.group_status === types_1.SCGroupSubscriptionStatusType.REQUESTED) || (!user && scUserContext.user)
131
+ ? status === null || scGroupsManager.isLoading(scGroup)
132
+ : null, disabled: status === types_1.SCGroupSubscriptionStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest), isGroupAdmin ? react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus()));
131
133
  }
132
134
  exports.default = GroupSubscribeButton;
package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js CHANGED
@@ -173,6 +173,14 @@ export default function GroupMembersWidget(inProps) {
173
173
  const handleToggleDialogOpen = () => {
174
174
  setOpenDialog((prev) => !prev);
175
175
  };
176
+ const handleRefresh = useMemo(() => (userId) => {
177
+ const newMembers = [...state.results];
178
+ const _updated = newMembers.filter((u) => u.id !== userId);
179
+ dispatch({
180
+ type: actionWidgetTypes.SET_RESULTS,
181
+ payload: { results: newMembers.length > 1 ? _updated : [] }
182
+ });
183
+ }, [dispatch, state.count, state.results]);
176
184
  // RENDER
177
185
  if ((autoHide && !state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup) {
178
186
  return React.createElement(HiddenPlaceholder, null);
@@ -189,7 +197,7 @@ export default function GroupMembersWidget(inProps) {
189
197
  React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => {
190
198
  var _a;
191
199
  return (React.createElement(ListItem, { key: user.id },
192
- React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user })) : ((_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) },
200
+ 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) },
193
201
  React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))) : null, user: user, userId: user.id })));
194
202
  })),
195
203
  state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
@@ -198,7 +206,7 @@ export default function GroupMembersWidget(inProps) {
198
206
  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 },
199
207
  React.createElement(FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" })) },
200
208
  React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
201
- React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user })) : (React.createElement(Button, null,
209
+ React.createElement(User, { elevation: 0, actions: isGroupAdmin ? (React.createElement(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : (React.createElement(Button, null,
202
210
  React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }))), user: user, userId: user.id }))))))))),
203
211
  React.createElement(CardActions, { className: classes.actions },
204
212
  React.createElement(GroupInviteButton, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }))));
package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js CHANGED
@@ -171,7 +171,7 @@ export default function GroupRequestsWidget(inProps) {
171
171
  };
172
172
  const handleSubscribeAction = useMemo(() => (userId) => {
173
173
  const newRequests = [...state.results];
174
- const _updated = newRequests.findIndex((u) => u.id !== userId);
174
+ const _updated = newRequests.filter((u) => u.id !== userId);
175
175
  dispatch({
176
176
  type: actionWidgetTypes.SET_RESULTS,
177
177
  payload: { results: newRequests.length > 1 ? _updated : [] }
@@ -189,13 +189,13 @@ export default function GroupRequestsWidget(inProps) {
189
189
  React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" })),
190
190
  React.createElement(React.Fragment, null,
191
191
  React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => (React.createElement(ListItem, { key: user.id },
192
- React.createElement(User, { elevation: 0, actions: React.createElement(GroupSubscribeButton, { group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, userId: user.id, onSubscribe: () => handleSubscribeAction(user.id) }), user: user, userId: user.id }))))),
192
+ 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 }))))),
193
193
  state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
194
194
  React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" })))),
195
195
  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),
196
196
  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 },
197
197
  React.createElement(FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" })) },
198
198
  React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
199
- React.createElement(User, { elevation: 0, actions: React.createElement(GroupSubscribeButton, { group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, userId: user.id }), user: user, userId: user.id }))))))))));
199
+ 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 }))))))))));
200
200
  return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
201
201
  }
package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.d.ts CHANGED
@@ -7,25 +7,17 @@ export interface GroupSettingsIconButtonProps extends IconButtonProps {
7
7
  */
8
8
  className?: string;
9
9
  /**
10
- * Handles callback on menu item delete click
10
+ * Handles callback on delete success
11
11
  */
12
- onMenuItemRemoveClick?: () => void;
13
- /**
14
- * Handles callback on delete confirm
15
- */
16
- onItemRemoveConfirm?: () => void;
17
- /**
18
- * The deleting thread id
19
- */
20
- userToRemove?: any;
12
+ onRemoveSuccess?: () => void;
21
13
  /**
22
14
  * The user
23
15
  */
24
- user?: SCUserType;
16
+ user: SCUserType;
25
17
  /**
26
18
  * The group obj
27
19
  */
28
- group?: SCGroupType;
20
+ group: SCGroupType;
29
21
  /**
30
22
  * Any other properties
31
23
  */
package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.js CHANGED
@@ -8,6 +8,7 @@ import classNames from 'classnames';
8
8
  import { useThemeProps } from '@mui/system';
9
9
  import { Link, SCRoutes, useSCRouting, useSCUser } from '@selfcommunity/react-core';
10
10
  import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
11
+ import { GroupService } from '@selfcommunity/api-services';
11
12
  const PREFIX = 'SCGroupSettingsIconButton';
12
13
  const classes = {
13
14
  root: `${PREFIX}-root`,
@@ -56,7 +57,7 @@ export default function GroupSettingsIconButton(inProps) {
56
57
  props: inProps,
57
58
  name: PREFIX
58
59
  });
59
- const { className = null, onMenuItemRemoveClick, group, user, onItemRemoveConfirm, userToRemove } = props, rest = __rest(props, ["className", "onMenuItemRemoveClick", "group", "user", "onItemRemoveConfirm", "userToRemove"]);
60
+ const { className = null, group, user, onRemoveSuccess } = props, rest = __rest(props, ["className", "group", "user", "onRemoveSuccess"]);
60
61
  // STATE
61
62
  const [anchorEl, setAnchorEl] = useState(null);
62
63
  const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -80,22 +81,20 @@ export default function GroupSettingsIconButton(inProps) {
80
81
  const handleCloseDialog = () => {
81
82
  setOpenConfirmDialog(false);
82
83
  setAnchorEl(null);
83
- onItemRemoveConfirm && onItemRemoveConfirm();
84
+ onRemoveSuccess && onRemoveSuccess();
84
85
  };
85
86
  /**
86
87
  * Handles thread deletion
87
88
  */
88
89
  function handleRemoveUser() {
89
- console.log(userToRemove);
90
- // GroupService.removeUserFromGroup(group.id, userToRemove)
91
- // .then(() => {
92
- // PubSub.publish('snippetsChannelDelete', userToRemove);
93
- // handleCloseDialog();
94
- // })
95
- // .catch((error) => {
96
- // setOpenConfirmDialog(false);
97
- // console.log(error);
98
- // });
90
+ GroupService.removeUserFromGroup(group.id, user.id)
91
+ .then(() => {
92
+ handleCloseDialog();
93
+ })
94
+ .catch((error) => {
95
+ setOpenConfirmDialog(false);
96
+ console.log(error);
97
+ });
99
98
  }
100
99
  if (scUserContext.user.id === user.id) {
101
100
  return null;
@@ -108,9 +107,7 @@ export default function GroupSettingsIconButton(inProps) {
108
107
  return [
109
108
  React.createElement(ListItem, { className: classes.item, key: "message", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) },
110
109
  React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" })),
111
- React.createElement(ListItem, { className: classes.item, key: "report", onClick: () => console.log('report') },
112
- React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.report", defaultMessage: "ui.groupSettingsIconButton.item.report" })),
113
- React.createElement(ListItem, { className: classes.item, key: "delete", onClick: userToRemove ? handleOpenDialog : onMenuItemRemoveClick },
110
+ React.createElement(ListItem, { className: classes.item, key: "delete", onClick: handleOpenDialog },
114
111
  React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }))
115
112
  ];
116
113
  }
@@ -118,9 +115,7 @@ export default function GroupSettingsIconButton(inProps) {
118
115
  return [
119
116
  React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), key: "message" },
120
117
  React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" })),
121
- React.createElement(MenuItem, { className: classes.item, onClick: () => console.log('report'), key: "report" },
122
- React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.report", defaultMessage: "ui.groupSettingsIconButton.item.report" })),
123
- React.createElement(MenuItem, { className: classes.item, onClick: userToRemove ? handleOpenDialog : onMenuItemRemoveClick, key: "delete" },
118
+ React.createElement(MenuItem, { className: classes.item, onClick: handleOpenDialog, key: "delete" },
124
119
  React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }))
125
120
  ];
126
121
  }
@@ -130,5 +125,5 @@ export default function GroupSettingsIconButton(inProps) {
130
125
  React.createElement(Icon, null, "more_vert")),
131
126
  isMobile ? (React.createElement(SwipeableDrawerRoot, { className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
132
127
  React.createElement(List, null, renderList()))) : (React.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, renderList())),
133
- openConfirmDialog && (React.createElement(ConfirmDialog, { open: openConfirmDialog, title: React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg" }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.confirm", defaultMessage: "ui.groupSettingsIconButton.dialog.confirm" }), onConfirm: handleRemoveUser, onClose: handleCloseDialog }))));
128
+ openConfirmDialog && (React.createElement(ConfirmDialog, { open: openConfirmDialog, title: React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: { b: (...chunks) => React.createElement("strong", null, chunks), user: user.username, group: group.name } }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.confirm", defaultMessage: "ui.groupSettingsIconButton.dialog.confirm" }), onConfirm: handleRemoveUser, onClose: handleCloseDialog }))));
134
129
  }
package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SCGroupType } from '@selfcommunity/types';
1
+ import { SCGroupType, SCUserType } from '@selfcommunity/types';
2
2
  export interface GroupSubscribeButtonProps {
3
3
  /**
4
4
  * Overrides or extends the styles applied to the component.
@@ -16,10 +16,10 @@ export interface GroupSubscribeButtonProps {
16
16
  */
17
17
  groupId?: number;
18
18
  /**
19
- * id of the user to be accepted into the group
19
+ * The user to be accepted into the group
20
20
  * @default null
21
21
  */
22
- userId?: number;
22
+ user?: SCUserType;
23
23
  /**
24
24
  * onSubscribe callback
25
25
  * @param user
package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js CHANGED
@@ -47,7 +47,7 @@ export default function GroupSubscribeButton(inProps) {
47
47
  props: inProps,
48
48
  name: PREFIX
49
49
  });
50
- const { className, groupId, group, userId, onSubscribe } = props, rest = __rest(props, ["className", "groupId", "group", "userId", "onSubscribe"]);
50
+ const { className, groupId, group, user, onSubscribe } = props, rest = __rest(props, ["className", "groupId", "group", "user", "onSubscribe"]);
51
51
  // STATE
52
52
  const [status, setStatus] = useState(null);
53
53
  // CONTEXT
@@ -96,7 +96,7 @@ export default function GroupSubscribeButton(inProps) {
96
96
  scContext.settings.handleAnonymousAction();
97
97
  }
98
98
  else {
99
- status === SCGroupSubscriptionStatusType.SUBSCRIBED && !userId ? unsubscribe() : userId ? subscribe(userId) : subscribe();
99
+ 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();
100
100
  }
101
101
  };
102
102
  /**
@@ -122,8 +122,10 @@ export default function GroupSubscribeButton(inProps) {
122
122
  }
123
123
  return _status;
124
124
  };
125
- if (!scGroup || (isGroupAdmin && userId === scUserContext.user.id) || (isGroupAdmin && !userId)) {
125
+ if (!scGroup || (isGroupAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isGroupAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
126
126
  return null;
127
127
  }
128
- return (React.createElement(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === SCGroupSubscriptionStatusType.REQUESTED, className: classNames(classes.root, className) }, rest), isGroupAdmin ? React.createElement(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus()));
128
+ return (React.createElement(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: (user && user.group_status === SCGroupSubscriptionStatusType.REQUESTED) || (!user && scUserContext.user)
129
+ ? status === null || scGroupsManager.isLoading(scGroup)
130
+ : null, disabled: status === SCGroupSubscriptionStatusType.REQUESTED, className: classNames(classes.root, className) }, rest), isGroupAdmin ? React.createElement(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus()));
129
131
  }