@selfcommunity/react-ui 0.10.4-alpha.11 → 0.10.4-alpha.13

package/lib/cjs/components/EventForm/EventForm.js

@@ -76,7 +76,8 @@ const classes = {
     actions: `${constants_1.PREFIX}-actions`,
     privacySection: `${constants_1.PREFIX}-privacy-section`,
     privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
-    error: `${constants_1.PREFIX}-error`
+    error: `${constants_1.PREFIX}-error`,
+    genericError: `${constants_1.PREFIX}-generic-error`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -148,6 +149,7 @@ function EventForm(inProps) {
     // STATE
     const [field, setField] = (0, react_1.useState)(initialFieldState);
     const [error, setError] = (0, react_1.useState)({});
+    const [genericError, setGenericError] = (0, react_1.useState)(null);
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
     const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
@@ -168,6 +170,7 @@ function EventForm(inProps) {
             delete error.imageOriginalError;
             setError(error);
         }
+        setGenericError(null);
     }, [error]);
     /**
      * Notify when a group info changed
@@ -185,9 +188,11 @@ function EventForm(inProps) {
     }, [event]);
     const handleGeoData = (0, react_1.useCallback)((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+        setGenericError(null);
     }, []);
     const handleSubmit = (0, react_1.useCallback)(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
+        setGenericError(null);
         const formData = new FormData();
         if (field.imageOriginalFile) {
             formData.append('image_original', field.imageOriginalFile);
@@ -227,12 +232,23 @@ function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = (0, api_services_1.formatHttpErrorCode)(e);
-            if (Object.values(_error)[0]['error'] === 'unique') {
-                setError(Object.assign(Object.assign({}, error), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
+            if ('errorsError' in _error || !Object.keys(_error).length) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.eventForm.genericError',
+                    defaultMessage: 'ui.eventForm.genericError'
+                }));
             }
             else {
-                setError(Object.assign(Object.assign({}, error), _error));
+                setGenericError(null);
             }
+            let __errors = {};
+            if ('coverError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.ui.eventForm.cover.error", defaultMessage: "ui.ui.eventForm.cover.error" }) });
+            }
+            if ('titleError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['titleError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
+            }
+            setError(__errors);
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
@@ -245,6 +261,7 @@ function EventForm(inProps) {
             delete error[`${name}Error`];
             setError(error);
         }
+        setGenericError(null);
     }, [setField, error]);
     const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -256,6 +273,7 @@ function EventForm(inProps) {
             delete error['endDateError'];
             setError(error);
         }
+        setGenericError(null);
     }, [setField, error]);
     const shouldDisableDate = (0, react_1.useCallback)((date) => {
         let disabled = false;
@@ -279,8 +297,7 @@ function EventForm(inProps) {
     /**
      * Renders root object
      */
-    console.log(error);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
                         }, error: Boolean(field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
                                         textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
@@ -332,7 +349,7 @@ function EventForm(inProps) {
                                         b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||

package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js

@@ -99,7 +99,7 @@ function EventMembersWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [participants.isLoadingNext, participants.initialized, scEvent, dispatchParticipants, setParticipantsCount]);
+    }, [participants.isLoadingNext, participants.initialized, scEvent, endpointQueryParams, dispatchParticipants, setParticipantsCount]);
     const _initInvited = (0, react_1.useCallback)(() => {
         if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
             dispatchInvited({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
@@ -113,7 +113,7 @@ function EventMembersWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [invited.isLoadingNext, invited.initialized, scEvent, dispatchInvited, setInvitedCount]);
+    }, [invited.isLoadingNext, invited.initialized, scEvent, hasAllow, endpointQueryParams, dispatchInvited, setInvitedCount]);
     const _initRequests = (0, react_1.useCallback)(() => {
         if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
             dispatchRequests({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
@@ -128,7 +128,7 @@ function EventMembersWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [requests.isLoadingNext, requests.initialized, scEvent, dispatchRequests, setRequestsCount, setRequestsUsers]);
+    }, [requests.isLoadingNext, requests.initialized, scEvent, hasAllow, endpointQueryParams, dispatchRequests, setRequestsCount, setRequestsUsers]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -152,18 +152,18 @@ function EventMembersWidget(inProps) {
                 clearTimeout(_t);
             };
         }
-    }, [scUserContext.user, scEvent, refresh]);
+    }, [scUserContext.user, scEvent, refresh, _initParticipants, _initInvited, _initRequests]);
     (0, react_1.useEffect)(() => {
         if (participants.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
             dispatchParticipants({ type: widget_1.actionWidgetTypes.RESET, payload: {} });
             dispatchRequests({ type: widget_1.actionWidgetTypes.RESET, payload: {} });
             dispatchInvited({ type: widget_1.actionWidgetTypes.RESET, payload: {} });
         }
-    }, [participants.initialized, scEvent, eventId, event]);
+    }, [participants.initialized, scEvent, eventId, event, dispatchParticipants, dispatchInvited, dispatchRequests]);
     // HANDLERS
     const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
         setTabValue(newTabValue);
