391 lines
12 KiB
TypeScript
391 lines
12 KiB
TypeScript
import type { FC } from '../../../../lib/teact/teact';
|
|
import React, {
|
|
memo, useCallback, useEffect, useMemo, useState,
|
|
} from '../../../../lib/teact/teact';
|
|
import { getActions, getGlobal, withGlobal } from '../../../../global';
|
|
|
|
import type { ApiChatlistExportedInvite } from '../../../../api/types';
|
|
|
|
import { STICKER_SIZE_FOLDER_SETTINGS } from '../../../../config';
|
|
import { LOCAL_TGS_URLS } from '../../../common/helpers/animatedAssets';
|
|
import { MEMO_EMPTY_ARRAY } from '../../../../util/memo';
|
|
import { findIntersectionWithSet } from '../../../../util/iteratees';
|
|
import { isUserId } from '../../../../global/helpers';
|
|
import type {
|
|
FolderEditDispatch,
|
|
FoldersState,
|
|
} from '../../../../hooks/reducers/useFoldersReducer';
|
|
import {
|
|
EXCLUDED_CHAT_TYPES,
|
|
INCLUDED_CHAT_TYPES,
|
|
selectChatFilters,
|
|
} from '../../../../hooks/reducers/useFoldersReducer';
|
|
import { selectCanShareFolder } from '../../../../global/selectors';
|
|
import { selectCurrentLimit } from '../../../../global/selectors/limits';
|
|
import useLang from '../../../../hooks/useLang';
|
|
import useHistoryBack from '../../../../hooks/useHistoryBack';
|
|
|
|
import ListItem from '../../../ui/ListItem';
|
|
import InputText from '../../../ui/InputText';
|
|
import PrivateChatInfo from '../../../common/PrivateChatInfo';
|
|
import GroupChatInfo from '../../../common/GroupChatInfo';
|
|
import FloatingActionButton from '../../../ui/FloatingActionButton';
|
|
import Spinner from '../../../ui/Spinner';
|
|
import ShowMoreButton from '../../../ui/ShowMoreButton';
|
|
import AnimatedIcon from '../../../common/AnimatedIcon';
|
|
|
|
type OwnProps = {
|
|
state: FoldersState;
|
|
dispatch: FolderEditDispatch;
|
|
onAddIncludedChats: VoidFunction;
|
|
onAddExcludedChats: VoidFunction;
|
|
onShareFolder: VoidFunction;
|
|
onOpenInvite: (url: string) => void;
|
|
isActive?: boolean;
|
|
isOnlyInvites?: boolean;
|
|
onReset: () => void;
|
|
onBack: () => void;
|
|
onSaveFolder: (cb?: VoidFunction) => void;
|
|
};
|
|
|
|
type StateProps = {
|
|
loadedActiveChatIds?: string[];
|
|
loadedArchivedChatIds?: string[];
|
|
invites?: ApiChatlistExportedInvite[];
|
|
isRemoved?: boolean;
|
|
maxInviteLinks: number;
|
|
};
|
|
|
|
const SUBMIT_TIMEOUT = 500;
|
|
|
|
const INITIAL_CHATS_LIMIT = 5;
|
|
|
|
export const ERROR_NO_TITLE = 'Please provide a title for this folder.';
|
|
export const ERROR_NO_CHATS = 'ChatList.Filter.Error.Empty';
|
|
|
|
const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
|
|
state,
|
|
dispatch,
|
|
onAddIncludedChats,
|
|
onAddExcludedChats,
|
|
onShareFolder,
|
|
onOpenInvite,
|
|
isActive,
|
|
onReset,
|
|
isRemoved,
|
|
onBack,
|
|
loadedActiveChatIds,
|
|
isOnlyInvites,
|
|
loadedArchivedChatIds,
|
|
invites,
|
|
maxInviteLinks,
|
|
onSaveFolder,
|
|
}) => {
|
|
const {
|
|
loadChatlistInvites,
|
|
openLimitReachedModal,
|
|
showNotification,
|
|
} = getActions();
|
|
|
|
const isCreating = state.mode === 'create';
|
|
const isEditingChatList = state.folder.isChatList;
|
|
|
|
const [isIncludedChatsListExpanded, setIsIncludedChatsListExpanded] = useState(false);
|
|
const [isExcludedChatsListExpanded, setIsExcludedChatsListExpanded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isRemoved) {
|
|
onReset();
|
|
}
|
|
}, [isRemoved, onReset]);
|
|
|
|
useEffect(() => {
|
|
if (isActive && state.folderId && state.folder.isChatList) {
|
|
loadChatlistInvites({ folderId: state.folderId });
|
|
}
|
|
}, [isActive, state.folder.isChatList, state.folderId]);
|
|
|
|
const {
|
|
selectedChatIds: includedChatIds,
|
|
selectedChatTypes: includedChatTypes,
|
|
} = selectChatFilters(state, 'included');
|
|
const {
|
|
selectedChatIds: excludedChatIds,
|
|
selectedChatTypes: excludedChatTypes,
|
|
} = selectChatFilters(state, 'excluded');
|
|
|
|
useEffect(() => {
|
|
setIsIncludedChatsListExpanded(false);
|
|
setIsExcludedChatsListExpanded(false);
|
|
}, [state.folderId]);
|
|
|
|
const [visibleIncludedChatIds, visibleExcludedChatIds] = useMemo(() => {
|
|
const allLoadedChatsSet = new Set([
|
|
...(loadedActiveChatIds || []),
|
|
...(loadedArchivedChatIds || []),
|
|
]);
|
|
|
|
const loadedIncludedChatIds = findIntersectionWithSet(includedChatIds, allLoadedChatsSet);
|
|
const loadedExcludedChatIds = findIntersectionWithSet(excludedChatIds, allLoadedChatsSet);
|
|
|
|
return [
|
|
isIncludedChatsListExpanded
|
|
? loadedIncludedChatIds
|
|
: loadedIncludedChatIds.slice(0, INITIAL_CHATS_LIMIT - includedChatTypes.length),
|
|
isExcludedChatsListExpanded
|
|
? loadedExcludedChatIds
|
|
: loadedExcludedChatIds.slice(0, INITIAL_CHATS_LIMIT - excludedChatTypes.length),
|
|
];
|
|
}, [
|
|
excludedChatIds, includedChatIds, includedChatTypes, excludedChatTypes,
|
|
isExcludedChatsListExpanded, isIncludedChatsListExpanded,
|
|
loadedActiveChatIds, loadedArchivedChatIds,
|
|
]);
|
|
|
|
const lang = useLang();
|
|
|
|
useHistoryBack({
|
|
isActive,
|
|
onBack,
|
|
});
|
|
|
|
const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { currentTarget } = event;
|
|
dispatch({ type: 'setTitle', payload: currentTarget.value.trim() });
|
|
}, [dispatch]);
|
|
|
|
const handleSubmit = useCallback(() => {
|
|
dispatch({ type: 'setIsLoading', payload: true });
|
|
|
|
onSaveFolder(() => {
|
|
setTimeout(() => {
|
|
onReset();
|
|
}, SUBMIT_TIMEOUT);
|
|
});
|
|
}, [dispatch, onSaveFolder, onReset]);
|
|
|
|
const handleCreateInviteClick = useCallback(() => {
|
|
if (!invites) {
|
|
if (isCreating) {
|
|
onSaveFolder(onShareFolder);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Ignoring global updates is a known drawback here
|
|
if (!selectCanShareFolder(getGlobal(), state.folderId!)) {
|
|
showNotification({ message: lang('ChatList.Filter.InviteLink.IncludeExcludeError') });
|
|
return;
|
|
}
|
|
|
|
if (invites.length < maxInviteLinks) {
|
|
if (state.isTouched) {
|
|
onSaveFolder(onShareFolder);
|
|
} else {
|
|
onShareFolder();
|
|
}
|
|
} else {
|
|
openLimitReachedModal({
|
|
limit: 'chatlistInvites',
|
|
});
|
|
}
|
|
}, [
|
|
invites, state.folderId, state.isTouched, maxInviteLinks, isCreating, onSaveFolder, onShareFolder, lang,
|
|
]);
|
|
|
|
const handleEditInviteClick = useCallback((e: React.MouseEvent<HTMLElement>, url: string) => {
|
|
if (state.isTouched) {
|
|
onSaveFolder(() => onOpenInvite(url));
|
|
} else {
|
|
onOpenInvite(url);
|
|
}
|
|
}, [onSaveFolder, onOpenInvite, state.isTouched]);
|
|
|
|
function renderChatType(key: string, mode: 'included' | 'excluded') {
|
|
const chatType = mode === 'included'
|
|
? INCLUDED_CHAT_TYPES.find(({ key: typeKey }) => typeKey === key)
|
|
: EXCLUDED_CHAT_TYPES.find(({ key: typeKey }) => typeKey === key);
|
|
|
|
if (!chatType) {
|
|
return undefined;
|
|
}
|
|
|
|
return (
|
|
<ListItem
|
|
key={chatType.key}
|
|
className="settings-folders-list-item mb-1"
|
|
icon={chatType.icon}
|
|
narrow
|
|
inactive
|
|
>
|
|
{lang(chatType.title)}
|
|
</ListItem>
|
|
);
|
|
}
|
|
|
|
function renderChats(mode: 'included' | 'excluded') {
|
|
const selectedChatTypes = mode === 'included' ? includedChatTypes : excludedChatTypes;
|
|
const visibleChatIds = mode === 'included' ? visibleIncludedChatIds : visibleExcludedChatIds;
|
|
|
|
const isExpanded = mode === 'included' ? isIncludedChatsListExpanded : isExcludedChatsListExpanded;
|
|
const allChatIds = mode === 'included' ? includedChatIds : excludedChatIds;
|
|
const leftChatsCount = allChatIds.length - visibleChatIds.length;
|
|
const clickHandler = mode === 'included'
|
|
? () => setIsIncludedChatsListExpanded(true)
|
|
: () => setIsExcludedChatsListExpanded(true);
|
|
|
|
return (
|
|
<>
|
|
{selectedChatTypes.map((key) => renderChatType(key, mode))}
|
|
{visibleChatIds.map((id) => (
|
|
<ListItem
|
|
className="settings-folders-list-item mb-1"
|
|
narrow
|
|
inactive
|
|
>
|
|
{isUserId(id) ? (
|
|
<PrivateChatInfo avatarSize="small" userId={id} />
|
|
) : (
|
|
<GroupChatInfo avatarSize="small" chatId={id} />
|
|
)}
|
|
</ListItem>
|
|
))}
|
|
{(!isExpanded && leftChatsCount > 0) && (
|
|
<ShowMoreButton
|
|
count={leftChatsCount}
|
|
itemName="chat"
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
onClick={clickHandler}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="settings-fab-wrapper">
|
|
<div className="settings-content no-border custom-scroll">
|
|
<div className="settings-content-header">
|
|
<AnimatedIcon
|
|
size={STICKER_SIZE_FOLDER_SETTINGS}
|
|
tgsUrl={LOCAL_TGS_URLS.FoldersNew}
|
|
play={String(state.folderId)}
|
|
className="settings-content-icon"
|
|
/>
|
|
|
|
{isCreating && (
|
|
<p className="settings-item-description mb-3" dir={lang.isRtl ? 'rtl' : undefined}>
|
|
{lang('FilterIncludeInfo')}
|
|
</p>
|
|
)}
|
|
|
|
<InputText
|
|
className="mb-0"
|
|
label={lang('FilterNameHint')}
|
|
value={state.folder.title}
|
|
onChange={handleChange}
|
|
error={state.error && state.error === ERROR_NO_TITLE ? ERROR_NO_TITLE : undefined}
|
|
/>
|
|
</div>
|
|
|
|
{!isOnlyInvites && (
|
|
<div className="settings-item pt-3">
|
|
{state.error && state.error === ERROR_NO_CHATS && (
|
|
<p className="settings-item-description color-danger mb-2" dir={lang.isRtl ? 'rtl' : undefined}>
|
|
{lang(state.error)}
|
|
</p>
|
|
)}
|
|
|
|
<h4 className="settings-item-header mb-3" dir={lang.isRtl ? 'rtl' : undefined}>{lang('FilterInclude')}</h4>
|
|
|
|
<ListItem
|
|
className="settings-folders-list-item color-primary mb-0"
|
|
icon="add"
|
|
onClick={onAddIncludedChats}
|
|
>
|
|
{lang('FilterAddChats')}
|
|
</ListItem>
|
|
|
|
{renderChats('included')}
|
|
</div>
|
|
)}
|
|
|
|
{!isOnlyInvites && !isEditingChatList && (
|
|
<div className="settings-item pt-3">
|
|
<h4 className="settings-item-header mb-3" dir={lang.isRtl ? 'rtl' : undefined}>{lang('FilterExclude')}</h4>
|
|
|
|
<ListItem
|
|
className="settings-folders-list-item color-primary mb-0"
|
|
icon="add"
|
|
onClick={onAddExcludedChats}
|
|
>
|
|
{lang('FilterAddChats')}
|
|
</ListItem>
|
|
|
|
{renderChats('excluded')}
|
|
</div>
|
|
)}
|
|
|
|
<div className="settings-item pt-3">
|
|
<h4 className="settings-item-header mb-3" dir={lang.isRtl ? 'rtl' : undefined}>
|
|
{lang('FolderLinkScreen.Title')}
|
|
</h4>
|
|
|
|
<ListItem
|
|
className="settings-folders-list-item color-primary mb-0"
|
|
icon="add"
|
|
onClick={handleCreateInviteClick}
|
|
>
|
|
{lang('ChatListFilter.CreateLinkNew')}
|
|
</ListItem>
|
|
|
|
{invites?.map((invite) => (
|
|
<ListItem
|
|
className="settings-folders-list-item mb-0"
|
|
icon="link"
|
|
multiline
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
onClick={handleEditInviteClick}
|
|
clickArg={invite.url}
|
|
>
|
|
<span className="title" dir="auto">{invite.title || invite.url}</span>
|
|
<span className="subtitle">
|
|
{lang('ChatListFilter.LinkLabelChatCount', invite.peerIds.length, 'i')}
|
|
</span>
|
|
</ListItem>
|
|
))}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<FloatingActionButton
|
|
isShown={Boolean(state.isTouched)}
|
|
disabled={state.isLoading}
|
|
onClick={handleSubmit}
|
|
ariaLabel={state.mode === 'edit' ? 'Save changes' : 'Create folder'}
|
|
>
|
|
{state.isLoading ? (
|
|
<Spinner color="white" />
|
|
) : (
|
|
<i className="icon icon-check" />
|
|
)}
|
|
</FloatingActionButton>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global, { state }): StateProps => {
|
|
const { listIds } = global.chats;
|
|
const { byId, invites } = global.chatFolders;
|
|
|
|
return {
|
|
loadedActiveChatIds: listIds.active,
|
|
loadedArchivedChatIds: listIds.archived,
|
|
invites: state.folderId ? (invites[state.folderId] || MEMO_EMPTY_ARRAY) : undefined,
|
|
isRemoved: state.folderId !== undefined && !byId[state.folderId],
|
|
maxInviteLinks: selectCurrentLimit(global, 'chatlistInvites'),
|
|
};
|
|
},
|
|
)(SettingsFoldersEdit));
|