diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts index 6d0a15369..c9be40af9 100644 --- a/app/containers/message/interfaces.ts +++ b/app/containers/message/interfaces.ts @@ -59,6 +59,7 @@ export interface IUser { export type UserMention = Pick; export interface IMessageContent { + _id: string; isTemp: boolean; isInfo: boolean; tmid: string; diff --git a/app/views/SearchMessagesView/index.js b/app/views/SearchMessagesView/index.tsx similarity index 77% rename from app/views/SearchMessagesView/index.js rename to app/views/SearchMessagesView/index.tsx index c36425edd..a9be99918 100644 --- a/app/views/SearchMessagesView/index.js +++ b/app/views/SearchMessagesView/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/core'; import { FlatList, Text, View } from 'react-native'; import { Q } from '@nozbe/watermelondb'; import { connect } from 'react-redux'; @@ -12,6 +13,7 @@ import debounce from '../../utils/debounce'; import RocketChat from '../../lib/rocketchat'; import Message from '../../containers/message'; import scrollPersistTaps from '../../utils/scrollPersistTaps'; +import { IMessage, IMessageAttachments } from '../../containers/message/interfaces'; import I18n from '../../i18n'; import StatusBar from '../../containers/StatusBar'; import log from '../../utils/log'; @@ -29,9 +31,52 @@ import { compareServerVersion, methods } from '../../lib/utils'; import styles from './styles'; const QUERY_SIZE = 50; -class SearchMessagesView extends React.Component { - static navigationOptions = ({ navigation, route }) => { - const options = { + +type TRouteParams = { + SearchMessagesView: { + showCloseModal?: boolean; + rid: string; + t?: string; + encrypted?: boolean; + }; +}; + +interface ISearchMessagesViewState { + loading: boolean; + messages: IMessage[]; + searchText: string; +} +interface INavigationOption { + navigation: StackNavigationProp; + route: RouteProp; +} + +interface ISearchMessagesViewProps extends INavigationOption { + user: { id: string }; + baseUrl: string; + serverVersion: string; + customEmojis: { + [key: string]: { + name: string; + extension: string; + }; + }; + theme: string; + useRealName: boolean; +} +class SearchMessagesView extends React.Component { + private offset: number; + + private rid: string; + + private t: string | undefined; + + private encrypted: boolean | undefined; + + private room: { rid: any; name: any; fname: any; t: any } | null | undefined; + + static navigationOptions = ({ navigation, route }: INavigationOption) => { + const options: StackNavigationOptions = { title: I18n.t('Search') }; const showCloseModal = route.params?.showCloseModal; @@ -41,18 +86,7 @@ class SearchMessagesView extends React.Component { return options; }; - static propTypes = { - navigation: PropTypes.object, - route: PropTypes.object, - user: PropTypes.object, - baseUrl: PropTypes.string, - serverVersion: PropTypes.string, - customEmojis: PropTypes.object, - theme: PropTypes.string, - useRealName: PropTypes.bool - }; - - constructor(props) { + constructor(props: ISearchMessagesViewProps) { super(props); this.state = { loading: false, @@ -60,7 +94,7 @@ class SearchMessagesView extends React.Component { searchText: '' }; this.offset = 0; - this.rid = props.route.params?.rid; + this.rid = props.route.params.rid; this.t = props.route.params?.t; this.encrypted = props.route.params?.encrypted; } @@ -69,7 +103,7 @@ class SearchMessagesView extends React.Component { this.room = await getRoomInfo(this.rid); } - shouldComponentUpdate(nextProps, nextState) { + shouldComponentUpdate(nextProps: ISearchMessagesViewProps, nextState: ISearchMessagesViewState) { const { loading, searchText, messages } = this.state; const { theme } = this.props; if (nextProps.theme !== theme) { @@ -88,11 +122,11 @@ class SearchMessagesView extends React.Component { } componentWillUnmount() { - this.search?.stop?.(); + this.searchDebounced?.stop?.(); } // Handle encrypted rooms search messages - searchMessages = async searchText => { + searchMessages = async (searchText: string) => { if (!searchText) { return []; } @@ -117,7 +151,7 @@ class SearchMessagesView extends React.Component { } }; - getMessages = async (searchText, debounced) => { + getMessages = async (searchText: string, debounced?: boolean) => { try { const messages = await this.searchMessages(searchText); this.setState(prevState => ({ @@ -130,17 +164,17 @@ class SearchMessagesView extends React.Component { } }; - search = searchText => { + search = (searchText: string) => { this.offset = 0; this.setState({ searchText, loading: true, messages: [] }); this.searchDebounced(searchText); }; - searchDebounced = debounce(async searchText => { + searchDebounced = debounce(async (searchText: string) => { await this.getMessages(searchText, true); }, 1000); - getCustomEmoji = name => { + getCustomEmoji = (name: string) => { const { customEmojis } = this.props; const emoji = customEmojis[name]; if (emoji) { @@ -149,12 +183,12 @@ class SearchMessagesView extends React.Component { return null; }; - showAttachment = attachment => { + showAttachment = (attachment: IMessageAttachments) => { const { navigation } = this.props; navigation.navigate('AttachmentView', { attachment }); }; - navToRoomInfo = navParam => { + navToRoomInfo = (navParam: IMessage) => { const { navigation, user } = this.props; if (navParam.rid === user.id) { return; @@ -162,9 +196,9 @@ class SearchMessagesView extends React.Component { navigation.navigate('RoomInfoView', navParam); }; - jumpToMessage = async ({ item }) => { + jumpToMessage = async ({ item }: { item: IMessage }) => { const { navigation } = this.props; - let params = { + let params: any = { rid: this.rid, jumpToMessageId: item._id, t: this.t, @@ -210,7 +244,7 @@ class SearchMessagesView extends React.Component { ); }; - renderItem = ({ item }) => { + renderItem = ({ item }: { item: IMessage }) => { const { user, baseUrl, theme, useRealName } = this.props; return ( + {/* @ts-ignore */} @@ -277,7 +312,7 @@ class SearchMessagesView extends React.Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ serverVersion: state.server.version, baseUrl: state.server.server, user: getUserSelector(state), diff --git a/app/views/SearchMessagesView/styles.js b/app/views/SearchMessagesView/styles.ts similarity index 100% rename from app/views/SearchMessagesView/styles.js rename to app/views/SearchMessagesView/styles.ts