@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
194 lines (193 loc) • 12.6 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TabContext, TabList, TabPanel } from '@mui/lab';
import { CardContent, Stack, Tab, Typography, useThemeProps } from '@mui/material';
import { styled } from '@mui/system';
import { EventService } from '@selfcommunity/api-services';
import { SCCache, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
import { Logger } from '@selfcommunity/utils';
import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import 'swiper/css';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
import Widget from '../Widget';
import { PREFIX } from './constants';
import Skeleton from './Skeleton';
import TabContentComponent from './TabContentComponent';
import { TabContentType } from './types';
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
const classes = {
root: `${PREFIX}-root`,
content: `${PREFIX}-content`,
title: `${PREFIX}-title`,
tabsWrapper: `${PREFIX}-tabs-wrapper`,
tabLabelWrapper: `${PREFIX}-tab-label-wrapper`,
tabPanel: `${PREFIX}-tab-panel`
};
const Root = styled(Widget, {
name: PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function EventMembersWidget(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { event, eventId, userProps = {}, endpointQueryParams = { limit: 5, offset: DEFAULT_PAGINATION_OFFSET }, cacheStrategy, dialogProps, limit = 5 } = props, rest = __rest(props, ["event", "eventId", "userProps", "endpointQueryParams", "cacheStrategy", "dialogProps", "limit"]);
// STATE
const [participants, dispatchParticipants] = useReducer(dataWidgetReducer, {
isLoadingNext: false,
next: null,
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_PARTECIPANTS_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
cacheStrategy,
visibleItems: limit
}, stateWidgetInitializer);
const [invited, dispatchInvited] = useReducer(dataWidgetReducer, {
isLoadingNext: false,
next: null,
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
cacheStrategy,
visibleItems: limit
}, stateWidgetInitializer);
const [requests, dispatchRequests] = useReducer(dataWidgetReducer, {
isLoadingNext: false,
next: null,
cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_REQUESTS_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
cacheStrategy,
visibleItems: limit
}, stateWidgetInitializer);
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(TabContentType.PARTICIPANTS);
const [refresh, setRefresh] = useState(null);
// CONTEXT
const scUserContext = useSCUser();
// HOOKS
const { scEvent } = useSCFetchEvent({ id: eventId, event });
// 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 title = useMemo(() => {
switch (tabValue) {
case TabContentType.REQUESTS:
return 'ui.eventMembersWidget.requests';
case TabContentType.INVITED:
return 'ui.eventMembersWidget.invited';
case TabContentType.PARTICIPANTS:
default:
return 'ui.eventMembersWidget.participants';
}
}, [tabValue]);
// CALLBACKS
const _initParticipants = useCallback(() => {
if (!participants.initialized && !participants.isLoadingNext) {
dispatchParticipants({ type: actionWidgetTypes.LOADING_NEXT });
EventService.getUsersGoingToEvent(scEvent.id, Object.assign({}, endpointQueryParams))
.then((payload) => {
dispatchParticipants({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
setParticipantsCount(payload.count);
})
.catch((error) => {
dispatchParticipants({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
Logger.error(SCOPE_SC_UI, error);
});
}
}, [participants.isLoadingNext, participants.initialized, scEvent, endpointQueryParams, dispatchParticipants, setParticipantsCount]);
const _initInvited = useCallback(() => {
if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
dispatchInvited({ type: actionWidgetTypes.LOADING_NEXT });
EventService.getEventInvitedUsers(scEvent.id, Object.assign({}, endpointQueryParams))
.then((payload) => {
dispatchInvited({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
setInvitedCount(payload.count);
})
.catch((error) => {
dispatchInvited({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
Logger.error(SCOPE_SC_UI, error);
});
}
}, [invited.isLoadingNext, invited.initialized, scEvent, hasAllow, endpointQueryParams, dispatchInvited, setInvitedCount]);
const _initRequests = useCallback(() => {
if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
dispatchRequests({ type: actionWidgetTypes.LOADING_NEXT });
EventService.getEventWaitingApprovalSubscribers(scEvent.id, Object.assign({}, endpointQueryParams))
.then((payload) => {
dispatchRequests({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
setRequestsCount(payload.count);
setRequestsUsers(payload.results);
})
.catch((error) => {
dispatchRequests({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
Logger.error(SCOPE_SC_UI, error);
});
}
}, [requests.isLoadingNext, requests.initialized, scEvent, hasAllow, endpointQueryParams, dispatchRequests, setRequestsCount, setRequestsUsers]);
// EFFECTS
useEffect(() => {
let _t;
if (scUserContext.user && scEvent) {
_t = setTimeout(() => {
if (refresh === TabContentType.PARTICIPANTS) {
_initParticipants();
setRefresh(null);
}
else if (refresh === TabContentType.INVITED) {
_initInvited();
setRefresh(null);
}
else {
_initParticipants();
_initInvited();
_initRequests();
}
});
return () => {
clearTimeout(_t);
};
}
}, [scUserContext.user, scEvent, refresh, _initParticipants, _initInvited, _initRequests]);
useEffect(() => {
if (participants.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
dispatchParticipants({ type: actionWidgetTypes.RESET, payload: {} });
dispatchRequests({ type: actionWidgetTypes.RESET, payload: {} });
dispatchInvited({ type: actionWidgetTypes.RESET, payload: {} });
}
}, [participants.initialized, scEvent, eventId, event, dispatchParticipants, dispatchInvited, dispatchRequests]);
// HANDLERS
const handleTabChange = useCallback((_evt, newTabValue) => {
setTabValue(newTabValue);
}, [setTabValue]);
const handleRefresh = useCallback((_tabValue) => {
if (_tabValue === TabContentType.PARTICIPANTS) {
dispatchParticipants({ type: actionWidgetTypes.RESET });
}
else if (_tabValue === TabContentType.INVITED) {
dispatchInvited({ type: actionWidgetTypes.RESET });
}
setRefresh(_tabValue);
}, [dispatchParticipants, dispatchInvited, setRefresh]);
if (!scUserContext.user) {
return _jsx(HiddenPlaceholder, {});
}
if (!scEvent ||
!participants.initialized ||
(scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
(tabValue === TabContentType.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
return _jsx(Skeleton, {});
}
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: TabContentType.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: TabContentType.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: TabContentType.REQUESTS }))] })), _jsx(TabPanel, Object.assign({ value: TabContentType.PARTICIPANTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentType.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentType.INVITED, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentType.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
scEvent,
setCount: setInvitedCount
}, handleRefresh: handleRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentType.REQUESTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentType.REQUESTS, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
scEvent,
count: requestsCount,
setCount: setRequestsCount,
users: requestsUsers,
setUsers: setRequestsUsers
}, handleRefresh: handleRefresh }) })))] }))] })) })));
}