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

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

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

@@ -11,7 +11,6 @@ import { FormattedMessage } from 'react-intl';
 import 'swiper/css';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
@@ -60,10 +59,10 @@ export default function EventMembersWidget(inProps) {
         cacheStrategy,
         visibleItems: limit
     }, stateWidgetInitializer);
-    const [participantsCount, setParticipantsCount] = useState(0);
-    const [invitedCount, setInvitedCount] = useState(0);
-    const [requestsCount, setRequestsCount] = useState(0);
-    const [requestsUsers, setRequestsUsers] = useState([]);
+    const [participantsCount, setParticipantsCount] = useState(participants.count);
+    const [invitedCount, setInvitedCount] = useState(invited.count);
+    const [requestsCount, setRequestsCount] = useState(requests.count);
+    const [requestsUsers, setRequestsUsers] = useState(requests.results);
     const [tabValue, setTabValue] = useState(TabContentEnum.PARTICIPANTS);
     const [refresh, setRefresh] = useState(null);
     // CONTEXT
@@ -97,7 +96,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [participants.isLoadingNext, participants.initialized, scEvent]);
+    }, [participants.isLoadingNext, participants.initialized, scEvent, dispatchParticipants, setParticipantsCount]);
     const _initInvited = useCallback(() => {
         if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
             dispatchInvited({ type: actionWidgetTypes.LOADING_NEXT });
@@ -111,7 +110,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [invited.isLoadingNext, invited.initialized, scUserContext.user, scEvent]);
+    }, [invited.isLoadingNext, invited.initialized, scEvent, dispatchInvited, setInvitedCount]);
     const _initRequests = useCallback(() => {
         if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
             dispatchRequests({ type: actionWidgetTypes.LOADING_NEXT });
@@ -126,7 +125,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [requests.isLoadingNext, requests.initialized, scUserContext.user, scEvent]);
+    }, [requests.isLoadingNext, requests.initialized, scEvent, dispatchRequests, setRequestsCount, setRequestsUsers]);
     // EFFECTS
     useEffect(() => {
         let _t;
@@ -151,6 +150,13 @@ export default function EventMembersWidget(inProps) {
             };
         }
     }, [scUserContext.user, scEvent, refresh]);
+    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]);
     // HANDLERS
     const handleTabChange = useCallback((_evt, newTabValue) => {
         setTabValue(newTabValue);
@@ -164,13 +170,12 @@ export default 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 === TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
         return _jsx(Skeleton, {});
     }
-    // RENDER
-    if (!scEvent) {
-        return _jsx(HiddenPlaceholder, {});
-    }
     return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participantsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: TabContentEnum.PARTICIPANTS }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: TabContentEnum.INVITED })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: TabContentEnum.REQUESTS }))] })), _jsx(TabPanel, Object.assign({ value: TabContentEnum.PARTICIPANTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentEnum.INVITED, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     setCount: setInvitedCount

package/lib/esm/components/Events/Events.js

@@ -142,13 +142,13 @@ export default function Events(inProps) {
      * On mount, fetches events list
      */
     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
      */
@@ -211,7 +211,6 @@ export default function Events(inProps) {
     /**
      * Renders events list
      */
-    console.log(location);
     const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -142,7 +142,7 @@ export default function NavigationToolbar(inProps) {
                 (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
                         value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
-                }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
+                }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
                 }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
     return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {

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

@@ -63,8 +63,7 @@ export default function Appearance(inProps) {
     const { className, onCompleteAction } = props;
     // STATE
     const [state, dispatch] = useReducer(reducer, getInitialState(null));
-    let fileInput = useRef(null);
-    const [loadingLogo, setLoadingLogo] = useState(false);
+    const [loadingLogo, setLoadingLogo] = useState('');
     const [anchorEl, setAnchorEl] = useState(null);
     const [tab, setTab] = useState(0);
     const [updating, setUpdating] = useState(false);
@@ -160,15 +159,13 @@ export default function Appearance(inProps) {
             setUpdating(false);
         }
     });
-    const updateLogoPreference = (name) => __awaiter(this, void 0, void 0, function* () {
-        setLoadingLogo(true);
+    const updateLogoPreference = (name, file) => __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 PreferenceService.updatePreferences(formData)
             .then((preference) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             dispatch({
                 type: actionTypes.SET_LOGOS,
                 payload: { logos: state.logos.map((l) => (l.name === name ? Object.assign(Object.assign({}, l), { value: preference[name].value }) : l)) }
@@ -176,7 +173,7 @@ export default function Appearance(inProps) {
             onCompleteAction();
         })
             .catch((e) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             Logger.error(SCOPE_SC_UI, e);
         });
     });
@@ -186,9 +183,9 @@ export default 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);
         }
     };
     useEffect(() => {
@@ -221,7 +218,7 @@ export default function Appearance(inProps) {
             colorRef.current.blur();
         }
     };
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsxs(Box, Object.assign({ className: classes.colorContainer }, { children: [_jsx(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 && (_jsx(CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, 
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsxs(Box, Object.assign({ className: classes.colorContainer }, { children: [_jsx(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 && (_jsx(CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(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: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(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: _jsx(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/esm/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/esm/shared/EventActionsMenu/index.js

@@ -1,21 +1,22 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import { EventService } from '@selfcommunity/api-services';
-import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
+import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { copyTextToClipboard } from '@selfcommunity/utils';
+import classNames from 'classnames';
 import { enqueueSnackbar } from 'notistack';
 import PubSub from 'pubsub-js';
-import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import { useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import EventForm from '../../components/EventForm';
+import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import { checkEventFinished } from '../../utils/events';
 const PREFIX = 'SCEventActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -82,12 +83,7 @@ export default function EventActionsMenu(inProps) {
     const scUserContext = useSCUser();
     const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
     const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
-    const isEventFinished = useMemo(() => {
-        if (scEvent && !scEvent.running) {
-            return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
-        }
-        return false;
-    }, [scEvent]);
+    const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -153,7 +149,7 @@ export default function EventActionsMenu(inProps) {
     const renderList = () => {
         return [
             _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GET_EVENT_LINK) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.link", defaultMessage: "ui.shared.eventActionsMenu.item.link" })] }), "link"),
-            _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar"),
+            !isEventFinished && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar")),
             isEventAdmin &&
                 !isEventFinished && [
                 _jsx(Divider, {}, "divider"),

package/lib/esm/utils/events.d.ts

@@ -0,0 +1,2 @@
+import { SCEventType } from '@selfcommunity/types';
+export declare function checkEventFinished(event: SCEventType | null): boolean;

package/lib/esm/utils/events.js

@@ -0,0 +1,6 @@
+export function checkEventFinished(event) {
+    if (event && !event.running) {
+        return new Date().getTime() > new Date(event.end_date || event.start_date).getTime();
+    }
+    return false;
+}

package/lib/esm/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/esm/utils/widget.js

@@ -15,6 +15,7 @@ export const actionWidgetTypes = {
     LOAD_PREVIOUS_FAILURE: '_load_previous_failure',
     SET_RESULTS: '_set_results',
     SET_VISIBLE_ITEMS: '_set_visible_items',
+    INITIALIZE: '_initialize',
     RESET: '_reset'
 };
 /**
@@ -53,6 +54,19 @@ export function dataWidgetReducer(state, action) {
         case actionWidgetTypes.RESET:
             _state = { isLoadingNext: false, next: null, results: [], count: 0, errorLoadNext: null, initialized: false };
             break;
+        case 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;
     }
     LRUCache.set(_state.cacheKey, _state);
     return _state;