From 3ac10ee860ffb88f246306344ac395394171cc74 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Thu, 18 Aug 2022 19:09:25 -0300
Subject: [PATCH] Chore: Hooks app/views/SelectServerView (#4445)

* Chore: Hooks app/views/SelectServerView

* refactor row_height

* minor tweak
---
 app/share.tsx                  |   2 +-
 app/views/SelectServerView.tsx | 106 +++++++++++++++------------------
 2 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/app/share.tsx b/app/share.tsx
index d8c712143..eed5f55ca 100644
--- a/app/share.tsx
+++ b/app/share.tsx
@@ -68,7 +68,7 @@ const InsideStack = () => {
 		<Inside.Navigator screenOptions={screenOptions}>
 			<Inside.Screen name='ShareListView' component={ShareListView} />
 			<Inside.Screen name='ShareView' component={ShareView} />
-			<Inside.Screen name='SelectServerView' component={SelectServerView} options={SelectServerView.navigationOptions} />
+			<Inside.Screen name='SelectServerView' component={SelectServerView} />
 		</Inside.Navigator>
 	);
 };
diff --git a/app/views/SelectServerView.tsx b/app/views/SelectServerView.tsx
index de73b4bc4..ceddb088f 100644
--- a/app/views/SelectServerView.tsx
+++ b/app/views/SelectServerView.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { FlatList } from 'react-native';
-import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
-import { connect } from 'react-redux';
+import { StackNavigationProp } from '@react-navigation/stack';
 import { Q } from '@nozbe/watermelondb';
+import { useNavigation } from '@react-navigation/native';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
@@ -12,72 +12,60 @@ import database from '../lib/database';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
 import { ShareInsideStackParamList } from '../definitions/navigationTypes';
-import { IApplicationState, TServerModel } from '../definitions';
+import { TServerModel } from '../definitions';
+import { useAppSelector } from '../lib/hooks';
 
 const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = (item: TServerModel) => item.id;
 
-interface ISelectServerViewState {
-	servers: TServerModel[];
-}
+const SelectServerView = () => {
+	const [servers, setServers] = React.useState<TServerModel[]>([]);
 
-interface ISelectServerViewProps {
-	navigation: StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>;
-	server?: string;
-}
+	const server = useAppSelector(state => state.share.server.server);
+	const navigation = useNavigation<StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>>();
 
-class SelectServerView extends React.Component<ISelectServerViewProps, ISelectServerViewState> {
-	static navigationOptions = (): StackNavigationOptions => ({
-		title: I18n.t('Select_Server')
-	});
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Select_Server')
+		});
+	}, [navigation]);
 
-	state = { servers: [] };
-
-	async componentDidMount() {
-		const serversDB = database.servers;
-		const serversCollection = serversDB.get('servers');
-		const servers = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch();
-		this.setState({ servers });
-	}
-
-	select = async (server: string) => {
-		const { server: currentServer, navigation } = this.props;
+	useEffect(() => {
+		const init = async () => {
+			const serversDB = database.servers;
+			const serversCollection = serversDB.get('servers');
+			const serversResult = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch();
+			setServers(serversResult);
+		};
+		init();
+	}, []);
 
+	const select = async (serverSelected: string) => {
 		navigation.navigate('ShareListView');
-		if (currentServer !== server) {
-			await shareExtensionInit(server);
+		if (serverSelected !== server) {
+			await shareExtensionInit(serverSelected);
 		}
 	};
 
-	renderItem = ({ item }: { item: TServerModel }) => {
-		const { server } = this.props;
-		return <ServerItem onPress={() => this.select(item.id)} item={item} hasCheck={item.id === server} />;
-	};
+	return (
+		<SafeAreaView>
+			<StatusBar />
+			<FlatList
+				data={servers}
+				renderItem={({ item }: { item: TServerModel }) => (
+					<ServerItem onPress={() => select(item.id)} item={item} hasCheck={item.id === server} />
+				)}
+				keyExtractor={keyExtractor}
+				getItemLayout={getItemLayout} // Refactor row_height
+				ItemSeparatorComponent={List.Separator}
+				contentContainerStyle={List.styles.contentContainerStyleFlatList}
+				ListHeaderComponent={List.Separator}
+				ListFooterComponent={List.Separator}
+				removeClippedSubviews
+				keyboardShouldPersistTaps='always'
+			/>
+		</SafeAreaView>
+	);
+};
 
-	render() {
-		const { servers } = this.state;
-		return (
-			<SafeAreaView>
-				<StatusBar />
-				<FlatList
-					data={servers}
-					keyExtractor={keyExtractor}
-					renderItem={this.renderItem}
-					getItemLayout={getItemLayout} // Refactor row_height
-					contentContainerStyle={List.styles.contentContainerStyleFlatList}
-					ItemSeparatorComponent={List.Separator}
-					ListHeaderComponent={List.Separator}
-					ListFooterComponent={List.Separator}
-					removeClippedSubviews
-					keyboardShouldPersistTaps='always'
-				/>
-			</SafeAreaView>
-		);
-	}
-}
-
-const mapStateToProps = ({ share }: IApplicationState) => ({
-	server: share.server.server
-});
-
-export default connect(mapStateToProps)(SelectServerView);
+export default SelectServerView;