[CHORE] Refactor ServerItem (#2778)

* Updated ServerDropdown and ServerItem

* Added ServerItem stories

* Update ServerDropdown.js

* Updated ServerItem stories

* Updated ServerItem stories and ServerItem component

* Updated SelectServerView, ServerItem and ServerItem stories

* Updated ServerItem stories

* Updated ServerItem stories

* Update tests

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

app/presentation/ServerItem/index.js

@@ -1,23 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import FastImage from '@rocket.chat/react-native-fast-image';
 
-import Touch from '../../utils/touch';
 import Check from '../../containers/Check';
 import styles, { ROW_HEIGHT } from './styles';
 import { themes } from '../../constants/colors';
+import { isIOS } from '../../utils/deviceInfo';
+import { withTheme } from '../../theme';
 
 export { ROW_HEIGHT };
 
+const defaultLogo = require('../../static/images/logo.png');
+
 const ServerItem = React.memo(({
-	server, item, onPress, hasCheck, theme
+	item, onPress, onLongPress, hasCheck, theme
 }) => (
-	<Touch
+	<Pressable
 		onPress={onPress}
-		style={[styles.serverItem, { backgroundColor: themes[theme].backgroundColor }]}
+		onLongPress={() => onLongPress?.()}
 		testID={`rooms-list-header-server-${ item.id }`}
-		theme={theme}
+		android_ripple={{
+			color: themes[theme].bannerBackground
+		}}
+		style={({ pressed }) => ({
+			backgroundColor: isIOS && pressed
+				? themes[theme].bannerBackground
+				: themes[theme].backgroundColor
+		})}
 	>
 		<View style={styles.serverItemContainer}>
 			{item.iconURL
@@ -27,33 +37,33 @@ const ServerItem = React.memo(({
 							uri: item.iconURL,
 							priority: FastImage.priority.high
 						}}
-						defaultSource={require('../../static/images/logo.png')}
+						defaultSource={defaultLogo}
 						style={styles.serverIcon}
 						onError={() => console.log('err_loading_server_icon')}
 					/>
 				)
 				: (
 					<FastImage
-						source={require('../../static/images/logo.png')}
+						source={defaultLogo}
 						style={styles.serverIcon}
 					/>
 				)
 			}
 			<View style={styles.serverTextContainer}>
-				<Text style={[styles.serverName, { color: themes[theme].titleText }]}>{item.name || item.id}</Text>
+				<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}>{item.name || item.id}</Text>
-				<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{item.id}</Text>
+				<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{item.id}</Text>
 			</View>
-			{item.id === server && hasCheck ? <Check theme={theme} /> : null}
+			{hasCheck ? <Check theme={theme} /> : null}
 		</View>
-	</Touch>
+	</Pressable>
 ));
 
 ServerItem.propTypes = {
-	onPress: PropTypes.func.isRequired,
 	item: PropTypes.object.isRequired,
+	onPress: PropTypes.func.isRequired,
+	onLongPress: PropTypes.func,
 	hasCheck: PropTypes.bool,
-	server: PropTypes.string,
 	theme: PropTypes.string
 };
 
-export default ServerItem;
+export default withTheme(ServerItem);

app/presentation/ServerItem/styles.js

