Chore: Hooks app/views/LanguageView

app/stacks/InsideStack.tsx

@@ -176,7 +176,7 @@ const SettingsStackNavigator = () => {
 				component={E2EEncryptionSecurityView}
 				options={E2EEncryptionSecurityView.navigationOptions}
 			/>
-			<SettingsStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
+			<SettingsStack.Screen name='LanguageView' component={LanguageView} />
 			<SettingsStack.Screen name='ThemeView' component={ThemeView} />
 			<SettingsStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
 			<SettingsStack.Screen

app/stacks/MasterDetailStack/index.tsx

@@ -175,7 +175,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					component={SettingsView}
 					options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
-				<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
+				<ModalStack.Screen name='LanguageView' component={LanguageView} />
 				<ModalStack.Screen name='ThemeView' component={ThemeView} />
 				<ModalStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
 				<ModalStack.Screen

app/views/LanguageView/LanguageItem.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import * as List from '../../containers/List';
+import { useTheme } from '../../theme';
+
+const LanguageItem = ({
+	item,
+	language,
+	submit
+}: {
+	item: { value: string; label: string };
+	language: string;
+	submit: (language: string) => Promise<void>;
+}) => {
+	const { colors } = useTheme();
+
+	const { value, label } = item;
+	const isSelected = language === value;
+
+	return (
+		<List.Item
+			title={label}
+			onPress={() => submit(value)}
+			testID={`language-view-${value}`}
+			right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			translateTitle={false}
+		/>
+	);
+};
+
+export default LanguageItem;

app/views/LanguageView/index.tsx

@@ -1,77 +1,50 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { FlatList } from 'react-native';
 import RNRestart from 'react-native-restart';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 
+import { useAppSelector } from '../../lib/hooks';
 import { appStart } from '../../actions/app';
 import { setUser } from '../../actions/login';
-import { themes } from '../../lib/constants';
 import * as List from '../../containers/List';
 import SafeAreaView from '../../containers/SafeAreaView';
 import StatusBar from '../../containers/StatusBar';
-import { IApplicationState, IBaseScreen, IUser, RootEnum } from '../../definitions';
+import { RootEnum } from '../../definitions';
 import I18n, { isRTL, LANGUAGES } from '../../i18n';
 import database from '../../lib/database';
 import { getUserSelector } from '../../selectors/login';
 import { SettingsStackParamList } from '../../stacks/types';
-import { withTheme } from '../../theme';
 import { showErrorAlert } from '../../lib/methods/helpers/info';
 import log, { events, logEvent } from '../../lib/methods/helpers/log';
 import { Services } from '../../lib/services';
+import LanguageItem from './LanguageItem';
 
-interface ILanguageViewProps extends IBaseScreen<SettingsStackParamList, 'LanguageView'> {
-	user: IUser;
-}
-
-interface ILanguageViewState {
-	language: string;
-}
-
-class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewState> {
-	static navigationOptions = () => ({
-		title: I18n.t('Change_Language')
-	});
-
-	constructor(props: ILanguageViewProps) {
-		super(props);
-		this.state = {
-			language: props.user ? (props.user.language as string) : 'en'
-		};
-	}
-
-	shouldComponentUpdate(nextProps: ILanguageViewProps, nextState: ILanguageViewState) {
-		const { language } = this.state;
-		const { user, theme } = this.props;
-		if (nextProps.theme !== theme) {
-			return true;
-		}
-		if (nextState.language !== language) {
-			return true;
-		}
-		if (nextProps.user.language !== user.language) {
-			return true;
-		}
-		return false;
-	}
+const LanguageView = () => {
+	const user = useAppSelector(state => getUserSelector(state));
+	const language = user.language || 'en';
 
-	formIsChanged = (language: string) => {
-		const { user } = this.props;
-		return user.language !== language;
-	};
+	const dispatch = useDispatch();
+	const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'LanguageView'>>();
+
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Change_Language')
+		});
+	}, [navigation]);
 
-	submit = async (language: string) => {
-		if (!this.formIsChanged(language)) {
+	const submit = async (language: string) => {
+		if (user.language === language) {
 			return;
 		}
 
-		const { dispatch, user } = this.props;
-
 		const shouldRestart = isRTL(language) || isRTL(user.language);
 
 		dispatch(appStart({ root: RootEnum.ROOT_LOADING, text: I18n.t('Change_language_loading') }));
 
 		// shows loading for at least 300ms
-		await Promise.all([this.changeLanguage(language), new Promise(resolve => setTimeout(resolve, 300))]);
+		await Promise.all([changeLanguage(language), new Promise(resolve => setTimeout(resolve, 300))]);
 
 		if (shouldRestart) {
 			await RNRestart.Restart();
@@ -80,9 +53,8 @@ class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewStat
 		}
 	};
 
-	changeLanguage = async (language: string) => {
+	const changeLanguage = async (language: string) => {
 		logEvent(events.LANG_SET_LANGUAGE);
-		const { user, dispatch } = this.props;
 
 		const params: { language?: string } = {};
 
@@ -114,47 +86,20 @@ class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewStat
 		}
 	};
 
-	renderIcon = () => {
-		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
-	};
-
-	renderItem = ({ item }: { item: { value: string; label: string } }) => {
-		const { value, label } = item;
-		const { language } = this.state;
-		const isSelected = language === value;
-
-		return (
-			<List.Item
-				title={label}
-				onPress={() => this.submit(value)}
-				testID={`language-view-${value}`}
-				right={() => (isSelected ? this.renderIcon() : null)}
-				translateTitle={false}
+	return (
+		<SafeAreaView testID='language-view'>
+			<StatusBar />
+			<FlatList
+				data={LANGUAGES}
+				keyExtractor={item => item.value}
+				ListHeaderComponent={List.Separator}
+				ListFooterComponent={List.Separator}
+				contentContainerStyle={List.styles.contentContainerStyleFlatList}
+				renderItem={({ item }) => <LanguageItem item={item} language={language} submit={submit} />}
+				ItemSeparatorComponent={List.Separator}
 			/>
-		);
-	};
+		</SafeAreaView>
+	);
+};
 
-	render() {
-		return (
-			<SafeAreaView testID='language-view'>
-				<StatusBar />
-				<FlatList
-					data={LANGUAGES}
-					keyExtractor={item => item.value}
-					ListHeaderComponent={List.Separator}
-					ListFooterComponent={List.Separator}
-					contentContainerStyle={List.styles.contentContainerStyleFlatList}
-					renderItem={this.renderItem}
-					ItemSeparatorComponent={List.Separator}
-				/>
-			</SafeAreaView>
-		);
-	}
-}
-
-const mapStateToProps = (state: IApplicationState) => ({
-	user: getUserSelector(state)
-});
-
-export default connect(mapStateToProps)(withTheme(LanguageView));
+export default LanguageView;