diff --git a/native/chat/thread-draft-updater.react.js b/lib/components/thread-draft-updater.react.js similarity index 81% rename from native/chat/thread-draft-updater.react.js rename to lib/components/thread-draft-updater.react.js index 9aedcaa01..02f7a2ed3 100644 --- a/native/chat/thread-draft-updater.react.js +++ b/lib/components/thread-draft-updater.react.js @@ -1,52 +1,51 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { useDispatch } from 'react-redux'; -import { moveDraftActionType } from 'lib/actions/draft-actions'; -import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors'; -import { draftKeyFromThreadID } from 'lib/shared/thread-utils'; - -import { useSelector } from '../redux/redux-utils'; -import type { AppState } from '../redux/state-types'; +import { moveDraftActionType } from '../actions/draft-actions'; +import { pendingToRealizedThreadIDsSelector } from '../selectors/thread-selectors'; +import { draftKeyFromThreadID } from '../shared/thread-utils'; +import type { AppState } from '../types/redux-types'; +import { useSelector } from '../utils/redux-utils'; const ThreadDraftUpdater: React.ComponentType<{}> = React.memo<{}>( function ThreadDraftUpdater() { const pendingToRealizedThreadIDs = useSelector((state: AppState) => pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos), ); const dispatch = useDispatch(); const cachedThreadIDsRef = React.useRef(); if (!cachedThreadIDsRef.current) { const newCachedThreadIDs = new Set(); for (const realizedThreadID of pendingToRealizedThreadIDs.values()) { newCachedThreadIDs.add(realizedThreadID); } cachedThreadIDsRef.current = newCachedThreadIDs; } React.useEffect(() => { for (const [pendingThreadID, threadID] of pendingToRealizedThreadIDs) { const cachedThreadIDs = cachedThreadIDsRef.current; invariant(cachedThreadIDs, 'should be set'); if (cachedThreadIDs.has(threadID)) { continue; } dispatch({ type: moveDraftActionType, payload: { oldKey: draftKeyFromThreadID(pendingThreadID), newKey: draftKeyFromThreadID(threadID), }, }); cachedThreadIDs.add(threadID); } }, [pendingToRealizedThreadIDs, dispatch]); return null; }, ); ThreadDraftUpdater.displayName = 'ThreadDraftUpdater'; export default ThreadDraftUpdater; diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js index a2471dbc8..1f1f9cb30 100644 --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -1,337 +1,337 @@ // @flow import { createMaterialTopTabNavigator, type MaterialTopTabNavigationProp, } from '@react-navigation/material-top-tabs'; import { createNavigatorFactory, useNavigationBuilder, type StackNavigationState, type StackOptions, type StackNavigationEventMap, type StackNavigatorProps, type ExtraStackNavigatorProps, type StackHeaderProps as CoreStackHeaderProps, type StackNavigationProp, type StackNavigationHelpers, type ParamListBase, } from '@react-navigation/native'; import { StackView, type StackHeaderProps } from '@react-navigation/stack'; import invariant from 'invariant'; import * as React from 'react'; import { Platform, View } from 'react-native'; import { useSelector } from 'react-redux'; +import ThreadDraftUpdater from 'lib/components/thread-draft-updater.react'; import { isLoggedIn } from 'lib/selectors/user-selectors'; import { threadIsPending, threadMembersWithoutAddedAshoat, } from 'lib/shared/thread-utils'; import { firstLine } from 'lib/utils/string-utils'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react'; import SWMansionIcon from '../components/swmansion-icon.react'; import { InputStateContext } from '../input/input-state'; import HeaderBackButton from '../navigation/header-back-button.react'; import { defaultStackScreenOptions } from '../navigation/options'; import { ComposeSubchannelRouteName, DeleteThreadRouteName, ThreadSettingsRouteName, MessageListRouteName, ChatThreadListRouteName, HomeChatThreadListRouteName, BackgroundChatThreadListRouteName, type ScreenParamList, type ChatParamList, type ChatTopTabsParamList, } from '../navigation/route-names'; import { useColors, useStyles } from '../themes/colors'; import BackgroundChatThreadList from './background-chat-thread-list.react'; import ChatHeader from './chat-header.react'; import ChatRouter, { type ChatRouterNavigationHelpers } from './chat-router'; import ComposeSubchannel from './compose-subchannel.react'; import ComposeThreadButton from './compose-thread-button.react'; import HomeChatThreadList from './home-chat-thread-list.react'; import MessageListContainer from './message-list-container.react'; import MessageListHeaderTitle from './message-list-header-title.react'; import MessageStorePruner from './message-store-pruner.react'; import DeleteThread from './settings/delete-thread.react'; import ThreadSettings from './settings/thread-settings.react'; -import ThreadDraftUpdater from './thread-draft-updater.react'; import ThreadScreenPruner from './thread-screen-pruner.react'; import ThreadSettingsButton from './thread-settings-button.react'; const unboundStyles = { keyboardAvoidingView: { flex: 1, }, view: { flex: 1, backgroundColor: 'listBackground', }, threadListHeaderStyle: { elevation: 0, shadowOffset: { width: 0, height: 0 }, borderBottomWidth: 0, backgroundColor: 'tabBarBackground', }, }; export type ChatTopTabsNavigationProp< RouteName: $Keys = $Keys, > = MaterialTopTabNavigationProp; const homeChatThreadListOptions = { title: 'Focused', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; const backgroundChatThreadListOptions = { title: 'Background', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; const ChatThreadsTopTab = createMaterialTopTabNavigator(); function ChatThreadsComponent(): React.Node { const colors = useColors(); const { tabBarBackground, tabBarAccent } = colors; const screenOptions = React.useMemo( () => ({ tabBarShowIcon: true, tabBarStyle: { backgroundColor: tabBarBackground, }, tabBarItemStyle: { flexDirection: 'row', }, tabBarIndicatorStyle: { borderColor: tabBarAccent, borderBottomWidth: 2, }, }), [tabBarAccent, tabBarBackground], ); return ( ); } export type ChatNavigationHelpers = { ...$Exact>, ...ChatRouterNavigationHelpers, }; type ChatNavigatorProps = StackNavigatorProps>; function ChatNavigator({ initialRouteName, children, screenOptions, defaultScreenOptions, screenListeners, id, ...rest }: ChatNavigatorProps) { const { state, descriptors, navigation } = useNavigationBuilder(ChatRouter, { id, initialRouteName, children, screenOptions, defaultScreenOptions, screenListeners, }); // Clear ComposeSubchannel screens after each message is sent. If a user goes // to ComposeSubchannel to create a new thread, but finds an existing one and // uses it instead, we can assume the intent behind opening ComposeSubchannel // is resolved const inputState = React.useContext(InputStateContext); invariant(inputState, 'InputState should be set in ChatNavigator'); const clearComposeScreensAfterMessageSend = React.useCallback(() => { navigation.clearScreens([ComposeSubchannelRouteName]); }, [navigation]); React.useEffect(() => { inputState.registerSendCallback(clearComposeScreensAfterMessageSend); return () => { inputState.unregisterSendCallback(clearComposeScreensAfterMessageSend); }; }, [inputState, clearComposeScreensAfterMessageSend]); return ( ); } const createChatNavigator = createNavigatorFactory< StackNavigationState, StackOptions, StackNavigationEventMap, ChatNavigationHelpers<>, ExtraStackNavigatorProps, >(ChatNavigator); const header = (props: CoreStackHeaderProps) => { // Flow has trouble reconciling identical types between different libdefs, // and flow-typed has no way for one libdef to depend on another const castProps: StackHeaderProps = (props: any); return ; }; const headerBackButton = props => ; const messageListOptions = ({ navigation, route }) => { const isSearchEmpty = !!route.params.searching && threadMembersWithoutAddedAshoat(route.params.threadInfo).length === 1; const areSettingsEnabled = !threadIsPending(route.params.threadInfo.id) && !isSearchEmpty; return { // This is a render prop, not a component // eslint-disable-next-line react/display-name headerTitle: props => ( ), headerRight: Platform.OS === 'android' && areSettingsEnabled ? // This is a render prop, not a component // eslint-disable-next-line react/display-name () => ( ) : undefined, headerBackTitleVisible: false, }; }; const composeThreadOptions = { headerTitle: 'Compose chat', headerBackTitleVisible: false, }; const threadSettingsOptions = ({ route }) => ({ headerTitle: firstLine(route.params.threadInfo.uiName), headerBackTitleVisible: false, }); const deleteThreadOptions = { headerTitle: 'Delete chat', headerBackTitleVisible: false, }; export type ChatNavigationProp< RouteName: $Keys = $Keys, > = { ...StackNavigationProp, ...ChatRouterNavigationHelpers, }; const Chat = createChatNavigator< ScreenParamList, ChatParamList, ChatNavigationHelpers, >(); // eslint-disable-next-line no-unused-vars export default function ChatComponent(props: { ... }): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const loggedIn = useSelector(isLoggedIn); let draftUpdater = null; if (loggedIn) { draftUpdater = ; } const screenOptions = React.useMemo( () => ({ ...defaultStackScreenOptions, header, headerLeft: headerBackButton, headerStyle: { backgroundColor: colors.tabBarBackground, borderBottomWidth: 1, }, }), [colors.tabBarBackground], ); const chatThreadListOptions = React.useCallback( ({ navigation }) => ({ headerTitle: 'Inbox', headerRight: Platform.OS === 'ios' ? () => : undefined, headerBackTitleVisible: false, headerStyle: styles.threadListHeaderStyle, }), [styles.threadListHeaderStyle], ); return ( {draftUpdater} ); }