@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
151 lines (146 loc) • 7.38 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Avatar, Box, Button, CardContent } from '@mui/material';
import PubSub from 'pubsub-js';
import { useThemeProps } from '@mui/system';
import { SCNotificationTopicType, SCNotificationTypologyType } from '@selfcommunity/types';
import { CacheStrategies } from '@selfcommunity/utils';
import { SCPreferences, useSCFetchBroadcastMessages, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import Message from './Message';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import { MessageSkeleton } from './Skeleton';
import Widget from '../Widget';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-root`,
boxLoadMore: `${PREFIX}-box-load-more`,
avatarLoadMore: `${PREFIX}-avatar-load-more`,
buttonLoadMore: `${PREFIX}-button-load-more`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, SCPreferences.TEXT_APPLICATION_NAME];
/**
* > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.
*
*
* This component handles message broadcasts. It initially displays unseen messages. If all messages have been viewed it will show at most one message.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/BroadcastMessages)
#### Import
```jsx
import {BroadcastMessages} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCBroadcastMessages` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCBroadcastMessages-root|Styles applied to the root element.|
|boxLoadMore|.SCBroadcastMessages-box-load-more|Styles applied to load more box.|
|avatarLoadMore|.SCBroadcastMessages-avatar-load-more|Styles applied to load more avatar.|
|buttonLoadMore|.SCBroadcastMessages-button-load-more|Styles applied to load more button.|
* @param inProps
*/
export default function BroadcastMessages(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { id = 'broadcast_messages', className = null, MessageProps = {}, subscriptionChannel = `${SCNotificationTopicType.INTERACTION}.${SCNotificationTypologyType.NOTIFICATION_BANNER}`, disableLoader = false, viewAllMessages = false, cacheStrategy = CacheStrategies.NETWORK_ONLY, onStateChange, onHeightChange } = props, rest = __rest(props, ["id", "className", "MessageProps", "subscriptionChannel", "disableLoader", "viewAllMessages", "cacheStrategy", "onStateChange", "onHeightChange"]);
// CONTEXT
const scUserContext = useSCUser();
// Compute preferences
const scPreferences = useSCPreferences();
const preferences = useMemo(() => {
const _preferences = {};
PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
return _preferences;
}, [scPreferences.preferences]);
// REFS
const refreshSubscription = useRef(null);
// STATE
const [viewAll, setViewAll] = useState(viewAllMessages);
const { data, loading, fetchMessages, setMessages } = useSCFetchBroadcastMessages({ cacheStrategy });
// CONST
const authUserId = scUserContext.user ? scUserContext.user.id : null;
const unViewedMessages = data.results.filter((m) => !m.viewed_at);
const viewedMessageCounter = data.count - unViewedMessages.length + 1;
/**
* Dispose a broadcast message
* @param message
*/
const handleDisposeMessage = (message) => {
const _data = setMessages(data.results.filter((m) => m.id != message.id));
if (_data.results.length <= 1) {
fetchMessages(true);
}
};
/**
* Handle mark read message
* @param message
*/
const handleMarkRead = (message) => {
const _data = [...data.results];
data.results.map((m, i) => {
if (m.id === message.id) {
_data[i] = Object.assign(Object.assign({}, m), { viewed_at: new Date() });
}
});
scUserContext.setUnseenNotificationBannersCounter(scUserContext.user.unseen_notification_banners_counter - 1);
setMessages(_data);
};
/**
* if messages.length < unViewedMessages.length show other message
* if the difference between the 2 arrays is small fetch remote messages
*/
const fetchOtherMessages = useMemo(() => () => {
setViewAll(true);
if ((data.next && viewAll) || (data.next && !viewAll && viewedMessageCounter <= 2)) {
fetchMessages();
}
}, [setViewAll, viewAll, viewedMessageCounter, data.next, fetchMessages]);
/**
* On mount, fetch first page of notifications
*/
useEffect(() => {
let _t;
if (authUserId !== null && cacheStrategy !== CacheStrategies.CACHE_FIRST) {
// eslint-disable-next-line @typescript-eslint/no-misused-promises
_t = setTimeout(fetchMessages);
return () => {
_t && clearTimeout(_t);
};
}
}, [authUserId]);
/**
* Notification subscriber
*/
const subscriber = (msg, data) => {
fetchMessages(true);
setViewAll(false);
};
/**
* When a ws notification arrives, update data
*/
useEffect(() => {
refreshSubscription.current = PubSub.subscribe(subscriptionChannel, subscriber);
return () => {
PubSub.unsubscribe(refreshSubscription.current);
};
}, []);
/**
* Feed virtual update
*/
useEffect(() => {
onStateChange && onStateChange({ viewAllMessages: viewAll, cacheStrategy: CacheStrategies.CACHE_FIRST, disableLoader: true });
onHeightChange && onHeightChange();
}, [data.results.length, loading, viewAll, cacheStrategy]);
const messagesToShow = [...unViewedMessages, ...data.results.slice(unViewedMessages.length, viewAll ? viewedMessageCounter : 1)];
return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [messagesToShow.map((message, index) => (_jsx(Box, { children: _jsx(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead })) }, index))), loading && !disableLoader && _jsx(MessageSkeleton, {}), loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && (_jsx(Widget, Object.assign({ className: classes.boxLoadMore }, { children: _jsx(CardContent, { children: _jsxs(Button, Object.assign({ variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } }, { children: [_jsx(Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), _jsx(FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })] })) }) })))] })));
}