diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -68,7 +68,10 @@ type ScreenParamList, type ChatParamList, type ChatTopTabsParamList, + MessageSearchRouteName, } from '../navigation/route-names.js'; +import MessageSearch from '../search/message-search.react.js'; +import SearchHeader from '../search/search-header.react.js'; import { useColors, useStyles } from '../themes/colors.js'; const unboundStyles = { @@ -268,6 +271,14 @@ headerTitle: 'Delete chat', headerBackTitleVisible: false, }; +const messageSearchOptions = { + // eslint-disable-next-line react/display-name + headerTitle: () => , + headerBackTitleVisible: false, + headerTitleContainerStyle: { + width: '100%', + }, +}; const messageResultsScreenOptions = { headerTitle: 'Pinned Messages', headerBackTitleVisible: false, @@ -385,6 +396,11 @@ component={MessageResultsScreen} options={messageResultsScreenOptions} /> + diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -33,6 +33,7 @@ import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js'; import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js'; import type { RelationshipListItemTooltipModalParams } from '../profile/relationship-list-item-tooltip-modal.react.js'; +import type { MessageSearchParams } from '../search/message-search.react.js'; export const ActionResultModalRouteName = 'ActionResultModal'; export const AddUsersModalRouteName = 'AddUsersModal'; @@ -95,6 +96,7 @@ export const KeyserverSelectionRouteName = 'KeyserverSelection'; export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection'; export const ConnectEthereumRouteName = 'ConnectEthereum'; +export const MessageSearchRouteName = 'MessageSearch'; export type RootParamList = { +LoggedOutModal: void, @@ -159,6 +161,7 @@ +DeleteThread: DeleteThreadParams, +FullScreenThreadMediaGallery: FullScreenThreadMediaGalleryParams, +MessageResultsScreen: MessageResultsScreenParams, + +MessageSearch: MessageSearchParams, }; export type ChatTopTabsParamList = { diff --git a/native/search/message-search.react.js b/native/search/message-search.react.js new file mode 100644 --- /dev/null +++ b/native/search/message-search.react.js @@ -0,0 +1,76 @@ +/* eslint-disable no-unused-vars */ +// @flow + +import invariant from 'invariant'; +import * as React from 'react'; +import { View } from 'react-native'; + +import type { ThreadInfo } from 'lib/types/thread-types.js'; + +import { MessageSearchContext } from './search-provider.react.js'; +import Statement from './statement.react.js'; +import type { ChatNavigationProp } from '../chat/chat.react.js'; +import type { NavigationRoute } from '../navigation/route-names.js'; +import { useStyles } from '../themes/colors.js'; +import type { ChatMessageItemWithHeight } from '../types/chat-types.js'; + +export type MessageSearchParams = { + +threadInfo: ThreadInfo, +}; + +export type MessageSearchProps = { + +navigation: ChatNavigationProp<'MessageSearch'>, + +route: NavigationRoute<'MessageSearch'>, +}; + +function MessageSearch(props: MessageSearchProps): React.Node { + const searchContext = React.useContext(MessageSearchContext); + invariant(searchContext, 'searchContext should be set'); + const { query, clearQuery } = searchContext; + + React.useEffect(() => { + return props.navigation.addListener('beforeRemove', () => { + clearQuery(); + }); + }, [props.navigation, clearQuery]); + + const [measuredMessages, setMeasuredMessages] = React.useState([]); + + const appendMeasuredMessages = React.useCallback( + (newMessages: $ReadOnlyArray) => { + setMeasuredMessages(oldMessages => [ + ...oldMessages.filter(item => item.itemType !== 'loader'), + ...newMessages, + ]); + }, + [], + ); + + const [lastID, setLastID] = React.useState(undefined); + + React.useEffect(() => { + setMeasuredMessages([]); + setLastID(undefined); + }, [query]); + + const styles = useStyles(unboundStyles); + + if (query === '') { + return ( + + + + ); + } + + return ; +} + +const unboundStyles = { + content: { + height: '100%', + backgroundColor: 'panelBackground', + }, +}; + +export default MessageSearch;