From 5970d29ee74d38821344451c201a74a9aaa0b7f9 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Wed, 11 May 2022 13:33:27 -0300
Subject: [PATCH] Chore: Evaluate AdminPanelView - TypeScript (#4162)

---
 app/stacks/InsideStack.tsx             |  2 +-
 app/stacks/MasterDetailStack/index.tsx |  6 +--
 app/views/AdminPanelView/index.tsx     | 72 +++++++++++---------------
 3 files changed, 33 insertions(+), 47 deletions(-)

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 112ee4ae1..756fd5f2b 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -198,7 +198,7 @@ const AdminPanelStackNavigator = () => {
 	return (
 		<AdminPanelStack.Navigator
 			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
-			<AdminPanelStack.Screen name='AdminPanelView' component={AdminPanelView} options={AdminPanelView.navigationOptions} />
+			<AdminPanelStack.Screen name='AdminPanelView' component={AdminPanelView} />
 		</AdminPanelStack.Navigator>
 	);
 };
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 2fa7cd4ea..3b85d9e39 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -196,11 +196,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					options={props => ProfileView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
-				<ModalStack.Screen
-					name='AdminPanelView'
-					component={AdminPanelView}
-					options={props => AdminPanelView.navigationOptions!({ ...props, isMasterDetail: true })}
-				/>
+				<ModalStack.Screen name='AdminPanelView' component={AdminPanelView} />
 				<ModalStack.Screen name='NewMessageView' component={NewMessageView} options={NewMessageView.navigationOptions} />
 				<ModalStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
 				<ModalStack.Screen name='CreateChannelView' component={CreateChannelView} options={CreateChannelView.navigationOptions} />
diff --git a/app/views/AdminPanelView/index.tsx b/app/views/AdminPanelView/index.tsx
index 5a3dde90e..d51f019e4 100644
--- a/app/views/AdminPanelView/index.tsx
+++ b/app/views/AdminPanelView/index.tsx
@@ -1,55 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useNavigation } from '@react-navigation/native';
 import { WebView } from 'react-native-webview';
-import { connect } from 'react-redux';
-import { DrawerScreenProps } from '@react-navigation/drawer';
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { useSelector } from 'react-redux';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import * as HeaderButton from '../../containers/HeaderButton';
-import { withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { AdminPanelStackParamList } from '../../stacks/types';
+import { IApplicationState } from '../../definitions';
 
-interface IAdminPanelViewProps {
-	baseUrl: string;
-	token: string;
-}
+const AdminPanelView = () => {
+	const navigation = useNavigation<StackNavigationProp<AdminPanelStackParamList, 'AdminPanelView'>>();
+	const baseUrl = useSelector((state: IApplicationState) => state.server.server);
+	const token = useSelector((state: IApplicationState) => getUserSelector(state).token);
+	const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
 
-interface INavigationOptions {
-	navigation: DrawerScreenProps<AdminPanelStackParamList, 'AdminPanelView'>;
-	isMasterDetail: boolean;
-}
+	useEffect(() => {
+		navigation.setOptions({
+			headerLeft: isMasterDetail ? undefined : () => <HeaderButton.Drawer navigation={navigation} />,
+			title: I18n.t('Admin_Panel')
+		});
+	}, [isMasterDetail, navigation]);
 
-class AdminPanelView extends React.Component<IAdminPanelViewProps, any> {
-	static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions): StackNavigationOptions => ({
-		headerLeft: isMasterDetail ? undefined : () => <HeaderButton.Drawer navigation={navigation} />,
-		title: I18n.t('Admin_Panel')
-	});
-
-	render() {
-		const { baseUrl, token } = this.props;
-		if (!baseUrl) {
-			return null;
-		}
-		return (
-			<SafeAreaView>
-				<StatusBar />
-				<WebView
-					// https://github.com/react-native-community/react-native-webview/issues/1311
-					onMessage={() => {}}
-					source={{ uri: `${baseUrl}/admin/info?layout=embedded` }}
-					injectedJavaScript={`Meteor.loginWithToken('${token}', function() { })`}
-				/>
-			</SafeAreaView>
-		);
+	if (!baseUrl) {
+		return null;
 	}
-}
 
-const mapStateToProps = (state: any) => ({
-	baseUrl: state.server.server,
-	token: getUserSelector(state).token
-});
+	return (
+		<SafeAreaView>
+			<StatusBar />
+			<WebView
+				// https://github.com/react-native-community/react-native-webview/issues/1311
+				onMessage={() => {}}
+				source={{ uri: `${baseUrl}/admin/info?layout=embedded` }}
+				injectedJavaScript={`Meteor.loginWithToken('${token}', function() { })`}
+			/>
+		</SafeAreaView>
+	);
+};
 
-export default connect(mapStateToProps)(withTheme(AdminPanelView));
+export default AdminPanelView;