diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js --- a/native/chat/settings/thread-settings.react.js +++ b/native/chat/settings/thread-settings.react.js @@ -2,6 +2,7 @@ import invariant from 'invariant'; import * as React from 'react'; +import { useEffect } from 'react'; import { View, FlatList, Platform } from 'react-native'; import { createSelector } from 'reselect'; import tinycolor from 'tinycolor2'; @@ -211,7 +212,7 @@ // Redux state +userInfos: UserInfos, +viewerID: ?string, - +threadInfo: ?ThreadInfo, + +threadInfo: ThreadInfo, +parentThreadInfo: ?ThreadInfo, +childThreadInfos: ?$ReadOnlyArray, +somethingIsSaving: boolean, @@ -239,8 +240,6 @@ constructor(props: Props) { super(props); - const threadInfo = props.threadInfo; - invariant(threadInfo, 'ThreadInfo should exist when ThreadSettings opened'); this.state = { numMembersShowing: itemPageLength, numSubchannelsShowing: itemPageLength, @@ -248,23 +247,11 @@ nameEditValue: null, descriptionEditValue: null, descriptionTextHeight: null, - colorEditValue: threadInfo.color, + colorEditValue: props.threadInfo.color, verticalBounds: null, }; } - static getThreadInfo(props: { - threadInfo: ?ThreadInfo, - route: NavigationRoute<'ThreadSettings'>, - ... - }): ThreadInfo { - const { threadInfo } = props; - if (threadInfo) { - return threadInfo; - } - return props.route.params.threadInfo; - } - static scrollDisabled(props: Props) { const { overlayContext } = props; invariant(overlayContext, 'ThreadSettings should have OverlayContext'); @@ -272,7 +259,7 @@ } componentDidMount() { - const threadInfo = ThreadSettings.getThreadInfo(this.props); + const threadInfo = this.props.threadInfo; if (!threadInChatList(threadInfo)) { threadWatcher.watchID(threadInfo.id); } @@ -284,7 +271,7 @@ } componentWillUnmount() { - const threadInfo = ThreadSettings.getThreadInfo(this.props); + const threadInfo = this.props.threadInfo; if (!threadInChatList(threadInfo)) { threadWatcher.removeID(threadInfo.id); } @@ -302,27 +289,27 @@ }; componentDidUpdate(prevProps: Props) { - const oldReduxThreadInfo = prevProps.threadInfo; - const newReduxThreadInfo = this.props.threadInfo; - if (newReduxThreadInfo && newReduxThreadInfo !== oldReduxThreadInfo) { - this.props.navigation.setParams({ threadInfo: newReduxThreadInfo }); + const prevThreadInfo = prevProps.threadInfo; + const newThreadInfo = this.props.threadInfo; + + if (newThreadInfo && newThreadInfo !== prevThreadInfo) { + this.props.navigation.setParams({ threadInfo: newThreadInfo }); } - const oldNavThreadInfo = ThreadSettings.getThreadInfo(prevProps); - const newNavThreadInfo = ThreadSettings.getThreadInfo(this.props); - if (oldNavThreadInfo.id !== newNavThreadInfo.id) { - if (!threadInChatList(oldNavThreadInfo)) { - threadWatcher.removeID(oldNavThreadInfo.id); + if (prevThreadInfo.id !== newThreadInfo.id) { + if (!threadInChatList(prevThreadInfo)) { + threadWatcher.removeID(prevThreadInfo.id); } - if (!threadInChatList(newNavThreadInfo)) { - threadWatcher.watchID(newNavThreadInfo.id); + if (!threadInChatList(newThreadInfo)) { + threadWatcher.watchID(newThreadInfo.id); } } + if ( - !tinycolor.equals(newNavThreadInfo.color, oldNavThreadInfo.color) && - tinycolor.equals(this.state.colorEditValue, oldNavThreadInfo.color) + !tinycolor.equals(newThreadInfo.color, prevThreadInfo.color) && + tinycolor.equals(this.state.colorEditValue, prevThreadInfo.color) ) { - this.setState({ colorEditValue: newNavThreadInfo.color }); + this.setState({ colorEditValue: newThreadInfo.color }); } if (defaultStackScreenOptions.gestureEnabled) { @@ -337,8 +324,7 @@ } threadBasicsListDataSelector = createSelector( - (propsAndState: PropsAndState) => - ThreadSettings.getThreadInfo(propsAndState), + (propsAndState: PropsAndState) => propsAndState.threadInfo, (propsAndState: PropsAndState) => propsAndState.parentThreadInfo, (propsAndState: PropsAndState) => propsAndState.nameEditValue, (propsAndState: PropsAndState) => propsAndState.colorEditValue, @@ -470,8 +456,7 @@ ); subchannelsListDataSelector = createSelector( - (propsAndState: PropsAndState) => - ThreadSettings.getThreadInfo(propsAndState), + (propsAndState: PropsAndState) => propsAndState.threadInfo, (propsAndState: PropsAndState) => propsAndState.navigation.navigate, (propsAndState: PropsAndState) => propsAndState.childThreadInfos, (propsAndState: PropsAndState) => propsAndState.numSubchannelsShowing, @@ -593,8 +578,7 @@ ); threadMembersListDataSelector = createSelector( - (propsAndState: PropsAndState) => - ThreadSettings.getThreadInfo(propsAndState), + (propsAndState: PropsAndState) => propsAndState.threadInfo, (propsAndState: PropsAndState) => !propsAndState.somethingIsSaving, (propsAndState: PropsAndState) => propsAndState.navigation.navigate, (propsAndState: PropsAndState) => propsAndState.route.key, @@ -669,8 +653,7 @@ ); actionsListDataSelector = createSelector( - (propsAndState: PropsAndState) => - ThreadSettings.getThreadInfo(propsAndState), + (propsAndState: PropsAndState) => propsAndState.threadInfo, (propsAndState: PropsAndState) => propsAndState.parentThreadInfo, (propsAndState: PropsAndState) => propsAndState.navigation.navigate, (propsAndState: PropsAndState) => propsAndState.styles, @@ -810,17 +793,13 @@ } render() { - let threadAncestors; - if (this.props.threadInfo) { - threadAncestors = ; - } return ( - {threadAncestors} + { - const threadInfo = ThreadSettings.getThreadInfo(this.props); this.props.navigation.navigate(ComposeSubchannelModalRouteName, { presentedFrom: this.props.route.key, - threadInfo, + threadInfo: this.props.threadInfo, }); }; onPressAddMember = () => { - const threadInfo = ThreadSettings.getThreadInfo(this.props); this.props.navigation.navigate(AddUsersModalRouteName, { presentedFrom: this.props.route.key, - threadInfo, + threadInfo: this.props.threadInfo, }); }; @@ -1104,21 +1081,23 @@ state => state.currentUserInfo && state.currentUserInfo.id, ); const threadID = props.route.params.threadInfo.id; - const threadInfo: ?ThreadInfo = useSelector( + const reduxThreadInfo: ?ThreadInfo = useSelector( state => threadInfoSelector(state)[threadID], ); - const parentThreadID = threadInfo - ? threadInfo.parentThreadID - : props.route.params.threadInfo.parentThreadID; + useEffect(() => { + invariant( + reduxThreadInfo, + 'ReduxThreadInfo should exist when ThreadSettings is opened', + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const threadInfo: ThreadInfo = + reduxThreadInfo ?? props.route.params.threadInfo; + const parentThreadID = threadInfo.parentThreadID; const parentThreadInfo: ?ThreadInfo = useSelector(state => parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, ); - const threadMembers = React.useMemo(() => { - if (!threadInfo) { - return []; - } - return threadInfo.members; - }, [threadInfo]); + const threadMembers = threadInfo.members; const boundChildThreadInfos = useSelector( state => childThreadInfos(state)[threadID], ); @@ -1129,7 +1108,6 @@ const indicatorStyle = useIndicatorStyle(); const overlayContext = React.useContext(OverlayContext); const keyboardState = React.useContext(KeyboardContext); - invariant(threadInfo, 'threadInfo must be defined'); const { canPromoteSidebar } = usePromoteSidebar(threadInfo); return (