Chore: Migrate views/RoomListView to typescript (#3758)

* chore: migrating RoomListView to ts

* chore: migrating RoomListView to ts

* chore: implementing types for RoomListView

* chore: change ChatsStackParamList for fix RoomListView errors

* chore: minor tweak

* chore: minor tweak

* chore: fix setTimeout type

* chore: applying changes requested

* chore: minor tweak

app/commands.ts

@@ -143,8 +143,8 @@ export const deleteKeyCommands = (): void => KeyCommands.deleteKeyCommands(keyCo
 
 export const KEY_COMMAND = 'KEY_COMMAND';
 
-interface IKeyCommandEvent extends NativeSyntheticEvent<typeof KeyCommand> {
-	input: string;
+export interface IKeyCommandEvent extends NativeSyntheticEvent<typeof KeyCommand> {
+	input: number & string;
 	modifierFlags: string | number;
 }
 

app/containers/List/ListItem.tsx

@@ -135,7 +135,7 @@ const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlay
 	</Touch>
 ));
 
-interface IListItem extends IListItemContent, IListButtonPress {
+interface IListItem extends IListItemContent, IListItemButton {
 	backgroundColor?: string;
 }
 

app/definitions/ISubscription.ts

@@ -50,7 +50,7 @@ export interface ISubscription {
 	lr: string;
 	userMentions: number;
 	groupMentions: number;
-	tunread?: string[];
+	tunread: string[];
 	tunreadUser?: string[];
 	tunreadGroup?: string[];
 	roomUpdatedAt: Date | number;
@@ -90,6 +90,7 @@ export interface ISubscription {
 	avatarETag?: string;
 	teamId?: string;
 	teamMain?: boolean;
+	separator?: boolean;
 	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
 	messages: Relation<TMessageModel>;
 	threads: Relation<TThreadModel>;

app/lib/methods/getUsersPresence.ts

@@ -106,7 +106,7 @@ export default async function getUsersPresence() {
 	}
 }
 
-let usersTimer: number | null = null;
+let usersTimer: ReturnType<typeof setTimeout> | null = null;
 export function getUserPresence(uid: string) {
 	if (!usersTimer) {
 		usersTimer = setTimeout(() => {

app/stacks/types.ts

@@ -9,10 +9,17 @@ import { IAttachment } from '../definitions/IAttachment';
 import { IMessage } from '../definitions/IMessage';
 import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
 import { ICannedResponse } from '../definitions/ICannedResponse';
+import { ModalStackParamList } from './MasterDetailStack/types';
 
 export type ChatsStackParamList = {
+	ModalStackNavigator: NavigatorScreenParams<ModalStackParamList>;
+	E2ESaveYourPasswordStackNavigator: NavigatorScreenParams<E2ESaveYourPasswordStackParamList>;
+	E2EEnterYourPasswordStackNavigator: NavigatorScreenParams<E2EEnterYourPasswordStackParamList>;
+	SettingsView: any;
+	NewMessageStackNavigator: any;
+	NewMessageStack: undefined;
 	RoomsListView: undefined;
-	RoomView: {
+	RoomView?: {
 		rid: string;
 		t: SubscriptionType;
 		tmid?: string;

app/utils/debounce.ts

@@ -1,5 +1,5 @@
 export default function debounce(func: Function, wait?: number, immediate?: boolean) {
-	let timeout: number | null;
+	let timeout: ReturnType<typeof setTimeout> | null;
 	function _debounce(...args: any[]) {
 		// @ts-ignore
 		// eslint-disable-next-line @typescript-eslint/no-this-alias

app/utils/events.ts

@@ -3,6 +3,7 @@ import log from './log';
 
 type TEventEmitterEmmitArgs =
 	| { rid: string }
+	| { server: string }
 	| { message: string }
 	| { method: string }
 	| { invalid: boolean }

app/utils/goRoom.ts

@@ -7,7 +7,7 @@ export interface IGoRoomItem {
 	search?: boolean; // comes from spotlight
 	username?: string;
 	t?: SubscriptionType;
-	rid: string;
+	rid?: string;
 	name?: string;
 	prid?: string;
 	visitor?: IVisitor;

app/views/RoomsListView/Header/Header.js → app/views/RoomsListView/Header/Header.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import PropTypes from 'prop-types';
+import { StyleSheet, Text, TextInputProps, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 
 import TextInput from '../../../presentation/TextInput';
 import I18n from '../../../i18n';
@@ -31,19 +30,32 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IRoomHeader {
+	connecting: boolean;
+	connected: boolean;
+	isFetching: boolean;
+	serverName: string;
+	server: string;
+	showServerDropdown: boolean;
+	showSearchHeader: boolean;
+	theme: string;
+	onSearchChangeText: TextInputProps['onChangeText'];
+	onPress: TouchableOpacityProps['onPress'];
+}
+
 const Header = React.memo(
 	({
 		connecting,
 		connected,
 		isFetching,
-		serverName,
+		serverName = 'Rocket.Chat',
 		server,
 		showServerDropdown,
 		showSearchHeader,
 		theme,
 		onSearchChangeText,
 		onPress
-	}) => {
+	}: IRoomHeader) => {
 		const titleColorStyle = { color: themes[theme].headerTitleColor };
 		const isLight = theme === 'light';
 		const { isLandscape } = useOrientation();
@@ -79,9 +91,7 @@ const Header = React.memo(
 			<View style={styles.container}>
 				<TouchableOpacity onPress={onPress} testID='rooms-list-header-server-dropdown-button'>
 					<View style={styles.button}>
-						<Text
-							style={[styles.title, isFetching && styles.serverSmall, titleColorStyle, { fontSize: titleFontSize }]}
-							numberOfLines={1}>
+						<Text style={[styles.title, titleColorStyle, { fontSize: titleFontSize }]} numberOfLines={1}>
 							{serverName}
 						</Text>
 						<CustomIcon
@@ -105,21 +115,4 @@ const Header = React.memo(
 	}
 );
 
-Header.propTypes = {
-	showServerDropdown: PropTypes.bool.isRequired,
-	showSearchHeader: PropTypes.bool.isRequired,
-	onPress: PropTypes.func.isRequired,
-	onSearchChangeText: PropTypes.func.isRequired,
-	connecting: PropTypes.bool,
-	connected: PropTypes.bool,
-	isFetching: PropTypes.bool,
-	serverName: PropTypes.string,
-	server: PropTypes.string,
-	theme: PropTypes.string
-};
-
-Header.defaultProps = {
-	serverName: 'Rocket.Chat'
-};
-
 export default Header;

app/views/RoomsListView/Header/index.js → app/views/RoomsListView/Header/index.tsx

@@ -1,27 +1,29 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 
 import { toggleServerDropdown, closeServerDropdown, setSearch } from '../../../actions/rooms';
 import { withTheme } from '../../../theme';
 import EventEmitter from '../../../utils/events';
-import { KEY_COMMAND, handleCommandOpenServerDropdown } from '../../../commands';
+import { KEY_COMMAND, handleCommandOpenServerDropdown, IKeyCommandEvent } from '../../../commands';
 import { isTablet } from '../../../utils/deviceInfo';
 import { events, logEvent } from '../../../utils/log';
 import Header from './Header';
+import { IApplicationState } from '../../../definitions';
 
-class RoomsListHeaderView extends PureComponent {
-	static propTypes = {
-		showServerDropdown: PropTypes.bool,
-		showSearchHeader: PropTypes.bool,
-		serverName: PropTypes.string,
-		connecting: PropTypes.bool,
-		connected: PropTypes.bool,
-		isFetching: PropTypes.bool,
-		theme: PropTypes.string,
-		server: PropTypes.string
-	};
+interface IRoomsListHeaderViewProps {
+	showServerDropdown: boolean;
+	showSearchHeader: boolean;
+	serverName: string;
+	connecting: boolean;
+	connected: boolean;
+	isFetching: boolean;
+	theme: string;
+	server: string;
+	dispatch: Dispatch;
+}
 
+class RoomsListHeaderView extends PureComponent<IRoomsListHeaderViewProps, any> {
 	componentDidMount() {
 		if (isTablet) {
 			EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
@@ -35,13 +37,13 @@ class RoomsListHeaderView extends PureComponent {
 	}
 
 	// eslint-disable-next-line react/sort-comp
-	handleCommands = ({ event }) => {
+	handleCommands = ({ event }: { event: IKeyCommandEvent }) => {
 		if (handleCommandOpenServerDropdown(event)) {
 			this.onPress();
 		}
 	};
 
-	onSearchChangeText = text => {
+	onSearchChangeText = (text: string) => {
 		const { dispatch } = this.props;
 		dispatch(setSearch(text.trim()));
 	};
@@ -76,13 +78,13 @@ class RoomsListHeaderView extends PureComponent {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	showServerDropdown: state.rooms.showServerDropdown,
 	showSearchHeader: state.rooms.showSearchHeader,
 	connecting: state.meteor.connecting || state.server.loading,
 	connected: state.meteor.connected,
 	isFetching: state.rooms.isFetching,
-	serverName: state.settings.Site_Name,
+	serverName: state.settings.Site_Name as string,
 	server: state.server.server
 });
 

app/views/RoomsListView/ListHeader/index.js → app/views/RoomsListView/ListHeader/index.tsx

@@ -1,14 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { withTheme } from '../../../theme';
 import * as List from '../../../containers/List';
 import { E2E_BANNER_TYPE } from '../../../lib/encryption/constants';
 import { themes } from '../../../constants/colors';
 import OmnichannelStatus from '../../../ee/omnichannel/containers/OmnichannelStatus';
+import { IUser } from '../../../definitions';
+
+export type TEncryptionBanner = 'REQUEST_PASSWORD' | 'SAVE_PASSWORD';
+
+interface IRoomListHeader {
+	searching: boolean;
+	goEncryption: () => void;
+	goQueue: () => void;
+	queueSize: number;
+	inquiryEnabled: boolean;
+	encryptionBanner: TEncryptionBanner;
+	user: IUser;
+	theme: string;
+}
 
 const ListHeader = React.memo(
-	({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }) => {
+	({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }: IRoomListHeader) => {
 		if (searching) {
 			return null;
 		}
@@ -35,6 +48,7 @@ const ListHeader = React.memo(
 				) : null}
 				<List.Separator />
 				<OmnichannelStatus
+					// @ts-ignore // TODO - remove this @ts-ignore after merge omnichannel task
 					searching={searching}
 					goQueue={goQueue}
 					inquiryEnabled={inquiryEnabled}
@@ -46,15 +60,4 @@ const ListHeader = React.memo(
 	}
 );
 
-ListHeader.propTypes = {
-	searching: PropTypes.bool,
-	goEncryption: PropTypes.func,
-	goQueue: PropTypes.func,
-	queueSize: PropTypes.number,
-	inquiryEnabled: PropTypes.bool,
-	encryptionBanner: PropTypes.string,
-	user: PropTypes.object,
-	theme: PropTypes.string
-};
-
 export default withTheme(ListHeader);