From a1e672df0eb9e09e1dd953098a1c94699ea271c0 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Mon, 2 May 2022 09:12:41 -0300
Subject: [PATCH] Chore: Evaluate DisplayPrefsView - TypeScript (#4127)

* Chore: Evaluate DisplayPrefsView - TypeScript

* minor tweak
---
 app/views/DisplayPrefsView.tsx | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/app/views/DisplayPrefsView.tsx b/app/views/DisplayPrefsView.tsx
index 487eae6ed..61dd958f8 100644
--- a/app/views/DisplayPrefsView.tsx
+++ b/app/views/DisplayPrefsView.tsx
@@ -1,11 +1,12 @@
-import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useEffect } from 'react';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
 import { Switch } from 'react-native';
 import { RadioButton } from 'react-native-ui-lib';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { setPreference } from '../actions/sortPreferences';
-import { DisplayMode, SortBy, themes } from '../lib/constants';
+import { DisplayMode, SortBy } from '../lib/constants';
 import * as HeaderButton from '../containers/HeaderButton';
 import * as List from '../containers/List';
 import { ICON_SIZE } from '../containers/List/constants';
@@ -18,22 +19,17 @@ import { useTheme } from '../theme';
 import { events, logEvent } from '../utils/log';
 import { saveSortPreference } from '../lib/methods';
 
-interface IDisplayPrefsView {
-	navigation: StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>;
-	isMasterDetail: boolean;
-}
-
-const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
-	const { theme } = useTheme();
+const DisplayPrefsView = (): React.ReactElement => {
+	const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>>();
+	const { colors } = useTheme();
 
 	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(
 		(state: IApplicationState) => state.sortPreferences
 	);
-	const { isMasterDetail } = useSelector((state: any) => state.app);
+	const { isMasterDetail } = useSelector((state: IApplicationState) => state.app);
 	const dispatch = useDispatch();
 
 	useEffect(() => {
-		const { navigation } = props;
 		navigation.setOptions({
 			title: I18n.t('Display')
 		});
@@ -42,7 +38,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 				headerLeft: () => <HeaderButton.Drawer navigation={navigation} testID='display-view-drawer' />
 			});
 		}
-	}, []);
+	}, [isMasterDetail, navigation]);
 
 	const setSortPreference = (param: Partial<IPreferences>) => {
 		dispatch(setPreference(param));
@@ -90,7 +86,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 	};
 
 	const renderCheckBox = (value: boolean) => (
-		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} />
+		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.actionTintColor : null} />
 	);
 
 	const renderAvatarSwitch = (value: boolean) => (
@@ -98,11 +94,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 	);
 
 	const renderRadio = (value: boolean) => (
-		<RadioButton
-			selected={!!value}
-			color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
-			size={ICON_SIZE}
-		/>
+		<RadioButton selected={!!value} color={value ? colors.actionTintColor : colors.auxiliaryText} size={ICON_SIZE} />
 	);
 
 	return (
@@ -188,6 +180,4 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 	);
 };
 
-DisplayPrefsView.propTypes = {};
-
 export default DisplayPrefsView;