Differential D4061 Diff 13092 web/modals/chat/sidebar-list-modal.react.js

Changeset View

Standalone View

web/modals/chat/sidebar-list-modal.react.js

	// @flow			// @flow

	import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
	import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
	import classNames from 'classnames';			import classNames from 'classnames';
	import * as React from 'react';			import * as React from 'react';

	import { useSearchSidebars } from 'lib/hooks/search-sidebars';			import { useSearchSidebars } from 'lib/hooks/search-sidebars';
	import type { ThreadInfo } from 'lib/types/thread-types';			import type { ThreadInfo } from 'lib/types/thread-types';

	import chatThreadListCSS from '../../chat/chat-thread-list.css';			import chatThreadListCSS from '../../chat/chat-thread-list.css';
	import SidebarItem from '../../chat/sidebar-item.react';			import SidebarItem from '../../chat/sidebar-item.react';
	import globalCSS from '../../style.css';
	import { MagnifyingGlass } from '../../vectors.react';
	import Input from '../input.react';
	import { useModalContext } from '../modal-provider.react';			import { useModalContext } from '../modal-provider.react';
	import Modal from '../modal.react';			import SearchModal from '../search-modal.react';

	type Props = {			type Props = {
	+threadInfo: ThreadInfo,			+threadInfo: ThreadInfo,
	};			};

	function SidebarListModal(props: Props): React.Node {			type SidebarModalContentProps = {
	const { threadInfo } = props;			+threadInfo: ThreadInfo,
	const [searchText, setSearchText] = React.useState('');			+onClose: () => void,
	const { listData, onChangeSearchText, clearQuery } = useSearchSidebars(			+searchText: string,
	threadInfo,			};
	searchText,
	setSearchText,			function SidebarModalContent(props: SidebarModalContentProps): React.Node {
	);			const { threadInfo, searchText } = props;
	const { popModal } = useModalContext();			const { popModal } = useModalContext();
				const { listData } = useSearchSidebars(threadInfo, searchText);

	const sidebars = React.useMemo(			return listData.map(item => (
	() =>
	listData.map(item => (
	<div			<div
	className={classNames(			className={classNames(
	chatThreadListCSS.thread,			chatThreadListCSS.thread,
	chatThreadListCSS.sidebar,			chatThreadListCSS.sidebar,
	)}			)}
	key={item.threadInfo.id}			key={item.threadInfo.id}
	onClick={popModal}			onClick={popModal}
	>			>
	<SidebarItem sidebarInfo={item} />			<SidebarItem sidebarInfo={item} />
	</div>			</div>
	)),			));
	[popModal, listData],			}
	);
				function SidebarListModal(props: Props): React.Node {
				const { popModal } = useModalContext();
				const { threadInfo } = props;

	let clearQueryButton = null;			const searchSidebarModalContent = React.useCallback(
	if (searchText) {			(searchSidebarText: string) => (
	clearQueryButton = (			<SidebarModalContent
	<a href="#" onClick={clearQuery}>			onClose={popModal}
	<FontAwesomeIcon			threadInfo={threadInfo}
	icon={faTimesCircle}			searchText={searchSidebarText}
	className={chatThreadListCSS.clearQuery}
	/>			/>
	</a>			),
				[popModal, threadInfo],
	);			);
	}

	return (			return (
	<Modal name="Sidebars" onClose={popModal}>			<SearchModal
	<div			name="Sidebars"
	className={classNames(			onClose={popModal}
	globalCSS['modal-body'],			size="fit-content"
	globalCSS['resized-modal-body'],			searchPlaceholder="Search sidebars"
	)}
	>			>
	<div>			{searchSidebarModalContent}
	<div className={chatThreadListCSS.search}>			</SearchModal>
	<MagnifyingGlass className={chatThreadListCSS.searchVector} />
	<Input
	type="text"
	placeholder="Search sidebars"
	value={searchText}
	onChange={onChangeSearchText}
	/>
	{clearQueryButton}
	</div>
	</div>
	<ul className={chatThreadListCSS.list}>{sidebars}</ul>
	</div>
	</Modal>
	);			);
	}			}

	export default SidebarListModal;			export default SidebarListModal;