Differential D7775 Diff 26420 native/search/message-search.react.js

Changeset View

Standalone View

native/search/message-search.react.js

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View } from 'react-native';		import { View } from 'react-native';

import type { MessageInfo } from 'lib/types/message-types.js';		import type { MessageInfo } from 'lib/types/message-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';		import type { ThreadInfo } from 'lib/types/thread-types.js';

		import MessageSearchContent from './search-content.react.js';
import SearchFooter from './search-footer.react.js';		import SearchFooter from './search-footer.react.js';
import { MessageSearchContext } from './search-provider.react.js';		import { MessageSearchContext } from './search-provider.react.js';
import type { ChatNavigationProp } from '../chat/chat.react.js';		import type { ChatNavigationProp } from '../chat/chat.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';

export type MessageSearchParams = {		export type MessageSearchParams = {
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
Show All 10 Lines	function MessageSearch(props: MessageSearchProps): React.Node {
const { query, clearQuery } = searchContext;		const { query, clearQuery } = searchContext;

React.useEffect(() => {		React.useEffect(() => {
return props.navigation.addListener('beforeRemove', () => {		return props.navigation.addListener('beforeRemove', () => {
clearQuery();		clearQuery();
});		});
}, [props.navigation, clearQuery]);		}, [props.navigation, clearQuery]);

// eslint-disable-next-line no-unused-vars
const [lastID, setLastID] = React.useState();		const [lastID, setLastID] = React.useState();

// eslint-disable-next-line no-unused-vars
const [searchResults, setSearchResults] = React.useState([]);		const [searchResults, setSearchResults] = React.useState([]);

// eslint-disable-next-line no-unused-vars
const appendSearchResults = React.useCallback(		const appendSearchResults = React.useCallback(
(newMessages: $ReadOnlyArray<MessageInfo>) => {		(newMessages: $ReadOnlyArray<MessageInfo>) => {
setSearchResults(oldMessages => [...oldMessages, ...newMessages]);		setSearchResults(oldMessages => [...oldMessages, ...newMessages]);
},		},
[],		[],
);		);

React.useEffect(() => {		React.useEffect(() => {
setSearchResults([]);		setSearchResults([]);
setLastID(undefined);		setLastID(undefined);
}, [query]);		}, [query]);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

if (query === '') {		if (query === '') {
return (		return (
<View style={styles.content}>		<View style={styles.content}>
<SearchFooter text="Your search results will appear here" />		<SearchFooter text="Your search results will appear here" />
</View>		</View>
);		);
}		}

return null;		return (
		<MessageSearchContent
		navigation={props.navigation}
		route={props.route}
		query={query}
		lastSearchResultsID={lastID}
		setLastSearchResultsID={setLastID}
		searchResults={searchResults}
		appendSearchResults={appendSearchResults}
		/>
		);
}		}

const unboundStyles = {		const unboundStyles = {
content: {		content: {
height: '100%',		height: '100%',
backgroundColor: 'panelBackground',		backgroundColor: 'panelBackground',
},		},
};		};

export default MessageSearch;		export default MessageSearch;