Chore: TypeScript Migration - evaluate DirectoryItem (#4016)

* chore: evaluate DirectoryItem

* chore: move `DirectoryItem` to `containers`

* update: `themes` import

app/containers/DirectoryItem/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Text, View, ViewStyle } from 'react-native';
+
+import Touch from '../../utils/touch';
+import Avatar from '../Avatar';
+import RoomTypeIcon from '../RoomTypeIcon';
+import styles, { ROW_HEIGHT } from './styles';
+import { themes } from '../../lib/constants';
+import { useTheme } from '../../theme';
+
+export { ROW_HEIGHT };
+
+interface IDirectoryItemLabel {
+	text?: string;
+	theme: string;
+}
+
+interface IDirectoryItem {
+	title: string;
+	description: string;
+	avatar: string;
+	type: string;
+	onPress(): void;
+	testID: string;
+	style?: ViewStyle;
+	rightLabel?: string;
+	rid?: string;
+	teamMain?: boolean;
+}
+
+const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) => {
+	if (!text) {
+		return null;
+	}
+	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
+});
+
+const DirectoryItem = ({
+	title,
+	description,
+	avatar,
+	onPress,
+	testID,
+	style,
+	rightLabel,
+	type,
+	rid,
+	teamMain
+}: IDirectoryItem): React.ReactElement => {
+	const { theme } = useTheme();
+	return (
+		<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} />
+				<View style={styles.directoryItemTextContainer}>
+					<View style={styles.directoryItemTextTitle}>
+						<RoomTypeIcon type={type} teamMain={teamMain} theme={theme} />
+						<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>
+							{title}
+						</Text>
+					</View>
+					{description ? (
+						<Text style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+							{description}
+						</Text>
+					) : null}
+				</View>
+				<DirectoryItemLabel text={rightLabel} theme={theme} />
+			</View>
+		</Touch>
+	);
+};
+
+export default DirectoryItem;

app/presentation/DirectoryItem/index.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { Text, View, ViewStyle } from 'react-native';
-
-import Touch from '../../utils/touch';
-import Avatar from '../../containers/Avatar';
-import RoomTypeIcon from '../../containers/RoomTypeIcon';
-import styles, { ROW_HEIGHT } from './styles';
-import { themes } from '../../lib/constants';
-
-export { ROW_HEIGHT };
-
-interface IDirectoryItemLabel {
-	text?: string;
-	theme: string;
-}
-
-interface IDirectoryItem {
-	title: string;
-	description: string;
-	avatar: string;
-	type: string;
-	onPress(): void;
-	testID: string;
-	style?: ViewStyle;
-	rightLabel?: string;
-	rid?: string;
-	theme: string;
-	teamMain?: boolean;
-}
-
-const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) => {
-	if (!text) {
-		return null;
-	}
-	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
-});
-
-const DirectoryItem = ({
-	title,
-	description,
-	avatar,
-	onPress,
-	testID,
-	style,
-	rightLabel,
-	type,
-	rid,
-	theme,
-	teamMain
-}: 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} />
-			<View style={styles.directoryItemTextContainer}>
-				<View style={styles.directoryItemTextTitle}>
-					<RoomTypeIcon type={type} teamMain={teamMain} theme={theme} />
-					<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>
-						{title}
-					</Text>
-				</View>
-				{description ? (
-					<Text style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
-						{description}
-					</Text>
-				) : null}
-			</View>
-			<DirectoryItemLabel text={rightLabel} theme={theme} />
-		</View>
-	</Touch>
-);
-
-export default DirectoryItem;

app/views/DirectoryView/index.tsx

@@ -7,7 +7,7 @@ import { ChatsStackParamList } from '../../stacks/types';
 import * as List from '../../containers/List';
 import Touch from '../../utils/touch';
 import RocketChat from '../../lib/rocketchat';
-import DirectoryItem from '../../presentation/DirectoryItem';
+import DirectoryItem from '../../containers/DirectoryItem';
 import sharedStyles from '../Styles';
 import I18n from '../../i18n';
 import SearchBox from '../../containers/SearchBox';

app/views/ShareListView/index.tsx

@@ -11,7 +11,7 @@ import { Q } from '@nozbe/watermelondb';
 import database from '../../lib/database';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';
 import I18n from '../../i18n';
-import DirectoryItem, { ROW_HEIGHT } from '../../presentation/DirectoryItem';
+import DirectoryItem, { ROW_HEIGHT } from '../../containers/DirectoryItem';
 import ServerItem from '../../containers/ServerItem';
 import * as HeaderButton from '../../containers/HeaderButton';
 import ActivityIndicator from '../../containers/ActivityIndicator';
@@ -371,7 +371,6 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 
 	renderItem = ({ item }: { item: IChat }) => {
 		const { serverInfo } = this.state;
-		const { theme } = this.props;
 		let description;
 		switch (item.t) {
 			case 'c':
@@ -395,7 +394,6 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 				type={item.prid ? 'discussion' : item.t}
 				onPress={() => this.shareMessage(item)}
 				testID={`share-extension-item-${item.name}`}
-				theme={theme}
 			/>
 		);
 	};