From 1d452ed9e648fb06c3515ebe15271a2ca4d465dc Mon Sep 17 00:00:00 2001 From: Alex Junior Date: Tue, 10 May 2022 23:22:17 -0300 Subject: [PATCH] Chore: Evaluate MessagesView - TypeScript (#4113) --- app/definitions/IMessage.ts | 13 ++---- app/lib/services/restApi.ts | 4 +- app/views/MessagesView/index.tsx | 76 ++++++++++++++------------------ 3 files changed, 38 insertions(+), 55 deletions(-) diff --git a/app/definitions/IMessage.ts b/app/definitions/IMessage.ts index e92ba2004..e85e572b5 100644 --- a/app/definitions/IMessage.ts +++ b/app/definitions/IMessage.ts @@ -89,11 +89,7 @@ export interface IMessageFromServer { drid?: string; dcount?: number; dml: string | Date; - starred?: - | { - _id: string; - } - | boolean; + starred?: boolean; pinned?: boolean; pinnedAt?: string | Date; pinnedBy?: { @@ -120,11 +116,6 @@ export interface IMessage extends IMessageFromServer { emoji?: string; status?: number; pinned?: boolean; - starred?: - | { - _id: string; - } - | boolean; editedBy?: IEditedBy; reactions?: IReaction[]; role?: string; @@ -144,6 +135,8 @@ export interface IMessage extends IMessageFromServer { tshow?: boolean; comment?: string; subscription?: { id: string }; + user?: string; + editedAt?: string | Date; } export type TMessageModel = IMessage & Model; diff --git a/app/lib/services/restApi.ts b/app/lib/services/restApi.ts index 502220e9d..04f4ca967 100644 --- a/app/lib/services/restApi.ts +++ b/app/lib/services/restApi.ts @@ -254,7 +254,7 @@ export const markAsUnread = ({ messageId }: { messageId: string }) => // RC 0.65.0 sdk.post('subscriptions.unread', { firstUnreadMessage: { _id: messageId } }); -export const toggleStarMessage = (messageId: string, starred: boolean) => { +export const toggleStarMessage = (messageId: string, starred?: boolean) => { if (starred) { // RC 0.59.0 return sdk.post('chat.unStarMessage', { messageId }); @@ -263,7 +263,7 @@ export const toggleStarMessage = (messageId: string, starred: boolean) => { return sdk.post('chat.starMessage', { messageId }); }; -export const togglePinMessage = (messageId: string, pinned: boolean) => { +export const togglePinMessage = (messageId: string, pinned?: boolean) => { if (pinned) { // RC 0.59.0 return sdk.post('chat.unPinMessage', { messageId }); diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx index 042cdddda..843b29bb8 100644 --- a/app/views/MessagesView/index.tsx +++ b/app/views/MessagesView/index.tsx @@ -20,7 +20,17 @@ import getThreadName from '../../lib/methods/getThreadName'; import styles from './styles'; import { ChatsStackParamList } from '../../stacks/types'; import { IRoomInfoParam } from '../SearchMessagesView'; -import { TMessageModel, IEmoji, ISubscription, SubscriptionType, IUrl } from '../../definitions'; +import { + IApplicationState, + TMessageModel, + IEmoji, + ISubscription, + SubscriptionType, + IAttachment, + IMessage, + TAnyMessageModel, + IUrl +} from '../../definitions'; import { Services } from '../../lib/services'; interface IMessagesViewProps { @@ -37,36 +47,19 @@ interface IMessagesViewProps { route: RouteProp; customEmojis: { [key: string]: IEmoji }; theme: TSupportedThemes; - showActionSheet: Function; + showActionSheet: (params: { options: string[]; hasCancel: boolean }) => void; useRealName: boolean; isMasterDetail: boolean; } interface IMessagesViewState { loading: boolean; - messages: []; + messages: IMessage[]; + message?: IMessage; fileLoading: boolean; total: number; } -interface IMessageItem { - u?: string; - user?: string; - editedAt?: Date; - attachments?: any; - _id: string; - tmid?: string; - ts?: Date; - uploadedAt?: Date; - name?: string; - description?: string; - msg?: string; - starred: boolean; - pinned: boolean; - type: string; - url: string; -} - interface IParams { rid: string; t: SubscriptionType; @@ -75,24 +68,25 @@ interface IParams { name?: string; fname?: string; prid?: string; - room: ISubscription; + room?: ISubscription; jumpToMessageId?: string; jumpToThreadId?: string; roomUserId?: string; } -class MessagesView extends React.Component { +class MessagesView extends React.Component { private rid: string; private t: SubscriptionType; private content: any; - private room: any; + private room?: ISubscription; constructor(props: IMessagesViewProps) { super(props); this.state = { loading: false, messages: [], - fileLoading: true + fileLoading: true, + total: 0 }; this.setHeader(); this.rid = props.route.params?.rid; @@ -104,7 +98,7 @@ class MessagesView extends React.Component { this.load(); } - shouldComponentUpdate(nextProps: IMessagesViewProps, nextState: any) { + shouldComponentUpdate(nextProps: IMessagesViewProps, nextState: IMessagesViewState) { const { loading, messages, fileLoading } = this.state; const { theme } = this.props; if (nextProps.theme !== theme) { @@ -137,7 +131,7 @@ class MessagesView extends React.Component { navigation.navigate('RoomInfoView', navParam); }; - jumpToMessage = async ({ item }: { item: IMessageItem }) => { + jumpToMessage = async ({ item }: { item: IMessage }) => { const { navigation, isMasterDetail } = this.props; let params: IParams = { rid: this.rid, @@ -165,7 +159,7 @@ class MessagesView extends React.Component { defineMessagesViewContent = (name: string) => { const { user, baseUrl, theme, useRealName } = this.props; - const renderItemCommonProps = (item: IMessageItem) => ({ + const renderItemCommonProps = (item: TAnyMessageModel) => ({ item, baseUrl, user, @@ -224,8 +218,7 @@ class MessagesView extends React.Component { }, noDataMsg: I18n.t('No_mentioned_messages'), testID: 'mentioned-messages-view', - // @ts-ignore TODO: unify IMessage - renderItem: (item: IMessageItem) => + renderItem: (item: TAnyMessageModel) => }, // Starred Messages Screen Starred: { @@ -236,16 +229,15 @@ class MessagesView extends React.Component { }, noDataMsg: I18n.t('No_starred_messages'), testID: 'starred-messages-view', - renderItem: (item: IMessageItem) => ( - // @ts-ignore TODO: unify IMessage + renderItem: (item: TAnyMessageModel) => ( this.onLongPress(item)} theme={theme} /> ), - action: (message: IMessageItem) => ({ + action: (message: IMessage) => ({ title: I18n.t('Unstar'), icon: message.starred ? 'star-filled' : 'star', onPress: this.handleActionPress }), - handleActionPress: (message: IMessageItem) => Services.toggleStarMessage(message._id, message.starred) + handleActionPress: (message: IMessage) => Services.toggleStarMessage(message._id, message.starred) }, // Pinned Messages Screen Pinned: { @@ -256,14 +248,12 @@ class MessagesView extends React.Component { }, noDataMsg: I18n.t('No_pinned_messages'), testID: 'pinned-messages-view', - renderItem: (item: IMessageItem) => ( - // @ts-ignore TODO: unify IMessage + renderItem: (item: TAnyMessageModel) => ( this.onLongPress(item)} theme={theme} /> ), action: () => ({ title: I18n.t('Unpin'), icon: 'pin', onPress: this.handleActionPress }), - handleActionPress: (message: IMessageItem) => Services.togglePinMessage(message._id, message.pinned) + handleActionPress: (message: IMessage) => Services.togglePinMessage(message._id, message.pinned) } - // @ts-ignore }[name]; }; @@ -316,12 +306,12 @@ class MessagesView extends React.Component { return null; }; - showAttachment = (attachment: any) => { + showAttachment = (attachment: IAttachment) => { const { navigation } = this.props; navigation.navigate('AttachmentView', { attachment }); }; - onLongPress = (message: IMessageItem) => { + onLongPress = (message: IMessage) => { this.setState({ message }, this.showActionSheet); }; @@ -338,7 +328,7 @@ class MessagesView extends React.Component { const result = await this.content.handleActionPress(message); if (result.success) { this.setState((prevState: IMessagesViewState) => ({ - messages: prevState.messages.filter((item: IMessageItem) => item._id !== message._id), + messages: prevState.messages.filter((item: IMessage) => item._id !== message?._id), total: prevState.total - 1 })); } @@ -360,7 +350,7 @@ class MessagesView extends React.Component { ); }; - renderItem = ({ item }: { item: IMessageItem }) => this.content.renderItem(item); + renderItem = ({ item }: { item: IMessage }) => this.content.renderItem(item); render() { const { messages, loading } = this.state; @@ -386,7 +376,7 @@ class MessagesView extends React.Component { } } -const mapStateToProps = (state: any) => ({ +const mapStateToProps = (state: IApplicationState) => ({ baseUrl: state.server.server, user: getUserSelector(state), customEmojis: state.customEmojis,