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

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

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}

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;

app/views/ThemeView.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
-import { StackNavigationOptions } from '@react-navigation/stack';
 
+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 {
+type IThemeViewProps = IBaseScreen<SettingsStackParamList, 'ThemeView'>;
-	theme: TSupportedThemes;
-	themePreferences: IThemePreference;
-	setTheme(newTheme?: IThemePreference): void;
-}
 
-class ThemeView extends React.Component<IThemeViewProps> {
+const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
-	static navigationOptions = (): StackNavigationOptions => ({
+	const { theme, themePreferences, setTheme } = useTheme();
+
+	useLayoutEffect(() => {
+		navigation.setOptions({
 			title: I18n.t('Theme')
 		});
+	}, [navigation]);
 
-	isSelected = (item: ITheme) => {
+	const isSelected = (item: ITheme) => {
-		const { themePreferences } = this.props;
 		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 onClick = (item: ITheme) => {
-		const { themePreferences } = this.props;
+		const { darkLevel, currentTheme } = themePreferences as IThemePreference;
-		const { darkLevel, currentTheme } = themePreferences;
 		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 = (theme: Partial<IThemePreference>) => {
-		const { setTheme, themePreferences } = this.props;
+		const newTheme: IThemePreference = { ...(themePreferences as IThemePreference), ...theme };
-		const newTheme = { ...themePreferences, ...theme };
+		if (setTheme) {
 			setTheme(newTheme);
 			UserPreferences.setMap(THEME_PREFERENCES_KEY, newTheme);
+		}
 	};
 
-	renderIcon = () => {
+	const renderIcon = () => <List.Icon name='check' color={themes[theme].tintColor} />;
-		const { theme } = this.props;
-		return <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 }))}</>
+					<>{themeGroup.map(item => renderItem({ item }))}</>
 				</List.Section>
 				<List.Section title='Dark_level'>
 					<List.Separator />
-						<>{darkGroup.map(item => this.renderItem({ item }))}</>
+					<>{darkGroup.map(item => renderItem({ item }))}</>
 				</List.Section>
 			</List.Container>
 		</SafeAreaView>
 	);
-	}
+};
-}
 
-export default withTheme(ThemeView);
+export default ThemeView;