Chore: Migrate Utils Folder to TS

app/containers/ActionSheet/Button.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { isAndroid } from '../../utils/deviceInfo';
 import Touch from '../../utils/touch';
 
 // Taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet#touchables
-export const Button = isAndroid ? Touch : TouchableOpacity;
+export const Button: typeof React.Component = isAndroid ? Touch : TouchableOpacity;

app/containers/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import { avatarURL } from '../../utils/avatar';
+import { RoomType } from '../../definitions/IRoom';
 import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
 
@@ -27,8 +28,8 @@ const Avatar = React.memo(
 		text,
 		size = 25,
 		borderRadius = 4,
-		type = 'd'
-	}: Partial<IAvatar>) => {
+		type = RoomType.DIRECT
+	}: IAvatar) => {
 		if ((!text && !avatar && !emoji && !rid) || !server) {
 			return null;
 		}

app/containers/Avatar/index.tsx

@@ -7,17 +7,17 @@ import { getUserSelector } from '../../selectors/login';
 import Avatar from './Avatar';
 import { IAvatar } from './interfaces';
 
-class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
+class AvatarContainer extends React.Component<IAvatar, any> {
 	private mounted: boolean;
 
-	private subscription!: any;
+	private subscription: any;
 
 	static defaultProps = {
 		text: '',
 		type: 'd'
 	};
 
-	constructor(props: Partial<IAvatar>) {
+	constructor(props: IAvatar) {
 		super(props);
 		this.mounted = false;
 		this.state = { avatarETag: '' };
@@ -82,7 +82,7 @@ class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
 	render() {
 		const { avatarETag } = this.state;
 		const { serverVersion } = this.props;
-		return <Avatar avatarETag={avatarETag} serverVersion={serverVersion} {...this.props} />;
+		return <Avatar {...this.props} avatarETag={avatarETag} serverVersion={serverVersion} />;
 	}
 }
 

app/containers/Avatar/interfaces.ts

@@ -1,23 +1,23 @@
 export interface IAvatar {
-	server: string;
-	style: any;
-	text: string;
-	avatar: string;
-	emoji: string;
-	size: number;
-	borderRadius: number;
-	type: string;
-	children: JSX.Element;
-	user: {
-		id: string;
-		token: string;
+	server?: string;
+	style?: any;
+	text?: string;
+	avatar?: string;
+	emoji?: string;
+	size?: number;
+	borderRadius?: number;
+	type?: string;
+	children?: JSX.Element;
+	user?: {
+		id?: string;
+		token?: string;
 	};
-	theme: string;
-	onPress(): void;
-	getCustomEmoji(): any;
-	avatarETag: string;
-	isStatic: boolean | string;
-	rid: string;
-	blockUnauthenticatedAccess: boolean;
-	serverVersion: string;
+	theme?: string;
+	onPress?: () => void;
+	getCustomEmoji?: () => any;
+	avatarETag?: string;
+	isStatic?: boolean | string;
+	rid?: string;
+	blockUnauthenticatedAccess?: boolean;
+	serverVersion?: string;
 }

app/containers/MessageActions/index.tsx

@@ -305,8 +305,6 @@ const MessageActions = React.memo(
 			};
 
 			const handleDelete = (message: any) => {
-				// TODO - migrate this function for ts when fix the lint erros
-				// @ts-ignore
 				showConfirmationAlert({
 					message: I18n.t('You_will_not_be_able_to_recover_this_message'),
 					confirmationText: I18n.t('Delete'),

app/containers/Passcode/Base/Button.tsx

@@ -7,28 +7,28 @@ import Touch from '../../../utils/touch';
 import { CustomIcon } from '../../../lib/Icons';
 
 interface IPasscodeButton {
-	text: string;
-	icon: string;
+	text?: string;
+	icon?: string;
 	theme: string;
-	disabled: boolean;
-	onPress: Function;
+	disabled?: boolean;
+	onPress?: Function;
 }
 
-const Button = React.memo(({ text, disabled, theme, onPress, icon }: Partial<IPasscodeButton>) => {
-	const press = () => onPress && onPress(text!);
+const Button = React.memo(({ text, disabled, theme, onPress, icon }: IPasscodeButton) => {
+	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
 			style={[styles.buttonView, { backgroundColor: 'transparent' }]}
-			underlayColor={themes[theme!].passcodeButtonActive}
-			rippleColor={themes[theme!].passcodeButtonActive}
+			underlayColor={themes[theme].passcodeButtonActive}
+			rippleColor={themes[theme].passcodeButtonActive}
 			enabled={!disabled}
 			theme={theme}
 			onPress={press}>
 			{icon ? (
-				<CustomIcon name={icon} size={36} color={themes[theme!].passcodePrimary} />
+				<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
 			) : (
-				<Text style={[styles.buttonText, { color: themes[theme!].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
 			)}
 		</Touch>
 	);

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: Partial<IAttachment>;
 	timeFormat: string;
 	theme: string;
 }
 
 interface IMessageDescription {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: Partial<IAttachment>;
 	getCustomEmoji: Function;
 	theme: string;
 }
 
 interface IMessageFields {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: Partial<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/containers/message/interfaces.ts

@@ -84,7 +84,7 @@ export interface IMessageContent {
 export interface IMessageDiscussion {
 	msg: string;
 	dcount: number;
-	dlm: string;
+	dlm: Date;
 	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/ICommand.ts

@@ -0,0 +1,6 @@
+export interface ICommand {
+	event: {
+		input: string;
+		modifierFlags: number;
+	};
+}

app/definitions/IRoom.ts

@@ -24,4 +24,12 @@ export interface IRoom extends IRocketChatRecord {
 	autoTranslate?: boolean;
 	observe?: Function;
 	usedCannedResponse: string;
+	search?: boolean;
+	username?: string;
+	archived?: boolean;
+	ro?: boolean;
+	muted?: string[];
+	joinCodeRequired?: boolean;
+	blocked?: boolean;
+	blocker?: boolean;
 }

app/definitions/IServer.ts

@@ -1,3 +1,5 @@
+import Model from '@nozbe/watermelondb/Model';
+
 export interface IServer {
 	name: string;
 	iconURL: string;
@@ -8,9 +10,11 @@ export interface IServer {
 	version: string;
 	lastLocalAuthenticatedSession: Date;
 	autoLock: boolean;
-	autoLockTime: number | null;
-	biometry: boolean | null;
+	autoLockTime?: number;
+	biometry?: boolean;
 	uniqueID: string;
 	enterpriseModules: string;
 	E2E_Enable: boolean;
 }
+
+export interface IServerRecord extends IServer, Model {}

app/definitions/ITheme.ts

@@ -0,0 +1,6 @@
+export type TThemeMode = 'automatic' | 'light' | 'dark';
+
+export interface IThemePreference {
+	currentTheme: TThemeMode;
+	darkLevel: string;
+}

app/externalModules.d.ts

@@ -13,3 +13,4 @@ declare module 'react-native-mime-types';
 declare module 'react-native-restart';
 declare module 'react-native-prompt-android';
 declare module 'react-native-jitsi-meet';
+declare module 'rn-root-view';

app/index.tsx

@@ -30,6 +30,8 @@ import InAppNotification from './containers/InAppNotification';
 import { ActionSheetProvider } from './containers/ActionSheet';
 import debounce from './utils/debounce';
 import { isFDroidBuild } from './constants/environment';
+import { IThemePreference } from './definitions/ITheme';
+import { ICommand } from './definitions/ICommand';
 
 RNScreens.enableScreens();
 
@@ -42,10 +44,7 @@ interface IDimensions {
 
 interface IState {
 	theme: string;
-	themePreferences: {
-		currentTheme: 'automatic' | 'light';
-		darkLevel: string;
-	};
+	themePreferences: IThemePreference;
 	width: number;
 	height: number;
 	scale: number;
@@ -175,7 +174,7 @@ export default class Root extends React.Component<{}, IState> {
 	setTheme = (newTheme = {}) => {
 		// change theme state
 		this.setState(
-			prevState => newThemeState(prevState, newTheme),
+			prevState => newThemeState(prevState, newTheme as IThemePreference),
 			() => {
 				const { themePreferences } = this.state;
 				// subscribe to Appearance changes
@@ -191,7 +190,7 @@ export default class Root extends React.Component<{}, IState> {
 	initTablet = () => {
 		const { width } = this.state;
 		this.setMasterDetail(width);
-		this.onKeyCommands = KeyCommandsEmitter.addListener('onKeyCommand', (command: unknown) => {
+		this.onKeyCommands = KeyCommandsEmitter.addListener('onKeyCommand', (command: ICommand) => {
 			EventEmitter.emit(KEY_COMMAND, { event: command });
 		});
 	};

app/share.tsx

@@ -14,6 +14,7 @@ import { defaultHeader, getActiveRouteName, navigationTheme, themedHeader } from
 import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
 import { ThemeContext } from './theme';
 import { localAuthenticate } from './utils/localAuthentication';
+import { IThemePreference } from './definitions/ITheme';
 import ScreenLockedView from './views/ScreenLockedView';
 // Outside Stack
 import WithoutServersView from './views/WithoutServersView';
@@ -36,10 +37,7 @@ interface IDimensions {
 
 interface IState {
 	theme: string;
-	themePreferences: {
-		currentTheme: 'automatic' | 'light';
-		darkLevel: string;
-	};
+	themePreferences: IThemePreference;
 	root: any;
 	width: number;
 	height: number;
@@ -135,7 +133,7 @@ class Root extends React.Component<{}, IState> {
 	setTheme = (newTheme = {}) => {
 		// change theme state
 		this.setState(
-			prevState => newThemeState(prevState, newTheme),
+			prevState => newThemeState(prevState, newTheme as IThemePreference),
 			() => {
 				const { themePreferences } = this.state;
 				// subscribe to Appearance changes