Differential D4067 Diff 13094 lib/hooks/search-sidebars.js

Changeset View

Standalone View

lib/hooks/search-sidebars.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';

import { sidebarInfoSelector } from '../selectors/thread-selectors';		import { sidebarInfoSelector } from '../selectors/thread-selectors';
import SearchIndex from '../shared/search-index';		import SearchIndex from '../shared/search-index';
import { threadSearchText } from '../shared/thread-utils';		import { threadSearchText } from '../shared/thread-utils';
import type { SetState } from '../types/hook-types';		import type { SetState } from '../types/hook-types';
import type { SidebarInfo, ThreadInfo } from '../types/thread-types';		import type { SidebarInfo, ThreadInfo } from '../types/thread-types';
import { useSelector } from '../utils/redux-utils';		import { useSelector } from '../utils/redux-utils';

function useSearchSidebars(		function useSearchSidebars(
threadInfo: ThreadInfo,		threadInfo: ThreadInfo,
text: string,		text: string,
setSearchText?: SetState<string>,		setSearchText?: SetState<string>,
): {		): {
+listData: $ReadOnlyArray<SidebarInfo>,		+sidebars: $ReadOnlyArray<SidebarInfo>,
+setSearchState: SetState<$ReadOnlySet<string>>,		+setSearchState: SetState<$ReadOnlySet<string>>,
+onChangeSearchText: (		+onChangeSearchText: (
text: SyntheticEvent<HTMLInputElement> \| string,		text: SyntheticEvent<HTMLInputElement> \| string,
) => mixed,		) => mixed,
} {		} {
const [searchState, setSearchState] = React.useState(new Set<string>());		const [searchState, setSearchState] = React.useState(new Set<string>());

const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const sidebarInfos = useSelector(		const sidebarInfos = useSelector(
state => sidebarInfoSelector(state)[threadInfo.id] ?? [],		state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
);		);

const listData = React.useMemo(() => {		const sidebars = React.useMemo(() => {
if (!text) {		if (!text) {
return sidebarInfos;		return sidebarInfos;
}		}
return sidebarInfos.filter(sidebarInfo =>		return sidebarInfos.filter(sidebarInfo =>
searchState.has(sidebarInfo.threadInfo.id),		searchState.has(sidebarInfo.threadInfo.id),
);		);
}, [sidebarInfos, searchState, text]);		}, [sidebarInfos, searchState, text]);

Show All 29 Lines	): {

React.useEffect(() => {		React.useEffect(() => {
setSearchState(new Set(searchIndex.getSearchResults(text)));		setSearchState(new Set(searchIndex.getSearchResults(text)));
setSearchText?.(text);		setSearchText?.(text);
}, [searchIndex, setSearchState, setSearchText, text]);		}, [searchIndex, setSearchState, setSearchText, text]);

return React.useMemo(		return React.useMemo(
() => ({		() => ({
listData,		sidebars,
setSearchState,		setSearchState,
onChangeSearchText,		onChangeSearchText,
}),		}),
[listData, setSearchState, onChangeSearchText],		[sidebars, setSearchState, onChangeSearchText],
);		);
}		}

export { useSearchSidebars };		export { useSearchSidebars };