@selfcommunity/react-ui 0.9.0-alpha.1 → 0.9.0-alpha.10

package/lib/cjs/components/Event/Event.js

@@ -108,7 +108,7 @@ function Event(inProps) {
     });
     const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = event_1.SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
     // STATE
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, autoSubscribe: false });
     const inProgress = (0, react_1.useMemo)(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();

package/lib/cjs/components/EventHeader/EventHeader.js

@@ -176,6 +176,6 @@ function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ eventId: scEvent.id, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
 }
 exports.default = EventHeader;

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

@@ -28,6 +28,10 @@ export interface EventMediaWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit results
+     * @default 10
+     */
     limit?: number;
     /**
      * Other props

package/lib/cjs/components/EventMediaWidget/EventMediaWidget.js

@@ -69,17 +69,22 @@ function EventMediaWidget(inProps) {
     const { event, eventId, limit = Pagination_1.DEFAULT_PAGINATION_LIMIT, endpointQueryParams = {
         limit,
         offset: Pagination_1.DEFAULT_PAGINATION_OFFSET
-    }, cacheStrategy, dialogProps } = props, rest = tslib_1.__rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    }, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, dialogProps } = props, rest = tslib_1.__rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    // HOOKS
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const intl = (0, react_intl_1.useIntl)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
         isLoadingNext: false,
         next: null,
-        cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY),
+        cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, event ? event.id : eventId),
         cacheStrategy,
         visibleItems: limit
     }, widget_1.stateWidgetInitializer);
-    const [medias, setMedias] = (0, react_1.useState)([]);
-    const [mediasCount, setMediasCount] = (0, react_1.useState)(0);
+    const [medias, setMedias] = (0, react_1.useState)(state.results);
+    const [mediasCount, setMediasCount] = (0, react_1.useState)(state.count);
     const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     const [openDialogConfirm, setOpenDialogConfirm] = (0, react_1.useState)(false);
     const [mediaId, setMediaId] = (0, react_1.useState)(null);
@@ -88,33 +93,9 @@ function EventMediaWidget(inProps) {
     const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(null);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
-    // HOOKS
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
-    const intl = (0, react_intl_1.useIntl)();
-    const theme = (0, material_1.useTheme)();
-    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // CONSTS
     const hasAllow = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
     const countHiddenMedia = (0, react_1.useMemo)(() => mediasCount - MEDIAS_TO_SHOW, [mediasCount]);
-    /**
-     * Initialize component
-     * Fetch data only if the component is not initialized and it is not loading data
-     */
-    const _initComponent = (0, react_1.useCallback)(() => {
-        if (!state.initialized && !state.isLoadingNext) {
-            dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
-            api_services_1.EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
-                .then((payload) => {
-                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
-                setMedias(payload.results);
-                setMediasCount(payload.count);
-            })
-                .catch((error) => {
-                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.isLoadingNext, state.initialized, scEvent, dispatch, setMedias, setMediasCount]);
     const _fetchNext = (0, react_1.useCallback)((index) => {
         if (mediasCount > medias.length && index >= 6 && !state.isLoadingNext && state.next) {
             setPreview(index);
@@ -212,25 +193,55 @@ function EventMediaWidget(inProps) {
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
-        if (scUserContext.user && scEvent) {
+        if (scUserContext.user &&
+            scEvent &&
+            !state.initialized &&
+            Boolean((eventId !== undefined && scEvent.id === eventId) || (event && scEvent.id === event.id))) {
             _t = setTimeout(_initComponent);
             return () => {
                 clearTimeout(_t);
             };
         }
-    }, [scUserContext.user, scEvent]);
+    }, [scUserContext.user, scEvent, state.initialized]);
+    (0, react_1.useEffect)(() => {
+        if (state.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
+            dispatch({ type: widget_1.actionWidgetTypes.RESET, payload: {} });
+        }
+    }, [state.initialized, scEvent, eventId, event]);
+    /**
+     * Initialize component
+     * Fetch data only if the component is not initialized and it is not loading data
+     */
+    const _initComponent = (0, react_1.useCallback)(() => {
+        if (!state.isLoadingNext) {
+            dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
+            api_services_1.EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
+                .then((payload) => {
+                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+                setMedias(payload.results);
+                setMediasCount(payload.count);
+            })
+                .catch((error) => {
+                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [state.isLoadingNext, scEvent, eventId, dispatch, setMedias, setMediasCount]);
     (0, react_1.useEffect)(() => {
         if (isMobile && openDialog && state.next) {
             handleNext();
         }
     }, [isMobile, openDialog, state.next]);
     // RENDER
-    if (!scEvent || (state.initialized && mediasCount === 0 && !hasAllow)) {
-        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
-    }
-    if (!state.initialized || (state.isLoadingNext && mediasCount === 0)) {
+    if (!scEvent ||
+        !state.initialized ||
+        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
+        (state.isLoadingNext && !state.initialized)) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
+    if (state.initialized && state.count === 0 && !hasAllow) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && (0, jsx_runtime_1.jsx)(TriggerButton_1.default, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && (0, jsx_runtime_1.jsx)(Skeleton_1.EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => ((0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ onClick: () => handleOpenLightbox(i), sx: {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(system_1.Box, { className: classes.mediaLayer }), (0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: (0, jsx_runtime_1.jsx)(TriggerButton_1.default, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && (0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen }, { 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.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, 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.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => ((0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ sx: {

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

@@ -35,6 +35,9 @@ export interface EventMembersWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit items
+     */
     limit?: number;
     /**
      * Other props

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

@@ -13,7 +13,6 @@ const react_intl_1 = require("react-intl");
 require("swiper/css");
 const Errors_1 = require("../../constants/Errors");
 const Pagination_1 = require("../../constants/Pagination");
-const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const widget_1 = require("../../utils/widget");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
@@ -62,10 +61,10 @@ function EventMembersWidget(inProps) {
         cacheStrategy,
         visibleItems: limit
     }, widget_1.stateWidgetInitializer);
-    const [participantsCount, setParticipantsCount] = (0, react_1.useState)(0);
-    const [invitedCount, setInvitedCount] = (0, react_1.useState)(0);
-    const [requestsCount, setRequestsCount] = (0, react_1.useState)(0);
-    const [requestsUsers, setRequestsUsers] = (0, react_1.useState)([]);
+    const [participantsCount, setParticipantsCount] = (0, react_1.useState)(participants.count);
+    const [invitedCount, setInvitedCount] = (0, react_1.useState)(invited.count);
+    const [requestsCount, setRequestsCount] = (0, react_1.useState)(requests.count);
+    const [requestsUsers, setRequestsUsers] = (0, react_1.useState)(requests.results);
     const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum.PARTICIPANTS);
     const [refresh, setRefresh] = (0, react_1.useState)(null);
     // CONTEXT
@@ -99,7 +98,7 @@ function EventMembersWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [participants.isLoadingNext, participants.initialized, scEvent]);
+    }, [participants.isLoadingNext, participants.initialized, scEvent, dispatchParticipants, setParticipantsCount]);
     const _initInvited = (0, react_1.useCallback)(() => {
         if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
             dispatchInvited({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
@@ -113,7 +112,7 @@ function EventMembersWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [invited.isLoadingNext, invited.initialized, scUserContext.user, scEvent]);
+    }, [invited.isLoadingNext, invited.initialized, scEvent, dispatchInvited, setInvitedCount]);
     const _initRequests = (0, react_1.useCallback)(() => {
         if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
             dispatchRequests({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
@@ -128,7 +127,7 @@ function EventMembersWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [requests.isLoadingNext, requests.initialized, scUserContext.user, scEvent]);
+    }, [requests.isLoadingNext, requests.initialized, scEvent, dispatchRequests, setRequestsCount, setRequestsUsers]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -153,6 +152,13 @@ function EventMembersWidget(inProps) {
             };
         }
     }, [scUserContext.user, scEvent, refresh]);
+    (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]);
     // HANDLERS
     const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
         setTabValue(newTabValue);
@@ -166,13 +172,12 @@ function EventMembersWidget(inProps) {
         }
         setRefresh(_tabValue);
     }, []);
-    if (!scEvent && !participants.initialized) {
+    if (!scEvent ||
+        !participants.initialized ||
+        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
+        (tabValue === types_1.TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    // RENDER
-    if (!scEvent) {
-        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
-    }
     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: title, defaultMessage: title }) })), (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: participantsCount })), (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: types_1.TabContentEnum.PARTICIPANTS }), hasAllow && ((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: invitedCount })), (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: types_1.TabContentEnum.INVITED })), hasAllow && ((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: requestsCount })), (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.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: types_1.TabContentEnum.REQUESTS }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentEnum.PARTICIPANTS, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentEnum.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: types_1.TabContentEnum.INVITED, className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { tabValue: types_1.TabContentEnum.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     setCount: setInvitedCount

package/lib/cjs/components/Events/Events.js

@@ -145,13 +145,13 @@ function Events(inProps) {
      * On mount, fetches events list
      */
     (0, react_1.useEffect)(() => {
-        if (!contentAvailability) {
+        if (!contentAvailability && !authUserId) {
             return;
         }
         else {
             query === '' && fetchEvents();
         }
-    }, [contentAvailability, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
+    }, [contentAvailability, authUserId, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
     /**
      * Subscriber for pubsub callback
      */
@@ -214,7 +214,6 @@ function Events(inProps) {
     /**
      * Renders events list
      */
-    console.log(location);
     const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore

package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js

@@ -65,8 +65,7 @@ function Appearance(inProps) {
     const { className, onCompleteAction } = props;
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(reducer_2.reducer, (0, reducer_2.getInitialState)(null));
-    let fileInput = (0, react_1.useRef)(null);
-    const [loadingLogo, setLoadingLogo] = (0, react_1.useState)(false);
+    const [loadingLogo, setLoadingLogo] = (0, react_1.useState)('');
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [tab, setTab] = (0, react_1.useState)(0);
     const [updating, setUpdating] = (0, react_1.useState)(false);
@@ -162,15 +161,13 @@ function Appearance(inProps) {
             setUpdating(false);
         }
     });
-    const updateLogoPreference = (name) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        setLoadingLogo(true);
+    const updateLogoPreference = (name, file) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        setLoadingLogo(name);
         const formData = new FormData();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        formData.append(name, fileInput);
+        formData.append(name, file);
         yield api_services_1.PreferenceService.updatePreferences(formData)
             .then((preference) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             dispatch({
                 type: reducer_1.actionTypes.SET_LOGOS,
                 payload: { logos: state.logos.map((l) => (l.name === name ? Object.assign(Object.assign({}, l), { value: preference[name].value }) : l)) }
@@ -178,7 +175,7 @@ function Appearance(inProps) {
             onCompleteAction();
         })
             .catch((e) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
         });
     });
@@ -188,9 +185,9 @@ function Appearance(inProps) {
      * @param name
      */
     const handleUpload = (event, name) => {
-        fileInput = event.target.files[0];
-        if (fileInput) {
-            updateLogoPreference(name);
+        const file = event.target.files[0];
+        if (file) {
+            updateLogoPreference(name, file);
         }
     };
     (0, react_1.useEffect)(() => {
@@ -223,7 +220,7 @@ function Appearance(inProps) {
             colorRef.current.blur();
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.colors.map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.colorContainer }, { children: [(0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }), updatingColor && updatingColor === color.name && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.logos.map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && ((0, jsx_runtime_1.jsxs)(Box_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, 
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.colors.map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.colorContainer }, { children: [(0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }), updatingColor && updatingColor === color.name && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.logos.map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && ((0, jsx_runtime_1.jsxs)(Box_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, 
                                             //className={classes.field}
                                             label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: (_a = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _a === void 0 ? void 0 : _a.value, name: "application_slogan1", onChange: handleChange, InputProps: {
                                                 endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = state.slogans[0].value) === null || _b === void 0 ? void 0 : _b.length) ? 50 - ((_c = state.slogans[0].value) === null || _c === void 0 ? void 0 : _c.length) : 50 }))

package/lib/cjs/shared/EventActionsMenu/index.d.ts

@@ -9,7 +9,7 @@ export interface EventActionsMenuProps extends IconButtonProps {
     /**
      * The event
      */
-    event: SCEventType;
+    event?: SCEventType;
     /**
      * The event id
      */

package/lib/cjs/utils/widget.d.ts

@@ -14,6 +14,7 @@ export declare const actionWidgetTypes: {
     LOAD_PREVIOUS_FAILURE: string;
     SET_RESULTS: string;
     SET_VISIBLE_ITEMS: string;
+    INITIALIZE: string;
     RESET: string;
 };
 /**

package/lib/cjs/utils/widget.js

@@ -18,6 +18,7 @@ exports.actionWidgetTypes = {
     LOAD_PREVIOUS_FAILURE: '_load_previous_failure',
     SET_RESULTS: '_set_results',
     SET_VISIBLE_ITEMS: '_set_visible_items',
+    INITIALIZE: '_initialize',
     RESET: '_reset'
 };
 /**
@@ -56,6 +57,19 @@ function dataWidgetReducer(state, action) {
         case exports.actionWidgetTypes.RESET:
             _state = { isLoadingNext: false, next: null, results: [], count: 0, errorLoadNext: null, initialized: false };
             break;
+        case exports.actionWidgetTypes.INITIALIZE:
+            _state = {
+                cacheKey: action.payload.cacheKey ? action.payload.cacheKey : null,
+                count: action.payload.count ? action.payload.count : 0,
+                results: action.payload.results ? action.payload.results : [],
+                next: action.payload.next ? action.payload.next : null,
+                previous: action.payload.previous ? action.payload.previous : null,
+                isLoadingNext: action.payload.isLoadingNext ? action.payload.isLoadingNext : false,
+                isLoadingPrevious: action.payload.isLoadingPrevious ? action.payload.isLoadingPrevious : false,
+                visibleItems: action.payload.visibleItems ? action.payload.visibleItems : null,
+                initialized: false
+            };
+            break;
     }
     utils_1.LRUCache.set(_state.cacheKey, _state);
     return _state;

package/lib/esm/components/Event/Event.js

@@ -106,7 +106,7 @@ export default function Event(inProps) {
     });
     const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
     // STATE
-    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
     const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
     // CONTEXT
     const scRoutingContext = useSCRouting();

package/lib/esm/components/EventHeader/EventHeader.js

@@ -174,5 +174,5 @@ export default function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ eventId: scEvent.id, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
 }

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

@@ -28,6 +28,10 @@ export interface EventMediaWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit results
+     * @default 10
+     */
     limit?: number;
     /**
      * Other props

package/lib/esm/components/EventMediaWidget/EventMediaWidget.js

@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles';
 import { Box, useThemeProps } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
 import { SCCache, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
-import { Logger } from '@selfcommunity/utils';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { Fragment, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -67,17 +67,22 @@ export default function EventMediaWidget(inProps) {
     const { event, eventId, limit = DEFAULT_PAGINATION_LIMIT, endpointQueryParams = {
         limit,
         offset: DEFAULT_PAGINATION_OFFSET
-    }, cacheStrategy, dialogProps } = props, rest = __rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    }, cacheStrategy = CacheStrategies.CACHE_FIRST, dialogProps } = props, rest = __rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    // HOOKS
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const intl = useIntl();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // STATE
     const [state, dispatch] = useReducer(dataWidgetReducer, {
         isLoadingNext: false,
         next: null,
-        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY),
+        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, event ? event.id : eventId),
         cacheStrategy,
         visibleItems: limit
     }, stateWidgetInitializer);
-    const [medias, setMedias] = useState([]);
-    const [mediasCount, setMediasCount] = useState(0);
+    const [medias, setMedias] = useState(state.results);
+    const [mediasCount, setMediasCount] = useState(state.count);
     const [openDialog, setOpenDialog] = useState(false);
     const [openDialogConfirm, setOpenDialogConfirm] = useState(false);
     const [mediaId, setMediaId] = useState(null);
@@ -86,33 +91,9 @@ export default function EventMediaWidget(inProps) {
     const [showSkeleton, setShowSkeleton] = useState(null);
     // CONTEXT
     const scUserContext = useSCUser();
-    // HOOKS
-    const { scEvent } = useSCFetchEvent({ id: eventId, event });
-    const intl = useIntl();
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // CONSTS
     const hasAllow = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
     const countHiddenMedia = useMemo(() => mediasCount - MEDIAS_TO_SHOW, [mediasCount]);
-    /**
-     * Initialize component
-     * Fetch data only if the component is not initialized and it is not loading data
-     */
-    const _initComponent = useCallback(() => {
-        if (!state.initialized && !state.isLoadingNext) {
-            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
-            EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
-                .then((payload) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
-                setMedias(payload.results);
-                setMediasCount(payload.count);
-            })
-                .catch((error) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                Logger.error(SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.isLoadingNext, state.initialized, scEvent, dispatch, setMedias, setMediasCount]);
     const _fetchNext = useCallback((index) => {
         if (mediasCount > medias.length && index >= 6 && !state.isLoadingNext && state.next) {
             setPreview(index);
@@ -210,25 +191,55 @@ export default function EventMediaWidget(inProps) {
     // EFFECTS
     useEffect(() => {
         let _t;
-        if (scUserContext.user && scEvent) {
+        if (scUserContext.user &&
+            scEvent &&
+            !state.initialized &&
+            Boolean((eventId !== undefined && scEvent.id === eventId) || (event && scEvent.id === event.id))) {
             _t = setTimeout(_initComponent);
             return () => {
                 clearTimeout(_t);
             };
         }
-    }, [scUserContext.user, scEvent]);
+    }, [scUserContext.user, scEvent, state.initialized]);
+    useEffect(() => {
+        if (state.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
+            dispatch({ type: actionWidgetTypes.RESET, payload: {} });
+        }
+    }, [state.initialized, scEvent, eventId, event]);
+    /**
+     * Initialize component
+     * Fetch data only if the component is not initialized and it is not loading data
+     */
+    const _initComponent = useCallback(() => {
+        if (!state.isLoadingNext) {
+            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+            EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
+                .then((payload) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+                setMedias(payload.results);
+                setMediasCount(payload.count);
+            })
+                .catch((error) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [state.isLoadingNext, scEvent, eventId, dispatch, setMedias, setMediasCount]);
     useEffect(() => {
         if (isMobile && openDialog && state.next) {
             handleNext();
         }
     }, [isMobile, openDialog, state.next]);
     // RENDER
-    if (!scEvent || (state.initialized && mediasCount === 0 && !hasAllow)) {
-        return _jsx(HiddenPlaceholder, {});
-    }
-    if (!state.initialized || (state.isLoadingNext && mediasCount === 0)) {
+    if (!scEvent ||
+        !state.initialized ||
+        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
+        (state.isLoadingNext && !state.initialized)) {
         return _jsx(SkeletonComponent, {});
     }
+    if (state.initialized && state.count === 0 && !hasAllow) {
+        return _jsx(HiddenPlaceholder, {});
+    }
     return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [_jsx(CardHeader, { title: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && _jsx(TriggerButton, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), _jsx(Divider, {}), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && _jsx(EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => (_jsx(Box, Object.assign({ onClick: () => handleOpenLightbox(i), sx: {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {

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

@@ -35,6 +35,9 @@ export interface EventMembersWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit items
+     */
     limit?: number;
     /**
      * Other props