@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
147 lines (138 loc) • 6.61 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import { CacheStrategies, Logger } from '@selfcommunity/utils';
import { useSCContext, useSCFetchGroup, useSCUser } from '@selfcommunity/react-core';
import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
import { LoadingButton } from '@mui/lab';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
import PubSub from 'pubsub-js';
const PREFIX = 'SCGroupSubscribeButton';
const classes = {
root: `${PREFIX}-root`
};
const Root = styled(LoadingButton, {
name: PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
/**
* > API documentation for the Community-JS Group Subscribe Button component. Learn about the available props and the CSS API.
#### Import
```jsx
import {GroupSubscribeButton} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCGroupSubscribeButton` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCGroupSubscribeButton-root|Styles applied to the root element.|
* @param inProps
*/
export default function GroupSubscribeButton(inProps) {
var _a;
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, groupId, group, user, onSubscribe } = props, rest = __rest(props, ["className", "groupId", "group", "user", "onSubscribe"]);
// STATE
const [status, setStatus] = useState(null);
// CONTEXT
const scContext = useSCContext();
const scUserContext = useSCUser();
const scGroupsManager = scUserContext.managers.groups;
// CONST
const authUserId = scUserContext.user ? scUserContext.user.id : null;
const { scGroup } = useSCFetchGroup({
id: groupId,
group,
cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
});
const isGroupAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
useEffect(() => {
/**
* Call scGroupsManager.subscriptionStatus inside an effect
* to avoid warning rendering child during update parent state
*/
if (authUserId) {
setStatus(scGroupsManager.subscriptionStatus(scGroup));
}
}, [authUserId, scGroupsManager.subscriptionStatus, scGroup]);
/**
* Notify UI when a member is added to a group
* @param group
* @param user
*/
function notifyChanges(group, user) {
if (group && user) {
PubSub.publish(`${SCTopicType.GROUP}.${SCGroupEventType.ADD_MEMBER}`, { group, user });
}
}
const subscribe = (user) => {
scGroupsManager
.subscribe(scGroup, user === null || user === void 0 ? void 0 : user.id)
.then(() => {
const _status = scGroup.privacy === SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== SCGroupSubscriptionStatusType.INVITED
? SCGroupSubscriptionStatusType.REQUESTED
: SCGroupSubscriptionStatusType.SUBSCRIBED;
notifyChanges(scGroup, user);
onSubscribe && onSubscribe(scGroup, _status);
})
.catch((e) => {
Logger.error(SCOPE_SC_UI, e);
});
};
const unsubscribe = () => {
scGroupsManager
.unsubscribe(scGroup)
.then(() => {
onSubscribe && onSubscribe(scGroup, null);
})
.catch((e) => {
Logger.error(SCOPE_SC_UI, e);
});
};
const handleSubscribeAction = () => {
if (!scUserContext.user) {
scContext.settings.handleAnonymousAction();
}
else {
status === SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user) : subscribe();
}
};
/**
* Get current translated status
*/
const getStatus = useMemo(() => {
let _status;
switch (status) {
case SCGroupSubscriptionStatusType.REQUESTED:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.waitingApproval", id: "ui.groupSubscribeButton.waitingApproval" });
break;
case SCGroupSubscriptionStatusType.SUBSCRIBED:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.exit", id: "ui.groupSubscribeButton.exit" });
break;
case SCGroupSubscriptionStatusType.INVITED:
_status = _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" });
break;
default:
scGroup.privacy === SCGroupPrivacyType.PUBLIC
? (_status = _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.enter", id: "ui.groupSubscribeButton.enter" }))
: (_status = _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.requestAccess", id: "ui.groupSubscribeButton.requestAccess" }));
break;
}
return _status;
}, [status, scGroup]);
if (!scGroup || (isGroupAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isGroupAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
return null;
}
return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === SCGroupSubscriptionStatusType.REQUESTED, className: classNames(classes.root, className) }, rest, { children: isGroupAdmin ? _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus })));
}