@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
137 lines (136 loc) • 8.66 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, List, ListItem, styled, Typography } from '@mui/material';
import { Endpoints, http } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSnackbar } from 'notistack';
import PubSub from 'pubsub-js';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
import BaseDialog from '../../shared/BaseDialog';
import InfiniteScroll from '../../shared/InfiniteScroll';
import { actionWidgetTypes } from '../../utils/widget';
import AcceptRequestUserEventButton from '../AcceptRequestUserEventButton';
import EventInviteButton from '../EventInviteButton';
import InviteUserEventButton from '../InviteUserEventButton';
import User, { UserSkeleton } from '../User';
import { PREFIX } from './constants';
import { TabContentType } from './types';
const classes = {
actionButton: `${PREFIX}-action-button`,
eventButton: `${PREFIX}-event-button`,
dialogRoot: `${PREFIX}-dialog-root`,
infiniteScroll: `${PREFIX}-infinite-scroll`,
endMessage: `${PREFIX}-end-message`
};
const DialogRoot = styled(BaseDialog, {
name: PREFIX,
slot: 'DialogRoot',
overridesResolver: (_props, styles) => styles.dialogRoot
})(() => ({}));
export default function TabContentComponent(props) {
// PROPS
const { tabValue, state, dispatch, userProps, dialogProps, actionProps, handleRefresh } = props;
// STATE
const [openDialog, setOpenDialog] = useState(false);
// REFS
const updatesInvited = useRef(null);
const updatesParticipants = useRef(null);
// HOOKS
const { enqueueSnackbar } = useSnackbar();
// CONSTS
const users = useMemo(() => (tabValue === TabContentType.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
// EFFECTS
useEffect(() => {
updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`, handleToggleMember);
return () => {
updatesInvited.current && PubSub.unsubscribe(updatesInvited.current);
updatesParticipants.current && PubSub.unsubscribe(updatesParticipants.current);
};
}, []);
useEffect(() => {
if (openDialog && state.next && state.initialized) {
handleNext();
}
}, [openDialog, state.next, state.initialized]);
// HANDLERS
/**
* Handles pagination
*/
const handleNext = useCallback(() => {
dispatch({ type: actionWidgetTypes.LOADING_NEXT });
http
.request({
url: state.next,
method: Endpoints.UserSuggestion.method
})
.then((res) => {
dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
})
.catch((error) => {
Logger.error(SCOPE_SC_UI, error);
});
}, [state.next, state.isLoadingNext, state.initialized, dispatch]);
const handleToggleDialogOpen = useCallback(() => {
setOpenDialog((prev) => !prev);
}, [setOpenDialog]);
const handleToggleMember = useCallback(() => {
handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentType.PARTICIPANTS);
}, [handleRefresh]);
const handleInviteMember = useCallback(() => {
handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentType.INVITED);
}, [handleRefresh]);
const getActionsComponent = useCallback((userId) => {
if (tabValue === TabContentType.INVITED && actionProps) {
const _handleInvitations = (invited) => {
var _a, _b;
if (invited) {
(_a = actionProps.setCount) === null || _a === void 0 ? void 0 : _a.call(actionProps, (prev) => prev - 1);
}
else {
(_b = actionProps.setCount) === null || _b === void 0 ? void 0 : _b.call(actionProps, (prev) => prev + 1);
}
};
return _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, handleInvitations: _handleInvitations });
}
else if (tabValue === TabContentType.REQUESTS && actionProps) {
const handleConfirm = (id) => {
if (id) {
actionProps.setCount((prev) => prev - 1);
actionProps.setUsers((prev) => prev.filter((user) => user.id !== id));
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.acceptRequestUserEventButton.snackbar.success", defaultMessage: "ui.acceptRequestUserEventButton.snackbar.success" }), {
variant: 'success',
autoHideDuration: 3000
});
}
else {
enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
variant: 'error',
autoHideDuration: 3000
});
}
};
return _jsx(AcceptRequestUserEventButton, { event: actionProps.scEvent, userId: userId, handleConfirm: handleConfirm });
}
return undefined;
}, [tabValue, actionProps]);
if (tabValue === TabContentType.PARTICIPANTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noParticipants", defaultMessage: "ui.eventMembersWidget.noParticipants" }) })));
}
else if (tabValue === TabContentType.INVITED && state.count === 0 && actionProps) {
const date = actionProps.scEvent.end_date || actionProps.scEvent.start_date;
const disabled = new Date(date).getTime() < new Date().getTime();
const handleInvitations = (invited) => {
if (invited) {
handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(tabValue);
}
};
return (_jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations, disabled: disabled }));
}
else if (tabValue === TabContentType.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
}
return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: true }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
}