@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
178 lines (169 loc) • 10 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { LoadingButton } from '@mui/lab';
import { Box, Button, Checkbox, CircularProgress, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
import { CacheStrategies, Logger } from '@selfcommunity/utils';
import classNames from 'classnames';
import PubSub from 'pubsub-js';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
const PREFIX = 'SCEventSubscribeButton';
const classes = {
requestRoot: `${PREFIX}-request-root`,
selectRoot: `${PREFIX}-select-root`,
drawerRoot: `${PREFIX}-drawer-root`,
menuRoot: `${PREFIX}-menu-root`,
paper: `${PREFIX}-paper`,
item: `${PREFIX}-item`,
going: `${PREFIX}-going`,
notGoing: `${PREFIX}-not-going`
};
const options = [
{
value: SCEventSubscriptionStatusType.GOING,
label: _jsx(FormattedMessage, { id: "ui.eventSubscribeButton.going", defaultMessage: "ui.eventSubscribeButton.going" })
},
{
value: SCEventSubscriptionStatusType.NOT_GOING,
label: _jsx(FormattedMessage, { id: "ui.eventSubscribeButton.notGoing", defaultMessage: "ui.eventSubscribeButton.notGoing" })
}
];
const RequestRoot = styled(LoadingButton, {
name: PREFIX,
slot: 'RequestRoot'
})(() => ({}));
const SelectRoot = styled(Button, {
name: PREFIX,
slot: 'SelectRoot'
})(() => ({}));
const SwipeableDrawerRoot = styled(SwipeableDrawer, {
name: PREFIX,
slot: 'DrawerRoot'
})(() => ({}));
const MenuRoot = styled(Menu, {
name: PREFIX,
slot: 'MenuRoot'
})(() => ({}));
/**
* > API documentation for the Community-JS Event Subscribe Button component. Learn about the available props and the CSS API.
#### Import
```jsx
import {EventSubscribeButton} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCEventSubscribeButton` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCEventSubscribeButton-root|Styles applied to the root element.|
* @param inProps
*/
export default function EventSubscribeButton(inProps) {
var _a;
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, eventId, event, user, onSubscribe } = props, rest = __rest(props, ["className", "eventId", "event", "user", "onSubscribe"]);
// STATE
const [status, setStatus] = useState(undefined);
const [loading, setLoading] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
// CONTEXT
const scContext = useSCContext();
const scUserContext = useSCUser();
const scEventsManager = scUserContext.managers.events;
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// CONST
const authUserId = scUserContext.user ? scUserContext.user.id : null;
const { scEvent, setSCEvent } = useSCFetchEvent({
id: eventId,
event,
cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
});
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]);
// HANDLERS
const handleOpen = useCallback((event) => {
setAnchorEl(event.currentTarget);
}, [setAnchorEl]);
const handleClose = useCallback(() => {
setAnchorEl(null);
}, [setAnchorEl]);
useEffect(() => {
/**
* Call scEventsManager.subscriptionStatus inside an effect
* to avoid warning rendering child during update parent state
*/
if (authUserId) {
setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent));
}
}, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
const toggleEventAttendance = useCallback((eventStatus) => {
setLoading(true);
const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
!(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) ||
(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
const toggleAction = isGoing ? scEventsManager.toggleEventAttendance(scEvent) : scEventsManager.toggleEventNonattendance(scEvent);
toggleAction
.then((data) => {
onSubscribe ? onSubscribe(data) : setSCEvent(data);
setLoading(false);
PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`);
})
.catch((e) => {
Logger.error(SCOPE_SC_UI, e);
});
}, [scEvent, scEventsManager, onSubscribe, setLoading]);
const handleToggleAction = useCallback((event) => {
setAnchorEl(null);
if (!scUserContext.user) {
scContext.settings.handleAnonymousAction();
}
else if (status !== undefined) {
toggleEventAttendance(event.target.value);
}
}, [scUserContext.user, status, scContext.settings]);
function renderMenuItems() {
return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item, disabled: loading }, { children: _jsx(FormControlLabel, { label: option.label, control: loading ? (_jsx(CircularProgress, { color: "primary", size: 20 })) : (_jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })), labelPlacement: "start" }) }), option.value))) }));
}
/**
* Get current translated status
*/
const getStatus = useMemo(() => {
let _status;
switch (status) {
case SCEventSubscriptionStatusType.REQUESTED:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.waitingApproval", id: "ui.eventSubscribeButton.waitingApproval" });
break;
case SCEventSubscriptionStatusType.GOING:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.going", id: "ui.eventSubscribeButton.going" });
break;
case SCEventSubscriptionStatusType.INVITED:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.accept", id: "ui.eventSubscribeButton.accept" });
break;
case SCEventSubscriptionStatusType.NOT_GOING:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.notGoing", id: "ui.eventSubscribeButton.notGoing" });
break;
default:
(scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC || status === SCEventSubscriptionStatusType.SUBSCRIBED
? (_status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.label", id: "ui.eventSubscribeButton.label" }))
: (_status = (_jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.requestParticipation", id: "ui.eventSubscribeButton.requestParticipation" })));
break;
}
return _status;
}, [status, scEvent]);
if (!scEvent || (isEventAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isEventAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
return null;
}
return (_jsx(_Fragment, { children: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE && (!status || status === SCEventSubscriptionStatusType.REQUESTED) ? (_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, onClick: handleToggleAction }, rest, { children: getStatus }))) : (_jsxs(_Fragment, { children: [_jsx(SelectRoot, Object.assign({ className: classNames(classes.selectRoot, className, { [classes.going]: status && status === SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: _jsx(Icon, { children: open ? 'expand_less' : 'expand_more' }), startIcon: status &&
status !== SCEventSubscriptionStatusType.SUBSCRIBED && (_jsx(Icon, { children: status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderMenuItems() }))) }))] })) }));
}