Chore: Migrate RoomView to Typescript (#3754)

app/containers/MessageActions/index.tsx

@@ -15,19 +15,12 @@ import { showConfirmationAlert } from '../../utils/info';
 import { useActionSheet } from '../ActionSheet';
 import Header, { HEADER_HEIGHT } from './Header';
 import events from '../../utils/log/events';
-import { TMessageModel } from '../../definitions/IMessage';
+import { ILoggedUser, TAnyMessageModel, TSubscriptionModel } from '../../definitions';
 
-interface IMessageActions {
+export interface IMessageActions {
-	room: {
+	room: TSubscriptionModel;
-		rid: string;
+	tmid?: string;
-		autoTranslateLanguage: any;
+	user: Pick<ILoggedUser, 'id'>;
-		autoTranslate: any;
-		reactWhenReadOnly: any;
-	};
-	tmid: string;
-	user: {
-		id: string | number;
-	};
 	editInit: Function;
 	reactionInit: Function;
 	onReactionPress: Function;
@@ -270,8 +263,11 @@ const MessageActions = React.memo(
 				}
 			};
 
-			const handleToggleTranslation = async (message: TMessageModel) => {
+			const handleToggleTranslation = async (message: TAnyMessageModel) => {
 				try {
+					if (!room.autoTranslateLanguage) {
+						return;
+					}
 					const db = database.active;
 					await db.write(async () => {
 						await message.update(m => {
@@ -321,7 +317,7 @@ const MessageActions = React.memo(
 				});
 			};
 
-			const getOptions = (message: TMessageModel) => {
+			const getOptions = (message: TAnyMessageModel) => {
 				let options: any = [];
 
 				// Reply
@@ -447,7 +443,7 @@ const MessageActions = React.memo(
 				return options;
 			};
 
-			const showMessageActions = async (message: TMessageModel) => {
+			const showMessageActions = async (message: TAnyMessageModel) => {
 				logEvent(events.ROOM_SHOW_MSG_ACTIONS);
 				await getPermissions();
 				showActionSheet({

app/containers/MessageBox/index.tsx

@@ -72,7 +72,7 @@ const videoPickerConfig = {
 	mediaType: 'video'
 };
 
-interface IMessageBoxProps {
+export interface IMessageBoxProps {
 	rid: string;
 	baseUrl: string;
 	message: IMessage;

app/containers/ReactionsModal.tsx

@@ -10,6 +10,7 @@ import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
 import { TGetCustomEmoji } from '../definitions/IEmoji';
+import { TMessageModel, ILoggedUser } from '../definitions';
 import SafeAreaView from './SafeAreaView';
 
 const styles = StyleSheet.create({
@@ -65,23 +66,25 @@ interface IItem {
 		usernames: any;
 		emoji: string;
 	};
-	user?: { username: any };
+	user?: Pick<ILoggedUser, 'username'>;
 	baseUrl?: string;
 	getCustomEmoji?: TGetCustomEmoji;
 	theme?: string;
 }
 
 interface IModalContent {
-	message?: {
+	message?: TMessageModel;
-		reactions: any;
-	};
 	onClose: Function;
 	theme: string;
 }
 
 interface IReactionsModal {
+	message?: any;
+	user?: Pick<ILoggedUser, 'username'>;
 	isVisible: boolean;
 	onClose(): void;
+	baseUrl: string;
+	getCustomEmoji?: TGetCustomEmoji;
 	theme: string;
 }
 

app/containers/ThreadDetails.tsx

@@ -52,9 +52,9 @@ interface IThreadDetails {
 
 const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails): JSX.Element => {
 	const { theme } = useTheme();
-	let { tcount } = item;
+	let count: string | number | undefined = item.tcount;
-	if (tcount && tcount >= 1000) {
+	if (count && count >= 1000) {
-		tcount = '+999';
+		count = '+999';
 	}
 
 	let replies: number | string = item?.replies?.length ?? 0;
@@ -70,7 +70,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 				<View style={styles.detailContainer}>
 					<CustomIcon name='threads' size={24} color={themes[theme!].auxiliaryText} />
 					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
-						{tcount}
+						{count}
 					</Text>
 				</View>
 

app/containers/message/Message.tsx

@@ -87,7 +87,7 @@ const Message = React.memo((props: IMessage) => {
 				<View style={[styles.messageContent, props.isHeader && styles.messageContentWithHeader]}>
 					<MessageInner {...props} />
 				</View>
-				<ReadReceipt isReadReceiptEnabled={props.isReadReceiptEnabled} unread={props.unread} theme={props.theme} />
+				<ReadReceipt isReadReceiptEnabled={props.isReadReceiptEnabled} unread={props.unread || false} theme={props.theme} />
 			</View>
 		</View>
 	);

app/containers/message/Reply.tsx

@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
 
 interface IMessageTitle {
 	attachment: IAttachment;
-	timeFormat: string;
+	timeFormat?: string;
 	theme: string;
 }
 
@@ -112,7 +112,7 @@ interface IMessageFields {
 
 interface IMessageReply {
 	attachment: IAttachment;
-	timeFormat: string;
+	timeFormat?: string;
 	index: number;
 	theme: string;
 	getCustomEmoji: TGetCustomEmoji;

app/containers/message/User.tsx

@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
 interface IMessageUser {
 	isHeader?: boolean;
 	hasError?: boolean;
-	useRealName: boolean;
+	useRealName?: boolean;
 	author?: {
 		_id: string;
 		name?: string;
@@ -50,25 +50,26 @@ interface IMessageUser {
 	ts?: Date;
 	timeFormat?: string;
 	theme: string;
-	navToRoomInfo: Function;
+	navToRoomInfo?: Function;
 	type: string;
 }
 
 const User = React.memo(
 	({ isHeader, useRealName, author, alias, ts, timeFormat, hasError, theme, navToRoomInfo, type, ...props }: IMessageUser) => {
 		if (isHeader || hasError) {
-			const navParam = {
-				t: 'd',
-				rid: author!._id
-			};
 			const { user } = useContext(MessageContext);
-			const username = (useRealName && author!.name) || author!.username;
+			const username = (useRealName && author?.name) || author?.username;
 			const aliasUsername = alias ? (
 				<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>
 			) : null;
 			const time = moment(ts).format(timeFormat);
-			const onUserPress = () => navToRoomInfo(navParam);
+			const onUserPress = () => {
-			const isDisabled = author!._id === user.id;
+				navToRoomInfo?.({
+					t: 'd',
+					rid: author?._id
+				});
+			};
+			const isDisabled = author?._id === user.id;
 
 			const textContent = (
 				<>

app/containers/message/index.tsx

@@ -10,9 +10,10 @@ import messagesStatus from '../../constants/messagesStatus';
 import { withTheme } from '../../theme';
 import openLink from '../../utils/openLink';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
+import { TAnyMessageModel } from '../../definitions';
 
 interface IMessageContainerProps {
-	item: any;
+	item: TAnyMessageModel;
 	user: {
 		id: string;
 		username: string;
@@ -20,24 +21,16 @@ interface IMessageContainerProps {
 	};
 	msg?: string;
 	rid?: string;
-	timeFormat: string;
+	timeFormat?: string;
 	style?: ViewStyle;
 	archived?: boolean;
 	broadcast?: boolean;
-	previousItem?: {
+	previousItem?: TAnyMessageModel;
-		ts: any;
-		u: any;
-		groupable: any;
-		id: string;
-		tmid: string;
-		status: any;
-	};
-	isHeader: boolean;
 	baseUrl: string;
 	Message_GroupingPeriod?: number;
 	isReadReceiptEnabled?: boolean;
 	isThreadRoom: boolean;
-	useRealName: boolean;
+	useRealName?: boolean;
 	autoTranslateRoom?: boolean;
 	autoTranslateLanguage?: string;
 	status?: number;
@@ -59,11 +52,11 @@ interface IMessageContainerProps {
 	callJitsi?: Function;
 	blockAction?: Function;
 	onAnswerButtonPress?: Function;
-	theme: string;
+	theme?: string;
 	threadBadgeColor?: string;
 	toggleFollowThread?: Function;
 	jumpToMessage?: Function;
-	onPress: Function;
+	onPress?: Function;
 }
 
 class MessageContainer extends React.Component<IMessageContainerProps> {
@@ -222,7 +215,7 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 		this.setState({ isManualUnignored: true });
 	};
 
-	get isHeader() {
+	get isHeader(): boolean {
 		const { item, previousItem, broadcast, Message_GroupingPeriod } = this.props;
 		if (this.hasError || (previousItem && previousItem.status === messagesStatus.ERROR)) {
 			return true;
@@ -230,9 +223,11 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 		try {
 			if (
 				previousItem &&
+				// @ts-ignore TODO: IMessage vs IMessageFromServer non-sense
 				previousItem.ts.toDateString() === item.ts.toDateString() &&
 				previousItem.u.username === item.u.username &&
 				!(previousItem.groupable === false || item.groupable === false || broadcast === true) &&
+				// @ts-ignore TODO: IMessage vs IMessageFromServer non-sense
 				item.ts - previousItem.ts < Message_GroupingPeriod! * 1000 &&
 				previousItem.tmid === item.tmid
 			) {
@@ -244,7 +239,7 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 		}
 	}
 
-	get isThreadReply() {
+	get isThreadReply(): boolean {
 		const { item, previousItem, isThreadRoom } = this.props;
 		if (isThreadRoom) {
 			return false;
@@ -255,37 +250,40 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 		return false;
 	}
 
-	get isThreadSequential() {
+	get isThreadSequential(): boolean {
 		const { item, isThreadRoom } = this.props;
 		if (isThreadRoom) {
 			return false;
 		}
-		return item.tmid;
+		return !!item.tmid;
 	}
 
-	get isEncrypted() {
+	get isEncrypted(): boolean {
 		const { item } = this.props;
 		const { t, e2e } = item;
 		return t === E2E_MESSAGE_TYPE && e2e !== E2E_STATUS.DONE;
 	}
 
-	get isInfo() {
+	get isInfo(): boolean {
 		const { item } = this.props;
-		return SYSTEM_MESSAGES.includes(item.t);
+		return (item.t && SYSTEM_MESSAGES.includes(item.t)) ?? false;
 	}
 
-	get isTemp() {
+	get isTemp(): boolean {
 		const { item } = this.props;
 		return item.status === messagesStatus.TEMP || item.status === messagesStatus.ERROR;
 	}
 
-	get isIgnored() {
+	get isIgnored(): boolean {
 		const { isManualUnignored } = this.state;
 		const { isIgnored } = this.props;
-		return isManualUnignored ? false : isIgnored;
+		if (isManualUnignored) {
+			return false;
+		}
+		return isIgnored ?? false;
 	}
 
-	get hasError() {
+	get hasError(): boolean {
 		const { item } = this.props;
 		return item.status === messagesStatus.ERROR;
 	}
@@ -405,13 +403,12 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 					rid={rid!}
 					author={u}
 					ts={ts}
-					type={t}
+					type={t as any}
 					attachments={attachments}
 					blocks={blocks}
 					urls={urls}
 					reactions={reactions}
 					alias={alias}
-					/* @ts-ignore*/
 					avatar={avatar}
 					emoji={emoji}
 					timeFormat={timeFormat}
@@ -424,16 +421,19 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 					role={role}
 					drid={drid}
 					dcount={dcount}
+					// @ts-ignore
 					dlm={dlm}
 					tmid={tmid}
 					tcount={tcount}
+					// @ts-ignore
 					tlm={tlm}
 					tmsg={tmsg}
 					fetchThreadName={fetchThreadName!}
+					// @ts-ignore
 					mentions={mentions}
 					channels={channels}
-					isIgnored={this.isIgnored!}
+					isIgnored={this.isIgnored}
-					isEdited={editedBy && !!editedBy.username}
+					isEdited={(editedBy && !!editedBy.username) ?? false}
 					isHeader={this.isHeader}
 					isThreadReply={this.isThreadReply}
 					isThreadSequential={this.isThreadSequential}
@@ -447,7 +447,7 @@ class MessageContainer extends React.Component<IMessageContainerProps> {
 					navToRoomInfo={navToRoomInfo!}
 					callJitsi={callJitsi!}
 					blockAction={blockAction!}
-					theme={theme}
+					theme={theme as string}
 					highlighted={highlighted!}
 				/>
 			</MessageContext.Provider>

app/containers/message/interfaces.ts

@@ -7,7 +7,7 @@ export type TMessageType = 'discussion-created' | 'jitsi_call_started';
 
 export interface IMessageAttachments {
 	attachments: any;
-	timeFormat: string;
+	timeFormat?: string;
 	showAttachment: Function;
 	getCustomEmoji: TGetCustomEmoji;
 	theme: string;
@@ -66,26 +66,26 @@ export interface IMessageContent {
 	_id: string;
 	isTemp: boolean;
 	isInfo: boolean;
-	tmid: string;
+	tmid?: string;
 	isThreadRoom: boolean;
-	msg: string;
+	msg?: string;
-	md: MarkdownAST;
+	md?: MarkdownAST;
 	theme: string;
 	isEdited: boolean;
 	isEncrypted: boolean;
 	getCustomEmoji: TGetCustomEmoji;
-	channels: IUserChannel[];
+	channels?: IUserChannel[];
-	mentions: IUserMention[];
+	mentions?: IUserMention[];
-	navToRoomInfo: Function;
+	navToRoomInfo?: Function;
-	useRealName: boolean;
+	useRealName?: boolean;
 	isIgnored: boolean;
 	type: string;
 }
 
 export interface IMessageDiscussion {
-	msg: string;
+	msg?: string;
-	dcount: number;
+	dcount?: number;
-	dlm: Date;
+	dlm?: Date;
 	theme: string;
 }
 
@@ -98,10 +98,10 @@ export interface IMessageEmoji {
 }
 
 export interface IMessageThread {
-	msg: string;
+	msg?: string;
-	tcount: number;
+	tcount?: number;
 	theme: string;
-	tlm: Date;
+	tlm?: Date;
 	isThreadRoom: boolean;
 	id: string;
 }
@@ -123,8 +123,8 @@ export interface IMessageTouchable {
 }
 
 export interface IMessageRepliedThread {
-	tmid: string;
+	tmid?: string;
-	tmsg: string;
+	tmsg?: string;
 	id: string;
 	isHeader: boolean;
 	theme: string;
@@ -154,7 +154,7 @@ export interface IMessage extends IMessageRepliedThread, IMessageInner {
 	style: any;
 	onLongPress: Function;
 	isReadReceiptEnabled: boolean;
-	unread: boolean;
+	unread?: boolean;
 	theme: string;
 	isIgnored: boolean;
 }

app/containers/message/utils.ts

@@ -2,9 +2,12 @@ import { TMessageModel } from '../../definitions/IMessage';
 import I18n from '../../i18n';
 import { DISCUSSION } from './constants';
 
-export const formatMessageCount = (count: number, type: string) => {
+export const formatMessageCount = (count?: number, type?: string): string => {
 	const discussion = type === DISCUSSION;
 	let text = discussion ? I18n.t('No_messages_yet') : null;
+	if (!count) {
+		return text;
+	}
 	if (count === 1) {
 		text = `${count} ${discussion ? I18n.t('message') : I18n.t('reply')}`;
 	} else if (count > 1 && count < 1000) {

app/definitions/IEmoji.ts

@@ -21,4 +21,10 @@ export interface IEmojiCategory {
 	tabLabel: string;
 }
 
-export type TGetCustomEmoji = (name: string) => IEmoji | null;
+// TODO: copied from reducers/customEmojis. We can unify later.
+export interface IReduxEmoji {
+	name: string;
+	extension: any;
+}
+
+export type TGetCustomEmoji = (name: string) => any;

app/definitions/IMessage.ts

@@ -3,9 +3,25 @@ import { MarkdownAST } from '@rocket.chat/message-parser';
 
 import { IAttachment } from './IAttachment';
 import { IReaction } from './IReaction';
+import {
+	MESSAGE_TYPE_LOAD_MORE,
+	MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK,
+	MESSAGE_TYPE_LOAD_NEXT_CHUNK
+} from '../constants/messageTypeLoad';
+import { TThreadMessageModel } from './IThreadMessage';
+import { TThreadModel } from './IThread';
 import { IUrlFromServer } from './IUrl';
 
-export type MessageType = 'jitsi_call_started' | 'discussion-created' | 'e2e' | 'load_more' | 'rm' | 'uj';
+export type MessageType =
+	| 'jitsi_call_started'
+	| 'discussion-created'
+	| 'e2e'
+	| 'load_more'
+	| 'rm'
+	| 'uj'
+	| typeof MESSAGE_TYPE_LOAD_MORE
+	| typeof MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK
+	| typeof MESSAGE_TYPE_LOAD_NEXT_CHUNK;
 
 export interface IUserMessage {
 	_id: string;
@@ -139,4 +155,5 @@ export interface IMessage extends IMessageFromServer {
 
 export type TMessageModel = IMessage & Model;
 
+export type TAnyMessageModel = TMessageModel | TThreadModel | TThreadMessageModel;
 export type TTypeMessages = IMessageFromServer | ILoadMoreMessage | IMessage;

app/definitions/ISubscription.ts

@@ -73,8 +73,8 @@ export interface ISubscription {
 	lastThreadSync?: Date;
 	jitsiTimeout?: number;
 	autoTranslate?: boolean;
-	autoTranslateLanguage: string;
+	autoTranslateLanguage?: string;
-	lastMessage?: ILastMessage;
+	lastMessage?: ILastMessage; // TODO: we need to use IMessage here
 	hideUnreadStatus?: boolean;
 	sysMes?: string[] | boolean;
 	uids?: string[];

app/definitions/IThread.ts

@@ -2,8 +2,7 @@ import Model from '@nozbe/watermelondb/Model';
 import { MarkdownAST } from '@rocket.chat/message-parser';
 
 import { IAttachment } from './IAttachment';
-import { IEditedBy, IUserChannel, IUserMention, IUserMessage, MessageType } from './IMessage';
+import { IMessage, IUserChannel, IUserMention, IUserMessage } from './IMessage';
-import { IReaction } from './IReaction';
 import { IUrl } from './IUrl';
 
 interface IFileThread {
@@ -34,42 +33,9 @@ export interface IThreadResult {
 	tlm?: string | Date;
 }
 
-export interface IThread {
+export interface IThread extends IMessage {
-	id: string;
 	tmsg?: string;
-	msg?: string;
+	draftMessage?: string;
-	t?: MessageType;
-	rid: string;
-	_updatedAt?: string | Date;
-	ts?: string | Date;
-	u?: IUserMessage;
-	alias?: string;
-	parseUrls?: boolean;
-	groupable?: boolean;
-	avatar?: string;
-	emoji?: string;
-	attachments?: IAttachment[];
-	urls?: IUrl[];
-	status?: number;
-	pinned?: boolean;
-	starred?: boolean;
-	editedBy?: IEditedBy;
-	reactions?: IReaction[];
-	role?: string;
-	drid?: string;
-	dcount?: number | string;
-	dlm?: string | Date;
-	tmid?: string;
-	tcount?: number | string;
-	tlm?: string | Date;
-	replies?: string[];
-	mentions?: IUserMention[];
-	channels?: IUserChannel[];
-	unread?: boolean;
-	autoTranslate?: boolean;
-	translations?: any;
-	e2e?: string;
-	subscription?: { id: string };
 }
 
 export type TThreadModel = IThread & Model;

app/definitions/IThreadMessage.ts

@@ -1,47 +1,9 @@
 import Model from '@nozbe/watermelondb/Model';
 
-import { IAttachment } from './IAttachment';
+import { IMessage } from './IMessage';
-import { IEditedBy, ITranslations, IUserChannel, IUserMention, IUserMessage, MessageType } from './IMessage';
-import { IReaction } from './IReaction';
-import { IUrl } from './IUrl';
 
-export interface IThreadMessage {
+export interface IThreadMessage extends IMessage {
-	id: string;
-	_id: string;
 	tmsg?: string;
-	msg?: string;
-	t?: MessageType;
-	rid: string;
-	ts: string | Date;
-	u: IUserMessage;
-	alias?: string;
-	parseUrls?: boolean;
-	groupable?: boolean;
-	avatar?: string;
-	emoji?: string;
-	attachments?: IAttachment[];
-	urls?: IUrl[];
-	_updatedAt?: string | Date;
-	status?: number;
-	pinned?: boolean;
-	starred?: boolean;
-	editedBy?: IEditedBy;
-	reactions?: IReaction[];
-	role?: string;
-	drid?: string;
-	dcount?: number;
-	dlm?: string | Date;
-	tmid?: string;
-	tcount?: number;
-	tlm?: string | Date;
-	replies?: string[];
-	mentions?: IUserMention[];
-	channels?: IUserChannel[];
-	unread?: boolean;
-	autoTranslate?: boolean;
-	translations?: ITranslations[];
-	e2e?: string;
-	subscription?: { id: string };
 }
 
 export type TThreadMessageModel = IThreadMessage & Model;

app/lib/database/model/Thread.js

@@ -75,4 +75,6 @@ export default class Thread extends Model {
 	@json('translations', sanitizer) translations;
 
 	@field('e2e') e2e;
+
+	@field('draft_message') draftMessage;
 }

app/lib/database/model/migrations.js

@@ -199,6 +199,15 @@ export default schemaMigrations({
 					columns: [{ name: 'md', type: 'string', isOptional: true }]
 				})
 			]
+		},
+		{
+			toVersion: 15,
+			steps: [
+				addColumns({
+					table: 'threads',
+					columns: [{ name: 'draft_message', type: 'string', isOptional: true }]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 14,
+	version: 15,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -153,7 +153,8 @@ export default appSchema({
 				{ name: 'unread', type: 'boolean', isOptional: true },
 				{ name: 'auto_translate', type: 'boolean', isOptional: true },
 				{ name: 'translations', type: 'string', isOptional: true },
-				{ name: 'e2e', type: 'string', isOptional: true }
+				{ name: 'e2e', type: 'string', isOptional: true },
+				{ name: 'draft_message', type: 'string', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/canOpenRoom.ts

@@ -43,7 +43,7 @@ async function open({ type, rid, name }: { type: ERoomTypes; rid: string; name:
 		if ((type === ERoomTypes.CHANNEL || type === ERoomTypes.GROUP) && !rid) {
 			// RC 0.72.0
 			// @ts-ignore
-			const result: any = await sdk.get(`channel.info`, params);
+			const result: any = await sdk.get(`${restTypes[type]}.info`, params);
 			if (result.success) {
 				const room = result[type];
 				room.rid = room._id;

app/lib/methods/loadMessagesForRoom.ts

@@ -10,7 +10,7 @@ import updateMessages from './updateMessages';
 
 const COUNT = 50;
 
-async function load({ rid: roomId, latest, t }: { rid: string; latest?: string; t: RoomTypes }) {
+async function load({ rid: roomId, latest, t }: { rid: string; latest?: Date; t: RoomTypes }) {
 	let params = { roomId, count: COUNT } as { roomId: string; count: number; latest?: string };
 	if (latest) {
 		params = { ...params, latest: new Date(latest).toISOString() };
@@ -32,9 +32,9 @@ async function load({ rid: roomId, latest, t }: { rid: string; latest?: string;
 export default function loadMessagesForRoom(args: {
 	rid: string;
 	t: RoomTypes;
-	latest: string;
+	latest?: Date;
-	loaderItem: TMessageModel;
+	loaderItem?: TMessageModel;
-}): Promise<Partial<IMessage>[]> {
+}): Promise<void> {
 	return new Promise(async (resolve, reject) => {
 		try {
 			const data: Partial<IMessage>[] = await load(args);
@@ -52,9 +52,9 @@ export default function loadMessagesForRoom(args: {
 					data.push(loadMoreMessage);
 				}
 				await updateMessages({ rid: args.rid, update: data, loaderItem: args.loaderItem });
-				return resolve(data);
+				return resolve();
 			}
-			return resolve([]);
+			return resolve();
 		} catch (e) {
 			log(e);
 			reject(e);

app/lib/methods/loadMissedMessages.ts

@@ -16,7 +16,7 @@ const getLastUpdate = async (rid: string) => {
 	return null;
 };
 
-async function load({ rid: roomId, lastOpen }: { rid: string; lastOpen: string }) {
+async function load({ rid: roomId, lastOpen }: { rid: string; lastOpen: Date }) {
 	let lastUpdate;
 	if (lastOpen) {
 		lastUpdate = new Date(lastOpen).toISOString();
@@ -29,7 +29,7 @@ async function load({ rid: roomId, lastOpen }: { rid: string; lastOpen: string }
 	return result;
 }
 
-export default function loadMissedMessages(args: { rid: string; lastOpen: string }): Promise<void> {
+export default function loadMissedMessages(args: { rid: string; lastOpen: Date }): Promise<void> {
 	return new Promise(async (resolve, reject) => {
 		try {
 			const data = await load({ rid: args.rid, lastOpen: args.lastOpen });

app/lib/methods/loadNextMessages.ts

@@ -7,19 +7,19 @@ import { getMessageById } from '../database/services/Message';
 import { MESSAGE_TYPE_LOAD_NEXT_CHUNK } from '../../constants/messageTypeLoad';
 import { generateLoadMoreId } from '../utils';
 import updateMessages from './updateMessages';
-import { IMessage, TMessageModel } from '../../definitions';
+import { TMessageModel } from '../../definitions';
 import RocketChat from '../rocketchat';
 
 const COUNT = 50;
 
 interface ILoadNextMessages {
 	rid: string;
-	ts: string;
+	ts: Date;
-	tmid: string;
+	tmid?: string;
 	loaderItem: TMessageModel;
 }
 
-export default function loadNextMessages(args: ILoadNextMessages): Promise<IMessage | []> {
+export default function loadNextMessages(args: ILoadNextMessages): Promise<void> {
 	return new Promise(async (resolve, reject) => {
 		try {
 			const data = await RocketChat.methodCallWrapper('loadNextMessages', args.rid, args.ts, COUNT);
@@ -39,9 +39,9 @@ export default function loadNextMessages(args: ILoadNextMessages): Promise<IMess
 					messages.push(loadMoreItem);
 				}
 				await updateMessages({ rid: args.rid, update: messages, loaderItem: args.loaderItem });
-				return resolve(messages);
+				return resolve();
 			}
-			return resolve([]);
+			return resolve();
 		} catch (e) {
 			log(e);
 			reject(e);

app/lib/methods/readMessages.ts

@@ -1,15 +1,16 @@
 import database from '../database';
 import log from '../../utils/log';
 import { TSubscriptionModel } from '../../definitions';
-import { IRocketChat } from '../../definitions/IRocketChat';
+import sdk from '../rocketchat/services/sdk';
 
-export default async function readMessages(this: IRocketChat, rid: string, ls: Date, updateLastOpen = false): Promise<void> {
+export default async function readMessages(rid: string, ls: Date, updateLastOpen = false): Promise<void> {
 	try {
 		const db = database.active;
 		const subscription = await db.get('subscriptions').find(rid);
 
 		// RC 0.61.0
-		await this.sdk.post('subscriptions.read', { rid });
+		// @ts-ignore
+		await sdk.post('subscriptions.read', { rid });
 
 		await db.write(async () => {
 			try {

app/lib/methods/sendFileMessage.ts

@@ -37,9 +37,9 @@ export async function cancelUpload(item: TUploadModel): Promise<void> {
 export function sendFileMessage(
 	rid: string,
 	fileInfo: IUpload,
-	tmid: string,
+	tmid: string | undefined,
 	server: string,
-	user: IUser
+	user: Partial<Pick<IUser, 'id' | 'token'>>
 ): Promise<FetchBlobResponse | void> {
 	return new Promise(async (resolve, reject) => {
 		try {

app/lib/methods/sendMessage.ts

@@ -85,7 +85,13 @@ export async function resendMessage(message: TMessageModel, tmid?: string) {
 	}
 }
 
-export default async function (rid: string, msg: string, tmid: string, user: IUser, tshow?: boolean) {
+export default async function (
+	rid: string,
+	msg: string,
+	tmid: string | undefined,
+	user: Partial<Pick<IUser, 'id' | 'username' | 'name'>>,
+	tshow?: boolean
+): Promise<void> {
 	try {
 		const db = database.active;
 		const subsCollection = db.get('subscriptions');

app/lib/methods/updateMessages.ts

@@ -105,7 +105,9 @@ export default async function updateMessages({
 			threadCollection.prepareCreate(
 				protectedFunction((t: TThreadModel) => {
 					t._raw = sanitizedRaw({ id: thread._id }, threadCollection.schema);
-					if (t.subscription) t.subscription.id = sub.id;
+					if (t.subscription) {
+						t.subscription.id = sub.id;
+					}
 					Object.assign(t, thread);
 				})
 			)

app/lib/rocketchat/rocketchat.js

@@ -1032,7 +1032,7 @@ const RocketChat = {
 			}
 			const autoTranslatePermission = reduxStore.getState().permissions['auto-translate'];
 			const userRoles = reduxStore.getState().login?.user?.roles ?? [];
-			return autoTranslatePermission?.some(role => userRoles.includes(role));
+			return autoTranslatePermission?.some(role => userRoles.includes(role)) ?? false;
 		} catch (e) {
 			log(e);
 			return false;

app/lib/rocketchat/services/restApi.ts

@@ -247,7 +247,7 @@ export const convertTeamToChannel = ({ teamId, selected }: { teamId: string; sel
 	return sdk.post('teams.convertToChannel', params);
 };
 
-export const joinRoom = (roomId: string, joinCode: string, type: 'c' | 'p'): any => {
+export const joinRoom = (roomId: string, joinCode: string | null, type: 'c' | 'p'): any => {
 	// TODO: join code
 	// RC 0.48.0
 	if (type === 'p') {

app/reducers/settings.ts

@@ -1,7 +1,7 @@
 import { IActionSettings } from '../actions/settings';
 import { SETTINGS } from '../actions/actionsTypes';
 
-export type TSettings = string | number | boolean;
+export type TSettings = string | number | boolean | string[];
 
 export type ISettings = Record<string, TSettings>;
 

app/stacks/types.ts

@@ -23,17 +23,18 @@ export type ChatsStackParamList = {
 		rid: string;
 		t: SubscriptionType;
 		tmid?: string;
-		message?: string;
+		message?: object; // TODO: TMessageModel?
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room?: ISubscription;
+		room?: TSubscriptionModel | { rid: string; t: string; name?: string; fname?: string; prid?: string };
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
-		roomUserId?: string;
+		roomUserId?: string | null;
+		usedCannedResponse?: string;
 	};
 	RoomActionsView: {
-		room: ISubscription;
+		room?: ISubscription;
 		member: any;
 		rid: string;
 		t: SubscriptionType;
@@ -240,7 +241,7 @@ export type InsideStackParamList = {
 		isShareExtension: boolean;
 		serverInfo: IServer;
 		text: string;
-		room: ISubscription;
+		room: TSubscriptionModel;
 		thread: any; // TODO: Change
 	};
 	ModalBlockView: {

app/utils/isReadOnly.ts

@@ -9,21 +9,18 @@ const canPostReadOnly = async ({ rid }: { rid: string }) => {
 	return permission[0];
 };
 
-const isMuted = (room: ISubscription, user: { username: string }) =>
+const isMuted = (room: Partial<ISubscription>, username: string) =>
-	room && room.muted && room.muted.find && !!room.muted.find(m => m === user.username);
+	room && room.muted && room.muted.find && !!room.muted.find(m => m === username);
 
-export const isReadOnly = async (
+export const isReadOnly = async (room: Partial<ISubscription>, username: string): Promise<boolean> => {
-	room: ISubscription,
-	user: { id?: string; username: string; token?: string }
-): Promise<boolean> => {
 	if (room.archived) {
 		return true;
 	}
-	if (isMuted(room, user)) {
+	if (isMuted(room, username)) {
 		return true;
 	}
 	if (room?.ro) {
-		const allowPost = await canPostReadOnly(room);
+		const allowPost = await canPostReadOnly({ rid: room.rid as string });
 		if (allowPost) {
 			return false;
 		}

app/utils/room.ts

@@ -3,9 +3,9 @@ import moment from 'moment';
 import { themes } from '../constants/colors';
 import I18n from '../i18n';
 import { IAttachment } from '../definitions/IAttachment';
-import { ISubscription, SubscriptionType } from '../definitions/ISubscription';
+import { SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
 
-export const isBlocked = (room: ISubscription): boolean => {
+export const isBlocked = (room: TSubscriptionModel): boolean => {
 	if (room) {
 		const { t, blocked, blocker } = room;
 		if (t === SubscriptionType.DIRECT && (blocked || blocker)) {
@@ -62,4 +62,4 @@ export const getBadgeColor = ({
 export const makeThreadName = (messageRecord: { id?: string; msg?: string; attachments?: IAttachment[] }): string | undefined =>
 	messageRecord.msg || messageRecord?.attachments?.[0]?.title;
 
-export const isTeamRoom = ({ teamId, joined }: { teamId: string; joined: boolean }): boolean => !!teamId && joined;
+export const isTeamRoom = ({ teamId, joined }: { teamId?: string; joined?: boolean }): boolean => (!!teamId && joined) ?? false;

app/views/DiscussionsView/DiscussionDetails.tsx

@@ -37,10 +37,9 @@ interface IDiscussionDetails {
 
 const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
 	const { theme } = useTheme();
-	let { dcount } = item;
+	let count: string | number | undefined = item.dcount;
-
+	if (count && count >= 1000) {
-	if (dcount && dcount >= 1000) {
+		count = '+999';
-		dcount = '+999';
 	}
 
 	return (
@@ -49,7 +48,7 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
 				<View style={styles.detailContainer}>
 					<CustomIcon name={'discussions'} size={24} color={themes[theme!].auxiliaryText} />
 					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
-						{dcount}
+						{count}
 					</Text>
 				</View>
 

app/views/DiscussionsView/Item.tsx

@@ -63,6 +63,7 @@ const Item = ({ item, onPress }: IItem): JSX.Element => {
 
 	if (item?.ts) {
 		messageTime = moment(item.ts).format('LT');
+		// @ts-ignore TODO: Unify IMessage
 		messageDate = formatDateThreads(item.ts);
 	}
 

app/views/MessagesView/index.tsx

@@ -79,7 +79,7 @@ interface IParams {
 	rid: string;
 	t: SubscriptionType;
 	tmid?: string;
-	message?: string;
+	message?: object;
 	name?: string;
 	fname?: string;
 	prid?: string;
@@ -202,7 +202,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 				},
 				noDataMsg: I18n.t('No_files'),
 				testID: 'room-files-view',
-				renderItem: (item: IMessageItem) => (
+				renderItem: (item: any) => (
 					<Message
 						{...renderItemCommonProps(item)}
 						item={{
@@ -231,6 +231,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} />
 			},
 			// Starred Messages Screen
@@ -244,6 +245,7 @@ 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
 					<Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => this.onLongPress(item)} theme={theme} />
 				),
 				action: (message: IMessageItem) => ({
@@ -264,6 +266,7 @@ 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
 					<Message {...renderItemCommonProps(item)} msg={item.msg} onLongPress={() => this.onLongPress(item)} theme={theme} />
 				),
 				action: () => ({ title: I18n.t('Unpin'), icon: 'pin', onPress: this.handleActionPress }),

app/views/RoomView/Banner.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Text, View } from 'react-native';
-import PropTypes from 'prop-types';
 import { BorderlessButton, ScrollView } from 'react-native-gesture-handler';
 import Modal from 'react-native-modal';
 
@@ -8,10 +7,19 @@ import Markdown, { MarkdownPreview } from '../../containers/markdown';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
 import styles from './styles';
+import { useTheme } from '../../theme';
+
+interface IBannerProps {
+	text?: string;
+	title?: string;
+	bannerClosed?: boolean;
+	closeBanner: () => void;
+}
 
 const Banner = React.memo(
-	({ text, title, theme, bannerClosed, closeBanner }) => {
+	({ text, title, bannerClosed, closeBanner }: IBannerProps) => {
 		const [showModal, openModal] = useState(false);
+		const { theme } = useTheme();
 
 		const toggleModal = () => openModal(prevState => !prevState);
 
@@ -47,16 +55,7 @@ const Banner = React.memo(
 
 		return null;
 	},
-	(prevProps, nextProps) =>
+	(prevProps, nextProps) => prevProps.text === nextProps.text && prevProps.bannerClosed === nextProps.bannerClosed
-		prevProps.text === nextProps.text && prevProps.theme === nextProps.theme && prevProps.bannerClosed === nextProps.bannerClosed
 );
 
-Banner.propTypes = {
-	text: PropTypes.string,
-	title: PropTypes.string,
-	theme: PropTypes.string,
-	bannerClosed: PropTypes.bool,
-	closeBanner: PropTypes.func
-};
-
 export default Banner;

app/views/RoomView/EmptyRoom.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
+
+import { useTheme } from '../../theme';
 
 const styles = StyleSheet.create({
 	image: {
@@ -10,17 +11,12 @@ const styles = StyleSheet.create({
 	}
 });
 
-const EmptyRoom = React.memo(({ length, mounted, theme, rid }) => {
+const EmptyRoom = React.memo(({ length, mounted, rid }: { length: number; mounted: boolean; rid: string }) => {
+	const { theme } = useTheme();
 	if ((length === 0 && mounted) || !rid) {
 		return <ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />;
 	}
 	return null;
 });
 
-EmptyRoom.propTypes = {
-	length: PropTypes.number.isRequired,
-	mounted: PropTypes.bool,
-	theme: PropTypes.string,
-	rid: PropTypes.string
-};
 export default EmptyRoom;

app/views/RoomView/JoinCode.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
-import PropTypes from 'prop-types';
 import { InteractionManager, StyleSheet, Text, View } from 'react-native';
 import Modal from 'react-native-modal';
 import { connect } from 'react-redux';
@@ -10,6 +9,7 @@ import TextInput from '../../containers/TextInput';
 import RocketChat from '../../lib/rocketchat';
 import sharedStyles from '../Styles';
 import { themes } from '../../constants/colors';
+import { IApplicationState } from '../../definitions';
 
 const styles = StyleSheet.create({
 	container: {
@@ -41,8 +41,16 @@ const styles = StyleSheet.create({
 	}
 });
 
+export interface IJoinCodeProps {
+	rid: string;
+	t: string;
+	onJoin: Function;
+	isMasterDetail: boolean;
+	theme: string;
+}
+
 const JoinCode = React.memo(
-	forwardRef(({ rid, t, onJoin, isMasterDetail, theme }, ref) => {
+	forwardRef(({ rid, t, onJoin, isMasterDetail, theme }: IJoinCodeProps, ref) => {
 		const [visible, setVisible] = useState(false);
 		const [error, setError] = useState(false);
 		const [code, setCode] = useState('');
@@ -53,7 +61,7 @@ const JoinCode = React.memo(
 
 		const joinRoom = async () => {
 			try {
-				await RocketChat.joinRoom(rid, code, t);
+				await RocketChat.joinRoom(rid, code, t as any);
 				onJoin();
 				hide();
 			} catch (e) {
@@ -64,7 +72,8 @@ const JoinCode = React.memo(
 		useImperativeHandle(ref, () => ({ show }));
 
 		return (
-			<Modal transparent avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
+			// @ts-ignore TODO: `transparent` seems to exist, but types are incorrect on the lib
+			<Modal transparent={true} avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
 				<View style={styles.container} testID='join-code'>
 					<View
 						style={[
@@ -76,14 +85,15 @@ const JoinCode = React.memo(
 						<TextInput
 							value={code}
 							theme={theme}
-							inputRef={e => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
+							// TODO: find a way to type this ref
+							inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
 							returnKeyType='send'
 							autoCapitalize='none'
 							onChangeText={setCode}
 							onSubmitEditing={joinRoom}
 							placeholder={I18n.t('Join_Code')}
 							secureTextEntry
-							error={error && { error: 'error-code-invalid', reason: I18n.t('Code_or_password_invalid') }}
+							error={error ? { error: 'error-code-invalid', reason: I18n.t('Code_or_password_invalid') } : undefined}
 							testID='join-code-input'
 						/>
 						<View style={styles.buttonContainer}>
@@ -111,15 +121,8 @@ const JoinCode = React.memo(
 		);
 	})
 );
-JoinCode.propTypes = {
-	rid: PropTypes.string,
-	t: PropTypes.string,
-	onJoin: PropTypes.func,
-	isMasterDetail: PropTypes.bool,
-	theme: PropTypes.string
-};
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	isMasterDetail: state.app.isMasterDetail
 });
 export default connect(mapStateToProps, null, null, { forwardRef: true })(JoinCode);

app/views/RoomView/LeftButtons.js

@@ -1,56 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet } from 'react-native';
-import { HeaderBackButton } from '@react-navigation/stack';
-
-import { themes } from '../../constants/colors';
-import Avatar from '../../containers/Avatar';
-
-const styles = StyleSheet.create({
-	avatar: {
-		borderRadius: 10,
-		marginHorizontal: 16
-	}
-});
-
-const LeftButtons = React.memo(
-	({ tmid, unreadsCount, navigation, baseUrl, userId, token, title, t, theme, goRoomActionsView, isMasterDetail }) => {
-		if (!isMasterDetail || tmid) {
-			const onPress = useCallback(() => navigation.goBack());
-			const label = unreadsCount > 99 ? '+99' : unreadsCount || ' ';
-			const labelLength = label.length ? label.length : 1;
-			const marginLeft = -2 * labelLength;
-			const fontSize = labelLength > 1 ? 14 : 17;
-			return (
-				<HeaderBackButton
-					label={label}
-					onPress={onPress}
-					tintColor={themes[theme].headerTintColor}
-					labelStyle={{ fontSize, marginLeft }}
-				/>
-			);
-		}
-		const onPress = useCallback(() => goRoomActionsView(), []);
-
-		if (baseUrl && userId && token) {
-			return <Avatar text={title} size={30} type={t} style={styles.avatar} onPress={onPress} />;
-		}
-		return null;
-	}
-);
-
-LeftButtons.propTypes = {
-	tmid: PropTypes.string,
-	unreadsCount: PropTypes.number,
-	navigation: PropTypes.object,
-	baseUrl: PropTypes.string,
-	userId: PropTypes.string,
-	token: PropTypes.string,
-	title: PropTypes.string,
-	t: PropTypes.string,
-	theme: PropTypes.string,
-	goRoomActionsView: PropTypes.func,
-	isMasterDetail: PropTypes.bool
-};
-
-export default LeftButtons;

app/views/RoomView/LeftButtons.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { HeaderBackButton, StackNavigationProp } from '@react-navigation/stack';
+
+import { themes } from '../../constants/colors';
+import Avatar from '../../containers/Avatar';
+import { ChatsStackParamList } from '../../stacks/types';
+
+const styles = StyleSheet.create({
+	avatar: {
+		borderRadius: 10,
+		marginHorizontal: 16
+	}
+});
+
+interface ILeftButtonsProps {
+	tmid?: string;
+	unreadsCount: number | null;
+	navigation: StackNavigationProp<ChatsStackParamList, 'RoomView'>;
+	baseUrl: string;
+	userId?: string;
+	token?: string;
+	title?: string;
+	t: string;
+	theme: string;
+	goRoomActionsView: Function;
+	isMasterDetail: boolean;
+}
+
+const LeftButtons = ({
+	tmid,
+	unreadsCount,
+	navigation,
+	baseUrl,
+	userId,
+	token,
+	title,
+	t,
+	theme,
+	goRoomActionsView,
+	isMasterDetail
+}: ILeftButtonsProps): React.ReactElement | null => {
+	if (!isMasterDetail || tmid) {
+		const onPress = () => navigation.goBack();
+		let label = ' ';
+		let labelLength = 1;
+		let marginLeft = 0;
+		let fontSize = 0;
+		if (unreadsCount) {
+			label = unreadsCount > 99 ? '+99' : unreadsCount.toString() || ' ';
+			labelLength = label.length ? label.length : 1;
+			marginLeft = -2 * labelLength;
+			fontSize = labelLength > 1 ? 14 : 17;
+		}
+		return (
+			<HeaderBackButton
+				label={label}
+				onPress={onPress}
+				tintColor={themes[theme].headerTintColor}
+				labelStyle={{ fontSize, marginLeft }}
+			/>
+		);
+	}
+	const onPress = useCallback(() => goRoomActionsView(), []);
+
+	if (baseUrl && userId && token) {
+		return <Avatar text={title} size={30} type={t} style={styles.avatar} onPress={onPress} />;
+	}
+	return null;
+};
+
+export default LeftButtons;

app/views/RoomView/List/List.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlatList, StyleSheet } from 'react-native';
+import { FlatList, FlatListProps, StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 import PropTypes from 'prop-types';
 
@@ -17,11 +17,15 @@ const styles = StyleSheet.create({
 	}
 });
 
-const List = ({ listRef, ...props }) => (
+export interface IListProps extends FlatListProps<any> {
+	listRef: any;
+}
+
+const List = ({ listRef, ...props }: IListProps) => (
 	<AnimatedFlatList
 		testID='room-view-messages'
 		ref={listRef}
-		keyExtractor={item => item.id}
+		keyExtractor={(item: any) => item.id}
 		contentContainerStyle={styles.contentContainer}
 		style={styles.list}
 		inverted

app/views/RoomView/List/NavBottomFAB.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
 import Animated, { call, cond, greaterOrEq, useCode } from 'react-native-reanimated';
 
 import { themes } from '../../../constants/colors';
@@ -30,11 +29,19 @@ const styles = StyleSheet.create({
 	}
 });
 
-const NavBottomFAB = ({ y, onPress, isThread }) => {
+const NavBottomFAB = ({
+	y,
+	onPress,
+	isThread
+}: {
+	y: Animated.Value<number>;
+	onPress: Function;
+	isThread: boolean;
+}): React.ReactElement | null => {
 	const { theme } = useTheme();
 	const [show, setShow] = useState(false);
-	const handleOnPress = useCallback(() => onPress());
+	const handleOnPress = () => onPress();
-	const toggle = v => setShow(v);
+	const toggle = (v: boolean) => setShow(v);
 
 	useCode(
 		() =>
@@ -65,10 +72,4 @@ const NavBottomFAB = ({ y, onPress, isThread }) => {
 	);
 };
 
-NavBottomFAB.propTypes = {
-	y: Animated.Value,
-	onPress: PropTypes.func,
-	isThread: PropTypes.bool
-};
-
 export default NavBottomFAB;

app/views/RoomView/List/index.tsx

@@ -1,26 +1,27 @@
-import React from 'react';
-import { RefreshControl } from 'react-native';
-import PropTypes from 'prop-types';
 import { Q } from '@nozbe/watermelondb';
-import moment from 'moment';
 import { dequal } from 'dequal';
-import { Value, event } from 'react-native-reanimated';
+import moment from 'moment';
+import React from 'react';
+import { FlatListProps, RefreshControl, ViewToken } from 'react-native';
+import { event, Value } from 'react-native-reanimated';
+import { Observable, Subscription } from 'rxjs';
 
+import { themes } from '../../../constants/colors';
+import ActivityIndicator from '../../../containers/ActivityIndicator';
+import { TAnyMessageModel, TMessageModel, TThreadMessageModel, TThreadModel } from '../../../definitions';
 import database from '../../../lib/database';
 import RocketChat from '../../../lib/rocketchat';
+import { compareServerVersion } from '../../../lib/utils';
+import debounce from '../../../utils/debounce';
+import { animateNextTransition } from '../../../utils/layoutAnimation';
 import log from '../../../utils/log';
 import EmptyRoom from '../EmptyRoom';
-import { animateNextTransition } from '../../../utils/layoutAnimation';
+import List, { IListProps } from './List';
-import ActivityIndicator from '../../../containers/ActivityIndicator';
-import { themes } from '../../../constants/colors';
-import debounce from '../../../utils/debounce';
-import { compareServerVersion } from '../../../lib/utils';
-import List from './List';
 import NavBottomFAB from './NavBottomFAB';
 
 const QUERY_SIZE = 50;
 
-const onScroll = ({ y }) =>
+const onScroll = ({ y }: { y: Value<number> }) =>
 	event(
 		[
 			{
@@ -32,44 +33,59 @@ const onScroll = ({ y }) =>
 		{ useNativeDriver: true }
 	);
 
-class ListContainer extends React.Component {
+export { IListProps };
-	static propTypes = {
-		renderRow: PropTypes.func,
-		rid: PropTypes.string,
-		tmid: PropTypes.string,
-		theme: PropTypes.string,
-		loading: PropTypes.bool,
-		listRef: PropTypes.func,
-		hideSystemMessages: PropTypes.array,
-		tunread: PropTypes.array,
-		ignored: PropTypes.array,
-		navigation: PropTypes.object,
-		showMessageInMainThread: PropTypes.bool,
-		serverVersion: PropTypes.string
-	};
 
-	constructor(props) {
+export interface IListContainerProps {
+	renderRow: Function;
+	rid: string;
+	tmid?: string;
+	theme: string;
+	loading: boolean;
+	listRef: React.RefObject<IListProps>;
+	hideSystemMessages?: string[];
+	tunread?: string[];
+	ignored?: string[];
+	navigation: any; // TODO: type me
+	showMessageInMainThread: boolean;
+	serverVersion: string | null;
+}
+
+interface IListContainerState {
+	messages: TAnyMessageModel[];
+	refreshing: boolean;
+	highlightedMessage: string | null;
+}
+
+class ListContainer extends React.Component<IListContainerProps, IListContainerState> {
+	private count = 0;
+	private mounted = false;
+	private animated = false;
+	private jumping = false;
+	private y = new Value(0);
+	private onScroll = onScroll({ y: this.y });
+	private unsubscribeFocus: () => void;
+	private viewabilityConfig = {
+		itemVisiblePercentThreshold: 10
+	};
+	private highlightedMessageTimeout: number | undefined | false;
+	private thread?: TThreadModel;
+	private messagesObservable?: Observable<TMessageModel[] | TThreadMessageModel[]>;
+	private messagesSubscription?: Subscription;
+	private viewableItems?: ViewToken[];
+
+	constructor(props: IListContainerProps) {
 		super(props);
 		console.time(`${this.constructor.name} init`);
 		console.time(`${this.constructor.name} mount`);
-		this.count = 0;
-		this.mounted = false;
-		this.animated = false;
-		this.jumping = false;
 		this.state = {
 			messages: [],
 			refreshing: false,
 			highlightedMessage: null
 		};
-		this.y = new Value(0);
-		this.onScroll = onScroll({ y: this.y });
 		this.query();
 		this.unsubscribeFocus = props.navigation.addListener('focus', () => {
 			this.animated = true;
 		});
-		this.viewabilityConfig = {
-			itemVisiblePercentThreshold: 10
-		};
 		console.timeEnd(`${this.constructor.name} init`);
 	}
 
@@ -78,7 +94,7 @@ class ListContainer extends React.Component {
 		console.timeEnd(`${this.constructor.name} mount`);
 	}
 
-	shouldComponentUpdate(nextProps, nextState) {
+	shouldComponentUpdate(nextProps: IListContainerProps, nextState: IListContainerState) {
 		const { refreshing, highlightedMessage } = this.state;
 		const { hideSystemMessages, theme, tunread, ignored, loading } = this.props;
 		if (theme !== nextProps.theme) {
@@ -105,7 +121,7 @@ class ListContainer extends React.Component {
 		return false;
 	}
 
-	componentDidUpdate(prevProps) {
+	componentDidUpdate(prevProps: IListContainerProps) {
 		const { hideSystemMessages } = this.props;
 		if (!dequal(hideSystemMessages, prevProps.hideSystemMessages)) {
 			this.reload();
@@ -114,9 +130,6 @@ class ListContainer extends React.Component {
 
 	componentWillUnmount() {
 		this.unsubscribeMessages();
-		if (this.onEndReached && this.onEndReached.stop) {
-			this.onEndReached.stop();
-		}
 		if (this.unsubscribeFocus) {
 			this.unsubscribeFocus();
 		}
@@ -158,7 +171,7 @@ class ListContainer extends React.Component {
 				Q.experimentalSortBy('ts', Q.desc),
 				Q.experimentalSkip(0),
 				Q.experimentalTake(this.count)
-			];
+			] as (Q.WhereDescription | Q.Or)[];
 			if (!showMessageInMainThread) {
 				whereClause.push(Q.or(Q.where('tmid', null), Q.where('tshow', Q.eq(true))));
 			}
@@ -170,7 +183,7 @@ class ListContainer extends React.Component {
 
 		if (rid) {
 			this.unsubscribeMessages();
-			this.messagesSubscription = this.messagesObservable.subscribe(messages => {
+			this.messagesSubscription = this.messagesObservable?.subscribe(messages => {
 				if (tmid && this.thread) {
 					messages = [...messages, this.thread];
 				}
@@ -186,6 +199,7 @@ class ListContainer extends React.Component {
 				if (this.mounted) {
 					this.setState({ messages }, () => this.update());
 				} else {
+					// @ts-ignore
 					this.state.messages = messages;
 				}
 				// TODO: move it away from here
@@ -246,7 +260,7 @@ class ListContainer extends React.Component {
 		}
 	};
 
-	getLastMessage = () => {
+	getLastMessage = (): TMessageModel | TThreadMessageModel | null => {
 		const { messages } = this.state;
 		if (messages.length > 0) {
 			return messages[0];
@@ -254,21 +268,23 @@ class ListContainer extends React.Component {
 		return null;
 	};
 
-	handleScrollToIndexFailed = params => {
+	handleScrollToIndexFailed: FlatListProps<any>['onScrollToIndexFailed'] = params => {
 		const { listRef } = this.props;
+		// @ts-ignore
 		listRef.current.getNode().scrollToIndex({ index: params.highestMeasuredFrameIndex, animated: false });
 	};
 
-	jumpToMessage = messageId =>
+	jumpToMessage = (messageId: string) =>
-		new Promise(async resolve => {
+		new Promise<void>(async resolve => {
 			this.jumping = true;
 			const { messages } = this.state;
 			const { listRef } = this.props;
 			const index = messages.findIndex(item => item.id === messageId);
 			if (index > -1) {
+				// @ts-ignore
 				listRef.current.getNode().scrollToIndex({ index, viewPosition: 0.5, viewOffset: 100 });
 				await new Promise(res => setTimeout(res, 300));
-				if (!this.viewableItems.map(vi => vi.key).includes(messageId)) {
+				if (!this.viewableItems?.map(vi => vi.key).includes(messageId)) {
 					if (!this.jumping) {
 						return resolve();
 					}
@@ -282,6 +298,7 @@ class ListContainer extends React.Component {
 				}, 10000);
 				await setTimeout(() => resolve(), 300);
 			} else {
+				// @ts-ignore
 				listRef.current.getNode().scrollToIndex({ index: messages.length - 1, animated: false });
 				if (!this.jumping) {
 					return resolve();
@@ -297,6 +314,7 @@ class ListContainer extends React.Component {
 
 	jumpToBottom = () => {
 		const { listRef } = this.props;
+		// @ts-ignore
 		listRef.current.getNode().scrollToOffset({ offset: -100 });
 	};
 
@@ -308,13 +326,13 @@ class ListContainer extends React.Component {
 		return null;
 	};
 
-	renderItem = ({ item, index }) => {
+	renderItem: FlatListProps<any>['renderItem'] = ({ item, index }) => {
 		const { messages, highlightedMessage } = this.state;
 		const { renderRow } = this.props;
 		return renderRow(item, messages[index + 1], highlightedMessage);
 	};
 
-	onViewableItemsChanged = ({ viewableItems }) => {
+	onViewableItemsChanged: FlatListProps<any>['onViewableItemsChanged'] = ({ viewableItems }) => {
 		this.viewableItems = viewableItems;
 	};
 
@@ -325,7 +343,7 @@ class ListContainer extends React.Component {
 		const { theme } = this.props;
 		return (
 			<>
-				<EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} theme={theme} />
+				<EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} />
 				<List
 					onScroll={this.onScroll}
 					scrollEventThrottle={16}

app/views/RoomView/LoadMore/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../../../constants/colors';
 import { MESSAGE_TYPE_LOAD_NEXT_CHUNK, MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK } from '../../../constants/messageTypeLoad';
@@ -21,7 +20,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const LoadMore = ({ load, type, runOnRender }) => {
+const LoadMore = ({ load, type, runOnRender }: { load: Function; type: string; runOnRender: boolean }): React.ReactElement => {
 	const { theme } = useTheme();
 	const [loading, setLoading] = useState(false);
 
@@ -62,10 +61,4 @@ const LoadMore = ({ load, type, runOnRender }) => {
 	);
 };
 
-LoadMore.propTypes = {
-	load: PropTypes.func,
-	type: PropTypes.string,
-	runOnRender: PropTypes.bool
-};
-
 export default LoadMore;

app/views/RoomView/ReactionPicker.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 import Modal from 'react-native-modal';
@@ -9,34 +8,37 @@ import { isAndroid } from '../../utils/deviceInfo';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import styles from './styles';
+import { IApplicationState } from '../../definitions';
 
 const margin = isAndroid ? 40 : 20;
 const maxSize = 400;
 
-class ReactionPicker extends React.Component {
+interface IReactionPickerProps {
-	static propTypes = {
+	baseUrl: string;
-		baseUrl: PropTypes.string.isRequired,
+	message?: any;
-		message: PropTypes.object,
+	show: boolean;
-		show: PropTypes.bool,
+	isMasterDetail: boolean;
-		isMasterDetail: PropTypes.bool,
+	reactionClose: () => void;
-		reactionClose: PropTypes.func,
+	onEmojiSelected: Function; // TODO: properly type this
-		onEmojiSelected: PropTypes.func,
+	width: number;
-		width: PropTypes.number,
+	height: number;
-		height: PropTypes.number,
+	theme: string;
-		theme: PropTypes.string
+}
-	};
 
-	shouldComponentUpdate(nextProps) {
+class ReactionPicker extends React.Component<IReactionPickerProps> {
+	shouldComponentUpdate(nextProps: IReactionPickerProps) {
 		const { show, width, height } = this.props;
 		return nextProps.show !== show || width !== nextProps.width || height !== nextProps.height;
 	}
 
-	onEmojiSelected = (emoji, shortname) => {
+	onEmojiSelected = (emoji: string, shortname: string) => {
 		// standard emojis: `emoji` is unicode and `shortname` is :joy:
 		// custom emojis: only `emoji` is returned with shortname type (:joy:)
 		// to set reactions, we need shortname type
 		const { onEmojiSelected, message } = this.props;
-		onEmojiSelected(shortname || emoji, message.id);
+		if (message) {
+			onEmojiSelected(shortname || emoji, message.id);
+		}
 	};
 
 	render() {
@@ -79,7 +81,7 @@ class ReactionPicker extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	baseUrl: state.server.server,
 	isMasterDetail: state.app.isMasterDetail
 });

app/views/RoomView/RightButtons.tsx

@@ -1,30 +1,43 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
+import { Observable, Subscription } from 'rxjs';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import * as HeaderButton from '../../containers/HeaderButton';
 import database from '../../lib/database';
 import { getUserSelector } from '../../selectors/login';
 import { events, logEvent } from '../../utils/log';
 import { isTeamRoom } from '../../utils/room';
+import { IApplicationState, SubscriptionType, TMessageModel, TSubscriptionModel } from '../../definitions';
+import { ChatsStackParamList } from '../../stacks/types';
 
-class RightButtonsContainer extends Component {
+interface IRightButtonsProps {
-	static propTypes = {
+	userId?: string;
-		userId: PropTypes.string,
+	threadsEnabled: boolean;
-		threadsEnabled: PropTypes.bool,
+	rid?: string;
-		rid: PropTypes.string,
+	t: string;
-		t: PropTypes.string,
+	tmid?: string;
-		tmid: PropTypes.string,
+	teamId?: string;
-		teamId: PropTypes.string,
+	isMasterDetail: boolean;
-		navigation: PropTypes.object,
+	toggleFollowThread: Function;
-		isMasterDetail: PropTypes.bool,
+	joined: boolean;
-		toggleFollowThread: PropTypes.func,
+	encrypted?: boolean;
-		joined: PropTypes.bool,
+	navigation: StackNavigationProp<ChatsStackParamList, 'RoomView'>;
-		encrypted: PropTypes.bool
+}
-	};
 
-	constructor(props) {
+interface IRigthButtonsState {
+	isFollowingThread: boolean;
+	tunread: string[];
+	tunreadUser: string[];
+	tunreadGroup: string[];
+}
+
+class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsState> {
+	private threadSubscription?: Subscription;
+	private subSubscription?: Subscription;
+
+	constructor(props: IRightButtonsProps) {
 		super(props);
 		this.state = {
 			isFollowingThread: true,
@@ -56,7 +69,7 @@ class RightButtonsContainer extends Component {
 		}
 	}
 
-	shouldComponentUpdate(nextProps, nextState) {
+	shouldComponentUpdate(nextProps: IRightButtonsProps, nextState: IRigthButtonsState) {
 		const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
 		const { teamId } = this.props;
 		if (nextProps.teamId !== teamId) {
@@ -86,37 +99,41 @@ class RightButtonsContainer extends Component {
 		}
 	}
 
-	observeThread = threadRecord => {
+	observeThread = (threadRecord: TMessageModel) => {
-		const threadObservable = threadRecord.observe();
+		const threadObservable: Observable<TMessageModel> = threadRecord.observe();
 		this.threadSubscription = threadObservable.subscribe(thread => this.updateThread(thread));
 	};
 
-	updateThread = thread => {
+	updateThread = (thread: TMessageModel) => {
 		const { userId } = this.props;
 		this.setState({
-			isFollowingThread: thread.replies && !!thread.replies.find(t => t === userId)
+			isFollowingThread: (thread.replies && !!thread.replies.find(t => t === userId)) ?? false
 		});
 	};
 
-	observeSubscription = subRecord => {
+	observeSubscription = (subRecord: TSubscriptionModel) => {
 		const subObservable = subRecord.observe();
 		this.subSubscription = subObservable.subscribe(sub => {
 			this.updateSubscription(sub);
 		});
 	};
 
-	updateSubscription = sub => {
+	updateSubscription = (sub: TSubscriptionModel) => {
 		this.setState({
-			tunread: sub?.tunread,
+			tunread: sub?.tunread ?? [],
-			tunreadUser: sub?.tunreadUser,
+			tunreadUser: sub?.tunreadUser ?? [],
-			tunreadGroup: sub?.tunreadGroup
+			tunreadGroup: sub?.tunreadGroup ?? []
 		});
 	};
 
 	goTeamChannels = () => {
 		logEvent(events.ROOM_GO_TEAM_CHANNELS);
 		const { navigation, isMasterDetail, teamId } = this.props;
+		if (!teamId) {
+			return;
+		}
 		if (isMasterDetail) {
+			// @ts-ignore TODO: find a way to make this work
 			navigation.navigate('ModalStackNavigator', {
 				screen: 'TeamChannelsView',
 				params: { teamId }
@@ -129,23 +146,31 @@ class RightButtonsContainer extends Component {
 	goThreadsView = () => {
 		logEvent(events.ROOM_GO_THREADS);
 		const { rid, t, navigation, isMasterDetail } = this.props;
+		if (!rid) {
+			return;
+		}
 		if (isMasterDetail) {
+			// @ts-ignore TODO: find a way to make this work
 			navigation.navigate('ModalStackNavigator', { screen: 'ThreadMessagesView', params: { rid, t } });
 		} else {
-			navigation.navigate('ThreadMessagesView', { rid, t });
+			navigation.navigate('ThreadMessagesView', { rid, t: t as SubscriptionType });
 		}
 	};
 
 	goSearchView = () => {
 		logEvent(events.ROOM_GO_SEARCH);
 		const { rid, t, navigation, isMasterDetail, encrypted } = this.props;
+		if (!rid) {
+			return;
+		}
 		if (isMasterDetail) {
+			// @ts-ignore TODO: find a way to make this work
 			navigation.navigate('ModalStackNavigator', {
 				screen: 'SearchMessagesView',
 				params: { rid, showCloseModal: true, encrypted }
 			});
 		} else {
-			navigation.navigate('SearchMessagesView', { rid, t, encrypted });
+			navigation.navigate('SearchMessagesView', { rid, t: t as SubscriptionType, encrypted });
 		}
 	};
 
@@ -194,9 +219,9 @@ class RightButtonsContainer extends Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	userId: getUserSelector(state).id,
-	threadsEnabled: state.settings.Threads_enabled,
+	threadsEnabled: state.settings.Threads_enabled as boolean,
 	isMasterDetail: state.app.isMasterDetail
 });
 

app/views/RoomView/Separator.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 
 import I18n from '../../i18n';
 import sharedStyles from '../Styles';
 import { themes } from '../../constants/colors';
+import { useTheme } from '../../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -34,7 +34,8 @@ const styles = StyleSheet.create({
 	}
 });
 
-const DateSeparator = React.memo(({ ts, unread, theme }) => {
+const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boolean }): React.ReactElement => {
+	const { theme } = useTheme();
 	const date = ts ? moment(ts).format('LL') : null;
 	const unreadLine = { backgroundColor: themes[theme].dangerColor };
 	const unreadText = { color: themes[theme].dangerColor };
@@ -61,12 +62,6 @@ const DateSeparator = React.memo(({ ts, unread, theme }) => {
 			<View style={[styles.line, unreadLine]} />
 		</View>
 	);
-});
-
-DateSeparator.propTypes = {
-	ts: PropTypes.instanceOf(Date),
-	unread: PropTypes.bool,
-	theme: PropTypes.string
 };
 
 export default DateSeparator;

app/views/RoomView/UploadProgress.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import PropTypes from 'prop-types';
 import { Q } from '@nozbe/watermelondb';
+import { Observable, Subscription } from 'rxjs';
 
 import database from '../../lib/database';
 import RocketChat from '../../lib/rocketchat';
@@ -11,6 +11,7 @@ import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
 import sharedStyles from '../Styles';
 import { withTheme } from '../../theme';
+import { IUser, TUploadModel } from '../../definitions';
 
 const styles = StyleSheet.create({
 	container: {
@@ -51,23 +52,26 @@ const styles = StyleSheet.create({
 	}
 });
 
-class UploadProgress extends Component {
+interface IUploadProgressProps {
-	static propTypes = {
+	width: number;
-		width: PropTypes.number,
+	rid: string;
-		rid: PropTypes.string,
+	user: Pick<IUser, 'id' | 'username' | 'token'>;
-		theme: PropTypes.string,
+	baseUrl: string;
-		user: PropTypes.shape({
+	theme?: string;
-			id: PropTypes.string.isRequired,
+}
-			username: PropTypes.string.isRequired,
-			token: PropTypes.string.isRequired
-		}),
-		baseUrl: PropTypes.string.isRequired
-	};
 
-	constructor(props) {
+interface IUploadProgressState {
+	uploads: TUploadModel[];
+}
+
+class UploadProgress extends Component<IUploadProgressProps, IUploadProgressState> {
+	private mounted = false;
+	private ranInitialUploadCheck = false;
+	private uploadsObservable?: Observable<TUploadModel[]>;
+	private uploadsSubscription?: Subscription;
+
+	constructor(props: IUploadProgressProps) {
 		super(props);
-		this.mounted = false;
-		this.ranInitialUploadCheck = false;
 		this.state = {
 			uploads: []
 		};
@@ -97,6 +101,7 @@ class UploadProgress extends Component {
 			if (this.mounted) {
 				this.setState({ uploads });
 			} else {
+				// @ts-ignore
 				this.state.uploads = uploads;
 			}
 			if (!this.ranInitialUploadCheck) {
@@ -112,7 +117,7 @@ class UploadProgress extends Component {
 			if (!RocketChat.isUploadActive(u.path)) {
 				try {
 					const db = database.active;
-					await db.action(async () => {
+					await db.write(async () => {
 						await u.update(() => {
 							u.error = true;
 						});
@@ -124,10 +129,10 @@ class UploadProgress extends Component {
 		});
 	};
 
-	deleteUpload = async item => {
+	deleteUpload = async (item: TUploadModel) => {
 		try {
 			const db = database.active;
-			await db.action(async () => {
+			await db.write(async () => {
 				await item.destroyPermanently();
 			});
 		} catch (e) {
@@ -135,7 +140,7 @@ class UploadProgress extends Component {
 		}
 	};
 
-	cancelUpload = async item => {
+	cancelUpload = async (item: TUploadModel) => {
 		try {
 			await RocketChat.cancelUpload(item);
 		} catch (e) {
@@ -143,12 +148,12 @@ class UploadProgress extends Component {
 		}
 	};
 
-	tryAgain = async item => {
+	tryAgain = async (item: TUploadModel) => {
 		const { rid, baseUrl: server, user } = this.props;
 
 		try {
 			const db = database.active;
-			await db.action(async () => {
+			await db.write(async () => {
 				await item.update(() => {
 					item.error = false;
 				});
@@ -159,44 +164,44 @@ class UploadProgress extends Component {
 		}
 	};
 
-	renderItemContent = item => {
+	renderItemContent = (item: TUploadModel) => {
 		const { width, theme } = this.props;
 
 		if (!item.error) {
 			return [
 				<View key='row' style={styles.row}>
-					<CustomIcon name='attach' size={20} color={themes[theme].auxiliaryText} />
+					<CustomIcon name='attach' size={20} color={themes[theme!].auxiliaryText} />
 					<Text
-						style={[styles.descriptionContainer, styles.descriptionText, { color: themes[theme].auxiliaryText }]}
+						style={[styles.descriptionContainer, styles.descriptionText, { color: themes[theme!].auxiliaryText }]}
 						numberOfLines={1}>
 						{I18n.t('Uploading')} {item.name}
 					</Text>
-					<CustomIcon name='close' size={20} color={themes[theme].auxiliaryText} onPress={() => this.cancelUpload(item)} />
+					<CustomIcon name='close' size={20} color={themes[theme!].auxiliaryText} onPress={() => this.cancelUpload(item)} />
 				</View>,
 				<View
 					key='progress'
-					style={[styles.progress, { width: (width * item.progress) / 100, backgroundColor: themes[theme].tintColor }]}
+					style={[styles.progress, { width: (width * (item.progress ?? 0)) / 100, backgroundColor: themes[theme!].tintColor }]}
 				/>
 			];
 		}
 		return (
 			<View style={styles.row}>
-				<CustomIcon name='warning' size={20} color={themes[theme].dangerColor} />
+				<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />
 				<View style={styles.descriptionContainer}>
-					<Text style={[styles.descriptionText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.descriptionText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{I18n.t('Error_uploading')} {item.name}
 					</Text>
 					<TouchableOpacity onPress={() => this.tryAgain(item)}>
-						<Text style={[styles.tryAgainButtonText, { color: themes[theme].tintColor }]}>{I18n.t('Try_again')}</Text>
+						<Text style={[styles.tryAgainButtonText, { color: themes[theme!].tintColor }]}>{I18n.t('Try_again')}</Text>
 					</TouchableOpacity>
 				</View>
-				<CustomIcon name='close' size={20} color={themes[theme].auxiliaryText} onPress={() => this.deleteUpload(item)} />
+				<CustomIcon name='close' size={20} color={themes[theme!].auxiliaryText} onPress={() => this.deleteUpload(item)} />
 			</View>
 		);
 	};
 
 	// TODO: transform into stateless and update based on its own observable changes
-	renderItem = (item, index) => {
+	renderItem = (item: TUploadModel, index: number) => {
 		const { theme } = this.props;
 
 		return (
@@ -206,8 +211,8 @@ class UploadProgress extends Component {
 					styles.item,
 					index !== 0 ? { marginTop: 10 } : {},
 					{
-						backgroundColor: themes[theme].chatComponentBackground,
+						backgroundColor: themes[theme!].chatComponentBackground,
-						borderColor: themes[theme].borderColor
+						borderColor: themes[theme!].borderColor
 					}
 				]}>
 				{this.renderItemContent(item)}

app/views/RoomView/services/getMessageInfo.js

@@ -1,41 +0,0 @@
-import { getMessageById } from '../../../lib/database/services/Message';
-import { getThreadMessageById } from '../../../lib/database/services/ThreadMessage';
-import getSingleMessage from '../../../lib/methods/getSingleMessage';
-
-const getMessageInfo = async messageId => {
-	let result;
-	result = await getMessageById(messageId);
-	if (result) {
-		return {
-			id: result.id,
-			rid: result.subscription.id,
-			tmid: result.tmid,
-			msg: result.msg
-		};
-	}
-
-	result = await getThreadMessageById(messageId);
-	if (result) {
-		return {
-			id: result.id,
-			rid: result.subscription.id,
-			tmid: result.rid,
-			msg: result.msg
-		};
-	}
-
-	result = await getSingleMessage(messageId);
-	if (result) {
-		return {
-			id: result._id,
-			rid: result.rid,
-			tmid: result.tmid,
-			msg: result.msg,
-			fromServer: true
-		};
-	}
-
-	return null;
-};
-
-export default getMessageInfo;

app/views/RoomView/services/getMessageInfo.ts

@@ -0,0 +1,41 @@
+import { TMessageModel, TThreadMessageModel } from '../../../definitions';
+import { getMessageById } from '../../../lib/database/services/Message';
+import { getThreadMessageById } from '../../../lib/database/services/ThreadMessage';
+import getSingleMessage from '../../../lib/methods/getSingleMessage';
+
+const getMessageInfo = async (messageId: string): Promise<TMessageModel | TThreadMessageModel | any | null> => {
+	const message = await getMessageById(messageId);
+	if (message) {
+		return {
+			id: message.id,
+			rid: message?.subscription?.id,
+			tmid: message.tmid,
+			msg: message.msg
+		};
+	}
+
+	const threadMessage = await getThreadMessageById(messageId);
+	if (threadMessage) {
+		return {
+			id: threadMessage.id,
+			rid: threadMessage?.subscription?.id,
+			tmid: threadMessage.rid,
+			msg: threadMessage.msg
+		};
+	}
+
+	const singleMessage: any = await getSingleMessage(messageId);
+	if (singleMessage) {
+		return {
+			id: singleMessage._id,
+			rid: singleMessage.rid,
+			tmid: singleMessage.tmid,
+			msg: singleMessage.msg,
+			fromServer: true
+		};
+	}
+
+	return null;
+};
+
+export default getMessageInfo;

app/views/RoomView/services/getMessages.js

@@ -1,10 +0,0 @@
-import RocketChat from '../../../lib/rocketchat';
-
-const getMessages = room => {
-	if (room.lastOpen) {
-		return RocketChat.loadMissedMessages(room);
-	} else {
-		return RocketChat.loadMessagesForRoom(room);
-	}
-};
-export default getMessages;

app/views/RoomView/services/getMessages.ts

@@ -0,0 +1,23 @@
+import loadMessagesForRoom from '../../../lib/methods/loadMessagesForRoom';
+import loadMissedMessages from '../../../lib/methods/loadMissedMessages';
+
+// TODO: clarify latest vs lastOpen
+const getMessages = ({
+	rid,
+	t,
+	latest,
+	lastOpen,
+	loaderItem
+}: {
+	rid: string;
+	t?: string;
+	latest?: Date;
+	lastOpen?: Date;
+	loaderItem?: any; // TODO: type this
+}): Promise<void> => {
+	if (lastOpen) {
+		return loadMissedMessages({ rid, lastOpen });
+	}
+	return loadMessagesForRoom({ rid, t: t as any, latest, loaderItem });
+};
+export default getMessages;

app/views/RoomView/services/getMoreMessages.js

@@ -1,27 +0,0 @@
-import {
-	MESSAGE_TYPE_LOAD_MORE,
-	MESSAGE_TYPE_LOAD_NEXT_CHUNK,
-	MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK
-} from '../../../constants/messageTypeLoad';
-import RocketChat from '../../../lib/rocketchat';
-
-const getMoreMessages = ({ rid, t, tmid, loaderItem }) => {
-	if ([MESSAGE_TYPE_LOAD_MORE, MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK].includes(loaderItem.t)) {
-		return RocketChat.loadMessagesForRoom({
-			rid,
-			t,
-			latest: loaderItem.ts,
-			loaderItem
-		});
-	}
-
-	if (loaderItem.t === MESSAGE_TYPE_LOAD_NEXT_CHUNK) {
-		return RocketChat.loadNextMessages({
-			rid,
-			tmid,
-			ts: loaderItem.ts,
-			loaderItem
-		});
-	}
-};
-export default getMoreMessages;

app/views/RoomView/services/getMoreMessages.ts

@@ -0,0 +1,40 @@
+import { MessageType, SubscriptionType, TAnyMessageModel } from '../../../definitions';
+import loadMessagesForRoom from '../../../lib/methods/loadMessagesForRoom';
+import loadNextMessages from '../../../lib/methods/loadNextMessages';
+import {
+	MESSAGE_TYPE_LOAD_MORE,
+	MESSAGE_TYPE_LOAD_NEXT_CHUNK,
+	MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK
+} from '../../../constants/messageTypeLoad';
+
+const getMoreMessages = ({
+	rid,
+	t,
+	tmid,
+	loaderItem
+}: {
+	rid: string;
+	t: SubscriptionType;
+	tmid?: string;
+	loaderItem: TAnyMessageModel;
+}): Promise<void> => {
+	if ([MESSAGE_TYPE_LOAD_MORE, MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK].includes(loaderItem.t as MessageType)) {
+		return loadMessagesForRoom({
+			rid,
+			t: t as any,
+			latest: loaderItem.ts as Date,
+			loaderItem
+		});
+	}
+
+	if (loaderItem.t === MESSAGE_TYPE_LOAD_NEXT_CHUNK) {
+		return loadNextMessages({
+			rid,
+			tmid,
+			ts: loaderItem.ts as Date,
+			loaderItem
+		});
+	}
+	return Promise.resolve();
+};
+export default getMoreMessages;

app/views/RoomView/services/getThreadMessages.ts

@@ -1,6 +1,6 @@
 import RocketChat from '../../../lib/rocketchat';
 
 // unlike getMessages, sync isn't required for threads, because loadMissedMessages does it already
-const getThreadMessages = (tmid, rid) => RocketChat.loadThreadMessages({ tmid, rid });
+const getThreadMessages = (tmid: string, rid: string): Promise<void> => RocketChat.loadThreadMessages({ tmid, rid });
 
 export default getThreadMessages;

app/views/RoomView/services/readMessages.js

@@ -1,5 +0,0 @@
-import RocketChat from '../../../lib/rocketchat';
-
-const readMessages = (rid, newLastOpen) => RocketChat.readMessages(rid, newLastOpen, true);
-
-export default readMessages;

app/views/RoomView/services/readMessages.ts

@@ -0,0 +1,5 @@
+import RocketChat from '../../../lib/rocketchat';
+
+const readMessages = (rid: string, newLastOpen: Date): Promise<void> => RocketChat.readMessages(rid, newLastOpen, true);
+
+export default readMessages;

app/views/SearchMessagesView/index.tsx

@@ -257,6 +257,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 		const { user, baseUrl, theme, useRealName } = this.props;
 		return (
 			<Message
+				// @ts-ignore IMessage | TMessageModel?
 				item={item}
 				baseUrl={baseUrl}
 				user={user}

app/views/ShareView/index.tsx

@@ -28,8 +28,7 @@ import Preview from './Preview';
 import Header from './Header';
 import styles from './styles';
 import { IAttachment } from './interfaces';
-import { ISubscription } from '../../definitions/ISubscription';
+import { IUser, TSubscriptionModel } from '../../definitions';
-import { IUser } from '../../definitions';
 
 interface IShareViewState {
 	selected: IAttachment;
@@ -37,7 +36,7 @@ interface IShareViewState {
 	readOnly: boolean;
 	attachments: IAttachment[];
 	text: string;
-	room: ISubscription;
+	room: TSubscriptionModel;
 	thread: any; // change
 	maxFileSize: number;
 	mediaAllowList: string;
@@ -153,7 +152,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 	getReadOnly = async () => {
 		const { room } = this.state;
 		const { user } = this.props;
-		const readOnly = await isReadOnly(room, user);
+		const readOnly = await isReadOnly(room, user.username);
 		return readOnly;
 	};
 

app/views/ThreadMessagesView/Item.tsx

@@ -70,6 +70,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 	const username = (useRealName && item?.u?.name) || item?.u?.username;
 	let time;
 	if (item?.ts) {
+		// @ts-ignore TODO: to be fixed after we unify our types
 		time = formatDateThreads(item.ts);
 	}
 

e2e/tests/room/04-discussion.spec.js

@@ -215,9 +215,6 @@ describe('Discussion', () => {
 			await waitFor(element(by.id(`room-view-title-${discussionName}`)))
 				.toExist()
 				.withTimeout(5000);
-			await waitFor(element(by.id('messagebox')))
-				.toBeVisible()
-				.withTimeout(60000);
 		});
 	});
 });

e2e/tests/team/03-moveconvert.spec.js

@@ -5,6 +5,9 @@ const toBeConverted = `to-be-converted-${data.random}`;
 const toBeMoved = `to-be-moved-${data.random}`;
 
 const createChannel = async room => {
+	await waitFor(element(by.id('rooms-list-view-create-channel')))
+		.toBeVisible()
+		.withTimeout(5000);
 	await element(by.id('rooms-list-view-create-channel')).tap();
 	await waitFor(element(by.id('new-message-view')))
 		.toExist()