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 @@ -9,26 +9,19 @@ import type { SidebarInfo, ThreadInfo } from '../types/thread-types'; import { useSelector } from '../utils/redux-utils'; -type SidebarSearchState = { - +text: string, - +results: $ReadOnlySet, -}; - function useSearchSidebars( threadInfo: ThreadInfo, + text: string, + setTextSearchText: SetState, ): { +listData: $ReadOnlyArray, - +searchState: SidebarSearchState, - +setSearchState: SetState, + +setSearchState: SetState<$ReadOnlySet>, +onChangeSearchText: ( text: SyntheticEvent | string, ) => mixed, +clearQuery: (event: SyntheticEvent) => void, } { - const [searchState, setSearchState] = React.useState({ - text: '', - results: new Set(), - }); + const [searchState, setSearchState] = React.useState(new Set()); const userInfos = useSelector(state => state.userStore.userInfos); @@ -37,13 +30,13 @@ ); const listData = React.useMemo(() => { - if (!searchState.text) { + if (!text) { return sidebarInfos; } return sidebarInfos.filter(sidebarInfo => - searchState.results.has(sidebarInfo.threadInfo.id), + searchState.has(sidebarInfo.threadInfo.id), ); - }, [sidebarInfos, searchState]); + }, [sidebarInfos, searchState, text]); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, @@ -62,45 +55,40 @@ const onChangeSearchText = React.useCallback( (event: SyntheticEvent | string) => { - let text; + let onChangeText; if (typeof event === 'string') { - text = event; + onChangeText = event; } else { - text = event.currentTarget.value; + onChangeText = event.currentTarget.value; } - setSearchState({ - text, - results: new Set(searchIndex.getSearchResults(text)), - }); + setSearchState(new Set(searchIndex.getSearchResults(onChangeText))); + setTextSearchText(onChangeText); }, - [searchIndex, setSearchState], + [searchIndex, setSearchState, setTextSearchText], ); const clearQuery = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); - setSearchState({ text: '', results: new Set() }); + setSearchState(new Set()); + setTextSearchText(''); }, - [setSearchState], + [setSearchState, setTextSearchText], ); React.useEffect(() => { - setSearchState(curState => ({ - ...curState, - results: new Set(searchIndex.getSearchResults(curState.text)), - })); - }, [searchIndex, setSearchState]); + setSearchState(new Set(searchIndex.getSearchResults(text))); + }, [searchIndex, setSearchState, text]); return React.useMemo( () => ({ listData, - searchState, setSearchState, onChangeSearchText, clearQuery, }), - [listData, setSearchState, searchState, onChangeSearchText, clearQuery], + [listData, setSearchState, onChangeSearchText, clearQuery], ); } diff --git a/native/chat/sidebar-list-modal.react.js b/native/chat/sidebar-list-modal.react.js --- a/native/chat/sidebar-list-modal.react.js +++ b/native/chat/sidebar-list-modal.react.js @@ -31,12 +31,12 @@ +route: NavigationRoute<'SidebarListModal'>, }; function SidebarListModal(props: Props): React.Node { - const { - listData, - searchState, - setSearchState, - onChangeSearchText, - } = useSearchSidebars(props.route.params.threadInfo); + const [searchText, setSearchText] = React.useState(''); + const { listData, setSearchState, onChangeSearchText } = useSearchSidebars( + props.route.params.threadInfo, + searchText, + setSearchText, + ); const searchTextInputRef = React.useRef(); const setSearchTextInputRef = React.useCallback( @@ -56,10 +56,7 @@ const navigateToThread = useNavigateToThread(); const onPressItem = React.useCallback( (threadInfo: ThreadInfo) => { - setSearchState({ - text: '', - results: new Set(), - }); + setSearchState(new Set()); if (searchTextInputRef.current) { searchTextInputRef.current.blur(); } @@ -85,7 +82,7 @@ return ( {clearQueryButton}