-    }, []);
+    }, [setTabValue]);
     const handleRefresh = (0, react_1.useCallback)((_tabValue) => {
         if (_tabValue === types_1.TabContentEnum.PARTICIPANTS) {
             dispatchParticipants({ type: widget_1.actionWidgetTypes.RESET });
@@ -172,7 +172,7 @@ function EventMembersWidget(inProps) {
             dispatchInvited({ type: widget_1.actionWidgetTypes.RESET });
         }
         setRefresh(_tabValue);
-    }, []);
+    }, [dispatchParticipants, dispatchInvited, setRefresh]);
     if (!scUserContext.user) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }

package/lib/cjs/components/EventMembersWidget/TabContentComponent.js

@@ -43,7 +43,7 @@ function TabContentComponent(props) {
     // HOOKS
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // CONSTS
-    const users = (0, react_1.useMemo)(() => (tabValue === types_1.TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps, state]);
+    const users = (0, react_1.useMemo)(() => (tabValue === types_1.TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         updatesInvited.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
@@ -53,6 +53,11 @@ function TabContentComponent(props) {
             updatesParticipants.current && pubsub_js_1.default.unsubscribe(updatesParticipants.current);
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (openDialog && state.next && state.initialized) {
+            handleNext();
+        }
+    }, [openDialog, state.next, state.initialized]);
     // HANDLERS
     /**
      * Handles pagination
@@ -70,16 +75,16 @@ function TabContentComponent(props) {
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
-    }, [state.next, state.isLoadingNext, state.initialized]);
+    }, [state.next, state.isLoadingNext, state.initialized, dispatch]);
     const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
         setOpenDialog((prev) => !prev);
-    }, []);
+    }, [setOpenDialog]);
     const handleToggleMember = (0, react_1.useCallback)(() => {
         handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(types_1.TabContentEnum.PARTICIPANTS);
-    }, []);
+    }, [handleRefresh]);
     const handleInviteMember = (0, react_1.useCallback)(() => {
         handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(types_1.TabContentEnum.INVITED);
-    }, []);
+    }, [handleRefresh]);
     const getActionsComponent = (0, react_1.useCallback)((userId) => {
         if (tabValue === types_1.TabContentEnum.INVITED && actionProps) {
             const _handleInvitations = (invited) => {
@@ -130,6 +135,6 @@ function TabContentComponent(props) {
     else if (tabValue === types_1.TabContentEnum.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: users === null || users === void 0 ? void 0 : users.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))) }) })) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).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))) }) })) })))] }));
 }
 exports.default = TabContentComponent;

package/lib/esm/components/EventForm/EventForm.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
-import { Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
+import { Alert, Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
@@ -74,7 +74,8 @@ const classes = {
     actions: `${PREFIX}-actions`,
     privacySection: `${PREFIX}-privacy-section`,
     privacySectionInfo: `${PREFIX}-privacy-section-info`,
-    error: `${PREFIX}-error`
+    error: `${PREFIX}-error`,
+    genericError: `${PREFIX}-generic-error`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -146,6 +147,7 @@ export default function EventForm(inProps) {
     // STATE
     const [field, setField] = useState(initialFieldState);
     const [error, setError] = useState({});
+    const [genericError, setGenericError] = useState(null);
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
@@ -166,6 +168,7 @@ export default function EventForm(inProps) {
             delete error.imageOriginalError;
             setError(error);
         }
+        setGenericError(null);
     }, [error]);
     /**
      * Notify when a group info changed
@@ -183,9 +186,11 @@ export default function EventForm(inProps) {
     }, [event]);
     const handleGeoData = useCallback((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+        setGenericError(null);
     }, []);
     const handleSubmit = useCallback(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
+        setGenericError(null);
         const formData = new FormData();
         if (field.imageOriginalFile) {
             formData.append('image_original', field.imageOriginalFile);
@@ -225,12 +230,23 @@ export default function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = formatHttpErrorCode(e);
-            if (Object.values(_error)[0]['error'] === 'unique') {
-                setError(Object.assign(Object.assign({}, error), { ['nameError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
+            if ('errorsError' in _error || !Object.keys(_error).length) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.eventForm.genericError',
+                    defaultMessage: 'ui.eventForm.genericError'
+                }));
             }
             else {
-                setError(Object.assign(Object.assign({}, error), _error));
+                setGenericError(null);
             }
+            let __errors = {};
+            if ('coverError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: _jsx(FormattedMessage, { id: "ui.ui.eventForm.cover.error", defaultMessage: "ui.ui.eventForm.cover.error" }) });
+            }
+            if ('titleError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['titleError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
+            }
+            setError(__errors);
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             Logger.error(SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
@@ -243,6 +259,7 @@ export default function EventForm(inProps) {
             delete error[`${name}Error`];
             setError(error);
         }
+        setGenericError(null);
     }, [setField, error]);
     const handleChangeDateTime = useCallback((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -254,6 +271,7 @@ export default function EventForm(inProps) {
             delete error['endDateError'];
             setError(error);
         }
+        setGenericError(null);
     }, [setField, error]);
     const shouldDisableDate = useCallback((date) => {
         let disabled = false;
@@ -277,8 +295,7 @@ export default function EventForm(inProps) {
     /**
      * Renders root object
      */
-    console.log(error);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && _jsx(Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                             endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
                         }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
                                         textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
@@ -330,7 +347,7 @@ export default function EventForm(inProps) {
                                         b: (chunks) => _jsx("strong", { children: chunks })
                                     } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
                             endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||

package/lib/esm/components/EventMembersWidget/EventMembersWidget.js

@@ -97,7 +97,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [participants.isLoadingNext, participants.initialized, scEvent, dispatchParticipants, setParticipantsCount]);
+    }, [participants.isLoadingNext, participants.initialized, scEvent, endpointQueryParams, dispatchParticipants, setParticipantsCount]);
     const _initInvited = useCallback(() => {
         if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
             dispatchInvited({ type: actionWidgetTypes.LOADING_NEXT });
@@ -111,7 +111,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [invited.isLoadingNext, invited.initialized, scEvent, dispatchInvited, setInvitedCount]);
+    }, [invited.isLoadingNext, invited.initialized, scEvent, hasAllow, endpointQueryParams, dispatchInvited, setInvitedCount]);
     const _initRequests = useCallback(() => {
         if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
             dispatchRequests({ type: actionWidgetTypes.LOADING_NEXT });
@@ -126,7 +126,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [requests.isLoadingNext, requests.initialized, scEvent, dispatchRequests, setRequestsCount, setRequestsUsers]);
+    }, [requests.isLoadingNext, requests.initialized, scEvent, hasAllow, endpointQueryParams, dispatchRequests, setRequestsCount, setRequestsUsers]);
     // EFFECTS
     useEffect(() => {
         let _t;
@@ -150,18 +150,18 @@ export default function EventMembersWidget(inProps) {
                 clearTimeout(_t);
             };
         }
-    }, [scUserContext.user, scEvent, refresh]);
+    }, [scUserContext.user, scEvent, refresh, _initParticipants, _initInvited, _initRequests]);
     useEffect(() => {
         if (participants.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
             dispatchParticipants({ type: actionWidgetTypes.RESET, payload: {} });
             dispatchRequests({ type: actionWidgetTypes.RESET, payload: {} });
             dispatchInvited({ type: actionWidgetTypes.RESET, payload: {} });
         }
-    }, [participants.initialized, scEvent, eventId, event]);
+    }, [participants.initialized, scEvent, eventId, event, dispatchParticipants, dispatchInvited, dispatchRequests]);
     // HANDLERS
     const handleTabChange = useCallback((_evt, newTabValue) => {
         setTabValue(newTabValue);
-    }, []);
+    }, [setTabValue]);
     const handleRefresh = useCallback((_tabValue) => {
         if (_tabValue === TabContentEnum.PARTICIPANTS) {
             dispatchParticipants({ type: actionWidgetTypes.RESET });
@@ -170,7 +170,7 @@ export default function EventMembersWidget(inProps) {
             dispatchInvited({ type: actionWidgetTypes.RESET });
         }
         setRefresh(_tabValue);
-    }, []);
+    }, [dispatchParticipants, dispatchInvited, setRefresh]);
     if (!scUserContext.user) {
         return _jsx(HiddenPlaceholder, {});
     }

