124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import React, { memo, useCallback, useMemo } from '../../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../../global';
|
|
|
|
import type { FC } from '../../../lib/teact/teact';
|
|
import type { TabState } from '../../../global/types';
|
|
import type { ApiChatFolder } from '../../../api/types';
|
|
|
|
import { selectChatFolder } from '../../../global/selectors';
|
|
|
|
import usePrevious from '../../../hooks/usePrevious';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import ChatlistNew from './ChatlistNew';
|
|
import ChatlistAlready from './ChatlistAlready';
|
|
import ChatlistDelete from './ChatlistDelete';
|
|
import Modal from '../../ui/Modal';
|
|
import Tab from '../../ui/Tab';
|
|
|
|
import styles from './ChatlistModal.module.scss';
|
|
|
|
export type OwnProps = {
|
|
info?: TabState['chatlistModal'];
|
|
};
|
|
|
|
type StateProps = {
|
|
folder?: ApiChatFolder;
|
|
};
|
|
|
|
const ChatlistInviteModal: FC<OwnProps & StateProps> = ({
|
|
info,
|
|
folder,
|
|
}) => {
|
|
const { closeChatlistModal } = getActions();
|
|
|
|
const lang = useLang();
|
|
|
|
const isOpen = Boolean(info);
|
|
const renderingInfo = usePrevious(info) || info;
|
|
const renderingFolder = usePrevious(folder) || folder;
|
|
|
|
const title = useMemo(() => {
|
|
if (!renderingInfo) return undefined;
|
|
if (renderingInfo.invite) {
|
|
const invite = renderingInfo.invite;
|
|
if ('alreadyPeerIds' in invite) {
|
|
return invite.missingPeerIds.length ? lang('FolderLinkTitleAddChats') : lang('FolderLinkTitleAlready');
|
|
}
|
|
return lang('FolderLinkTitleAdd');
|
|
}
|
|
if (renderingInfo.removal) {
|
|
return lang('FolderLinkTitleRemove');
|
|
}
|
|
|
|
return undefined;
|
|
}, [lang, renderingInfo]);
|
|
|
|
const renderingFolderTitle = useMemo(() => {
|
|
if (renderingFolder) return renderingFolder.title;
|
|
if (renderingInfo?.invite && 'title' in renderingInfo.invite) return renderingInfo.invite.title;
|
|
return undefined;
|
|
}, [renderingFolder, renderingInfo]);
|
|
|
|
const folderTabNumber = useMemo(() => {
|
|
if (!renderingInfo?.invite) return undefined;
|
|
if ('missingPeerIds' in renderingInfo.invite) return renderingInfo.invite.missingPeerIds.length;
|
|
return undefined;
|
|
}, [renderingInfo]);
|
|
|
|
function renderFolders(folderTitle: string) {
|
|
return (
|
|
<div className={styles.foldersWrapper}>
|
|
<div className={styles.folders}>
|
|
<Tab className={styles.folder} title={lang('FolderLinkPreviewLeft')} />
|
|
<Tab className={styles.folder} isActive badgeCount={folderTabNumber} isBadgeActive title={folderTitle} />
|
|
<Tab className={styles.folder} title={lang('FolderLinkPreviewRight')} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const renderContent = useCallback(() => {
|
|
if (!renderingInfo) return undefined;
|
|
if (renderingInfo.invite) {
|
|
const invite = renderingInfo.invite;
|
|
if ('alreadyPeerIds' in invite) {
|
|
return <ChatlistAlready invite={invite} folder={renderingFolder!} />;
|
|
}
|
|
|
|
return <ChatlistNew invite={invite} />;
|
|
}
|
|
|
|
if (renderingInfo.removal) {
|
|
return <ChatlistDelete folder={renderingFolder!} suggestedPeerIds={renderingInfo.removal.suggestedPeerIds} />;
|
|
}
|
|
|
|
return undefined;
|
|
}, [renderingFolder, renderingInfo]);
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
title={title}
|
|
onClose={closeChatlistModal}
|
|
isSlim
|
|
hasCloseButton
|
|
>
|
|
{renderingFolderTitle && renderFolders(renderingFolderTitle)}
|
|
{renderContent()}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global, { info }): StateProps => {
|
|
const { invite, removal } = info || {};
|
|
const folderId = removal?.folderId || (invite && 'folderId' in invite ? invite.folderId : undefined);
|
|
const folder = folderId ? selectChatFolder(global, folderId) : undefined;
|
|
|
|
return {
|
|
folder,
|
|
};
|
|
},
|
|
)(ChatlistInviteModal));
|