@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
243 lines (234 loc) • 12.5 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Button, Card, CardContent, Icon, IconButton, List, TextField, useTheme } from '@mui/material';
import PubSub from 'pubsub-js';
import { SCNotificationTopicType, SCNotificationTypologyType, SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
import PrivateMessageSnippetsSkeleton from './Skeleton';
import PrivateMessageSnippetItem from '../PrivateMessageSnippetItem';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { SCUserContext, useSCFetchPrivateMessageSnippets } from '@selfcommunity/react-core';
import { CacheStrategies } from '@selfcommunity/utils';
import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
import useMediaQuery from '@mui/material/useMediaQuery';
import { PREFIX } from './constants';
const messages = defineMessages({
placeholder: {
id: 'ui.privateMessage.snippets.searchBar.placeholder',
defaultMessage: 'ui.privateMessage.snippets.searchBar.placeholder'
}
});
const classes = {
root: `${PREFIX}-root`,
searchBar: `${PREFIX}-search-bar`,
icon: `${PREFIX}-icon`,
input: `${PREFIX}-input`,
clear: `${PREFIX}-clear`,
newMessageButton: `${PREFIX}-new-message-button`
};
const Root = styled(Card, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS PrivateMessageSnippets component. Learn about the available props and the CSS API.
*
*
* This component renders the list of conversations preview between users.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Snippets)
#### Import
```jsx
import {PrivateMessageSnippets} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCPrivateMessageSnippets` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCPrivateMessageSnippets-root|Styles applied to the root element.|
|icon|.SCPrivateMessageSnippets-icon|Styles applied to the search icon element.|
|input|.SCPrivateMessageSnippets-input|Styles applied to the search input element.|
|clear|.SCPrivateMessageSnippets-clear|Styles applied to the search bar clear icon element.|
|searchBar|.SCPrivateMessageSnippets-searchBar|Styles applied to the search bar element.|
|newMessageButton|.SCPrivateMessageSnippets-new-message-button|Styles applied to new message button element.|
* @param inProps
*/
export default function PrivateMessageSnippets(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className = null, threadObj = null, type = null, snippetActions, clearSearch } = props, rest = __rest(props, ["className", "threadObj", "type", "snippetActions", "clearSearch"]);
// STATE
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const { data, updateSnippets } = useSCFetchPrivateMessageSnippets({ cacheStrategy: CacheStrategies.CACHE_FIRST });
const [search, setSearch] = useState('');
const isObj = typeof threadObj === 'object';
const scUserContext = useContext(SCUserContext);
const authUserId = scUserContext.user ? scUserContext.user.id : null;
const [_type, _setType] = useState(type);
// INTL
const intl = useIntl();
// REFS
const refreshSubscription = useRef(null);
// CONST
const filteredSnippets = data.snippets.filter((el) => {
var _a;
if (search === '') {
return el;
}
else if (el.group) {
return el.group.slug.includes(search.toLowerCase());
}
else if (((_a = el === null || el === void 0 ? void 0 : el.receiver) === null || _a === void 0 ? void 0 : _a.id) === authUserId) {
return el.sender.username.includes(search.toLowerCase());
}
return el.receiver.username.includes(search.toLowerCase());
});
const messageReceiver = (item, loggedUserId, obj) => {
var _a, _b, _c, _d;
if (obj) {
return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
}
return ((_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id) !== loggedUserId ? (_c = item === null || item === void 0 ? void 0 : item.receiver) === null || _c === void 0 ? void 0 : _c.id : (_d = item === null || item === void 0 ? void 0 : item.sender) === null || _d === void 0 ? void 0 : _d.id;
};
const isSelected = useMemo(() => {
return (message) => {
var _a, _b;
if (threadObj && _type === SCPrivateMessageType.GROUP) {
return ((_a = message === null || message === void 0 ? void 0 : message.group) === null || _a === void 0 ? void 0 : _a.id) === (isObj ? (_b = threadObj === null || threadObj === void 0 ? void 0 : threadObj.group) === null || _b === void 0 ? void 0 : _b.id : threadObj);
}
else if (threadObj && threadObj !== SCPrivateMessageType.NEW) {
return messageReceiver(message, authUserId) === (isObj ? messageReceiver(threadObj, authUserId) : threadObj);
}
return null;
};
}, [threadObj, authUserId, _type]);
//HANDLERS
const handleChange = (event) => {
setSearch(event.target.value);
};
const handleClear = () => {
setSearch('');
};
const handleOpenNewMessage = () => {
snippetActions && snippetActions.onNewMessageClick();
handleClear();
};
const handleDeleteConversation = (msg) => {
snippetActions && snippetActions.onDeleteConfirm(msg);
};
function handleOpenThread(msg) {
const threadType = msg.group !== null ? SCPrivateMessageType.GROUP : SCPrivateMessageType.USER;
_setType(threadType);
snippetActions && snippetActions.onSnippetClick(msg, threadType);
handleClear();
updateSnippetsParams(msg.id, 'seen');
}
/**
* Updates snippet headline and status or just snippet status
* @param threadId
* @param status
* @param headline
*/
function updateSnippetsParams(threadId, status, headline) {
const newSnippets = [...data.snippets];
const index = newSnippets.findIndex((s) => s.id === threadId);
if (index !== -1) {
newSnippets[index].headline = headline !== null && headline !== void 0 ? headline : newSnippets[index].headline;
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
newSnippets[index].thread_status = status;
updateSnippets(newSnippets);
}
}
function handleSnippetsUpdate(message, forDeletion, type) {
const newSnippets = [...data.snippets];
if (forDeletion && type === SCPrivateMessageType.USER) {
const _snippets = newSnippets.filter((s) => messageReceiver(s, authUserId) !== message);
updateSnippets(_snippets);
}
else if (forDeletion && SCPrivateMessageType.GROUP) {
const _snippets = newSnippets.filter((s) => { var _a; return ((_a = s === null || s === void 0 ? void 0 : s.group) === null || _a === void 0 ? void 0 : _a.id) !== message; });
updateSnippets(_snippets);
}
else {
let temp = [...data.snippets];
message.map((m) => {
const idx = newSnippets.findIndex((s) =>
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
Object.prototype.hasOwnProperty.call(s, 'thread_id') ? s.thread_id === m.thread_id : s.id === m.thread_id);
if (idx !== -1) {
temp[idx].headline = m.message;
temp[idx].thread_status = m.status === SCPrivateMessageStatusType.NEW ? m.status : m.thread_status;
const element = temp.splice(idx, 1)[0];
temp.unshift(element);
}
else {
temp.unshift(m);
}
updateSnippets(temp);
});
}
}
/**
* Notification subscriber
*/
const subscriber = (msg, data) => {
const res = data.data;
updateSnippetsParams(res.thread_id, res.notification_obj.snippet.thread_status, res.notification_obj.snippet.headline);
};
/**
* When a ws notification arrives, updates data
*/
useEffect(() => {
refreshSubscription.current = PubSub.subscribe(`${SCNotificationTopicType.INTERACTION}.${SCNotificationTypologyType.PRIVATE_MESSAGE}`, subscriber);
return () => {
PubSub.unsubscribe(refreshSubscription.current);
};
}, [data.snippets]);
useEffect(() => {
if (clearSearch)
handleClear();
}, [clearSearch]);
/**
* Thread/ Private Message Component subscriptions handlers
*/
useEffect(() => {
const threadSubscriber = PubSub.subscribe('snippetsChannel', (msg, data) => {
handleSnippetsUpdate(data);
});
const snippetsSubscriber = PubSub.subscribe('snippetsChannelDelete', (msg, data) => {
handleSnippetsUpdate(data, true, SCPrivateMessageType.USER);
});
const snippetsGroupSubscriber = PubSub.subscribe('snippetsChannelDeleteGroup', (msg, data) => {
handleSnippetsUpdate(data, true, SCPrivateMessageType.GROUP);
});
return () => {
PubSub.unsubscribe(threadSubscriber);
PubSub.unsubscribe(snippetsSubscriber);
PubSub.unsubscribe(snippetsGroupSubscriber);
};
}, [data.snippets]);
//RENDERING
/**
* Renders snippets skeleton when loading
*/
if (data.isLoading) {
return _jsx(PrivateMessageSnippetsSkeleton, { elevation: 0 });
}
/**
* Renders the component
*/
return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
className: classes.input,
startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })),
endAdornment: (_jsx(IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })))
} }), _jsx(List, { children: filteredSnippets.map((message) => (_jsx(PrivateMessageSnippetItem, { message: message, onItemClick: () => handleOpenThread(message), secondaryAction: _jsxs(_Fragment, { children: [message.thread_status === SCPrivateMessageStatusType.NEW && _jsx(Icon, Object.assign({ color: "secondary" }, { children: "fiber_manual_record" })), !isMobile && (_jsx(PrivateMessageSettingsIconButton, { threadToDelete: (message === null || message === void 0 ? void 0 : message.group) ? message.group.id : messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)), user: messageReceiver(message, authUserId, true), group: message === null || message === void 0 ? void 0 : message.group }))] }), selected: isSelected(message) }, message.id))) })] }))] }) })));
}