@@ -5,10 +5,6 @@ import sharedStyles from '../../views/Styles';
 export const ROW_HEIGHT = 56;
 
 export default StyleSheet.create({
-	serverItem: {
-		height: ROW_HEIGHT,
-		justifyContent: 'center'
-	},
 	serverItemContainer: {
 		flexDirection: 'row',
 		alignItems: 'center'
@@ -16,20 +12,22 @@ export default StyleSheet.create({
 	serverIcon: {
 		width: 44,
 		height: 44,
-		marginHorizontal: 15,
+		margin: 12,
-		borderRadius: 4
+		borderRadius: 4,
+		resizeMode: 'contain'
 	},
 	serverTextContainer: {
 		flex: 1,
 		flexDirection: 'column',
-		justifyContent: 'center'
+		justifyContent: 'center',
+		paddingRight: 18
 	},
 	serverName: {
 		fontSize: 18,
 		...sharedStyles.textSemibold
 	},
 	serverUrl: {
-		fontSize: 15,
+		fontSize: 16,
 		...sharedStyles.textRegular
 	}
 });

app/views/RoomsListView/ServerDropdown.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-	View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Image, Pressable
+	View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect, batch } from 'react-redux';
@@ -14,12 +14,12 @@ import styles from './styles';
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
 import EventEmitter from '../../utils/events';
-import Check from '../../containers/Check';
+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 { isTablet, isIOS } from '../../utils/deviceInfo';
+import { isTablet } from '../../utils/deviceInfo';
 import { localAuthenticate } from '../../utils/localAuthentication';
 import { showConfirmationAlert } from '../../utils/info';
 import { logEvent, events } from '../../utils/log';
@@ -202,43 +202,13 @@ class ServerDropdown extends Component {
 		const { server, theme } = this.props;
 
 		return (
-			<Pressable
+			<ServerItem
+				item={item}
 				onPress={() => this.select(item.id)}
 				onLongPress={() => (item.id === server || this.remove(item.id))}
-				testID={`rooms-list-header-server-${ item.id }`}
+				hasCheck={item.id === server}
-				android_ripple={{
+				theme={theme}
-					color: themes[theme].bannerBackground
+			/>
-				}}
-				style={({ pressed }) => ({
-					backgroundColor: isIOS && pressed
-						? themes[theme].bannerBackground
-						: 'transparent'
-				})}
-			>
-				<View style={styles.serverItemContainer}>
-					{item.iconURL
-						? (
-							<Image
-								source={{ uri: item.iconURL }}
-								defaultSource={require('../../static/images/logo.png')}
-								style={styles.serverIcon}
-								onError={() => console.warn('error loading serverIcon')}
-							/>
-						)
-						: (
-							<Image
-								source={require('../../static/images/logo.png')}
-								style={styles.serverIcon}
-							/>
-						)
-					}
-					<View style={styles.serverTextContainer}>
-						<Text style={[styles.serverName, { color: themes[theme].titleText }]} numberOfLines={1}>{item.name || item.id}</Text>
-						<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{item.id}</Text>
-					</View>
-					{item.id === server ? <Check theme={theme} /> : null}
-				</View>
-			</Pressable>
 		);
 	}
 

app/views/SelectServerView.js

@@ -65,10 +65,9 @@ class SelectServerView extends React.Component {
 		const { server, theme } = this.props;
 		return (
 			<ServerItem
-				server={server}
 				onPress={() => this.select(item.id)}
 				item={item}
-				hasCheck
+				hasCheck={item.id === server}
 				theme={theme}
 			/>
 		);

storybook/stories/ServerItem.js

@@ -0,0 +1,73 @@
+/* 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 { ThemeContext } from '../../app/theme';
+
+const stories = storiesOf('ServerItem', module);
+
+const themes = {
+	light: 'light',
+	dark: 'dark',
+	black: 'black'
+};
+
+const item = {
+	name: 'Rocket.Chat',
+	id: 'https://open.rocket.chat/',
+	iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
+};
+
+const ServerItem = props => (
+	<ServerItemComponent
+		item={item}
+		hasCheck={false}
+		{...props}
+	/>
+);
+
+stories.add('content', () => (
+	<>
+		<ServerItem
+			hasCheck
+		/>
+		<ServerItem
+			item={{
+				...item,
+				name: 'Super Long Server Name in Rocket.Chat',
+				id: 'https://superlongservername.tologintoasuperlongservername/'
+			}}
+		/>
+		<ServerItem
+			item={{
+				id: 'https://stable.rocket.chat/'
+			}}
+		/>
+	</>
+));
+
+stories.add('touchable', () => (
+	<>
+		<ServerItem onLongPress={() => alert('Long Press')} onPress={() => alert('Press')} />
+		<ServerItem onPress={() => alert('Press')} />
+		<ServerItem onLongPress={() => alert('Long Press')} />
+	</>
+));
+
+const ThemeStory = ({ theme }) => (
+	<ThemeContext.Provider value={theme}>
+		<ServerItem
+			theme={theme}
+			hasCheck
+		/>
+	</ThemeContext.Provider>
+);
+
+stories.add('themes', () => (
+	<>
+		<ThemeStory theme={themes.light} />
+		<ThemeStory theme={themes.dark} />
+		<ThemeStory theme={themes.black} />
+	</>
+));

storybook/stories/index.js

@@ -6,6 +6,7 @@ import { storiesOf } from '@storybook/react-native';
 
 import RoomItem from './RoomItem';
 import './List';
+import './ServerItem';
 import Message from './Message';
 import UiKitMessage from './UiKitMessage';
 import UiKitModal from './UiKitModal';