Chore: evaluate ServerItem - TypeScript Migration (#4015)

* chore: evaluate ServerItem

* update: IServerInfo interface

* chore: move `ServerItem` to `containers` folder

* update: `ServerItem` import on Storybook

* update: `themes` import

app/containers/ServerItem/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+// @ts-ignore // TODO: Remove on react-native update
+import { Pressable, Text, View } from 'react-native';
+import FastImage from '@rocket.chat/react-native-fast-image';
+
+import { IServerInfo } from '../../definitions';
+import Check from '../Check';
+import styles, { ROW_HEIGHT } from './styles';
+import { themes } from '../../lib/constants';
+import { isIOS } from '../../utils/deviceInfo';
+import { useTheme } from '../../theme';
+
+export { ROW_HEIGHT };
+
+interface IServerItem {
+	item: IServerInfo;
+	onPress(): void;
+	onLongPress?(): void;
+	hasCheck?: boolean;
+}
+
+const defaultLogo = require('../../static/images/logo.png');
+
+const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServerItem) => {
+	const { theme } = useTheme();
+	return (
+		<Pressable
+			onPress={onPress}
+			onLongPress={() => onLongPress?.()}
+			testID={`rooms-list-header-server-${item.id}`}
+			android_ripple={{ color: themes[theme].bannerBackground }}
+			style={({ pressed }: { pressed: boolean }) => ({
+				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
+			})}>
+			<View style={styles.serverItemContainer}>
+				{item.iconURL ? (
+					<FastImage
+						source={{
+							uri: item.iconURL,
+							priority: FastImage.priority.high
+						}}
+						// @ts-ignore TODO: Remove when updating FastImage
+						defaultSource={defaultLogo}
+						style={styles.serverIcon}
+						onError={() => console.log('err_loading_server_icon')}
+					/>
+				) : (
+					<FastImage source={defaultLogo} style={styles.serverIcon} />
+				)}
+				<View style={styles.serverTextContainer}>
+					<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}>
+						{item.name || item.id}
+					</Text>
+					<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>
+						{item.id}
+					</Text>
+				</View>
+				{hasCheck ? <Check /> : null}
+			</View>
+		</Pressable>
+	);
+});
+
+export default ServerItem;

app/definitions/IServer.ts

@@ -19,4 +19,11 @@ export interface IServer {
 	E2E_Enable: boolean;
 }
 
+export interface IServerInfo {
+	id: string;
+	iconURL: string;
+	name: string;
+	useRealName?: boolean;
+}
+
 export type TServerModel = IServer & Model;

app/presentation/ServerItem/index.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import { Pressable, Text, View } from 'react-native';
-import FastImage from '@rocket.chat/react-native-fast-image';
-
-import Check from '../../containers/Check';
-import styles, { ROW_HEIGHT } from './styles';
-import { themes } from '../../lib/constants';
-import { isIOS } from '../../utils/deviceInfo';
-import { withTheme } from '../../theme';
-
-export { ROW_HEIGHT };
-
-interface IServerItem {
-	item: {
-		id: string;
-		iconURL: string;
-		name: string;
-	};
-	onPress(): void;
-	onLongPress?(): void;
-	hasCheck?: boolean;
-	theme?: string;
-}
-
-const defaultLogo = require('../../static/images/logo.png');
-
-const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }: IServerItem) => (
-	<Pressable
-		onPress={onPress}
-		onLongPress={() => onLongPress?.()}
-		testID={`rooms-list-header-server-${item.id}`}
-		android_ripple={{
-			color: themes[theme!].bannerBackground
-		}}
-		style={({ pressed }: any) => ({
-			backgroundColor: isIOS && pressed ? themes[theme!].bannerBackground : themes[theme!].backgroundColor
-		})}>
-		<View style={styles.serverItemContainer}>
-			{item.iconURL ? (
-				<FastImage
-					source={{
-						uri: item.iconURL,
-						priority: FastImage.priority.high
-					}}
-					// @ts-ignore
-					defaultSource={defaultLogo}
-					style={styles.serverIcon}
-					onError={() => console.log('err_loading_server_icon')}
-				/>
-			) : (
-				<FastImage source={defaultLogo} style={styles.serverIcon} />
-			)}
-			<View style={styles.serverTextContainer}>
-				<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme!].titleText }]}>
-					{item.name || item.id}
-				</Text>
-				<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme!].auxiliaryText }]}>
-					{item.id}
-				</Text>
-			</View>
-			{hasCheck ? <Check /> : null}
-		</View>
-	</Pressable>
-));
-
-export default withTheme(ServerItem);

app/views/RoomsListView/ServerDropdown.tsx

@@ -12,7 +12,7 @@ import { appStart } from '../../actions/app';
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
 import EventEmitter from '../../utils/events';
-import ServerItem from '../../presentation/ServerItem';
+import ServerItem from '../../containers/ServerItem';
 import database from '../../lib/database';
 import { themes } from '../../lib/constants';
 import { withTheme } from '../../theme';
@@ -180,7 +180,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 	};
 
 	renderServer = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => {
-		const { server, theme } = this.props;
+		const { server } = this.props;
 
 		return (
 			<ServerItem
@@ -188,7 +188,6 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 				onPress={() => this.select(item.id, item.version)}
 				onLongPress={() => item.id === server || this.remove(item.id)}
 				hasCheck={item.id === server}
-				theme={theme}
 			/>
 		);
 	};

app/views/SelectServerView.tsx

@@ -6,7 +6,7 @@ import { Q, Model } from '@nozbe/watermelondb';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
-import ServerItem, { ROW_HEIGHT } from '../presentation/ServerItem';
+import ServerItem, { ROW_HEIGHT } from '../containers/ServerItem';
 import { shareExtensionInit } from '../lib/services/shareExtension';
 import database from '../lib/database';
 import SafeAreaView from '../containers/SafeAreaView';

app/views/ShareListView/index.tsx

@@ -12,7 +12,7 @@ import database from '../../lib/database';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';
 import I18n from '../../i18n';
 import DirectoryItem, { ROW_HEIGHT } from '../../presentation/DirectoryItem';
-import ServerItem from '../../presentation/ServerItem';
+import ServerItem from '../../containers/ServerItem';
 import * as HeaderButton from '../../containers/HeaderButton';
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import * as List from '../../containers/List';
@@ -24,6 +24,7 @@ import RocketChat from '../../lib/rocketchat';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import styles from './styles';
 import ShareListHeader from './Header';
+import { IServerInfo } from '../../definitions';
 
 interface IDataFromShare {
 	value: string;
@@ -52,12 +53,6 @@ interface IChat {
 	description: string;
 }
 
-interface IServerInfo {
-	id: string;
-	iconURL: string;
-	name: string;
-	useRealName: boolean;
-}
 interface IState {
 	searching: boolean;
 	searchText: string;

storybook/stories/ServerItem.js

@@ -1,8 +1,7 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 
-import ServerItemComponent from '../../app/presentation/ServerItem';
+import ServerItemComponent from '../../app/containers/ServerItem';
 import { ThemeContext } from '../../app/theme';
 
 const stories = storiesOf('ServerItem', module);