Merge branch 'develop' into chore/migration-ts-redux-create-discussion

app/constants/constantDisplayMode.js

@@ -1,2 +0,0 @@
-export const DISPLAY_MODE_CONDENSED = 'condensed';
-export const DISPLAY_MODE_EXPANDED = 'expanded';

app/constants/constantDisplayMode.ts

@@ -0,0 +1,9 @@
+export enum DisplayMode {
+	Condensed = 'condensed',
+	Expanded = 'expanded'
+}
+
+export enum SortBy {
+	Alphabetical = 'alphabetical',
+	Activity = 'activity'
+}

app/containers/message/Reply.tsx

@@ -13,6 +13,7 @@ import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import { fileDownloadAndPreview } from '../../utils/fileDownload';
 import { formatAttachmentUrl } from '../../lib/utils';
+import { IAttachment } from '../../definitions/IAttachment';
 import RCActivityIndicator from '../ActivityIndicator';
 
 const styles = StyleSheet.create({
@@ -90,43 +91,26 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IMessageReplyAttachment {
-	author_name: string;
-	message_link: string;
-	ts: string;
-	text: string;
-	title: string;
-	short: boolean;
-	value: string;
-	title_link: string;
-	author_link: string;
-	type: string;
-	color: string;
-	description: string;
-	fields: IMessageReplyAttachment[];
-	thumb_url: string;
-}
-
 interface IMessageTitle {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: IAttachment;
 	timeFormat: string;
 	theme: string;
 }
 
 interface IMessageDescription {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: IAttachment;
 	getCustomEmoji: Function;
 	theme: string;
 }
 
 interface IMessageFields {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: IAttachment;
 	theme: string;
 	getCustomEmoji: Function;
 }
 
 interface IMessageReply {
-	attachment: IMessageReplyAttachment;
+	attachment: IAttachment;
 	timeFormat: string;
 	index: number;
 	theme: string;
@@ -198,7 +182,7 @@ const Fields = React.memo(
 						<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
 						{/* @ts-ignore*/}
 						<Markdown
-							msg={field.value}
+							msg={field.value!}
 							baseUrl={baseUrl}
 							username={user.username}
 							getCustomEmoji={getCustomEmoji}

app/containers/message/Video.tsx

@@ -13,6 +13,7 @@ import { fileDownload } from '../../utils/fileDownload';
 import EventEmitter from '../../utils/events';
 import { LISTENER } from '../Toast';
 import I18n from '../../i18n';
+import { IAttachment } from '../../definitions/IAttachment';
 import RCActivityIndicator from '../ActivityIndicator';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
@@ -30,14 +31,7 @@ const styles = StyleSheet.create({
 });
 
 interface IMessageVideo {
-	file: {
-		title: string;
-		title_link: string;
-		type: string;
-		video_type: string;
-		video_url: string;
-		description: string;
-	};
+	file: IAttachment;
 	showAttachment: Function;
 	getCustomEmoji: Function;
 	theme: string;

app/definitions/IAttachment.ts

@@ -1,4 +1,5 @@
 export interface IAttachment {
+	ts: Date;
 	title: string;
 	type: string;
 	description: string;
@@ -7,4 +8,18 @@ export interface IAttachment {
 	image_type?: string;
 	video_url?: string;
 	video_type?: string;
+	title_link_download?: boolean;
+	fields?: IAttachment[];
+	image_dimensions?: { width?: number; height?: number };
+	image_preview?: string;
+	image_size?: number;
+	author_name?: string;
+	author_icon?: string;
+	message_link?: string;
+	text?: string;
+	short?: boolean;
+	value?: string;
+	author_link?: string;
+	color?: string;
+	thumb_url?: string;
 }

app/definitions/ICustomEmoji.ts

@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ICustomEmoji {
+	name?: string;
+	aliases?: string;
+	extension: string;
+	_updatedAt: Date;
+}
+
+export type TCustomEmojiModel = ICustomEmoji & Model;

app/definitions/IFrequentlyUsedEmoji.ts

@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IFrequentlyUsedEmoji {
+	content?: string;
+	extension?: string;
+	isCustom: boolean;
+	count: number;
+}
+
+export type TFrequentlyUsedEmoji = IFrequentlyUsedEmoji & Model;

app/definitions/ILoggedUser.ts

@@ -0,0 +1,18 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ILoggedUser {
+	id: string;
+	token: string;
+	username: string;
+	name: string;
+	language?: string;
+	status: string;
+	statusText?: string;
+	roles: string[];
+	avatarETag?: string;
+	showMessageInMainThread: boolean;
+	isFromWebView: boolean;
+	enableMessageParserEarlyAdoption?: boolean;
+}
+
+export type TLoggedUser = ILoggedUser & Model;

app/definitions/IMessage.ts

@@ -1,3 +1,95 @@
-export interface IMessage {
-	msg: string;
+import Model from '@nozbe/watermelondb/Model';
+import { MarkdownAST } from '@rocket.chat/message-parser';
+
+import { IAttachment } from './IAttachment';
+import { IReaction } from './IReaction';
+import { SubscriptionType } from './ISubscription';
+
+export interface IUserMessage {
+	_id: string;
+	username?: string;
+	name?: string;
 }
+
+export interface IUserMention extends IUserMessage {
+	type: string;
+}
+
+export interface IUserChannel {
+	[index: number]: string | number;
+	name: string;
+	_id: string;
+}
+
+export interface IEditedBy {
+	_id: string;
+	username: string;
+}
+
+export type TOnLinkPress = (link: string) => void;
+
+export interface ITranslations {
+	_id: string;
+	language: string;
+	value: string;
+}
+
+export interface ILastMessage {
+	_id: string;
+	rid: string;
+	tshow: boolean;
+	tmid: string;
+	msg: string;
+	ts: Date;
+	u: IUserMessage;
+	_updatedAt: Date;
+	urls: string[];
+	mentions: IUserMention[];
+	channels: IUserChannel[];
+	md: MarkdownAST;
+	attachments: IAttachment[];
+	reactions: IReaction[];
+	unread: boolean;
+	status: boolean;
+}
+
+export interface IMessage {
+	msg?: string;
+	t?: SubscriptionType;
+	ts: Date;
+	u: IUserMessage;
+	alias: string;
+	parseUrls: boolean;
+	groupable?: boolean;
+	avatar?: string;
+	emoji?: string;
+	attachments?: IAttachment[];
+	urls?: string[];
+	_updatedAt: Date;
+	status?: number;
+	pinned?: boolean;
+	starred?: boolean;
+	editedBy?: IEditedBy;
+	reactions?: IReaction[];
+	role?: string;
+	drid?: string;
+	dcount?: number;
+	dlm?: Date;
+	tmid?: string;
+	tcount?: number;
+	tlm?: Date;
+	replies?: string[];
+	mentions?: IUserMention[];
+	channels?: IUserChannel[];
+	unread?: boolean;
+	autoTranslate?: boolean;
+	translations?: ITranslations[];
+	tmsg?: string;
+	blocks?: any;
+	e2e?: string;
+	tshow?: boolean;
+	md?: MarkdownAST;
+	subscription: { id: string };
+}
+
+export type TMessageModel = IMessage & Model;

app/definitions/IPermission.ts

@@ -0,0 +1,9 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IPermission {
+	id: string;
+	roles: string[];
+	_updatedAt: Date;
+}
+
+export type TPermissionModel = IPermission & Model;

app/definitions/IReaction.ts

@@ -0,0 +1,5 @@
+export interface IReaction {
+	_id: string;
+	emoji: string;
+	usernames: string[];
+}

app/definitions/IRocketChatRecord.ts

@@ -1,4 +0,0 @@
-export interface IRocketChatRecord {
-	id: string;
-	updatedAt: Date;
-}

app/definitions/IRole.ts

@@ -0,0 +1,8 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IRole {
+	id: string;
+	description?: string;
+}
+
+export type TRoleModel = IRole & Model;

app/definitions/IRoom.ts

@@ -1,27 +1,20 @@
-import { IRocketChatRecord } from './IRocketChatRecord';
+import Model from '@nozbe/watermelondb/Model';
 
-export enum RoomType {
-	GROUP = 'p',
-	DIRECT = 'd',
-	CHANNEL = 'c',
-	OMNICHANNEL = 'l',
-	THREAD = 'thread'
+import { IServedBy } from './IServedBy';
+
+export interface IRoom {
+	id: string;
+	customFields: string[];
+	broadcast: boolean;
+	encrypted: boolean;
+	ro: boolean;
+	v?: string[];
+	servedBy?: IServedBy;
+	departmentId?: string;
+	livechatData?: any;
+	tags?: string[];
+	e2eKeyId?: string;
+	avatarETag?: string;
 }
 
-export interface IRoom extends IRocketChatRecord {
-	rid: string;
-	t: RoomType;
-	name: string;
-	fname: string;
-	prid?: string;
-	tmid?: string;
-	topic?: string;
-	teamMain?: boolean;
-	teamId?: string;
-	encrypted?: boolean;
-	visitor?: boolean;
-	autoTranslateLanguage?: boolean;
-	autoTranslate?: boolean;
-	observe?: Function;
-	usedCannedResponse: string;
-}
+export type TRoomModel = IRoom & Model;

app/definitions/IServedBy.ts

@@ -0,0 +1,5 @@
+export interface IServedBy {
+	_id: string;
+	username: string;
+	ts: Date;
+}

app/definitions/IServer.ts

@@ -1,3 +1,5 @@
+import Model from '@nozbe/watermelondb/Model';
+
 export interface IServer {
 	name: string;
 	iconURL: string;
@@ -14,3 +16,5 @@ export interface IServer {
 	enterpriseModules: string;
 	E2E_Enable: boolean;
 }
+
+export type TServerModel = IServer & Model;

app/definitions/IServerHistory.ts

@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IServerHistory {
+	id: string;
+	url: string;
+	username: string;
+	updatedAt: Date;
+}
+
+export type TServerHistory = IServerHistory & Model;

app/definitions/ISettings.ts

@@ -0,0 +1,12 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ISettings {
+	id: string;
+	valueAsString?: string;
+	valueAsBoolean?: boolean;
+	valueAsNumber?: number;
+	valueAsArray?: string[];
+	_updatedAt?: Date;
+}
+
+export type TSettingsModel = ISettings & Model;

app/definitions/ISlashCommand.ts

@@ -0,0 +1,12 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ISlashCommand {
+	id: string;
+	params?: string;
+	description?: string;
+	clientOnly?: boolean;
+	providesPreview?: boolean;
+	appId?: string;
+}
+
+export type TSlashCommandModel = ISlashCommand & Model;

app/definitions/ISubscription.ts

@@ -0,0 +1,89 @@
+import Model from '@nozbe/watermelondb/Model';
+import Relation from '@nozbe/watermelondb/Relation';
+
+import { ILastMessage, TMessageModel } from './IMessage';
+import { IServedBy } from './IServedBy';
+import { TThreadModel } from './IThread';
+import { TThreadMessageModel } from './IThreadMessage';
+import { TUploadModel } from './IUpload';
+
+export enum SubscriptionType {
+	GROUP = 'p',
+	DIRECT = 'd',
+	CHANNEL = 'c',
+	OMNICHANNEL = 'l',
+	THREAD = 'thread'
+}
+
+export interface IVisitor {
+	_id: string;
+	username: string;
+	token: string;
+	status: string;
+	lastMessageTs: Date;
+}
+
+export interface ISubscription {
+	_id: string; // _id belongs watermelonDB
+	id: string; // id from server
+	f: boolean;
+	t: SubscriptionType;
+	ts: Date;
+	ls: Date;
+	name: string;
+	fname?: string;
+	rid: string; // the same as id
+	open: boolean;
+	alert: boolean;
+	roles?: string[];
+	unread: number;
+	userMentions: number;
+	groupMentions: number;
+	tunread?: string[];
+	tunreadUser?: string[];
+	tunreadGroup?: string[];
+	roomUpdatedAt: Date;
+	ro: boolean;
+	lastOpen?: Date;
+	description?: string;
+	announcement?: string;
+	bannerClosed?: boolean;
+	topic?: string;
+	blocked?: boolean;
+	blocker?: boolean;
+	reactWhenReadOnly?: boolean;
+	archived: boolean;
+	joinCodeRequired?: boolean;
+	muted?: string[];
+	ignored?: string[];
+	broadcast?: boolean;
+	prid?: string;
+	draftMessage?: string;
+	lastThreadSync?: Date;
+	jitsiTimeout?: number;
+	autoTranslate?: boolean;
+	autoTranslateLanguage: string;
+	lastMessage?: ILastMessage;
+	hideUnreadStatus?: boolean;
+	sysMes?: string[] | boolean;
+	uids?: string[];
+	usernames?: string[];
+	visitor?: IVisitor;
+	departmentId?: string;
+	servedBy?: IServedBy;
+	livechatData?: any;
+	tags?: string[];
+	E2EKey?: string;
+	encrypted?: boolean;
+	e2eKeyId?: string;
+	avatarETag?: string;
+	teamId?: string;
+	teamMain?: boolean;
+	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
+	messages: Relation<TMessageModel>;
+	threads: Relation<TThreadModel>;
+	threadMessages: Relation<TThreadMessageModel>;
+	uploads: Relation<TUploadModel>;
+}
+
+export type TSubscriptionModel = ISubscription & Model;

app/definitions/IThread.ts

@@ -0,0 +1,78 @@
+import Model from '@nozbe/watermelondb/Model';
+import { MarkdownAST } from '@rocket.chat/message-parser';
+
+import { IAttachment } from './IAttachment';
+import { IEditedBy, IUserChannel, IUserMention, IUserMessage } from './IMessage';
+import { IReaction } from './IReaction';
+import { SubscriptionType } from './ISubscription';
+
+export interface IUrl {
+	title: string;
+	description: string;
+	image: string;
+	url: string;
+}
+
+interface IFileThread {
+	_id: string;
+	name: string;
+	type: string;
+}
+
+export interface IThreadResult {
+	_id: string;
+	rid: string;
+	ts: string;
+	msg: string;
+	file?: IFileThread;
+	files?: IFileThread[];
+	groupable?: boolean;
+	attachments?: IAttachment[];
+	md?: MarkdownAST;
+	u: IUserMessage;
+	_updatedAt: string;
+	urls: IUrl[];
+	mentions: IUserMention[];
+	channels: IUserChannel[];
+	replies: string[];
+	tcount: number;
+	tlm: string;
+}
+
+export interface IThread {
+	id: string;
+	msg?: string;
+	t?: SubscriptionType;
+	rid: string;
+	_updatedAt: Date;
+	ts: 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;
+	dlm?: number;
+	tmid?: string;
+	tcount?: number;
+	tlm?: Date;
+	replies?: string[];
+	mentions?: IUserMention[];
+	channels?: IUserChannel[];
+	unread?: boolean;
+	autoTranslate?: boolean;
+	translations?: any;
+	e2e?: string;
+}
+
+export type TThreadModel = IThread & Model;

app/definitions/IThreadMessage.ts

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

app/definitions/IUpload.ts

@@ -0,0 +1,16 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IUpload {
+	id: string;
+	path?: string;
+	name?: string;
+	description?: string;
+	size: number;
+	type?: string;
+	store?: string;
+	progress: number;
+	error: boolean;
+	subscription: { id: string };
+}
+
+export type TUploadModel = IUpload & Model;

app/definitions/IUser.ts

@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IUser {
+	_id: string;
+	name?: string;
+	username: string;
+	avatarETag?: string;
+}
+
+export type TUserModel = IUser & Model;

app/definitions/index.ts

@@ -11,3 +11,4 @@ export interface IBaseScreen<T extends Record<string, object | undefined>, S ext
 
 export * from './redux';
 export * from './redux/TRootEnum';
+

app/lib/rocketchat.js

@@ -835,17 +835,21 @@ const RocketChat = {
 		// RC 3.13.0
 		return this.post('teams.removeRoom', { roomId, teamId });
 	},
-	leaveTeam({ teamName, rooms }) {
+	leaveTeam({ teamId, rooms }) {
 		// RC 3.13.0
-		return this.post('teams.leave', { teamName, rooms });
+		return this.post('teams.leave', {
+			teamId,
+			// RC 4.2.0
+			...(rooms?.length && { rooms })
+		});
 	},
-	removeTeamMember({ teamId, teamName, userId, rooms }) {
+	removeTeamMember({ teamId, userId, rooms }) {
 		// RC 3.13.0
 		return this.post('teams.removeMember', {
 			teamId,
-			teamName,
 			userId,
-			rooms
+			// RC 4.2.0
+			...(rooms?.length && { rooms })
 		});
 	},
 	updateTeamRoom({ roomId, isDefault }) {

app/lib/userPreferences.ts

@@ -7,11 +7,12 @@ const MMKV = new MMKVStorage.Loader()
 	.initialize();
 
 class UserPreferences {
+	private mmkv: MMKVStorage.API;
 	constructor() {
 		this.mmkv = MMKV;
 	}
 
-	async getStringAsync(key) {
+	async getStringAsync(key: string) {
 		try {
 			const value = await this.mmkv.getStringAsync(key);
 			return value;
@@ -20,11 +21,11 @@ class UserPreferences {
 		}
 	}
 
-	setStringAsync(key, value) {
+	setStringAsync(key: string, value: string) {
 		return this.mmkv.setStringAsync(key, value);
 	}
 
-	async getBoolAsync(key) {
+	async getBoolAsync(key: string) {
 		try {
 			const value = await this.mmkv.getBoolAsync(key);
 			return value;
@@ -33,11 +34,11 @@ class UserPreferences {
 		}
 	}
 
-	setBoolAsync(key, value) {
+	setBoolAsync(key: string, value: boolean) {
 		return this.mmkv.setBoolAsync(key, value);
 	}
 
-	async getMapAsync(key) {
+	async getMapAsync(key: string) {
 		try {
 			const value = await this.mmkv.getMapAsync(key);
 			return value;
@@ -46,11 +47,11 @@ class UserPreferences {
 		}
 	}
 
-	setMapAsync(key, value) {
+	setMapAsync(key: string, value: object) {
 		return this.mmkv.setMapAsync(key, value);
 	}
 
-	removeItem(key) {
+	removeItem(key: string) {
 		return this.mmkv.removeItem(key);
 	}
 }

app/navigationTypes.ts

@@ -1,6 +1,6 @@
 import { NavigatorScreenParams } from '@react-navigation/core';
 
-import { IRoom } from './definitions/IRoom';
+import { ISubscription } from './definitions/ISubscription';
 import { IServer } from './definitions/IServer';
 import { IAttachment } from './definitions/IAttachment';
 import { MasterDetailInsideStackParamList } from './stacks/MasterDetailStack/types';
@@ -28,7 +28,7 @@ export type ShareInsideStackParamList = {
 		isShareExtension: boolean;
 		serverInfo: IServer;
 		text: string;
-		room: IRoom;
+		room: ISubscription;
 		thread: any; // TODO: Change
 	};
 	SelectServerView: undefined;

app/presentation/RoomItem/Actions.tsx

@@ -5,7 +5,7 @@ import { RectButton } from 'react-native-gesture-handler';
 import { isRTL } from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
-import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
 
 interface ILeftActions {
@@ -40,7 +40,7 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
 		reverse
 	);
 
-	const isCondensed = displayMode === DISPLAY_MODE_CONDENSED;
+	const isCondensed = displayMode === DisplayMode.Condensed;
 	const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
 
 	return (
@@ -87,7 +87,7 @@ export const RightActions = React.memo(
 			reverse
 		);
 
-		const isCondensed = displayMode === DISPLAY_MODE_CONDENSED;
+		const isCondensed = displayMode === DisplayMode.Condensed;
 		const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
 
 		return (

app/presentation/RoomItem/IconOrAvatar.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import PropTypes from 'prop-types';
 
 import Avatar from '../../containers/Avatar';
-import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 import TypeIcon from './TypeIcon';
 import styles from './styles';
 
@@ -22,11 +22,11 @@ const IconOrAvatar = ({
 }) => {
 	if (showAvatar) {
 		return (
-			<Avatar text={avatar} size={displayMode === DISPLAY_MODE_CONDENSED ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
+			<Avatar text={avatar} size={displayMode === DisplayMode.Condensed ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
 		);
 	}
 
-	if (displayMode === DISPLAY_MODE_EXPANDED && showLastMessage) {
+	if (displayMode === DisplayMode.Expanded && showLastMessage) {
 		return (
 			<View style={styles.typeIcon}>
 				<TypeIcon

app/presentation/RoomItem/RoomItem.tsx

@@ -11,7 +11,7 @@ import UpdatedAt from './UpdatedAt';
 import Touchable from './Touchable';
 import Tag from './Tag';
 import I18n from '../../i18n';
-import { DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 
 interface IRoomItem {
 	rid: string;
@@ -132,7 +132,7 @@ const RoomItem = ({
 			displayMode={displayMode}
 			showAvatar={showAvatar}
 			showLastMessage={showLastMessage}>
-			{showLastMessage && displayMode === DISPLAY_MODE_EXPANDED ? (
+			{showLastMessage && displayMode === DisplayMode.Expanded ? (
 				<>
 					<View style={styles.titleContainer}>
 						{showAvatar ? (

app/presentation/RoomItem/Wrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { themes } from '../../constants/colors';
-import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 import IconOrAvatar from './IconOrAvatar';
 import styles from './styles';
 
@@ -25,7 +25,7 @@ interface IWrapper {
 
 const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => (
 	<View
-		style={[styles.container, displayMode === DISPLAY_MODE_CONDENSED && styles.containerCondensed]}
+		style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
 		accessibilityLabel={accessibilityLabel}>
 		<IconOrAvatar theme={theme} displayMode={displayMode} {...props} />
 		<View
@@ -34,7 +34,7 @@ const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }:
 				{
 					borderColor: themes[theme].separatorColor
 				},
-				displayMode === DISPLAY_MODE_CONDENSED && styles.condensedPaddingVertical
+				displayMode === DisplayMode.Condensed && styles.condensedPaddingVertical
 			]}>
 			{children}
 		</View>

app/reducers/sortPreferences.js

@@ -1,13 +1,13 @@
 import { SORT_PREFERENCES } from '../actions/actionsTypes';
-import { DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode';
+import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
 
 const initialState = {
-	sortBy: 'activity',
+	sortBy: SortBy.Activity,
 	groupByType: false,
 	showFavorites: false,
 	showUnread: false,
 	showAvatar: true,
-	displayMode: DISPLAY_MODE_EXPANDED
+	displayMode: DisplayMode.Expanded
 };
 
 export default (state = initialState, action) => {

app/sagas/room.js

@@ -67,7 +67,7 @@ const handleLeaveRoom = function* handleLeaveRoom({ room, roomType, selected })
 		if (roomType === 'channel') {
 			result = yield RocketChat.leaveRoom(room.rid, room.t);
 		} else if (roomType === 'team') {
-			result = yield RocketChat.leaveTeam({ teamName: room.name, ...(selected && { rooms: selected }) });
+			result = yield RocketChat.leaveTeam({ teamId: room.teamId, ...(selected && { rooms: selected }) });
 		}
 
 		if (result?.success) {

app/stacks/MasterDetailStack/ModalContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import { StyleSheet, TouchableWithoutFeedback, useWindowDimensions, View } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { NavigationContainerProps } from '@react-navigation/core';
 
@@ -23,11 +23,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => (
-	<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
-		<TouchableWithoutFeedback onPress={() => navigation.pop()}>
-			<View style={styles.backdrop} />
-		</TouchableWithoutFeedback>
-		<View style={sharedStyles.modalFormSheet}>{children}</View>
-	</View>
-);
+export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => {
+	const { height } = useWindowDimensions();
+	const modalHeight = sharedStyles.modalFormSheet.height;
+	return (
+		<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
+			<TouchableWithoutFeedback onPress={() => navigation.pop()}>
+				<View style={styles.backdrop} />
+			</TouchableWithoutFeedback>
+			<View
+				style={{
+					...sharedStyles.modalFormSheet,
+					height: modalHeight > height ? height : modalHeight
+				}}>
+				{children}
+			</View>
+		</View>
+	);
+};

app/stacks/MasterDetailStack/types.ts

@@ -3,18 +3,18 @@ import { NavigatorScreenParams } from '@react-navigation/core';
 
 import { IAttachment } from '../../definitions/IAttachment';
 import { IMessage } from '../../definitions/IMessage';
-import { IRoom, RoomType } from '../../definitions/IRoom';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 
 export type MasterDetailChatsStackParamList = {
 	RoomView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		tmid?: string;
 		message?: string;
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room: IRoom;
+		room: ISubscription;
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
 		roomUserId?: string;
@@ -27,17 +27,17 @@ export type MasterDetailDrawerParamList = {
 
 export type ModalStackParamList = {
 	RoomActionsView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		joined: boolean;
 	};
 	RoomInfoView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	SelectListView: {
 		data: any;
@@ -54,11 +54,11 @@ export type ModalStackParamList = {
 	};
 	RoomMembersView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	SearchMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		encrypted?: boolean;
 		showCloseModal?: boolean;
 	};
@@ -84,18 +84,18 @@ export type ModalStackParamList = {
 	};
 	MessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		name: string;
 	};
 	AutoTranslateView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	DirectoryView: undefined;
 	QueueListView: undefined;
 	NotificationPrefView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	ForwardLivechatView: {
 		rid: string;
@@ -110,10 +110,10 @@ export type ModalStackParamList = {
 			scopeName: string;
 			tags: string[];
 		};
-		room: IRoom;
+		room: ISubscription;
 	};
 	LivechatEditView: {
-		room: IRoom;
+		room: ISubscription;
 		roomUser: any; // TODO: Change
 	};
 	PickerView: {
@@ -126,7 +126,7 @@ export type ModalStackParamList = {
 	};
 	ThreadMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	TeamChannelsView: {
 		teamId: string;
@@ -160,7 +160,7 @@ export type ModalStackParamList = {
 		teamId?: string;
 	};
 	CreateDiscussionView: {
-		channel: IRoom;
+		channel: ISubscription;
 		message: IMessage;
 		showCloseModal: boolean;
 	};
@@ -194,7 +194,7 @@ export type MasterDetailInsideStackParamList = {
 		isShareView?: boolean;
 		serverInfo: {};
 		text: string;
-		room: IRoom;
+		room: ISubscription;
 		thread: any; // TODO: Change
 	};
 };

app/stacks/types.ts

@@ -6,28 +6,28 @@ import { IOptionsField } from '../views/NotificationPreferencesView/options';
 import { IServer } from '../definitions/IServer';
 import { IAttachment } from '../definitions/IAttachment';
 import { IMessage } from '../definitions/IMessage';
-import { IRoom, RoomType } from '../definitions/IRoom';
+import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
 
 export type ChatsStackParamList = {
 	RoomsListView: undefined;
 	RoomView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		tmid?: string;
 		message?: string;
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room: IRoom;
+		room: ISubscription;
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
 		roomUserId?: string;
 	};
 	RoomActionsView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		joined: boolean;
 	};
 	SelectListView: {
@@ -41,21 +41,21 @@ export type ChatsStackParamList = {
 		isRadio?: boolean;
 	};
 	RoomInfoView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	RoomInfoEditView: {
 		rid: string;
 	};
 	RoomMembersView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	SearchMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		encrypted?: boolean;
 		showCloseModal?: boolean;
 	};
@@ -74,12 +74,12 @@ export type ChatsStackParamList = {
 	};
 	MessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		name: string;
 	};
 	AutoTranslateView: {
 		rid: string;
-		room: IRoom;
+		room: TSubscriptionModel;
 	};
 	DirectoryView: undefined;
 	NotificationPrefView: {
@@ -90,7 +90,7 @@ export type ChatsStackParamList = {
 		rid: string;
 	};
 	LivechatEditView: {
-		room: IRoom;
+		room: ISubscription;
 		roomUser: any; // TODO: Change
 	};
 	PickerView: {
@@ -103,7 +103,7 @@ export type ChatsStackParamList = {
 	};
 	ThreadMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	TeamChannelsView: {
 		teamId: string;
@@ -138,7 +138,7 @@ export type ChatsStackParamList = {
 			scopeName: string;
 			tags: string[];
 		};
-		room: IRoom;
+		room: ISubscription;
 	};
 };
 
@@ -198,7 +198,7 @@ export type NewMessageStackParamList = {
 		teamId?: string;
 	};
 	CreateDiscussionView: {
-		channel: IRoom;
+		channel: ISubscription;
 		message: IMessage;
 		showCloseModal: boolean;
 	};
@@ -230,7 +230,7 @@ export type InsideStackParamList = {
 		isShareExtension: boolean;
 		serverInfo: IServer;
 		text: string;
-		room: IRoom;
+		room: ISubscription;
 		thread: any; // TODO: Change
 	};
 	ModalBlockView: {

app/views/AttachmentView.tsx

@@ -123,7 +123,11 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 
 		this.setState({ loading: true });
 		try {
-			const extension = image_url ? `.${mime.extension(image_type) || 'jpg'}` : `.${mime.extension(video_type) || 'mp4'}`;
+			const extension = image_url
+				? `.${mime.extension(image_type) || 'jpg'}`
+				: `.${(video_type === 'video/quicktime' && 'mov') || mime.extension(video_type) || 'mp4'}`;
+			// The return of mime.extension('video/quicktime') is .qt,
+			// this format the iOS isn't recognize and can't save on gallery
 			const documentDir = `${RNFetchBlob.fs.dirs.DocumentDir}/`;
 			const path = `${documentDir + sha256(url!) + extension}`;
 			const file = await RNFetchBlob.config({ path }).fetch('GET', mediaAttachment);

app/views/AutoTranslateView/index.tsx

@@ -11,7 +11,7 @@ import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { events, logEvent } from '../../utils/log';
-import { IRoom } from '../../definitions/IRoom';
+import { ISubscription } from '../../definitions/ISubscription';
 
 const styles = StyleSheet.create({
 	list: {
@@ -42,7 +42,7 @@ class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
 
 		if (room && room.observe) {
 			this.roomObservable = room.observe();
-			this.subscription = this.roomObservable.subscribe((changes: IRoom) => {
+			this.subscription = this.roomObservable.subscribe((changes: ISubscription) => {
 				if (this.mounted) {
 					const { selectedLanguage, enableAutoTranslate } = this.state;
 					if (selectedLanguage !== changes.autoTranslateLanguage) {

app/views/DefaultBrowserView.tsx

@@ -107,7 +107,7 @@ class DefaultBrowserView extends React.Component<IDefaultBrowserViewProps, IDefa
 	changeDefaultBrowser = async (newBrowser: TValue) => {
 		logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser });
 		try {
-			const browser = newBrowser !== 'systemDefault:' ? newBrowser : null;
+			const browser = newBrowser || 'systemDefault:';
 			await UserPreferences.setStringAsync(DEFAULT_BROWSER_KEY, browser);
 			this.setState({ browser });
 		} catch {

app/views/DisplayPrefsView.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { Switch } from 'react-native';
 import { RadioButton } from 'react-native-ui-lib';
+import { StackNavigationProp } from '@react-navigation/stack';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { setPreference } from '../actions/sortPreferences';
@@ -15,13 +15,30 @@ import * as HeaderButton from '../containers/HeaderButton';
 import SafeAreaView from '../containers/SafeAreaView';
 import { ICON_SIZE } from '../containers/List/constants';
 import log, { events, logEvent } from '../utils/log';
-import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode';
+import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
+import { SettingsStackParamList } from '../stacks/types';
 
-const DisplayPrefsView = props => {
+interface IParam {
+	sortBy: SortBy;
+	groupByType: boolean;
+	showFavorites: boolean;
+	showUnread: boolean;
+	showAvatar: boolean;
+	displayMode: DisplayMode;
+}
+
+interface IDisplayPrefsView {
+	navigation: StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>;
+	isMasterDetail: boolean;
+}
+
+const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 	const { theme } = useTheme();
 
-	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(state => state.sortPreferences);
-	const { isMasterDetail } = useSelector(state => state.app);
+	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(
+		(state: any) => state.sortPreferences
+	);
+	const { isMasterDetail } = useSelector((state: any) => state.app);
 	const dispatch = useDispatch();
 
 	useEffect(() => {
@@ -36,7 +53,7 @@ const DisplayPrefsView = props => {
 		}
 	}, []);
 
-	const setSortPreference = async param => {
+	const setSortPreference = async (param: Partial<IParam>) => {
 		try {
 			dispatch(setPreference(param));
 			await RocketChat.saveSortPreference(param);
@@ -47,12 +64,12 @@ const DisplayPrefsView = props => {
 
 	const sortByName = async () => {
 		logEvent(events.DP_SORT_CHANNELS_BY_NAME);
-		await setSortPreference({ sortBy: 'alphabetical' });
+		await setSortPreference({ sortBy: SortBy.Alphabetical });
 	};
 
 	const sortByActivity = async () => {
 		logEvent(events.DP_SORT_CHANNELS_BY_ACTIVITY);
-		await setSortPreference({ sortBy: 'activity' });
+		await setSortPreference({ sortBy: SortBy.Activity });
 	};
 
 	const toggleGroupByType = async () => {
@@ -77,23 +94,23 @@ const DisplayPrefsView = props => {
 
 	const displayExpanded = async () => {
 		logEvent(events.DP_DISPLAY_EXPANDED);
-		await setSortPreference({ displayMode: DISPLAY_MODE_EXPANDED });
+		await setSortPreference({ displayMode: DisplayMode.Expanded });
 	};
 
 	const displayCondensed = async () => {
 		logEvent(events.DP_DISPLAY_CONDENSED);
-		await setSortPreference({ displayMode: DISPLAY_MODE_CONDENSED });
+		await setSortPreference({ displayMode: DisplayMode.Condensed });
 	};
 
-	const renderCheckBox = value => (
+	const renderCheckBox = (value: boolean) => (
 		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} />
 	);
 
-	const renderAvatarSwitch = value => (
+	const renderAvatarSwitch = (value: boolean) => (
 		<Switch value={value} onValueChange={() => toggleAvatar()} testID='display-pref-view-avatar-switch' />
 	);
 
-	const renderRadio = value => (
+	const renderRadio = (value: boolean) => (
 		<RadioButton
 			selected={!!value}
 			color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
@@ -111,7 +128,7 @@ const DisplayPrefsView = props => {
 						left={() => <List.Icon name='view-extended' />}
 						title='Expanded'
 						testID='display-pref-view-expanded'
-						right={() => renderRadio(displayMode === DISPLAY_MODE_EXPANDED)}
+						right={() => renderRadio(displayMode === DisplayMode.Expanded)}
 						onPress={displayExpanded}
 					/>
 					<List.Separator />
@@ -119,7 +136,7 @@ const DisplayPrefsView = props => {
 						left={() => <List.Icon name='view-medium' />}
 						title='Condensed'
 						testID='display-pref-view-condensed'
-						right={() => renderRadio(displayMode === DISPLAY_MODE_CONDENSED)}
+						right={() => renderRadio(displayMode === DisplayMode.Condensed)}
 						onPress={displayCondensed}
 					/>
 					<List.Separator />
@@ -139,7 +156,7 @@ const DisplayPrefsView = props => {
 						testID='display-pref-view-activity'
 						left={() => <List.Icon name='clock' />}
 						onPress={sortByActivity}
-						right={() => renderRadio(sortBy === 'activity')}
+						right={() => renderRadio(sortBy === SortBy.Activity)}
 					/>
 					<List.Separator />
 					<List.Item
@@ -147,7 +164,7 @@ const DisplayPrefsView = props => {
 						testID='display-pref-view-name'
 						left={() => <List.Icon name='sort-az' />}
 						onPress={sortByName}
-						right={() => renderRadio(sortBy === 'alphabetical')}
+						right={() => renderRadio(sortBy === SortBy.Alphabetical)}
 					/>
 					<List.Separator />
 				</List.Section>
@@ -184,9 +201,6 @@ const DisplayPrefsView = props => {
 	);
 };
 
-DisplayPrefsView.propTypes = {
-	navigation: PropTypes.object,
-	isMasterDetail: PropTypes.bool
-};
+DisplayPrefsView.propTypes = {};
 
 export default DisplayPrefsView;

app/views/MessagesView/index.tsx

@@ -20,7 +20,7 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import getThreadName from '../../lib/methods/getThreadName';
 import styles from './styles';
 import { ChatsStackParamList } from '../../stacks/types';
-import { IRoom, RoomType } from '../../definitions/IRoom';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 
 interface IMessagesViewProps {
 	user: {
@@ -40,10 +40,10 @@ interface IMessagesViewProps {
 }
 
 interface IRoomInfoParam {
-	room: IRoom;
+	room: ISubscription;
 	member: any;
 	rid: string;
-	t: RoomType;
+	t: SubscriptionType;
 	joined: boolean;
 }
 
@@ -72,13 +72,13 @@ interface IMessageItem {
 
 interface IParams {
 	rid: string;
-	t: RoomType;
+	t: SubscriptionType;
 	tmid?: string;
 	message?: string;
 	name?: string;
 	fname?: string;
 	prid?: string;
-	room: IRoom;
+	room: ISubscription;
 	jumpToMessageId?: string;
 	jumpToThreadId?: string;
 	roomUserId?: string;
@@ -86,7 +86,7 @@ interface IParams {
 
 class MessagesView extends React.Component<IMessagesViewProps, any> {
 	private rid: string;
-	private t: RoomType;
+	private t: SubscriptionType;
 	private content: any;
 	private room: any;
 
@@ -158,7 +158,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 				...params,
 				tmid: item.tmid,
 				name: await getThreadName(this.rid, item.tmid, item._id),
-				t: RoomType.THREAD
+				t: SubscriptionType.THREAD
 			};
 			navigation.push('RoomView', params);
 		} else {

app/views/NewServerView/ServerInput/Item.tsx

@@ -6,7 +6,7 @@ import { themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import sharedStyles from '../../Styles';
 import Touch from '../../../utils/touch';
-import { IServer } from '../index';
+import { TServerHistory } from '../../../definitions/IServerHistory';
 
 const styles = StyleSheet.create({
 	container: {
@@ -28,10 +28,10 @@ const styles = StyleSheet.create({
 });
 
 interface IItem {
-	item: IServer;
+	item: TServerHistory;
 	theme: string;
 	onPress(url: string): void;
-	onDelete(item: IServer): void;
+	onDelete(item: TServerHistory): void;
 }
 
 const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => (

app/views/NewServerView/ServerInput/index.tsx

@@ -5,8 +5,8 @@ import TextInput from '../../../containers/TextInput';
 import * as List from '../../../containers/List';
 import { themes } from '../../../constants/colors';
 import I18n from '../../../i18n';
+import { TServerHistory } from '../../../definitions/IServerHistory';
 import Item from './Item';
-import { IServer } from '../index';
 
 const styles = StyleSheet.create({
 	container: {
@@ -33,8 +33,8 @@ interface IServerInput extends TextInputProps {
 	theme: string;
 	serversHistory: any[];
 	onSubmit(): void;
-	onDelete(item: IServer): void;
-	onPressServerHistory(serverHistory: IServer): void;
+	onDelete(item: TServerHistory): void;
+	onPressServerHistory(serverHistory: TServerHistory): void;
 }
 
 const ServerInput = ({

app/views/NewServerView/index.tsx

@@ -8,7 +8,6 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Dispatch } from 'redux';
-import Model from '@nozbe/watermelondb/Model';
 
 import UserPreferences from '../../lib/userPreferences';
 import EventEmitter from '../../utils/events';
@@ -34,6 +33,7 @@ import { verticalScale, moderateScale } from '../../utils/scaling';
 import { withDimensions } from '../../dimensions';
 import ServerInput from './ServerInput';
 import { OutsideParamList } from '../../stacks/types';
+import { TServerHistory } from '../../definitions/IServerHistory';
 
 const styles = StyleSheet.create({
 	onboardingImage: {
@@ -68,11 +68,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-export interface IServer extends Model {
-	url: string;
-	username: string;
-}
-
 interface INewServerView {
 	navigation: StackNavigationProp<OutsideParamList, 'NewServerView'>;
 	theme: string;
@@ -90,7 +85,7 @@ interface IState {
 	text: string;
 	connectingOpen: boolean;
 	certificate: any;
-	serversHistory: IServer[];
+	serversHistory: TServerHistory[];
 }
 
 interface ISubmitParams {
@@ -166,7 +161,7 @@ class NewServerView extends React.Component<INewServerView, IState> {
 				const likeString = sanitizeLikeString(text);
 				whereClause = [...whereClause, Q.where('url', Q.like(`%${likeString}%`))];
 			}
-			const serversHistory = (await serversHistoryCollection.query(...whereClause).fetch()) as IServer[];
+			const serversHistory = (await serversHistoryCollection.query(...whereClause).fetch()) as TServerHistory[];
 			this.setState({ serversHistory });
 		} catch {
 			// Do nothing
@@ -190,7 +185,7 @@ class NewServerView extends React.Component<INewServerView, IState> {
 		connectServer(server);
 	};
 
-	onPressServerHistory = (serverHistory: IServer) => {
+	onPressServerHistory = (serverHistory: TServerHistory) => {
 		this.setState({ text: serverHistory.url }, () => this.submit({ fromServerHistory: true, username: serverHistory?.username }));
 	};
 
@@ -283,14 +278,14 @@ class NewServerView extends React.Component<INewServerView, IState> {
 		});
 	};
 
-	deleteServerHistory = async (item: IServer) => {
+	deleteServerHistory = async (item: TServerHistory) => {
 		const db = database.servers;
 		try {
 			await db.write(async () => {
 				await item.destroyPermanently();
 			});
 			this.setState((prevstate: IState) => ({
-				serversHistory: prevstate.serversHistory.filter((server: IServer) => server.id !== item.id)
+				serversHistory: prevstate.serversHistory.filter((server: TServerHistory) => server.id !== item.id)
 			}));
 		} catch {
 			// Nothing

app/views/RoomInfoView/Direct.js

@@ -15,8 +15,8 @@ const Roles = ({ roles, theme }) =>
 			<View style={styles.rolesContainer}>
 				{roles.map(role =>
 					role ? (
-						<View style={[styles.roleBadge, { backgroundColor: themes[theme].auxiliaryBackground }]} key={role}>
-							<Text style={styles.role}>{role}</Text>
+						<View style={[styles.roleBadge, { backgroundColor: themes[theme].chatComponentBackground }]} key={role}>
+							<Text style={[styles.role, { color: themes[theme].titleText }]}>{role}</Text>
 						</View>
 					) : null
 				)}

app/views/RoomMembersView/index.js

@@ -246,7 +246,6 @@ class RoomMembersView extends React.Component {
 			const userId = selectedUser._id;
 			const result = await RocketChat.removeTeamMember({
 				teamId: room.teamId,
-				teamName: room.name,
 				userId,
 				...(selected && { rooms: selected })
 			});

app/views/RoomsListView/index.js

@@ -51,7 +51,6 @@ import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry'
 import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../ee/omnichannel/lib';
 import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
 import { RootEnum } from '../../definitions';
-
 import styles from './styles';
 import ServerDropdown from './ServerDropdown';
 import ListHeader from './ListHeader';
@@ -455,7 +454,7 @@ class RoomsListView extends React.Component {
 
 		const defaultWhereClause = [Q.where('archived', false), Q.where('open', true)];
 
-		if (sortBy === 'alphabetical') {
+		if (sortBy === SortBy.Alphabetical) {
 			defaultWhereClause.push(Q.experimentalSortBy(`${this.useRealName ? 'fname' : 'name'}`, Q.asc));
 		} else {
 			defaultWhereClause.push(Q.experimentalSortBy('room_updated_at', Q.desc));
@@ -975,7 +974,7 @@ class RoomsListView extends React.Component {
 		const { loading, chats, search, searching } = this.state;
 		const { theme, refreshing, displayMode } = this.props;
 
-		const height = displayMode === DISPLAY_MODE_CONDENSED ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
+		const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
 
 		if (loading) {
 			return <ActivityIndicator theme={theme} />;

app/views/SearchMessagesView/index.tsx

@@ -6,7 +6,7 @@ import { Q } from '@nozbe/watermelondb';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
 
-import { IRoom, RoomType } from '../../definitions/IRoom';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 import { IAttachment } from '../../definitions/IAttachment';
 import RCTextInput from '../../containers/TextInput';
 import ActivityIndicator from '../../containers/ActivityIndicator';
@@ -42,10 +42,10 @@ interface ISearchMessagesViewState {
 }
 
 interface IRoomInfoParam {
-	room: IRoom;
+	room: ISubscription;
 	member: any;
 	rid: string;
-	t: RoomType;
+	t: SubscriptionType;
 	joined: boolean;
 }
 

app/views/ShareView/index.tsx

@@ -28,7 +28,7 @@ import Preview from './Preview';
 import Header from './Header';
 import styles from './styles';
 import { IAttachment } from './interfaces';
-import { IRoom } from '../../definitions/IRoom';
+import { ISubscription } from '../../definitions/ISubscription';
 
 interface IShareViewState {
 	selected: IAttachment;
@@ -36,7 +36,7 @@ interface IShareViewState {
 	readOnly: boolean;
 	attachments: IAttachment[];
 	text: string;
-	room: IRoom;
+	room: ISubscription;
 	thread: any; // change
 	maxFileSize: number;
 	mediaAllowList: number;

package.json

@@ -51,7 +51,6 @@
 		"@rocket.chat/react-native-fast-image": "^8.2.0",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
 		"@rocket.chat/ui-kit": "0.13.0",
-		"@types/url-parse": "^1.4.4",
 		"bytebuffer": "^5.0.1",
 		"color2k": "1.2.4",
 		"commonmark": "git+https://github.com/RocketChat/commonmark.js.git",
@@ -83,7 +82,7 @@
 		"react-native-bootsplash": "3.2.4",
 		"react-native-config-reader": "^4.1.1",
 		"react-native-console-time-polyfill": "1.2.3",
-		"react-native-device-info": "8.1.3",
+		"react-native-device-info": "8.4.8",
 		"react-native-document-picker": "5.2.0",
 		"react-native-easy-grid": "^0.2.2",
 		"react-native-easy-toast": "^1.2.0",
@@ -154,6 +153,7 @@
 		"@types/react-native-scrollable-tab-view": "^0.10.2",
 		"@types/react-redux": "^7.1.18",
 		"@types/react-test-renderer": "^17.0.1",
+		"@types/url-parse": "^1.4.6",
 		"@typescript-eslint/eslint-plugin": "^4.28.3",
 		"@typescript-eslint/parser": "^4.28.5",
 		"axios": "0.21.1",

storybook/stories/RoomItem.js

@@ -7,7 +7,7 @@ import { Provider } from 'react-redux';
 import { themes } from '../../app/constants/colors';
 import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem';
 import { longText } from '../utils';
-import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../../app/constants/constantDisplayMode';
+import { DisplayMode } from '../../app/constants/constantDisplayMode';
 import { store } from './index';
 
 const baseUrl = 'https://open.rocket.chat';
@@ -32,7 +32,7 @@ const RoomItem = props => (
 		width={width}
 		theme={_theme}
 		showAvatar
-		displayMode={DISPLAY_MODE_EXPANDED}
+		displayMode={DisplayMode.Expanded}
 		{...updatedAt}
 		{...props}
 	/>
@@ -132,10 +132,10 @@ stories.add('Last Message', () => (
 
 stories.add('Condensed Room Item', () => (
 	<>
-		<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DISPLAY_MODE_CONDENSED} />
-		<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DISPLAY_MODE_CONDENSED} />
+		<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DisplayMode.Condensed} />
+		<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DisplayMode.Condensed} />
 
-		<RoomItem type='c' displayMode={DISPLAY_MODE_CONDENSED} autoJoin />
+		<RoomItem type='c' displayMode={DisplayMode.Condensed} autoJoin />
 	</>
 ));
 
@@ -146,11 +146,11 @@ stories.add('Condensed Room Item without Avatar', () => (
 			alert
 			tunread={[1]}
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_CONDENSED}
+			displayMode={DisplayMode.Condensed}
 			showAvatar={false}
 		/>
-		<RoomItem type='p' displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
-		<RoomItem name={longText} autoJoin displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
+		<RoomItem type='p' displayMode={DisplayMode.Condensed} showAvatar={false} />
+		<RoomItem name={longText} autoJoin displayMode={DisplayMode.Condensed} showAvatar={false} />
 	</>
 ));
 
@@ -161,7 +161,7 @@ stories.add('Expanded Room Item without Avatar', () => (
 			alert
 			tunread={[1]}
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_EXPANDED}
+			displayMode={DisplayMode.Expanded}
 			showAvatar={false}
 		/>
 		<RoomItem
@@ -170,7 +170,7 @@ stories.add('Expanded Room Item without Avatar', () => (
 			alert
 			tunread={[1]}
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_EXPANDED}
+			displayMode={DisplayMode.Expanded}
 			showAvatar={false}
 		/>
 		<RoomItem
@@ -178,7 +178,7 @@ stories.add('Expanded Room Item without Avatar', () => (
 			showLastMessage
 			alert
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_EXPANDED}
+			displayMode={DisplayMode.Expanded}
 			showAvatar={false}
 		/>
 	</>

yarn.lock

@@ -4511,10 +4511,10 @@
   dependencies:
     source-map "^0.6.1"
 
-"@types/url-parse@^1.4.4":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.4.tgz#ebeb0ec8b581318739cf73e9f9b186f610764255"
-  integrity sha512-KtQLad12+4T/NfSxpoDhmr22+fig3T7/08QCgmutYA6QSznSRmEtuL95GrhVV40/0otTEdFc+etRcCTqhh1q5Q==
+"@types/url-parse@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.6.tgz#46b044f24ee5200c3b1ef6a98214d1d451f4dab8"
+  integrity sha512-Xo6pU78oG9NNk5UJaumUXzrwu9hPiVN2N83mcdXQ1C3/R037fMPlVCh+LqP/2BELXMnlQH0sKec0u33ZnktqHQ==
 
 "@types/webpack-env@^1.15.0":
   version "1.15.2"
@@ -14288,10 +14288,10 @@ react-native-console-time-polyfill@1.2.3:
   resolved "https://registry.yarnpkg.com/react-native-console-time-polyfill/-/react-native-console-time-polyfill-1.2.3.tgz#1039dab1bb9e2d8040f5e19de68e0da781dc9b60"
   integrity sha512-C7CUb1c6GsCssqvjtRuqVqnGwlfEHXxXDvCUuGNbq/gpZZt+9YbZD3ODmXBDxis3tDQA0k1lbT1VMTqWQw9rDg==
 
-react-native-device-info@8.1.3:
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.1.3.tgz#022fc01372632bf80c0a6d201aab53344efc715f"
-  integrity sha512-73e3wiGFL8DvIXEd8x4Aq+mO8mZvHARwfYorIEu+X0trLHY92bP5Ict8DJHDjCQ0+HtAvpA4Wda2VoUVN1zh6Q==
+react-native-device-info@8.4.8:
+  version "8.4.8"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.4.8.tgz#fc92ae423e47db6cfbf30c30012e09cee63727fa"
+  integrity sha512-92676ZWHZHsPM/EW1ulgb2MuVfjYfMWRTWMbLcrCsipkcMaZ9Traz5mpsnCS7KZpsOksnvUinzDIjsct2XGc6Q==
 
 react-native-document-picker@5.2.0:
   version "5.2.0"