Differential D4060 Diff 12818 web/modals/chat/sidebar-list-modal.react.js

Changeset View

Standalone View

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

	Show All 16 Lines
	import Modal from '../modal.react';			import Modal from '../modal.react';

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

	function SidebarListModal(props: Props): React.Node {			function SidebarListModal(props: Props): React.Node {
	const { threadInfo } = props;			const { threadInfo } = props;
	const {			const [searchText, setSearchText] = React.useState('');
	listData,			const { listData, onChangeSearchText, clearQuery } = useSearchSidebars(
	searchState,			threadInfo,
	onChangeSearchText,			searchText,
	clearQuery,			setSearchText,
	} = useSearchSidebars(threadInfo);			);
	const { popModal } = useModalContext();			const { popModal } = useModalContext();

	const sidebars = React.useMemo(			const sidebars = React.useMemo(
	() =>			() =>
	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],			[popModal, listData],
	);			);

	let clearQueryButton = null;			let clearQueryButton = null;
	if (searchState.text) {			if (searchText) {
	clearQueryButton = (			clearQueryButton = (
	<a href="#" onClick={clearQuery}>			<a href="#" onClick={clearQuery}>
	<FontAwesomeIcon			<FontAwesomeIcon
	icon={faTimesCircle}			icon={faTimesCircle}
	className={chatThreadListCSS.clearQuery}			className={chatThreadListCSS.clearQuery}
	/>			/>
	</a>			</a>
	);			);
	}			}

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

	export default SidebarListModal;			export default SidebarListModal;