Chore: evaluate `LegalView` (#4097)

* chore: evaluate LegalView

* remove: `options` from `LegalView` on OutsideStack

* remove: `mapStateToProps` in favor of `useSelector`

app/stacks/OutsideStack.tsx

@@ -28,7 +28,7 @@ const _OutsideStack = () => {
 			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} options={ForgotPasswordView.navigationOptions} />
 			<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
 			<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
-			<Outside.Screen name='LegalView' component={LegalView} options={LegalView.navigationOptions} />
+			<Outside.Screen name='LegalView' component={LegalView} />
 		</Outside.Navigator>
 	);
 };

app/views/LegalView.tsx

@@ -1,33 +1,36 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
-import { StackNavigationOptions } from '@react-navigation/stack';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
 import openLink from '../utils/openLink';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
+import { OutsideParamList } from '../stacks/types';
+import { IBaseScreen, IApplicationState } from '../definitions';
 
-interface ILegalView {
+interface ILegalViewProps extends IBaseScreen<OutsideParamList, 'LegalView'> {
 	server: string;
-	theme: TSupportedThemes;
 }
 
-class LegalView extends React.Component<ILegalView, any> {
+const LegalView = ({ navigation }: ILegalViewProps): React.ReactElement => {
-	static navigationOptions = (): StackNavigationOptions => ({
+	const server = useSelector((state: IApplicationState) => state.server.server);
+	const { theme } = useTheme();
+
+	useEffect(() => {
+		navigation.setOptions({
 			title: I18n.t('Legal')
 		});
+	}, []);
 
-	onPressItem = ({ route }: { route: string }) => {
+	const onPressItem = ({ route }: { route: string }) => {
-		const { server, theme } = this.props;
 		if (!server) {
 			return;
 		}
 		openLink(`${server}/${route}`, theme);
 	};
 
-	render() {
 	return (
 		<SafeAreaView testID='legal-view'>
 			<StatusBar />
@@ -36,14 +39,14 @@ class LegalView extends React.Component<ILegalView, any> {
 					<List.Separator />
 					<List.Item
 						title='Terms_of_Service'
-							onPress={() => this.onPressItem({ route: 'terms-of-service' })}
+						onPress={() => onPressItem({ route: 'terms-of-service' })}
 						testID='legal-terms-button'
 						showActionIndicator
 					/>
 					<List.Separator />
 					<List.Item
 						title='Privacy_Policy'
-							onPress={() => this.onPressItem({ route: 'privacy-policy' })}
+						onPress={() => onPressItem({ route: 'privacy-policy' })}
 						testID='legal-privacy-button'
 						showActionIndicator
 					/>
@@ -52,11 +55,6 @@ class LegalView extends React.Component<ILegalView, any> {
 			</List.Container>
 		</SafeAreaView>
 	);
-	}
+};
-}
 
-const mapStateToProps = (state: any) => ({
+export default LegalView;
-	server: state.server.server
-});
-
-export default connect(mapStateToProps)(withTheme(LegalView));