Chore: Clean ReactionsModal - TypeScript (#3926)

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 {
+interface ISharedFields {
-	item: {
-		usernames: any;
-		emoji: string;
-	};
 	user?: Pick<ILoggedUser, 'username'>;
-	baseUrl?: string;
+	baseUrl: string;
-	getCustomEmoji?: TGetCustomEmoji;
+	getCustomEmoji: TGetCustomEmoji;
-	theme?: string;
 }
 
-interface IModalContent {
+interface IItem extends ISharedFields {
+	item: {
+		usernames: string[];
+		emoji: string;
+	};
+}
+
+interface IModalContent extends ISharedFields {
 	message?: TMessageModel;
 	onClose: () => void;
 	theme: string;
 }
 
-interface IReactionsModal {
+interface IReactionsModal extends ISharedFields {
-	message?: any;
+	message?: TMessageModel;
-	user?: Pick<ILoggedUser, 'username'>;
 	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!}
+					baseUrl={baseUrl}
-					getCustomEmoji={getCustomEmoji!}
+					getCustomEmoji={getCustomEmoji}
 				/>
 			</View>
 			<View style={styles.peopleItemContainer}>
-				<Text style={[styles.reactCount, { color: themes[theme!].buttonText }]}>
+				<Text style={[styles.reactCount, { color: themes[theme].buttonText }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
 				</Text>
-				<Text style={[styles.peopleReacted, { color: themes[theme!].buttonText }]}>{usernames}</Text>
+				<Text style={[styles.peopleReacted, { color: themes[theme].buttonText }]}>{usernames}</Text>
 			</View>
 		</View>
 	);
@@ -143,7 +142,9 @@ const ModalContent = React.memo(({ message, onClose, ...props }: IModalContent)
 });
 
 const ReactionsModal = React.memo(
-	({ isVisible, onClose, theme, ...props }: IReactionsModal) => (
+	({ isVisible, onClose, ...props }: IReactionsModal) => {
+		const { theme } = useTheme();
+		return (
 			<Modal
 				isVisible={isVisible}
 				onBackdropPress={onClose}
@@ -153,8 +154,9 @@ const ReactionsModal = React.memo(
 				swipeDirection={['up', 'left', 'right', 'down']}>
 				<ModalContent onClose={onClose} theme={theme} {...props} />
 			</Modal>
-	),
+		);
-	(prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible && prevProps.theme === nextProps.theme
+	},
+	(prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible
 );
 
 ReactionsModal.displayName = 'ReactionsModal';

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;

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;

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<IRoomViewProps, IRoomViewState> {
 				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<IRoomViewProps, IRoomViewState> {
 					baseUrl={baseUrl}
 					onClose={this.onCloseReactionsModal}
 					getCustomEmoji={this.getCustomEmoji}
-					theme={theme}
 				/>
 				<JoinCode ref={this.joinCode} onJoin={this.onJoin} rid={rid} t={t} theme={theme} />
 				<Loading visible={showingBlockingLoader} />