Differential D8010 Diff 27740 native/chat/message-list-container.react.js

Changeset View

Standalone View

native/chat/message-list-container.react.js

// @flow		// @flow

import Icon from '@expo/vector-icons/FontAwesome5.js';		import Icon from '@expo/vector-icons/FontAwesome5.js';
import { useNavigationState } from '@react-navigation/native';		import { useNavigationState } from '@react-navigation/native';
import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, Text } from 'react-native';		import { View, Text } from 'react-native';

import genesis from 'lib/facts/genesis.js';		import genesis from 'lib/facts/genesis.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';		import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import {		import {
userInfoSelectorForPotentialMembers,		userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers,		userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js';		} from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js';		import {
		getPotentialMemberItems,
		useSearchUsers,
		} from 'lib/shared/search-utils.js';
import {		import {
useExistingThreadInfoFinder,		useExistingThreadInfoFinder,
pendingThreadType,		pendingThreadType,
} from 'lib/shared/thread-utils.js';		} from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';		import type { ThreadInfo } from 'lib/types/thread-types.js';
import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js';		import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js';

import { type MessagesMeasurer, useHeightMeasurer } from './chat-context.js';		import { type MessagesMeasurer, useHeightMeasurer } from './chat-context.js';
Show All 29 Lines
type Props = {		type Props = {
...BaseProps,		...BaseProps,
// Redux state		// Redux state
+usernameInputText: string,		+usernameInputText: string,
+updateUsernameInput: (text: string) => void,		+updateUsernameInput: (text: string) => void,
+userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,		+userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
+updateTagInput: (items: $ReadOnlyArray<AccountUserInfo>) => void,		+updateTagInput: (items: $ReadOnlyArray<AccountUserInfo>) => void,
+resolveToUser: (user: AccountUserInfo) => void,		+resolveToUser: (user: AccountUserInfo) => void,
+otherUserInfos: { [id: string]: AccountUserInfo },
+userSearchResults: $ReadOnlyArray<UserListItem>,		+userSearchResults: $ReadOnlyArray<UserListItem>,
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
+genesisThreadInfo: ?ThreadInfo,		+genesisThreadInfo: ?ThreadInfo,
+messageListData: ?$ReadOnlyArray<NativeChatMessageItem>,		+messageListData: ?$ReadOnlyArray<NativeChatMessageItem>,
+colors: Colors,		+colors: Colors,
+styles: typeof unboundStyles,		+styles: typeof unboundStyles,
// withOverlayContext		// withOverlayContext
+overlayContext: ?OverlayContextType,		+overlayContext: ?OverlayContextType,
▲ Show 20 Lines • Show All 79 Lines • ▼ Show 20 Lines	if (searching) {
<>		<>
{parentThreadHeader}		{parentThreadHeader}
<MessageListThreadSearch		<MessageListThreadSearch
usernameInputText={this.props.usernameInputText}		usernameInputText={this.props.usernameInputText}
updateUsernameInput={this.props.updateUsernameInput}		updateUsernameInput={this.props.updateUsernameInput}
userInfoInputArray={userInfoInputArray}		userInfoInputArray={userInfoInputArray}
updateTagInput={this.props.updateTagInput}		updateTagInput={this.props.updateTagInput}
resolveToUser={this.props.resolveToUser}		resolveToUser={this.props.resolveToUser}
otherUserInfos={this.props.otherUserInfos}
userSearchResults={this.props.userSearchResults}		userSearchResults={this.props.userSearchResults}
/>		/>
</>		</>
);		);
}		}

const showMessageList =		const showMessageList =
!searching \|\| this.props.userInfoInputArray.length > 0;		!searching \|\| this.props.userInfoInputArray.length > 0;
▲ Show 20 Lines • Show All 78 Lines • ▼ Show 20 Lines	const ConnectedMessageListContainer: React.ComponentType<BaseProps> =
) {		) {
const [usernameInputText, setUsernameInputText] = React.useState('');		const [usernameInputText, setUsernameInputText] = React.useState('');
const [userInfoInputArray, setUserInfoInputArray] = React.useState<		const [userInfoInputArray, setUserInfoInputArray] = React.useState<
$ReadOnlyArray<AccountUserInfo>,		$ReadOnlyArray<AccountUserInfo>,
>([]);		>([]);

const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);		const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);		const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
const userSearchResults = React.useMemo(
() =>		const serverSearchResults = useSearchUsers(usernameInputText);
getPotentialMemberItems({
		const userSearchResults = React.useMemo(() => {
		return getPotentialMemberItems({
text: usernameInputText,		text: usernameInputText,
userInfos: otherUserInfos,		userInfos: otherUserInfos,
searchIndex: userSearchIndex,		searchIndex: userSearchIndex,
excludeUserIDs: userInfoInputArray.map(userInfo => userInfo.id),		excludeUserIDs: userInfoInputArray.map(userInfo => userInfo.id),
}),		includeServerSearchUsers: serverSearchResults,
[usernameInputText, otherUserInfos, userSearchIndex, userInfoInputArray],		});
);		}, [
		usernameInputText,
		otherUserInfos,
		userSearchIndex,
		userInfoInputArray,
		serverSearchResults,
		]);

const [baseThreadInfo, setBaseThreadInfo] = React.useState(		const [baseThreadInfo, setBaseThreadInfo] = React.useState(
props.route.params.threadInfo,		props.route.params.threadInfo,
);		);

const existingThreadInfoFinder =		const existingThreadInfoFinder =
useExistingThreadInfoFinder(baseThreadInfo);		useExistingThreadInfoFinder(baseThreadInfo);

▲ Show 20 Lines • Show All 146 Lines • ▼ Show 20 Lines	return (
{pinnedCountBanner}		{pinnedCountBanner}
<MessageListContainer		<MessageListContainer
{...props}		{...props}
usernameInputText={usernameInputText}		usernameInputText={usernameInputText}
updateUsernameInput={updateUsernameInput}		updateUsernameInput={updateUsernameInput}
userInfoInputArray={userInfoInputArray}		userInfoInputArray={userInfoInputArray}
updateTagInput={updateTagInput}		updateTagInput={updateTagInput}
resolveToUser={resolveToUser}		resolveToUser={resolveToUser}
otherUserInfos={otherUserInfos}
userSearchResults={userSearchResults}		userSearchResults={userSearchResults}
threadInfo={threadInfo}		threadInfo={threadInfo}
genesisThreadInfo={genesisThreadInfo}		genesisThreadInfo={genesisThreadInfo}
messageListData={messageListData}		messageListData={messageListData}
colors={colors}		colors={colors}
styles={styles}		styles={styles}
overlayContext={overlayContext}		overlayContext={overlayContext}
measureMessages={measureMessages}		measureMessages={measureMessages}
/>		/>
</MessageListContextProvider>		</MessageListContextProvider>
);		);
});		});

export default ConnectedMessageListContainer;		export default ConnectedMessageListContainer;