diff --git a/lib/hooks/search-sidebars.js b/lib/hooks/search-sidebars.js --- a/lib/hooks/search-sidebars.js +++ b/lib/hooks/search-sidebars.js @@ -12,14 +12,13 @@ function useSearchSidebars( threadInfo: ThreadInfo, text: string, - setTextSearchText: SetState, + setSearchText?: SetState, ): { listData: $ReadOnlyArray, setSearchState: SetState<$ReadOnlySet>, onChangeSearchText: ( text: SyntheticEvent | string, ) => mixed, - clearQuery: (event: SyntheticEvent) => void, } { const [searchState, setSearchState] = React.useState(new Set()); @@ -63,32 +62,23 @@ } setSearchState(new Set(searchIndex.getSearchResults(onChangeText))); - setTextSearchText(onChangeText); + setSearchText?.(onChangeText); }, - [searchIndex, setSearchState, setTextSearchText], - ); - - const clearQuery = React.useCallback( - (event: SyntheticEvent) => { - event.preventDefault(); - setSearchState(new Set()); - setTextSearchText(''); - }, - [setSearchState, setTextSearchText], + [searchIndex, setSearchState, setSearchText], ); React.useEffect(() => { setSearchState(new Set(searchIndex.getSearchResults(text))); - }, [searchIndex, setSearchState, text]); + setSearchText?.(text); + }, [searchIndex, setSearchState, setSearchText, text]); return React.useMemo( () => ({ listData, setSearchState, onChangeSearchText, - clearQuery, }), - [listData, setSearchState, onChangeSearchText, clearQuery], + [listData, setSearchState, onChangeSearchText], ); } diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js --- a/web/modals/chat/sidebar-list-modal.react.js +++ b/web/modals/chat/sidebar-list-modal.react.js @@ -1,7 +1,5 @@ // @flow -import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import * as React from 'react'; @@ -10,78 +8,62 @@ import chatThreadListCSS from '../../chat/chat-thread-list.css'; 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 Modal from '../modal.react'; +import SearchModal from '../search-modal.react'; type Props = { +threadInfo: ThreadInfo, }; +type SidebarModalContentProps = { + +threadInfo: ThreadInfo, + +onClose: () => void, + +searchText: string, +}; + +function SidebarModalContent(props: SidebarModalContentProps): React.Node { + const { threadInfo, searchText } = props; + const { popModal } = useModalContext(); + const { listData } = useSearchSidebars(threadInfo, searchText); + + return listData.map(item => ( +
+ +
+ )); +} + function SidebarListModal(props: Props): React.Node { - const { threadInfo } = props; - const [searchText, setSearchText] = React.useState(''); - const { listData, onChangeSearchText, clearQuery } = useSearchSidebars( - threadInfo, - searchText, - setSearchText, - ); const { popModal } = useModalContext(); + const { threadInfo } = props; - const sidebars = React.useMemo( - () => - listData.map(item => ( -
- -
- )), - [popModal, listData], + const searchSidebarModalContent = React.useCallback( + (searchSidebarText: string) => ( + + ), + [popModal, threadInfo], ); - let clearQueryButton = null; - if (searchText) { - clearQueryButton = ( - - - - ); - } - return ( - -
-
-
- - - {clearQueryButton} -
-
-
    {sidebars}
-
-
+ + {searchSidebarModalContent} + ); }