package/lib/esm/components/EventMembersWidget/TabContentComponent.js

@@ -40,7 +40,7 @@ export default function TabContentComponent(props) {
     // HOOKS
     const { enqueueSnackbar } = useSnackbar();
     // CONSTS
-    const users = useMemo(() => (tabValue === TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps, state]);
+    const users = useMemo(() => (tabValue === TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
     // EFFECTS
     useEffect(() => {
         updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
@@ -50,6 +50,11 @@ export default function TabContentComponent(props) {
             updatesParticipants.current && PubSub.unsubscribe(updatesParticipants.current);
         };
     }, []);
+    useEffect(() => {
+        if (openDialog && state.next && state.initialized) {
+            handleNext();
+        }
+    }, [openDialog, state.next, state.initialized]);
     // HANDLERS
     /**
      * Handles pagination
@@ -67,16 +72,16 @@ export default function TabContentComponent(props) {
             .catch((error) => {
             Logger.error(SCOPE_SC_UI, error);
         });
-    }, [state.next, state.isLoadingNext, state.initialized]);
+    }, [state.next, state.isLoadingNext, state.initialized, dispatch]);
     const handleToggleDialogOpen = useCallback(() => {
         setOpenDialog((prev) => !prev);
-    }, []);
+    }, [setOpenDialog]);
     const handleToggleMember = useCallback(() => {
         handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentEnum.PARTICIPANTS);
-    }, []);
+    }, [handleRefresh]);
     const handleInviteMember = useCallback(() => {
         handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentEnum.INVITED);
-    }, []);
+    }, [handleRefresh]);
     const getActionsComponent = useCallback((userId) => {
         if (tabValue === TabContentEnum.INVITED && actionProps) {
             const _handleInvitations = (invited) => {
@@ -127,5 +132,5 @@ export default function TabContentComponent(props) {
     else if (tabValue === TabContentEnum.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.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))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).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))) }) })) })))] }));
 }