Differential D4056 Diff 12970 native/chat/sidebar-list-modal.react.js

Changeset View

Standalone View

native/chat/sidebar-list-modal.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';
	import { TextInput, FlatList, StyleSheet } from 'react-native';			import { TextInput, FlatList, StyleSheet } from 'react-native';

	import { useSearchSidebars } from 'lib/hooks/search-sidebars';			import { useSearchSidebars } from 'lib/hooks/search-sidebars';
	import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
	import SearchIndex from 'lib/shared/search-index';
	import { threadSearchText } from 'lib/shared/thread-utils';
	import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';			import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';

	import Modal from '../components/modal.react';			import Modal from '../components/modal.react';
	import Search from '../components/search.react';			import Search from '../components/search.react';
	import type { RootNavigationProp } from '../navigation/root-navigator.react';			import type { RootNavigationProp } from '../navigation/root-navigator.react';
	import type { NavigationRoute } from '../navigation/route-names';			import type { NavigationRoute } from '../navigation/route-names';
	import { useSelector } from '../redux/redux-utils';
	import { useIndicatorStyle } from '../themes/colors';			import { useIndicatorStyle } from '../themes/colors';
	import { waitForModalInputFocus } from '../utils/timers';			import { waitForModalInputFocus } from '../utils/timers';
	import { useNavigateToThread } from './message-list-types';			import { useNavigateToThread } from './message-list-types';
	import { SidebarItem } from './sidebar-item.react';			import { SidebarItem } from './sidebar-item.react';

	export type SidebarListModalParams = {			export type SidebarListModalParams = {
	+threadInfo: ThreadInfo,			+threadInfo: ThreadInfo,
	};			};

	function keyExtractor(sidebarInfo: SidebarInfo) {			function keyExtractor(sidebarInfo: SidebarInfo) {
	return sidebarInfo.threadInfo.id;			return sidebarInfo.threadInfo.id;
	}			}
	function getItemLayout(data: ?$ReadOnlyArray<SidebarInfo>, index: number) {			function getItemLayout(data: ?$ReadOnlyArray<SidebarInfo>, index: number) {
	return { length: 24, offset: 24 * index, index };			return { length: 24, offset: 24 * index, index };
	}			}

	type Props = {			type Props = {
	+navigation: RootNavigationProp<'SidebarListModal'>,			+navigation: RootNavigationProp<'SidebarListModal'>,
	+route: NavigationRoute<'SidebarListModal'>,			+route: NavigationRoute<'SidebarListModal'>,
	};			};
	function SidebarListModal(props: Props): React.Node {			function SidebarListModal(props: Props): React.Node {
	const threadID = props.route.params.threadInfo.id;			const {
	const { listData, searchState, setSearchState } = useSearchSidebars(			listData,
	props.route.params.threadInfo,			searchState,
	);			setSearchState,
	const sidebarInfos = useSelector(			searchIndex,
	state => sidebarInfoSelector(state)[threadID] ?? [],			} = useSearchSidebars(props.route.params.threadInfo);
	);

	const userInfos = useSelector(state => state.userStore.userInfos);
	const viewerID = useSelector(
	state => state.currentUserInfo && state.currentUserInfo.id,
	);
	const searchIndex = React.useMemo(() => {
	const index = new SearchIndex();
	for (const sidebarInfo of sidebarInfos) {
	const { threadInfo } = sidebarInfo;
	index.addEntry(
	threadInfo.id,
	threadSearchText(threadInfo, userInfos, viewerID),
	);
	}
	return index;
	}, [sidebarInfos, userInfos, viewerID]);
	React.useEffect(() => {
	setSearchState(curState => ({
	...curState,
	results: new Set(searchIndex.getSearchResults(curState.text)),
	}));
	}, [searchIndex, setSearchState]);

	const onChangeSearchText = React.useCallback(			const onChangeSearchText = React.useCallback(
	(searchText: string) =>			(searchText: string) =>
	setSearchState({			setSearchState({
	text: searchText,			text: searchText,
	results: new Set(searchIndex.getSearchResults(searchText)),			results: new Set(searchIndex.getSearchResults(searchText)),
	}),			}),
	[searchIndex, setSearchState],			[searchIndex, setSearchState],
	▲ Show 20 Lines • Show All 80 Lines • Show Last 20 Lines