diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -29,6 +29,7 @@ createPendingThread, getThreadListSearchResults, } from 'lib/shared/thread-utils.js'; +import type { SetState } from 'lib/types/hook-types.js'; import type { UserSearchResult } from 'lib/types/search-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; @@ -100,6 +101,7 @@ +filterThreads: (threadItem: ThreadInfo) => boolean, +emptyItem?: React.ComponentType<{}>, }; +type SearchStatus = 'inactive' | 'activating' | 'active'; type Props = { ...BaseProps, // Redux state @@ -112,11 +114,12 @@ +navigateToThread: (params: MessageListParams) => void, // async functions that hit server APIs +searchUsers: (usernamePrefix: string) => Promise, + +searchText: string, + +setSearchText: SetState, + +searchStatus: SearchStatus, + +setSearchStatus: SetState, }; -type SearchStatus = 'inactive' | 'activating' | 'active'; type State = { - +searchStatus: SearchStatus, - +searchText: string, +threadsSearchResults: Set, +usersSearchResults: $ReadOnlyArray, +openedSwipeableId: string, @@ -125,8 +128,6 @@ type PropsAndState = { ...Props, ...State }; class ChatThreadList extends React.PureComponent { state: State = { - searchStatus: 'inactive', - searchText: '', threadsSearchResults: new Set(), usersSearchResults: [], openedSwipeableId: '', @@ -190,7 +191,7 @@ return false; } - const { searchStatus } = this.state; + const { searchStatus } = this.props; const isActiveOrActivating = searchStatus === 'active' || searchStatus === 'activating'; if (!isActiveOrActivating) { @@ -201,9 +202,9 @@ return true; }; - componentDidUpdate(prevProps: Props, prevState: State) { - const { searchStatus } = this.state; - const prevSearchStatus = prevState.searchStatus; + componentDidUpdate(prevProps: Props) { + const { searchStatus } = this.props; + const prevSearchStatus = prevProps.searchStatus; const isActiveOrActivating = searchStatus === 'active' || searchStatus === 'activating'; @@ -220,7 +221,7 @@ return; } - if (this.state.searchText !== prevState.searchText) { + if (this.props.searchText !== prevProps.searchText) { flatList.scrollToOffset({ offset: 0, animated: false }); return; } @@ -242,24 +243,24 @@ }; onSearchFocus = () => { - if (this.state.searchStatus !== 'inactive') { + if (this.props.searchStatus !== 'inactive') { return; } if (this.scrollPos === 0) { - this.setState({ searchStatus: 'active' }); + this.props.setSearchStatus('active'); } else { - this.setState({ searchStatus: 'activating' }); + this.props.setSearchStatus('activating'); } }; clearSearch() { const { flatList } = this; flatList && flatList.scrollToOffset({ offset: 0, animated: false }); - this.setState({ searchStatus: 'inactive' }); + this.props.setSearchStatus('inactive'); } onSearchBlur = () => { - if (this.state.searchStatus !== 'active') { + if (this.props.searchStatus !== 'active') { return; } this.clearSearch(); @@ -286,7 +287,7 @@ { const results = this.props.threadSearchIndex.getSearchResults(searchText); + this.props.setSearchText(searchText); this.setState({ - searchText, threadsSearchResults: new Set(results), numItemsToDisplay: 25, }); @@ -615,33 +616,43 @@ }, }; -const ConnectedChatThreadList: React.ComponentType = - React.memo(function ConnectedChatThreadList(props: BaseProps) { - const boundChatListData = useFlattenedChatListData(); - const loggedInUserInfo = useLoggedInUserInfo(); - const threadSearchIndex = useGlobalThreadSearchIndex(); - const styles = useStyles(unboundStyles); - const indicatorStyle = useSelector(indicatorStyleSelector); - const callSearchUsers = useServerCall(searchUsers); - const usersWithPersonalThread = useSelector( - usersWithPersonalThreadSelector, - ); - - const navigateToThread = useNavigateToThread(); - - return ( - - ); - }); +function ConnectedChatThreadList(props: BaseProps): React.Node { + const boundChatListData = useFlattenedChatListData(); + const loggedInUserInfo = useLoggedInUserInfo(); + const threadSearchIndex = useGlobalThreadSearchIndex(); + const styles = useStyles(unboundStyles); + const indicatorStyle = useSelector(indicatorStyleSelector); + const callSearchUsers = useServerCall(searchUsers); + const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector); + + const navigateToThread = useNavigateToThread(); + + const { navigation, route, filterThreads, emptyItem } = props; + + const [searchText, setSearchText] = React.useState(''); + const [searchStatus, setSearchStatus] = + React.useState('inactive'); + + return ( + + ); +} export default ConnectedChatThreadList;