From 88b4a3f672bd69fd0be9099383e996a2327f1718 Mon Sep 17 00:00:00 2001
From: Gerzon Z <gerzonzcanario@gmail.com>
Date: Thu, 5 May 2022 11:24:36 -0400
Subject: [PATCH] Chore: evaluate `ThemeView` (#4086)

* chore: evaluate `ThemeView`

* update: `IThemeViewProps` to extend `IBaseScreen`

* update: `ThemeView` interface

* update: dependency array

* update: use `useLayoutEffect` instead
---
 app/stacks/InsideStack.tsx             |  2 +-
 app/stacks/MasterDetailStack/index.tsx |  2 +-
 app/theme.tsx                          |  2 +-
 app/views/ThemeView.tsx                | 95 ++++++++++++--------------
 4 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index aef07c76f..b9be48e52 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -175,7 +175,7 @@ const SettingsStackNavigator = () => {
 				options={E2EEncryptionSecurityView.navigationOptions}
 			/>
 			<SettingsStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
-			<SettingsStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} />
+			<SettingsStack.Screen name='ThemeView' component={ThemeView} />
 			<SettingsStack.Screen
 				name='DefaultBrowserView'
 				component={DefaultBrowserView}
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index caea79b2b..2fa7cd4ea 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -178,7 +178,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
-				<ModalStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} />
+				<ModalStack.Screen name='ThemeView' component={ThemeView} />
 				<ModalStack.Screen
 					name='DefaultBrowserView'
 					component={DefaultBrowserView}
diff --git a/app/theme.tsx b/app/theme.tsx
index 350402d98..b11488119 100644
--- a/app/theme.tsx
+++ b/app/theme.tsx
@@ -8,7 +8,7 @@ import { colors } from './lib/constants';
 export type TSupportedThemes = keyof typeof colors;
 export type TColors = typeof colors[TSupportedThemes];
 
-interface IThemeContextProps {
+export interface IThemeContextProps {
 	theme: TSupportedThemes;
 	themePreferences?: IThemePreference;
 	setTheme?: (newTheme?: {}) => void;
diff --git a/app/views/ThemeView.tsx b/app/views/ThemeView.tsx
index e5cc3e2c1..c59d54bf4 100644
--- a/app/views/ThemeView.tsx
+++ b/app/views/ThemeView.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { StackNavigationOptions } from '@react-navigation/stack';
+import React, { useLayoutEffect } from 'react';
 
+import { SettingsStackParamList } from '../stacks/types';
 import I18n from '../i18n';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
 import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
 import { supportSystemTheme } from '../utils/deviceInfo';
@@ -11,6 +11,7 @@ import UserPreferences from '../lib/methods/userPreferences';
 import { events, logEvent } from '../utils/log';
 import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme';
 import { THEME_PREFERENCES_KEY, themes } from '../lib/constants';
+import { IBaseScreen } from '../definitions';
 
 const THEME_GROUP = 'THEME_GROUP';
 const DARK_GROUP = 'DARK_GROUP';
@@ -57,21 +58,20 @@ interface ITheme {
 	group: string;
 }
 
-interface IThemeViewProps {
-	theme: TSupportedThemes;
-	themePreferences: IThemePreference;
-	setTheme(newTheme?: IThemePreference): void;
-}
+type IThemeViewProps = IBaseScreen<SettingsStackParamList, 'ThemeView'>;
 
-class ThemeView extends React.Component<IThemeViewProps> {
-	static navigationOptions = (): StackNavigationOptions => ({
-		title: I18n.t('Theme')
-	});
+const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
+	const { theme, themePreferences, setTheme } = useTheme();
 
-	isSelected = (item: ITheme) => {
-		const { themePreferences } = this.props;
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Theme')
+		});
+	}, [navigation]);
+
+	const isSelected = (item: ITheme) => {
 		const { group } = item;
-		const { darkLevel, currentTheme } = themePreferences;
+		const { darkLevel, currentTheme } = themePreferences as IThemePreference;
 		if (group === THEME_GROUP) {
 			return item.value === currentTheme;
 		}
@@ -80,9 +80,8 @@ class ThemeView extends React.Component<IThemeViewProps> {
 		}
 	};
 
-	onClick = (item: ITheme) => {
-		const { themePreferences } = this.props;
-		const { darkLevel, currentTheme } = themePreferences;
+	const onClick = (item: ITheme) => {
+		const { darkLevel, currentTheme } = themePreferences as IThemePreference;
 		const { value, group } = item;
 		let changes: Partial<IThemePreference> = {};
 		if (group === THEME_GROUP && currentTheme !== value) {
@@ -93,53 +92,49 @@ class ThemeView extends React.Component<IThemeViewProps> {
 			logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
 			changes = { darkLevel: value as TDarkLevel };
 		}
-		this.setTheme(changes);
+		_setTheme(changes);
 	};
 
-	setTheme = (theme: Partial<IThemePreference>) => {
-		const { setTheme, themePreferences } = this.props;
-		const newTheme = { ...themePreferences, ...theme };
-		setTheme(newTheme);
-		UserPreferences.setMap(THEME_PREFERENCES_KEY, newTheme);
+	const _setTheme = (theme: Partial<IThemePreference>) => {
+		const newTheme: IThemePreference = { ...(themePreferences as IThemePreference), ...theme };
+		if (setTheme) {
+			setTheme(newTheme);
+			UserPreferences.setMap(THEME_PREFERENCES_KEY, newTheme);
+		}
 	};
 
-	renderIcon = () => {
-		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
-	};
+	const renderIcon = () => <List.Icon name='check' color={themes[theme].tintColor} />;
 
-	renderItem = ({ item }: { item: ITheme }) => {
+	const renderItem = ({ item }: { item: ITheme }) => {
 		const { label, value } = item;
 		return (
 			<>
 				<List.Item
 					title={label}
-					onPress={() => this.onClick(item)}
+					onPress={() => onClick(item)}
 					testID={`theme-view-${value}`}
-					right={() => (this.isSelected(item) ? this.renderIcon() : null)}
+					right={() => (isSelected(item) ? renderIcon() : null)}
 				/>
 				<List.Separator />
 			</>
 		);
 	};
 
-	render() {
-		return (
-			<SafeAreaView testID='theme-view'>
-				<StatusBar />
-				<List.Container>
-					<List.Section title='Theme'>
-						<List.Separator />
-						<>{themeGroup.map(item => this.renderItem({ item }))}</>
-					</List.Section>
-					<List.Section title='Dark_level'>
-						<List.Separator />
-						<>{darkGroup.map(item => this.renderItem({ item }))}</>
-					</List.Section>
-				</List.Container>
-			</SafeAreaView>
-		);
-	}
-}
+	return (
+		<SafeAreaView testID='theme-view'>
+			<StatusBar />
+			<List.Container>
+				<List.Section title='Theme'>
+					<List.Separator />
+					<>{themeGroup.map(item => renderItem({ item }))}</>
+				</List.Section>
+				<List.Section title='Dark_level'>
+					<List.Separator />
+					<>{darkGroup.map(item => renderItem({ item }))}</>
+				</List.Section>
+			</List.Container>
+		</SafeAreaView>
+	);
+};
 
-export default withTheme(ThemeView);
+export default ThemeView;