Chore: Evaluate MessagesView - TypeScript (#4113)

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;

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 });

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<ChatsStackParamList, 'MessagesView'>;
 	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<IMessagesViewProps, any> {
+class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewState> {
 	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<IMessagesViewProps, any> {
 		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<IMessagesViewProps, any> {
 		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<IMessagesViewProps, any> {
 
 	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<IMessagesViewProps, any> {
 				},
 				noDataMsg: I18n.t('No_mentioned_messages'),
 				testID: 'mentioned-messages-view',
-				// @ts-ignore TODO: unify IMessage
-				renderItem: (item: IMessageItem) => <Message {...renderItemCommonProps(item)} msg={item.msg} theme={theme} />
+				renderItem: (item: TAnyMessageModel) => <Message {...renderItemCommonProps(item)} msg={item.msg} theme={theme} />
 			},
 			// Starred Messages Screen
 			Starred: {
@@ -236,16 +229,15 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 				},
 				noDataMsg: I18n.t('No_starred_messages'),
 				testID: 'starred-messages-view',
-				renderItem: (item: IMessageItem) => (
-					// @ts-ignore TODO: unify IMessage
+				renderItem: (item: TAnyMessageModel) => (
 					<Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => 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<IMessagesViewProps, any> {
 				},
 				noDataMsg: I18n.t('No_pinned_messages'),
 				testID: 'pinned-messages-view',
-				renderItem: (item: IMessageItem) => (
-					// @ts-ignore TODO: unify IMessage
+				renderItem: (item: TAnyMessageModel) => (
 					<Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => 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<IMessagesViewProps, any> {
 		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<IMessagesViewProps, any> {
 			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<IMessagesViewProps, any> {
 		);
 	};
 
-	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<IMessagesViewProps, any> {
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	baseUrl: state.server.server,
 	user: getUserSelector(state),
 	customEmojis: state.customEmojis,