Chore: Evaluate AdminPanelView - TypeScript (#4162)

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>
 	);
 };

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} />

app/views/AdminPanelView/index.tsx

@@ -1,38 +1,34 @@
-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;
-}
-
-class AdminPanelView extends React.Component<IAdminPanelViewProps, any> {
-	static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions): StackNavigationOptions => ({
+	useEffect(() => {
+		navigation.setOptions({
 			headerLeft: isMasterDetail ? undefined : () => <HeaderButton.Drawer navigation={navigation} />,
 			title: I18n.t('Admin_Panel')
 		});
+	}, [isMasterDetail, navigation]);
 
-	render() {
-		const { baseUrl, token } = this.props;
 	if (!baseUrl) {
 		return null;
 	}
+
 	return (
 		<SafeAreaView>
 			<StatusBar />
@@ -44,12 +40,6 @@ class AdminPanelView extends React.Component<IAdminPanelViewProps, any> {
 			/>
 		</SafeAreaView>
 	);
-	}
-}
+};
 
-const mapStateToProps = (state: any) => ({
-	baseUrl: state.server.server,
-	token: getUserSelector(state).token
-});
-
-export default connect(mapStateToProps)(withTheme(AdminPanelView));
+export default AdminPanelView;