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> {
+export interface IKeyCommandEvent extends NativeSyntheticEvent<typeof KeyCommand> {
-	input: string;
+	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.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, TextInputProps, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
-import PropTypes from 'prop-types';
 
 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
+						<Text style={[styles.title, titleColorStyle, { fontSize: titleFontSize }]} numberOfLines={1}>
-							style={[styles.title, isFetching && styles.serverSmall, 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.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 {
+interface IRoomsListHeaderViewProps {
-	static propTypes = {
+	showServerDropdown: boolean;
-		showServerDropdown: PropTypes.bool,
+	showSearchHeader: boolean;
-		showSearchHeader: PropTypes.bool,
+	serverName: string;
-		serverName: PropTypes.string,
+	connecting: boolean;
-		connecting: PropTypes.bool,
+	connected: boolean;
-		connected: PropTypes.bool,
+	isFetching: boolean;
-		isFetching: PropTypes.bool,
+	theme: string;
-		theme: PropTypes.string,
+	server: string;
-		server: PropTypes.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.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);

app/views/RoomsListView/ServerDropdown.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Linking } from 'react-native';
-import PropTypes from 'prop-types';
 import { batch, connect } from 'react-redux';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { Subscription } from 'rxjs';
 
 import * as List from '../../containers/List';
 import Button from '../../containers/Button';
@@ -16,7 +16,7 @@ import ServerItem from '../../presentation/ServerItem';
 import database from '../../lib/database';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { KEY_COMMAND, handleCommandSelectServer } from '../../commands';
+import { KEY_COMMAND, handleCommandSelectServer, IKeyCommandEvent } from '../../commands';
 import { isTablet } from '../../utils/deviceInfo';
 import { localAuthenticate } from '../../utils/localAuthentication';
 import { showConfirmationAlert } from '../../utils/info';
@@ -24,24 +24,32 @@ import log, { events, logEvent } from '../../utils/log';
 import { headerHeight } from '../../containers/Header';
 import { goRoom } from '../../utils/goRoom';
 import UserPreferences from '../../lib/userPreferences';
-import { RootEnum } from '../../definitions';
+import { IApplicationState, IBaseScreen, RootEnum, TServerModel } from '../../definitions';
-
 import styles from './styles';
+import { ChatsStackParamList } from '../../stacks/types';
 
 const ROW_HEIGHT = 68;
 const ANIMATION_DURATION = 200;
 
-class ServerDropdown extends Component {
+interface IServerDropdownProps extends IBaseScreen<ChatsStackParamList, 'RoomsListView'> {
-	static propTypes = {
+	insets?: {
-		navigation: PropTypes.object,
+		top: number;
-		insets: PropTypes.object,
-		closeServerDropdown: PropTypes.bool,
-		server: PropTypes.string,
-		theme: PropTypes.string,
-		isMasterDetail: PropTypes.bool
 	};
+	closeServerDropdown: boolean;
+	server: string;
+	isMasterDetail: boolean;
+}
 
-	constructor(props) {
+interface IServerDropdownState {
+	servers: TServerModel[];
+}
+
+class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownState> {
+	private animatedValue: Animated.Value;
+	private subscription?: Subscription;
+	private newServerTimeout?: ReturnType<typeof setTimeout> | false;
+
+	constructor(props: IServerDropdownProps) {
 		super(props);
 		this.state = { servers: [] };
 		this.animatedValue = new Animated.Value(0);
@@ -66,7 +74,7 @@ class ServerDropdown extends Component {
 		}
 	}
 
-	componentDidUpdate(prevProps) {
+	componentDidUpdate(prevProps: IServerDropdownProps) {
 		const { closeServerDropdown } = this.props;
 		if (prevProps.closeServerDropdown !== closeServerDropdown) {
 			this.close();
@@ -105,7 +113,7 @@ class ServerDropdown extends Component {
 		}
 	};
 
-	navToNewServer = previousServer => {
+	navToNewServer = (previousServer: string) => {
 		const { dispatch } = this.props;
 		batch(() => {
 			dispatch(appStart({ root: RootEnum.ROOT_OUTSIDE }));
@@ -122,7 +130,7 @@ class ServerDropdown extends Component {
 		}, ANIMATION_DURATION);
 	};
 
-	select = async (server, version) => {
+	select = async (server: string, version?: string) => {
 		const { server: currentServer, dispatch, isMasterDetail } = this.props;
 		this.close();
 		if (currentServer !== server) {
@@ -145,7 +153,7 @@ class ServerDropdown extends Component {
 		}
 	};
 
-	remove = server =>
+	remove = (server: string) =>
 		showConfirmationAlert({
 			message: I18n.t('This_will_remove_all_data_from_this_server'),
 			confirmationText: I18n.t('Delete'),
@@ -159,10 +167,10 @@ class ServerDropdown extends Component {
 			}
 		});
 
-	handleCommands = ({ event }) => {
+	handleCommands = ({ event }: { event: IKeyCommandEvent }) => {
 		const { servers } = this.state;
 		const { navigation } = this.props;
-		const { input } = event;
+		const { input } = event as unknown as { input: number };
 		if (handleCommandSelectServer(event)) {
 			if (servers[input - 1]) {
 				this.select(servers[input - 1].id);
@@ -171,7 +179,7 @@ class ServerDropdown extends Component {
 		}
 	};
 
-	renderServer = ({ item }) => {
+	renderServer = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => {
 		const { server, theme } = this.props;
 
 		return (
@@ -255,7 +263,7 @@ class ServerDropdown extends Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	closeServerDropdown: state.rooms.closeServerDropdown,
 	server: state.server.server,
 	isMasterDetail: state.app.isMasterDetail

app/views/RoomsListView/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { BackHandler, FlatList, Keyboard, NativeEventSubscription, RefreshControl, Text, View } from 'react-native';
-import { BackHandler, FlatList, Keyboard, RefreshControl, Text, View } from 'react-native';
 import { batch, connect } from 'react-redux';
 import { dequal } from 'dequal';
 import Orientation from 'react-native-orientation-locker';
 import { Q } from '@nozbe/watermelondb';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { Subscription } from 'rxjs';
+import { StackNavigationOptions } from '@react-navigation/stack';
 
 import database from '../../lib/database';
 import RocketChat from '../../lib/rocketchat';
@@ -32,7 +33,8 @@ import {
 	handleCommandSearching,
 	handleCommandSelectRoom,
 	handleCommandShowNewMessage,
-	handleCommandShowPreferences
+	handleCommandShowPreferences,
+	IKeyCommandEvent
 } from '../../commands';
 import { MAX_SIDEBAR_WIDTH } from '../../constants/tablet';
 import { getUserSelector } from '../../selectors/login';
@@ -44,12 +46,63 @@ import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
 import { E2E_BANNER_TYPE } from '../../lib/encryption/constants';
 import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry';
 import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../ee/omnichannel/lib';
-import { RootEnum } from '../../definitions';
+import { IApplicationState, IBaseScreen, ISubscription, IUser, RootEnum, TSubscriptionModel } from '../../definitions';
 import { DisplayMode, SortBy } from '../../constants/constantDisplayMode';
 import styles from './styles';
 import ServerDropdown from './ServerDropdown';
-import ListHeader from './ListHeader';
+import ListHeader, { TEncryptionBanner } from './ListHeader';
 import RoomsListHeaderView from './Header';
+import { ChatsStackParamList } from '../../stacks/types';
+import { RoomTypes } from '../../lib/rocketchat/methods/roomTypeToApiType';
+
+interface IRoomsListViewProps extends IBaseScreen<ChatsStackParamList, 'RoomsListView'> {
+	[key: string]: any;
+	user: IUser;
+	server: string;
+	searchText: string;
+	changingServer: boolean;
+	loadingServer: boolean;
+	showServerDropdown: boolean;
+	sortBy: string;
+	groupByType: boolean;
+	showFavorites: boolean;
+	showUnread: boolean;
+	refreshing: boolean;
+	StoreLastMessage: boolean;
+	useRealName: boolean;
+	isMasterDetail: boolean;
+	rooms: ISubscription[];
+	width: number;
+	insets: {
+		left: number;
+		right: number;
+	};
+	queueSize: number;
+	inquiryEnabled: boolean;
+	encryptionBanner: TEncryptionBanner;
+	showAvatar: boolean;
+	displayMode: string;
+	createTeamPermission: [];
+	createDirectMessagePermission: [];
+	createPublicChannelPermission: [];
+	createPrivateChannelPermission: [];
+	createDiscussionPermission: [];
+}
+
+interface IRoomsListViewState {
+	searching: boolean;
+	search: ISubscription[];
+	loading: boolean;
+	chatsUpdate: [];
+	chats: ISubscription[];
+	item: ISubscription;
+	canCreateRoom: boolean;
+}
+
+interface IRoomItem extends ISubscription {
+	search?: boolean;
+	outside?: boolean;
+}
 
 const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
 const CHATS_HEADER = 'Chats';
@@ -62,11 +115,11 @@ const DM_HEADER = 'Direct_Messages';
 const OMNICHANNEL_HEADER = 'Open_Livechats';
 const QUERY_SIZE = 20;
 
-const filterIsUnread = s => (s.unread > 0 || s.tunread?.length > 0 || s.alert) && !s.hideUnreadStatus;
+const filterIsUnread = (s: TSubscriptionModel) => (s.unread > 0 || s.tunread?.length > 0 || s.alert) && !s.hideUnreadStatus;
-const filterIsFavorite = s => s.f;
+const filterIsFavorite = (s: TSubscriptionModel) => s.f;
-const filterIsOmnichannel = s => s.t === 'l';
+const filterIsOmnichannel = (s: TSubscriptionModel) => s.t === 'l';
-const filterIsTeam = s => s.teamMain;
+const filterIsTeam = (s: TSubscriptionModel) => s.teamMain;
-const filterIsDiscussion = s => s.prid;
+const filterIsDiscussion = (s: TSubscriptionModel) => s.prid;
 
 const shouldUpdateProps = [
 	'searchText',
@@ -91,53 +144,27 @@ const sortPreferencesShouldUpdate = ['sortBy', 'groupByType', 'showFavorites', '
 
 const displayPropsShouldUpdate = ['showAvatar', 'displayMode'];
 
-const getItemLayout = (data, index, height) => ({
+const getItemLayout = (data: ISubscription[] | null | undefined, index: number, height: number) => ({
 	length: height,
 	offset: height * index,
 	index
 });
-const keyExtractor = item => item.rid;
+const keyExtractor = (item: ISubscription) => item.rid;
 
-class RoomsListView extends React.Component {
+class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewState> {
-	static propTypes = {
+	private animated: boolean;
-		navigation: PropTypes.object,
+	private mounted: boolean;
-		user: PropTypes.shape({
+	private count: number;
-			id: PropTypes.string,
+	private unsubscribeFocus?: () => void;
-			username: PropTypes.string,
+	private unsubscribeBlur?: () => void;
-			token: PropTypes.string,
+	private sortPreferencesChanged?: boolean;
-			statusLivechat: PropTypes.string,
+	private shouldUpdate?: boolean;
-			roles: PropTypes.array
+	private backHandler?: NativeEventSubscription;
-		}),
+	private querySubscription?: Subscription;
-		server: PropTypes.string,
+	private scroll?: FlatList;
-		searchText: PropTypes.string,
+	private useRealName?: boolean;
-		changingServer: PropTypes.bool,
-		loadingServer: PropTypes.bool,
-		showServerDropdown: PropTypes.bool,
-		sortBy: PropTypes.string,
-		groupByType: PropTypes.bool,
-		showFavorites: PropTypes.bool,
-		showUnread: PropTypes.bool,
-		refreshing: PropTypes.bool,
-		StoreLastMessage: PropTypes.bool,
-		theme: PropTypes.string,
-		useRealName: PropTypes.bool,
-		isMasterDetail: PropTypes.bool,
-		rooms: PropTypes.array,
-		width: PropTypes.number,
-		insets: PropTypes.object,
-		queueSize: PropTypes.number,
-		inquiryEnabled: PropTypes.bool,
-		encryptionBanner: PropTypes.string,
-		showAvatar: PropTypes.bool,
-		displayMode: PropTypes.string,
-		createTeamPermission: PropTypes.array,
-		createDirectMessagePermission: PropTypes.array,
-		createPublicChannelPermission: PropTypes.array,
-		createPrivateChannelPermission: PropTypes.array,
-		createDiscussionPermission: PropTypes.array
-	};
 
-	constructor(props) {
+	constructor(props: IRoomsListViewProps) {
 		super(props);
 		console.time(`${this.constructor.name} init`);
 		console.time(`${this.constructor.name} mount`);
@@ -151,7 +178,7 @@ class RoomsListView extends React.Component {
 			loading: true,
 			chatsUpdate: [],
 			chats: [],
-			item: {},
+			item: {} as ISubscription,
 			canCreateRoom: false
 		};
 		this.setHeader();
@@ -192,7 +219,7 @@ class RoomsListView extends React.Component {
 		console.timeEnd(`${this.constructor.name} mount`);
 	}
 
-	UNSAFE_componentWillReceiveProps(nextProps) {
+	UNSAFE_componentWillReceiveProps(nextProps: IRoomsListViewProps) {
 		const { loadingServer, searchText, server, changingServer } = this.props;
 
 		// when the server is changed
@@ -208,7 +235,7 @@ class RoomsListView extends React.Component {
 		}
 	}
 
-	shouldComponentUpdate(nextProps, nextState) {
+	shouldComponentUpdate(nextProps: IRoomsListViewProps, nextState: IRoomsListViewState) {
 		const { chatsUpdate, searching, item, canCreateRoom } = this.state;
 		// eslint-disable-next-line react/destructuring-assignment
 		const propsUpdated = shouldUpdateProps.some(key => nextProps[key] !== this.props[key]);
@@ -280,7 +307,7 @@ class RoomsListView extends React.Component {
 		return false;
 	}
 
-	componentDidUpdate(prevProps) {
+	componentDidUpdate(prevProps: IRoomsListViewProps) {
 		const {
 			sortBy,
 			groupByType,
@@ -312,8 +339,9 @@ class RoomsListView extends React.Component {
 			this.getSubscriptions();
 		}
 		// Update current item in case of another action triggers an update on rooms reducer
-		if (isMasterDetail && item?.rid !== rooms[0] && !dequal(rooms, prevProps.rooms)) {
+		if (isMasterDetail && item?.rid !== rooms[0].rid && !dequal(rooms, prevProps.rooms)) {
 			// eslint-disable-next-line react/no-did-update-set-state
+			// @ts-ignore
 			this.setState({ item: { rid: rooms[0] } });
 		}
 		if (insets.left !== prevProps.insets.left || insets.right !== prevProps.insets.right) {
@@ -365,13 +393,13 @@ class RoomsListView extends React.Component {
 			createDiscussionPermission
 		];
 		const permissionsToCreate = await RocketChat.hasPermission(permissions);
-		const canCreateRoom = permissionsToCreate.filter(r => r === true).length > 0;
+		const canCreateRoom = permissionsToCreate.filter((r: boolean) => r === true).length > 0;
 		this.setState({ canCreateRoom }, () => this.setHeader());
 	};
 
 	getHeader = () => {
 		const { searching, canCreateRoom } = this.state;
-		const { navigation, isMasterDetail, insets } = this.props;
+		const { navigation, isMasterDetail, insets, theme } = this.props;
 		const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: searching ? 0 : 3 });
 
 		return {
@@ -388,11 +416,12 @@ class RoomsListView extends React.Component {
 						onPress={
 							isMasterDetail
 								? () => navigation.navigate('ModalStackNavigator', { screen: 'SettingsView' })
-								: () => navigation.toggleDrawer()
+								: // @ts-ignore
+								  () => navigation.toggleDrawer()
 						}
 					/>
 				),
-			headerTitle: () => <RoomsListHeaderView />,
+			headerTitle: () => <RoomsListHeaderView theme={theme} />,
 			headerTitleContainerStyle: {
 				left: headerTitlePosition.left,
 				right: headerTitlePosition.right
@@ -412,21 +441,23 @@ class RoomsListView extends React.Component {
 
 	setHeader = () => {
 		const { navigation } = this.props;
-		const options = this.getHeader();
+		const options = this.getHeader() as Partial<StackNavigationOptions>;
 		navigation.setOptions(options);
 	};
 
-	internalSetState = (...args) => {
+	// internalSetState = (...args: { chats: TSubscriptionModel; chatsUpdate: TSubscriptionModel; loading: boolean }[]) => {
+	internalSetState = (...args: any) => {
 		if (this.animated) {
 			animateNextTransition();
 		}
+		// @ts-ignore
 		this.setState(...args);
 	};
 
-	addRoomsGroup = (data, header, allData) => {
+	addRoomsGroup = (data: TSubscriptionModel[], header: string, allData: TSubscriptionModel[]) => {
 		if (data.length > 0) {
 			if (header) {
-				allData.push({ rid: header, separator: true });
+				allData.push({ rid: header, separator: true } as TSubscriptionModel);
 			}
 			allData = allData.concat(data);
 		}
@@ -441,7 +472,7 @@ class RoomsListView extends React.Component {
 		const db = database.active;
 		let observable;
 
-		const defaultWhereClause = [Q.where('archived', false), Q.where('open', true)];
+		const defaultWhereClause = [Q.where('archived', false), Q.where('open', true)] as (Q.WhereDescription | Q.SortBy)[];
 
 		if (sortBy === SortBy.Alphabetical) {
 			defaultWhereClause.push(Q.experimentalSortBy(`${this.useRealName ? 'fname' : 'name'}`, Q.asc));
@@ -466,7 +497,7 @@ class RoomsListView extends React.Component {
 		}
 
 		this.querySubscription = observable.subscribe(data => {
-			let tempChats = [];
+			let tempChats = [] as TSubscriptionModel[];
 			let chats = data;
 
 			let chatsUpdate = [];
@@ -528,8 +559,11 @@ class RoomsListView extends React.Component {
 					loading: false
 				});
 			} else {
+				// @ts-ignore
 				this.state.chats = tempChats;
+				// @ts-ignore
 				this.state.chatsUpdate = chatsUpdate;
+				// @ts-ignore
 				this.state.loading = false;
 			}
 		});
@@ -580,7 +614,7 @@ class RoomsListView extends React.Component {
 	};
 
 	// eslint-disable-next-line react/sort-comp
-	search = debounce(async text => {
+	search = debounce(async (text: string) => {
 		const result = await RocketChat.search({ text });
 
 		// if the search was cancelled before the promise is resolved
@@ -595,26 +629,26 @@ class RoomsListView extends React.Component {
 		this.scrollToTop();
 	}, 300);
 
-	getRoomTitle = item => RocketChat.getRoomTitle(item);
+	getRoomTitle = (item: ISubscription) => RocketChat.getRoomTitle(item);
 
-	getRoomAvatar = item => RocketChat.getRoomAvatar(item);
+	getRoomAvatar = (item: ISubscription) => RocketChat.getRoomAvatar(item);
 
-	isGroupChat = item => RocketChat.isGroupChat(item);
+	isGroupChat = (item: ISubscription) => RocketChat.isGroupChat(item);
 
-	isRead = item => RocketChat.isRead(item);
+	isRead = (item: ISubscription) => RocketChat.isRead(item);
 
-	isSwipeEnabled = item => !(item?.search || item?.joinCodeRequired || item?.outside);
+	isSwipeEnabled = (item: IRoomItem) => !(item?.search || item?.joinCodeRequired || item?.outside);
 
-	getUserPresence = uid => RocketChat.getUserPresence(uid);
+	getUserPresence = (uid: string) => RocketChat.getUserPresence(uid);
 
-	getUidDirectMessage = room => RocketChat.getUidDirectMessage(room);
+	getUidDirectMessage = (room: ISubscription) => RocketChat.getUidDirectMessage(room);
 
 	get isGrouping() {
 		const { showUnread, showFavorites, groupByType } = this.props;
 		return showUnread || showFavorites || groupByType;
 	}
 
-	onPressItem = (item = {}) => {
+	onPressItem = (item = {} as ISubscription) => {
 		const { navigation, isMasterDetail } = this.props;
 		if (!navigation.isFocused()) {
 			return;
@@ -630,14 +664,14 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	toggleFav = async (rid, favorite) => {
+	toggleFav = async (rid: string, favorite: boolean) => {
 		logEvent(favorite ? events.RL_UNFAVORITE_CHANNEL : events.RL_FAVORITE_CHANNEL);
 		try {
 			const db = database.active;
 			const result = await RocketChat.toggleFavorite(rid, !favorite);
 			if (result.success) {
 				const subCollection = db.get('subscriptions');
-				await db.action(async () => {
+				await db.write(async () => {
 					try {
 						const subRecord = await subCollection.find(rid);
 						await subRecord.update(sub => {
@@ -649,12 +683,12 @@ class RoomsListView extends React.Component {
 				});
 			}
 		} catch (e) {
-			logEvent(events.RL_TOGGLE_FAVORITE_FAIL);
+			logEvent(events.RL_TOGGLE_FAVORITE_F);
 			log(e);
 		}
 	};
 
-	toggleRead = async (rid, isRead) => {
+	toggleRead = async (rid: string, isRead: boolean) => {
 		logEvent(isRead ? events.RL_UNREAD_CHANNEL : events.RL_READ_CHANNEL);
 		try {
 			const db = database.active;
@@ -662,7 +696,7 @@ class RoomsListView extends React.Component {
 
 			if (result.success) {
 				const subCollection = db.get('subscriptions');
-				await db.action(async () => {
+				await db.write(async () => {
 					try {
 						const subRecord = await subCollection.find(rid);
 						await subRecord.update(sub => {
@@ -680,14 +714,14 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	hideChannel = async (rid, type) => {
+	hideChannel = async (rid: string, type: RoomTypes) => {
 		logEvent(events.RL_HIDE_CHANNEL);
 		try {
 			const db = database.active;
 			const result = await RocketChat.hideRoom(rid, type);
 			if (result.success) {
 				const subCollection = db.get('subscriptions');
-				await db.action(async () => {
+				await db.write(async () => {
 					try {
 						const subRecord = await subCollection.find(rid);
 						await subRecord.destroyPermanently();
@@ -745,10 +779,11 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	goRoom = ({ item, isMasterDetail }) => {
+	goRoom = ({ item, isMasterDetail }: { item: ISubscription; isMasterDetail: boolean }) => {
 		logEvent(events.RL_GO_ROOM);
 		const { item: currentItem } = this.state;
 		const { rooms } = this.props;
+		// @ts-ignore
 		if (currentItem?.rid === item.rid || rooms?.includes(item.rid)) {
 			return;
 		}
@@ -759,7 +794,7 @@ class RoomsListView extends React.Component {
 		goRoom({ item, isMasterDetail });
 	};
 
-	goRoomByIndex = index => {
+	goRoomByIndex = (index: number) => {
 		const { chats } = this.state;
 		const { isMasterDetail } = this.props;
 		const filteredChats = chats.filter(c => !c.separator);
@@ -769,7 +804,7 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	findOtherRoom = (index, sign) => {
+	findOtherRoom = (index: number, sign: number): ISubscription | void => {
 		const { chats } = this.state;
 		const otherIndex = index + sign;
 		const otherRoom = chats[otherIndex];
@@ -778,14 +813,13 @@ class RoomsListView extends React.Component {
 		}
 		if (otherRoom.separator) {
 			return this.findOtherRoom(otherIndex, sign);
-		} else {
-			return otherRoom;
 		}
+		return otherRoom;
 	};
 
 	// Go to previous or next room based on sign (-1 or 1)
 	// It's used by iPad key commands
-	goOtherRoom = sign => {
+	goOtherRoom = (sign: number) => {
 		const { item } = this.state;
 		if (!item) {
 			return;
@@ -831,7 +865,7 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	handleCommands = ({ event }) => {
+	handleCommands = ({ event }: { event: IKeyCommandEvent }) => {
 		const { navigation, server, isMasterDetail, dispatch } = this.props;
 		const { input } = event;
 		if (handleCommandShowPreferences(event)) {
@@ -874,11 +908,11 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	getScrollRef = ref => (this.scroll = ref);
+	getScrollRef = (ref: FlatList) => (this.scroll = ref);
 
 	renderListHeader = () => {
 		const { searching } = this.state;
-		const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
+		const { queueSize, inquiryEnabled, encryptionBanner, user, theme } = this.props;
 		return (
 			<ListHeader
 				searching={searching}
@@ -888,6 +922,7 @@ class RoomsListView extends React.Component {
 				inquiryEnabled={inquiryEnabled}
 				encryptionBanner={encryptionBanner}
 				user={user}
+				theme={theme}
 			/>
 		);
 	};
@@ -899,11 +934,11 @@ class RoomsListView extends React.Component {
 			return null;
 		}
 
-		const options = this.getHeader();
+		const options = this.getHeader() as any;
 		return <Header {...options} />;
 	};
 
-	renderItem = ({ item }) => {
+	renderItem = ({ item }: { item: ISubscription }) => {
 		if (item.separator) {
 			return this.renderSectionHeader(item.rid);
 		}
@@ -950,7 +985,7 @@ class RoomsListView extends React.Component {
 		);
 	};
 
-	renderSectionHeader = header => {
+	renderSectionHeader = (header: string) => {
 		const { theme } = this.props;
 		return (
 			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].backgroundColor }]}>
@@ -1001,13 +1036,15 @@ class RoomsListView extends React.Component {
 				<StatusBar />
 				{this.renderHeader()}
 				{this.renderScroll()}
-				{showServerDropdown ? <ServerDropdown navigation={navigation} /> : null}
+				{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
+				{/* @ts-ignore*/}
+				{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}
 			</SafeAreaView>
 		);
 	};
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	user: getUserSelector(state),
 	isMasterDetail: state.app.isMasterDetail,
 	server: state.server.server,

app/views/RoomsListView/styles.ts

@@ -22,7 +22,7 @@ export default StyleSheet.create({
 		borderBottomWidth: StyleSheet.hairlineWidth
 	},
 	backdrop: {
-		...StyleSheet.absoluteFill
+		...StyleSheet.absoluteFillObject
 	},
 	queueIcon: {
 		marginHorizontal: 12