Chore: Migrate DirectoryView to Typescript (#3379)

* [improve] - migrate the view: DirectoryView to typescript

* [improve] - migrate the view: removing unnecessary variables

* minor changes

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/presentation/DirectoryItem/index.tsx

@@ -25,14 +25,14 @@ interface IDirectoryItem {
 	rightLabel: string;
 	rid: string;
 	theme: string;
-	teamMain: boolean;
+	teamMain?: boolean;
 }
 
 const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) => {
 	if (!text) {
 		return null;
 	}
-	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
+	return <Text style={[styles.directoryItemLabel, { color: themes[theme!].auxiliaryText }]}>{text}</Text>;
 });
 
 const DirectoryItem = ({
@@ -47,7 +47,7 @@ const DirectoryItem = ({
 	rid,
 	theme,
 	teamMain
-}: IDirectoryItem) => (
+}: IDirectoryItem): JSX.Element => (
 	<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID} theme={theme}>
 		<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 			<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />

app/utils/log/events.js

@@ -85,6 +85,7 @@ export default {
 	// DIRECTORY VIEW
 	DIRECTORY_SEARCH_USERS: 'directory_search_users',
 	DIRECTORY_SEARCH_CHANNELS: 'directory_search_channels',
+	DIRECTORY_SEARCH_TEAMS: 'directory_search_teams',
 
 	// NEW MESSAGE VIEW
 	NEW_MSG_CREATE_CHANNEL: 'new_msg_create_channel',

app/views/DirectoryView/Options.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
-import PropTypes from 'prop-types';
 
 import Touch from '../../utils/touch';
 import { CustomIcon } from '../../lib/Icons';
@@ -16,18 +15,20 @@ const ANIMATION_PROPS = {
 	useNativeDriver: true
 };
 
-export default class DirectoryOptions extends PureComponent {
+interface IDirectoryOptionsProps {
-	static propTypes = {
+	type: string;
-		type: PropTypes.string,
+	globalUsers: boolean;
-		globalUsers: PropTypes.bool,
+	isFederationEnabled: boolean;
-		isFederationEnabled: PropTypes.bool,
+	close: Function;
-		close: PropTypes.func,
+	changeType: Function;
-		changeType: PropTypes.func,
+	toggleWorkspace(): void;
-		toggleWorkspace: PropTypes.func,
+	theme: string;
-		theme: PropTypes.string
+}
-	};
 
-	constructor(props) {
+export default class DirectoryOptions extends PureComponent<IDirectoryOptionsProps, any> {
+	private animatedValue: Animated.Value;
+
+	constructor(props: IDirectoryOptionsProps) {
 		super(props);
 		this.animatedValue = new Animated.Value(0);
 	}
@@ -47,7 +48,7 @@ export default class DirectoryOptions extends PureComponent {
 		}).start(() => close());
 	};
 
-	renderItem = itemType => {
+	renderItem = (itemType: string) => {
 		const { changeType, type: propType, theme } = this.props;
 		let text = 'Users';
 		let icon = 'user';

app/views/DirectoryView/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FlatList, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 
@@ -24,9 +23,22 @@ import { goRoom } from '../../utils/goRoom';
 import styles from './styles';
 import Options from './Options';
 
-class DirectoryView extends React.Component {
+interface IDirectoryViewProps {
-	static navigationOptions = ({ navigation, isMasterDetail }) => {
+	navigation: object;
-		const options = {
+	baseUrl: string;
+	isFederationEnabled: boolean;
+	user: {
+		id: string;
+		token: string;
+	};
+	theme: string;
+	directoryDefaultView: string;
+	isMasterDetail: boolean;
+}
+
+class DirectoryView extends React.Component<IDirectoryViewProps, any> {
+	static navigationOptions = ({ navigation, isMasterDetail }: any) => {
+		const options: any = {
 			title: I18n.t('Directory')
 		};
 		if (isMasterDetail) {
@@ -35,20 +47,7 @@ class DirectoryView extends React.Component {
 		return options;
 	};
 
-	static propTypes = {
+	constructor(props: IDirectoryViewProps) {
-		navigation: PropTypes.object,
-		baseUrl: PropTypes.string,
-		isFederationEnabled: PropTypes.bool,
-		user: PropTypes.shape({
-			id: PropTypes.string,
-			token: PropTypes.string
-		}),
-		theme: PropTypes.string,
-		directoryDefaultView: PropTypes.string,
-		isMasterDetail: PropTypes.bool
-	};
-
-	constructor(props) {
 		super(props);
 		this.state = {
 			data: [],
@@ -65,7 +64,7 @@ class DirectoryView extends React.Component {
 		this.load({});
 	}
 
-	onSearchChangeText = text => {
+	onSearchChangeText = (text: string) => {
 		this.setState({ text }, this.search);
 	};
 
@@ -115,7 +114,7 @@ class DirectoryView extends React.Component {
 		this.load({ newSearch: true });
 	};
 
-	changeType = type => {
+	changeType = (type: string) => {
 		this.setState({ type, data: [] }, () => this.search());
 
 		if (type === 'users') {
@@ -129,17 +128,17 @@ class DirectoryView extends React.Component {
 
 	toggleWorkspace = () => {
 		this.setState(
-			({ globalUsers }) => ({ globalUsers: !globalUsers, data: [] }),
+			({ globalUsers }: any) => ({ globalUsers: !globalUsers, data: [] }),
 			() => this.search()
 		);
 	};
 
 	toggleDropdown = () => {
-		this.setState(({ showOptionsDropdown }) => ({ showOptionsDropdown: !showOptionsDropdown }));
+		this.setState(({ showOptionsDropdown }: any) => ({ showOptionsDropdown: !showOptionsDropdown }));
 	};
 
-	goRoom = item => {
+	goRoom = (item: any) => {
-		const { navigation, isMasterDetail } = this.props;
+		const { navigation, isMasterDetail }: any = this.props;
 		if (isMasterDetail) {
 			navigation.navigate('DrawerNavigator');
 		} else {
@@ -148,7 +147,7 @@ class DirectoryView extends React.Component {
 		goRoom({ item, isMasterDetail });
 	};
 
-	onPressItem = async item => {
+	onPressItem = async (item: any) => {
 		const { type } = this.state;
 		if (type === 'users') {
 			const result = await RocketChat.createDirectMessage(item.username);
@@ -215,7 +214,7 @@ class DirectoryView extends React.Component {
 		);
 	};
 
-	renderItem = ({ item, index }) => {
+	renderItem = ({ item, index }: any) => {
 		const { data, type } = this.state;
 		const { baseUrl, user, theme } = this.props;
 
@@ -308,7 +307,7 @@ class DirectoryView extends React.Component {
 	};
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	baseUrl: state.server.server,
 	user: getUserSelector(state),
 	isFederationEnabled: state.settings.FEDERATION_Enabled,

app/views/DirectoryView/styles.ts

@@ -35,6 +35,7 @@ export default StyleSheet.create({
 		top: 0
 	},
 	backdrop: {
+		// @ts-ignore
 		...StyleSheet.absoluteFill
 	},
 	dropdownContainerHeader: {