Chore: Improve code and migrate some props to hooks on ThemeView (#4414)

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>

app/views/ThemeView.tsx

@@ -1,17 +1,16 @@
 import React, { useLayoutEffect } from 'react';
+import { useNavigation } from '@react-navigation/native';
 
-import { SettingsStackParamList } from '../stacks/types';
-import I18n from '../i18n';
-import { useTheme } from '../theme';
-import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
-import { supportSystemTheme } from '../lib/methods/helpers';
 import SafeAreaView from '../containers/SafeAreaView';
-import UserPreferences from '../lib/methods/userPreferences';
+import StatusBar from '../containers/StatusBar';
+import { IThemePreference, TDarkLevel, TThemeMode } from '../definitions/ITheme';
+import I18n from '../i18n';
+import { THEME_PREFERENCES_KEY } from '../lib/constants';
+import { supportSystemTheme } from '../lib/methods/helpers';
 import { events, logEvent } from '../lib/methods/helpers/log';
-import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme';
+import UserPreferences from '../lib/methods/userPreferences';
-import { THEME_PREFERENCES_KEY, themes } from '../lib/constants';
+import { useTheme } from '../theme';
-import { IBaseScreen } from '../definitions';
 
 const THEME_GROUP = 'THEME_GROUP';
 const DARK_GROUP = 'DARK_GROUP';
@@ -58,16 +57,40 @@ interface ITheme {
 	group: string;
 }
 
-type IThemeViewProps = IBaseScreen<SettingsStackParamList, 'ThemeView'>;
+const Item = ({
+	onPress,
+	label,
+	value,
+	isSelected
+}: {
+	onPress: () => void;
+	label: string;
+	value: string;
+	isSelected: boolean;
+}) => {
+	const { colors } = useTheme();
+	return (
+		<>
+			<List.Item
+				title={label}
+				onPress={onPress}
+				testID={`theme-view-${value}`}
+				right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			/>
+			<List.Separator />
+		</>
+	);
+};
 
-const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
+const ThemeView = (): React.ReactElement => {
-	const { theme, themePreferences, setTheme } = useTheme();
+	const { themePreferences, setTheme } = useTheme();
+	const { setOptions } = useNavigation();
 
 	useLayoutEffect(() => {
-		navigation.setOptions({
+		setOptions({
 			title: I18n.t('Theme')
 		});
-	}, [navigation]);
+	}, []);
 
 	const isSelected = (item: ITheme) => {
 		const { group } = item;
@@ -92,10 +115,10 @@ const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
 			logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
 			changes = { darkLevel: value as TDarkLevel };
 		}
-		_setTheme(changes);
+		handleTheme(changes);
 	};
 
-	const _setTheme = (theme: Partial<IThemePreference>) => {
+	const handleTheme = (theme: Partial<IThemePreference>) => {
 		const newTheme: IThemePreference = { ...(themePreferences as IThemePreference), ...theme };
 		if (setTheme) {
 			setTheme(newTheme);
@@ -103,34 +126,37 @@ const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
 		}
 	};
 
-	const renderIcon = () => <List.Icon name='check' color={themes[theme].tintColor} />;
-
-	const renderItem = ({ item }: { item: ITheme }) => {
-		const { label, value } = item;
-		return (
-			<>
-				<List.Item
-					title={label}
-					onPress={() => onClick(item)}
-					testID={`theme-view-${value}`}
-					right={() => (isSelected(item) ? renderIcon() : null)}
-				/>
-				<List.Separator />
-			</>
-		);
-	};
-
 	return (
 		<SafeAreaView testID='theme-view'>
 			<StatusBar />
 			<List.Container>
 				<List.Section title='Theme'>
 					<List.Separator />
-					<>{themeGroup.map(item => renderItem({ item }))}</>
+					<>
+						{themeGroup.map(theme => (
+							<Item
+								onPress={() => onClick(theme)}
+								label={theme.label}
+								value={theme.value}
+								isSelected={!!isSelected(theme)}
+								key={theme.label}
+							/>
+						))}
+					</>
 				</List.Section>
 				<List.Section title='Dark_level'>
 					<List.Separator />
-					<>{darkGroup.map(item => renderItem({ item }))}</>
+					<>
+						{darkGroup.map(theme => (
+							<Item
+								onPress={() => onClick(theme)}
+								label={theme.label}
+								value={theme.value}
+								isSelected={!!isSelected(theme)}
+								key={theme.label}
+							/>
+						))}
+					</>
 				</List.Section>
 			</List.Container>
 		</SafeAreaView>