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 @@ -25,7 +25,6 @@ createPendingThread, getThreadListSearchResults, } from 'lib/shared/thread-utils.js'; -import type { SetState } from 'lib/types/hook-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { GlobalAccountUserInfo, UserInfo } from 'lib/types/user-types.js'; @@ -87,58 +86,17 @@ // Redux state +searchText: string, +searchStatus: SearchStatus, - +setNumItemsToDisplay: SetState, +searchCancelButtonOpen: Value, - +scrollPos: { current: number }, - +hardwareBack: () => boolean, +chatThreadList: React.Node, - +onTabPress: () => void, }; class ChatThreadList extends React.PureComponent { flatList: ?FlatList; - clearNavigationBlurListener: ?() => mixed; constructor(props: Props) { super(props); } - componentDidMount() { - this.clearNavigationBlurListener = this.props.navigation.addListener( - 'blur', - () => { - this.props.setNumItemsToDisplay(25); - }, - ); - - const chatNavigation: ?ChatNavigationProp<'ChatThreadList'> = - this.props.navigation.getParent(); - invariant(chatNavigation, 'ChatNavigator should be within TabNavigator'); - const tabNavigation: ?TabNavigationProp<'Chat'> = - chatNavigation.getParent(); - invariant(tabNavigation, 'ChatNavigator should be within TabNavigator'); - tabNavigation.addListener('tabPress', this.props.onTabPress); - - BackHandler.addEventListener('hardwareBackPress', this.props.hardwareBack); - } - - componentWillUnmount() { - this.clearNavigationBlurListener && this.clearNavigationBlurListener(); - - const chatNavigation: ?ChatNavigationProp<'ChatThreadList'> = - this.props.navigation.getParent(); - invariant(chatNavigation, 'ChatNavigator should be within TabNavigator'); - const tabNavigation: ?TabNavigationProp<'Chat'> = - chatNavigation.getParent(); - invariant(tabNavigation, 'ChatNavigator should be within TabNavigator'); - tabNavigation.removeListener('tabPress', this.props.onTabPress); - - BackHandler.removeEventListener( - 'hardwareBackPress', - this.props.hardwareBack, - ); - } - componentDidUpdate(prevProps: Props) { const { searchStatus } = this.props; const prevSearchStatus = prevProps.searchStatus; @@ -562,6 +520,40 @@ } }, [navigation, route.name]); + React.useEffect(() => { + const clearNavigationBlurListener = navigation.addListener('blur', () => { + setNumItemsToDisplay(25); + }); + + return () => { + // `.addListener` returns function that can be called to unsubscribe. + // https://reactnavigation.org/docs/navigation-events/#navigationaddlistener + clearNavigationBlurListener(); + }; + }, [navigation]); + + React.useEffect(() => { + const chatNavigation: ?ChatNavigationProp<'ChatThreadList'> = + navigation.getParent(); + invariant(chatNavigation, 'ChatNavigator should be within TabNavigator'); + const tabNavigation: ?TabNavigationProp<'Chat'> = + chatNavigation.getParent(); + invariant(tabNavigation, 'ChatNavigator should be within TabNavigator'); + + tabNavigation.addListener('tabPress', onTabPress); + + return () => { + tabNavigation.removeListener('tabPress', onTabPress); + }; + }, [navigation, onTabPress]); + + React.useEffect(() => { + BackHandler.addEventListener('hardwareBackPress', hardwareBack); + return () => { + BackHandler.removeEventListener('hardwareBackPress', hardwareBack); + }; + }, [hardwareBack]); + return ( ); }