diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js index 91f3267cf..5dbb051ac 100644 --- a/web/modals/chat/sidebar-list-modal.react.js +++ b/web/modals/chat/sidebar-list-modal.react.js @@ -1,142 +1,142 @@ // @flow import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import * as React from 'react'; import { sidebarInfoSelector } from 'lib/selectors/thread-selectors'; import SearchIndex from 'lib/shared/search-index'; import { threadSearchText } from 'lib/shared/thread-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; import chatThreadListCSS from '../../chat/chat-thread-list.css'; import SidebarItem from '../../chat/sidebar-item.react'; import { useSelector } from '../../redux/redux-utils'; import globalCSS from '../../style.css'; import { MagnifyingGlass } from '../../vectors.react'; import Modal from '../modal.react'; type Props = {| +setModal: (modal: ?React.Node) => void, +threadInfo: ThreadInfo, |}; -function SidebarsListModal(props: Props) { +function SidebarListModal(props: Props) { const { setModal, threadInfo } = props; const [searchState, setSearchState] = React.useState({ text: '', results: new Set(), }); const clearModal = React.useCallback(() => { setModal(null); }, [setModal]); const sidebarInfos = useSelector( (state) => sidebarInfoSelector(state)[threadInfo.id] ?? [], ); const userInfos = useSelector((state) => state.userStore.userInfos); const listData = React.useMemo(() => { if (!searchState.text) { return sidebarInfos; } return sidebarInfos.filter((sidebarInfo) => searchState.results.has(sidebarInfo.threadInfo.id), ); }, [sidebarInfos, searchState]); const sidebars = React.useMemo( () => listData.map((item) => (
)), [clearModal, listData], ); const searchIndex = React.useMemo(() => { const index = new SearchIndex(); for (const sidebarInfo of sidebarInfos) { const threadInfoFromSidebarInfo = sidebarInfo.threadInfo; index.addEntry( threadInfoFromSidebarInfo.id, threadSearchText(threadInfoFromSidebarInfo, userInfos), ); } return index; }, [sidebarInfos, userInfos]); React.useEffect(() => { setSearchState((curState) => ({ ...curState, results: new Set(searchIndex.getSearchResults(curState.text)), })); }, [searchIndex]); const onChangeSearchText = React.useCallback( (event: SyntheticEvent) => { const searchText = event.currentTarget.value; setSearchState({ text: searchText, results: new Set(searchIndex.getSearchResults(searchText)), }); }, [searchIndex], ); const clearQuery = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); setSearchState({ text: '', results: [] }); }, [], ); let clearQueryButton = null; if (searchState.text) { clearQueryButton = ( ); } return (
{clearQueryButton}
    {sidebars}
); } -export default SidebarsListModal; +export default SidebarListModal;