From 3b3cd67d7873e5333d5f53c2c6144a47c9e34563 Mon Sep 17 00:00:00 2001 From: Alex Junior Date: Fri, 1 Apr 2022 12:32:17 -0300 Subject: [PATCH] Chore: Clean ReactionsModal - TypeScript (#3926) --- app/containers/ReactionsModal.tsx | 70 ++++++++++++++++--------------- app/stacks/types.ts | 4 +- app/views/MessagesView/index.tsx | 3 +- app/views/RoomView/index.tsx | 6 +-- 4 files changed, 43 insertions(+), 40 deletions(-) diff --git a/app/containers/ReactionsModal.tsx b/app/containers/ReactionsModal.tsx index 2cf27a284..2bbd9fa4f 100644 --- a/app/containers/ReactionsModal.tsx +++ b/app/containers/ReactionsModal.tsx @@ -8,7 +8,7 @@ import I18n from '../i18n'; import { CustomIcon } from '../lib/Icons'; import sharedStyles from '../views/Styles'; import { themes } from '../constants/colors'; -import { withTheme } from '../theme'; +import { useTheme, withTheme } from '../theme'; import { TGetCustomEmoji } from '../definitions/IEmoji'; import { TMessageModel, ILoggedUser } from '../definitions'; import SafeAreaView from './SafeAreaView'; @@ -61,38 +61,37 @@ const styles = StyleSheet.create({ const standardEmojiStyle = { fontSize: 20 }; const customEmojiStyle = { width: 20, height: 20 }; -interface IItem { - item: { - usernames: any; - emoji: string; - }; +interface ISharedFields { user?: Pick; - baseUrl?: string; - getCustomEmoji?: TGetCustomEmoji; - theme?: string; + baseUrl: string; + getCustomEmoji: TGetCustomEmoji; } -interface IModalContent { +interface IItem extends ISharedFields { + item: { + usernames: string[]; + emoji: string; + }; +} + +interface IModalContent extends ISharedFields { message?: TMessageModel; onClose: () => void; theme: string; } -interface IReactionsModal { - message?: any; - user?: Pick; +interface IReactionsModal extends ISharedFields { + message?: TMessageModel; isVisible: boolean; onClose(): void; - baseUrl: string; - getCustomEmoji?: TGetCustomEmoji; - theme: string; } -const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: IItem) => { +const Item = React.memo(({ item, user, baseUrl, getCustomEmoji }: IItem) => { + const { theme } = useTheme(); const count = item.usernames.length; let usernames = item.usernames .slice(0, 3) - .map((username: any) => (username === user?.username ? I18n.t('you') : username)) + .map((username: string) => (username === user?.username ? I18n.t('you') : username)) .join(', '); if (count > 3) { usernames = `${usernames} ${I18n.t('and_more')} ${count - 3}`; @@ -106,15 +105,15 @@ const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: IItem) content={item.emoji} standardEmojiStyle={standardEmojiStyle} customEmojiStyle={customEmojiStyle} - baseUrl={baseUrl!} - getCustomEmoji={getCustomEmoji!} + baseUrl={baseUrl} + getCustomEmoji={getCustomEmoji} /> - + {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} - {usernames} + {usernames} ); @@ -143,18 +142,21 @@ const ModalContent = React.memo(({ message, onClose, ...props }: IModalContent) }); const ReactionsModal = React.memo( - ({ isVisible, onClose, theme, ...props }: IReactionsModal) => ( - - - - ), - (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible && prevProps.theme === nextProps.theme + ({ isVisible, onClose, ...props }: IReactionsModal) => { + const { theme } = useTheme(); + return ( + + + + ); + }, + (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible ); ReactionsModal.displayName = 'ReactionsModal'; diff --git a/app/stacks/types.ts b/app/stacks/types.ts index ed4f161dd..119dfa709 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -6,7 +6,7 @@ import { IRoom } from '../definitions/IRoom'; import { IOptionsField } from '../views/NotificationPreferencesView/options'; import { IServer } from '../definitions/IServer'; import { IAttachment } from '../definitions/IAttachment'; -import { IMessage } from '../definitions/IMessage'; +import { IMessage, TMessageModel } from '../definitions/IMessage'; import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription'; import { ICannedResponse } from '../definitions/ICannedResponse'; import { ModalStackParamList } from './MasterDetailStack/types'; @@ -24,7 +24,7 @@ export type ChatsStackParamList = { rid: string; t: SubscriptionType; tmid?: string; - message?: object; // TODO: TMessageModel? + message?: TMessageModel; name?: string; fname?: string; prid?: string; diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx index 67ddffdd6..78983693c 100644 --- a/app/views/MessagesView/index.tsx +++ b/app/views/MessagesView/index.tsx @@ -22,6 +22,7 @@ import styles from './styles'; import { ChatsStackParamList } from '../../stacks/types'; import { ISubscription, SubscriptionType } from '../../definitions/ISubscription'; import { IEmoji } from '../../definitions/IEmoji'; +import { TMessageModel } from '../../definitions'; interface IMessagesViewProps { user: { @@ -79,7 +80,7 @@ interface IParams { rid: string; t: SubscriptionType; tmid?: string; - message?: object; + message?: TMessageModel; name?: string; fname?: string; prid?: string; diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index b8800783d..c38e1c284 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -77,6 +77,7 @@ import { IVisitor, SubscriptionType, TAnyMessageModel, + TMessageModel, TSubscriptionModel, TThreadModel } from '../../definitions'; @@ -150,7 +151,7 @@ interface IRoomViewState { member: any; lastOpen: Date | null; reactionsModalVisible: boolean; - selectedMessage?: Object; + selectedMessage?: TAnyMessageModel; canAutoTranslate: boolean; loading: boolean; showingBlockingLoader: boolean; @@ -686,7 +687,7 @@ class RoomView extends React.Component { id: message.subscription.id }, msg: message?.attachments?.[0]?.description || message.msg - }; + } as TMessageModel; this.setState({ selectedMessage: newMessage, editing: true }); }; @@ -1374,7 +1375,6 @@ class RoomView extends React.Component { baseUrl={baseUrl} onClose={this.onCloseReactionsModal} getCustomEmoji={this.getCustomEmoji} - theme={theme} />