@selfcommunity/react-ui 0.7.50-events.76 → 0.7.50-events.77

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 (12) hide show
  1. package/lib/cjs/components/EventInviteButton/EventInviteButton.d.ts +1 -1
  2. package/lib/cjs/components/EventInviteButton/EventInviteButton.js +17 -28
  3. package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js +11 -4
  4. package/lib/cjs/components/EventMembersWidget/TabContentComponent.d.ts +1 -0
  5. package/lib/cjs/components/EventMembersWidget/TabContentComponent.js +15 -2
  6. package/lib/esm/components/EventInviteButton/EventInviteButton.d.ts +1 -1
  7. package/lib/esm/components/EventInviteButton/EventInviteButton.js +17 -28
  8. package/lib/esm/components/EventMembersWidget/EventMembersWidget.js +11 -4
  9. package/lib/esm/components/EventMembersWidget/TabContentComponent.d.ts +1 -0
  10. package/lib/esm/components/EventMembersWidget/TabContentComponent.js +15 -2
  11. package/lib/umd/react-ui.js +1 -1
  12. package/package.json +7 -7
package/lib/cjs/components/EventInviteButton/EventInviteButton.d.ts CHANGED
@@ -20,7 +20,7 @@ export interface EventInviteButtonProps extends ButtonProps {
20
20
  * Functions to handle invitations sending in event creation mode
21
21
  * @default null
22
22
  */
23
- handleInvitations?: (data: any) => any;
23
+ handleInvitations?: ((invited: boolean) => void) | null;
24
24
  /**
25
25
  * Any other properties
26
26
  */
package/lib/cjs/components/EventInviteButton/EventInviteButton.js CHANGED
@@ -103,13 +103,6 @@ function EventInviteButton(inProps) {
103
103
  pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.INVITE_MEMBER}`, usersInvited);
104
104
  }
105
105
  }
106
- function convertToInvitedUsersObject(data) {
107
- const invite_users = {};
108
- data.forEach((user, index) => {
109
- invite_users[`invite_users[${index}]`] = user.id;
110
- });
111
- return invite_users;
112
- }
113
106
  /**
114
107
  * Memoized users invited ids
115
108
  */
@@ -185,26 +178,22 @@ function EventInviteButton(inProps) {
185
178
  * Handles invitation sending
186
179
  */
187
180
  const handleSendInvitations = () => {
188
- if (handleInvitations) {
189
- handleInvitations(convertToInvitedUsersObject(invited));
181
+ const data = { users: ids };
182
+ setIsSending(true);
183
+ api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, data)
184
+ .then(() => {
185
+ setIsSending(false);
190
186
  setOpen(false);
191
- }
192
- else {
193
- const data = { users: ids };
194
- setIsSending(true);
195
- api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, data)
196
- .then(() => {
197
- setIsSending(false);
198
- setOpen(false);
199
- setInvited([]);
200
- notifyChanges(scEvent, invited);
201
- })
202
- .catch((error) => {
203
- setOpen(false);
204
- setLoading(false);
205
- utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
206
- });
207
- }
187
+ setInvited([]);
188
+ notifyChanges(scEvent, invited);
189
+ handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(true);
190
+ })
191
+ .catch((error) => {
192
+ setOpen(false);
193
+ setLoading(false);
194
+ handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(false);
195
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
196
+ });
208
197
  };
209
198
  // Autocomplete Handlers
210
199
  const handleInputChange = (event, value, reason) => {
@@ -249,8 +238,8 @@ function EventInviteButton(inProps) {
249
238
  });
250
239
  };
251
240
  /**
252
- * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
253
- // */
241
+ * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
242
+ // */
254
243
  if (event && !isEventAdmin) {
255
244
  return null;
256
245
  }
package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js CHANGED
@@ -56,6 +56,7 @@ function EventMembersWidget(inProps) {
56
56
  }, widget_1.stateWidgetInitializer);
57
57
  const [invitedNumber, setInvitedNumber] = (0, react_1.useState)(0);
58
58
  const [tabValue, setTabValue] = (0, react_1.useState)('1');
59
+ const [refresh, setRefresh] = (0, react_1.useState)(false);
59
60
  // CONTEXT
60
61
  const scUserContext = (0, react_core_1.useSCUser)();
61
62
  // HOOKS
@@ -93,14 +94,20 @@ function EventMembersWidget(inProps) {
93
94
  let _t;
94
95
  if (scUserContext.user && scEvent) {
95
96
  _t = setTimeout(() => {
96
- _initParticipants();
97
- _initInvited();
97
+ if (refresh) {
98
+ _initInvited();
99
+ setRefresh(false);
100
+ }
101
+ else {
102
+ _initParticipants();
103
+ _initInvited();
104
+ }
98
105
  });
99
106
  return () => {
100
107
  clearTimeout(_t);
101
108
  };
102
109
  }
103
- }, [scUserContext.user, scEvent]);
110
+ }, [scUserContext.user, scEvent, refresh]);
104
111
  // HANDLERS
105
112
  const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
106
113
  setTabValue(newTabValue);
@@ -115,6 +122,6 @@ function EventMembersWidget(inProps) {
115
122
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participants.count })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
116
123
  scEvent,
117
124
  setInvitedNumber
118
- } }) })))] }))] })) })));
125
+ }, setRefresh: setRefresh }) })))] }))] })) })));
119
126
  }
120
127
  exports.default = EventMembersWidget;
package/lib/cjs/components/EventMembersWidget/TabContentComponent.d.ts CHANGED
@@ -19,6 +19,7 @@ interface TabComponentProps {
19
19
  scEvent?: SCEventType;
20
20
  setInvitedNumber: Dispatch<SetStateAction<number>>;
21
21
  };
22
+ setRefresh?: Dispatch<SetStateAction<boolean>>;
22
23
  }
23
24
  export default function TabContentComponent(props: TabComponentProps): JSX.Element;
24
25
  export {};
package/lib/cjs/components/EventMembersWidget/TabContentComponent.js CHANGED
@@ -4,16 +4,20 @@ const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const material_1 = require("@mui/material");
6
6
  const api_services_1 = require("@selfcommunity/api-services");
7
+ const utils_1 = require("@selfcommunity/utils");
7
8
  const react_1 = require("react");
8
9
  const react_intl_1 = require("react-intl");
10
+ const Errors_1 = require("../../constants/Errors");
9
11
  const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
10
12
  const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
11
13
  const widget_1 = require("../../utils/widget");
14
+ const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
12
15
  const InviteUserEventButton_1 = tslib_1.__importDefault(require("../InviteUserEventButton"));
13
16
  const User_1 = tslib_1.__importStar(require("../User"));
14
17
  const constants_1 = require("./constants");
15
18
  const classes = {
16
19
  actionButton: `${constants_1.PREFIX}-action-button`,
20
+ eventButton: `${constants_1.PREFIX}-event-button`,
17
21
  dialogRoot: `${constants_1.PREFIX}-dialog-root`,
18
22
  infiniteScroll: `${constants_1.PREFIX}-infinite-scroll`,
19
23
  endMessage: `${constants_1.PREFIX}-end-message`
@@ -25,7 +29,7 @@ const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
25
29
  })(() => ({}));
26
30
  function TabContentComponent(props) {
27
31
  // PROPS
28
- const { state, dispatch, userProps, dialogProps, actionProps } = props;
32
+ const { state, dispatch, userProps, dialogProps, actionProps, setRefresh } = props;
29
33
  // STATE
30
34
  const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
31
35
  // HANDLERS
@@ -41,12 +45,21 @@ function TabContentComponent(props) {
41
45
  })
42
46
  .then((res) => {
43
47
  dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
48
+ })
49
+ .catch((error) => {
50
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
44
51
  });
45
52
  }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
46
53
  const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
47
54
  setOpenDialog((prev) => !prev);
48
55
  }, []);
49
56
  const getActionsComponent = (0, react_1.useCallback)((userId) => actionProps ? (0, jsx_runtime_1.jsx)(InviteUserEventButton_1.default, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
50
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
57
+ const handleInvitations = (0, react_1.useCallback)((invited) => {
58
+ if (invited) {
59
+ dispatch({ type: widget_1.actionWidgetTypes.RESET });
60
+ setRefresh(true);
61
+ }
62
+ }, [dispatch, setRefresh]);
63
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count === 0 && actionProps && ((0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
51
64
  }
52
65
  exports.default = TabContentComponent;
package/lib/esm/components/EventInviteButton/EventInviteButton.d.ts CHANGED
@@ -20,7 +20,7 @@ export interface EventInviteButtonProps extends ButtonProps {
20
20
  * Functions to handle invitations sending in event creation mode
21
21
  * @default null
22
22
  */
23
- handleInvitations?: (data: any) => any;
23
+ handleInvitations?: ((invited: boolean) => void) | null;
24
24
  /**
25
25
  * Any other properties
26
26
  */
package/lib/esm/components/EventInviteButton/EventInviteButton.js CHANGED
@@ -101,13 +101,6 @@ export default function EventInviteButton(inProps) {
101
101
  PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, usersInvited);
102
102
  }
103
103
  }
104
- function convertToInvitedUsersObject(data) {
105
- const invite_users = {};
106
- data.forEach((user, index) => {
107
- invite_users[`invite_users[${index}]`] = user.id;
108
- });
109
- return invite_users;
110
- }
111
104
  /**
112
105
  * Memoized users invited ids
113
106
  */
@@ -183,26 +176,22 @@ export default function EventInviteButton(inProps) {
183
176
  * Handles invitation sending
184
177
  */
185
178
  const handleSendInvitations = () => {
186
- if (handleInvitations) {
187
- handleInvitations(convertToInvitedUsersObject(invited));
179
+ const data = { users: ids };
180
+ setIsSending(true);
181
+ EventService.inviteOrAcceptEventRequest(scEvent.id, data)
182
+ .then(() => {
183
+ setIsSending(false);
188
184
  setOpen(false);
189
- }
190
- else {
191
- const data = { users: ids };
192
- setIsSending(true);
193
- EventService.inviteOrAcceptEventRequest(scEvent.id, data)
194
- .then(() => {
195
- setIsSending(false);
196
- setOpen(false);
197
- setInvited([]);
198
- notifyChanges(scEvent, invited);
199
- })
200
- .catch((error) => {
201
- setOpen(false);
202
- setLoading(false);
203
- Logger.error(SCOPE_SC_UI, error);
204
- });
205
- }
185
+ setInvited([]);
186
+ notifyChanges(scEvent, invited);
187
+ handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(true);
188
+ })
189
+ .catch((error) => {
190
+ setOpen(false);
191
+ setLoading(false);
192
+ handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(false);
193
+ Logger.error(SCOPE_SC_UI, error);
194
+ });
206
195
  };
207
196
  // Autocomplete Handlers
208
197
  const handleInputChange = (event, value, reason) => {
@@ -247,8 +236,8 @@ export default function EventInviteButton(inProps) {
247
236
  });
248
237
  };
249
238
  /**
250
- * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
251
- // */
239
+ * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
240
+ // */
252
241
  if (event && !isEventAdmin) {
253
242
  return null;
254
243
  }
package/lib/esm/components/EventMembersWidget/EventMembersWidget.js CHANGED
@@ -54,6 +54,7 @@ export default function EventMembersWidget(inProps) {
54
54
  }, stateWidgetInitializer);
55
55
  const [invitedNumber, setInvitedNumber] = useState(0);
56
56
  const [tabValue, setTabValue] = useState('1');
57
+ const [refresh, setRefresh] = useState(false);
57
58
  // CONTEXT
58
59
  const scUserContext = useSCUser();
59
60
  // HOOKS
@@ -91,14 +92,20 @@ export default function EventMembersWidget(inProps) {
91
92
  let _t;
92
93
  if (scUserContext.user && scEvent) {
93
94
  _t = setTimeout(() => {
94
- _initParticipants();
95
- _initInvited();
95
+ if (refresh) {
96
+ _initInvited();
97
+ setRefresh(false);
98
+ }
99
+ else {
100
+ _initParticipants();
101
+ _initInvited();
102
+ }
96
103
  });
97
104
  return () => {
98
105
  clearTimeout(_t);
99
106
  };
100
107
  }
101
- }, [scUserContext.user, scEvent]);
108
+ }, [scUserContext.user, scEvent, refresh]);
102
109
  // HANDLERS
103
110
  const handleTabChange = useCallback((_evt, newTabValue) => {
104
111
  setTabValue(newTabValue);
@@ -113,5 +120,5 @@ export default function EventMembersWidget(inProps) {
113
120
  return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
114
121
  scEvent,
115
122
  setInvitedNumber
116
- } }) })))] }))] })) })));
123
+ }, setRefresh: setRefresh }) })))] }))] })) })));
117
124
  }
package/lib/esm/components/EventMembersWidget/TabContentComponent.d.ts CHANGED
@@ -19,6 +19,7 @@ interface TabComponentProps {
19
19
  scEvent?: SCEventType;
20
20
  setInvitedNumber: Dispatch<SetStateAction<number>>;
21
21
  };
22
+ setRefresh?: Dispatch<SetStateAction<boolean>>;
22
23
  }
23
24
  export default function TabContentComponent(props: TabComponentProps): JSX.Element;
24
25
  export {};
package/lib/esm/components/EventMembersWidget/TabContentComponent.js CHANGED
@@ -1,16 +1,20 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button, List, ListItem, styled, Typography } from '@mui/material';
3
3
  import { Endpoints, http } from '@selfcommunity/api-services';
4
+ import { Logger } from '@selfcommunity/utils';
4
5
  import { useCallback, useState } from 'react';
5
6
  import { FormattedMessage } from 'react-intl';
7
+ import { SCOPE_SC_UI } from '../../constants/Errors';
6
8
  import BaseDialog from '../../shared/BaseDialog';
7
9
  import InfiniteScroll from '../../shared/InfiniteScroll';
8
10
  import { actionWidgetTypes } from '../../utils/widget';
11
+ import EventInviteButton from '../EventInviteButton';
9
12
  import InviteUserEventButton from '../InviteUserEventButton';
10
13
  import User, { UserSkeleton } from '../User';
11
14
  import { PREFIX } from './constants';
12
15
  const classes = {
13
16
  actionButton: `${PREFIX}-action-button`,
17
+ eventButton: `${PREFIX}-event-button`,
14
18
  dialogRoot: `${PREFIX}-dialog-root`,
15
19
  infiniteScroll: `${PREFIX}-infinite-scroll`,
16
20
  endMessage: `${PREFIX}-end-message`
@@ -22,7 +26,7 @@ const DialogRoot = styled(BaseDialog, {
22
26
  })(() => ({}));
23
27
  export default function TabContentComponent(props) {
24
28
  // PROPS
25
- const { state, dispatch, userProps, dialogProps, actionProps } = props;
29
+ const { state, dispatch, userProps, dialogProps, actionProps, setRefresh } = props;
26
30
  // STATE
27
31
  const [openDialog, setOpenDialog] = useState(false);
28
32
  // HANDLERS
@@ -38,11 +42,20 @@ export default function TabContentComponent(props) {
38
42
  })
39
43
  .then((res) => {
40
44
  dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
45
+ })
46
+ .catch((error) => {
47
+ Logger.error(SCOPE_SC_UI, error);
41
48
  });
42
49
  }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
43
50
  const handleToggleDialogOpen = useCallback(() => {
44
51
  setOpenDialog((prev) => !prev);
45
52
  }, []);
46
53
  const getActionsComponent = useCallback((userId) => actionProps ? _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
47
- return (_jsxs(_Fragment, { children: [_jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
54
+ const handleInvitations = useCallback((invited) => {
55
+ if (invited) {
56
+ dispatch({ type: actionWidgetTypes.RESET });
57
+ setRefresh(true);
58
+ }
59
+ }, [dispatch, setRefresh]);
60
+ return (_jsxs(_Fragment, { children: [_jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count === 0 && actionProps && (_jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations })), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
48
61
  }