Chore: Hooks app/views/LanguageView (#4537)

* Chore: Hooks app/views/LanguageView

* minor tweak app selector

app/stacks/InsideStack.tsx

@@ -172,7 +172,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,53 @@
-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'> {
+const LanguageView = () => {
-	user: IUser;
+	const { languageDefault, id } = useAppSelector(state => ({
-}
+		languageDefault: getUserSelector(state).language,
+		id: getUserSelector(state).id
+	}));
+	const language = languageDefault || 'en';
 
-interface ILanguageViewState {
+	const dispatch = useDispatch();
-	language: string;
+	const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'LanguageView'>>();
-}
 
-class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewState> {
+	useLayoutEffect(() => {
-	static navigationOptions = () => ({
+		navigation.setOptions({
-		title: I18n.t('Change_Language')
+			title: I18n.t('Change_Language')
-	});
+		});
+	}, [navigation]);
 
-	constructor(props: ILanguageViewProps) {
+	const submit = async (language: string) => {
-		super(props);
+		if (languageDefault === language) {
-		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;
-	}
-
-	formIsChanged = (language: string) => {
-		const { user } = this.props;
-		return user.language !== language;
-	};
-
-	submit = async (language: string) => {
-		if (!this.formIsChanged(language)) {
 			return;
 		}
 
-		const { dispatch, user } = this.props;
+		const shouldRestart = isRTL(language) || isRTL(languageDefault);
-
-		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,14 +56,13 @@ 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 } = {};
 
 		// language
-		if (user.language !== language) {
+		if (languageDefault !== language) {
 			params.language = language;
 		}
 
@@ -99,7 +74,7 @@ class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewStat
 			const usersCollection = serversDB.get('users');
 			await serversDB.write(async () => {
 				try {
-					const userRecord = await usersCollection.find(user.id);
+					const userRecord = await usersCollection.find(id);
 					await userRecord.update(record => {
 						record.language = params.language;
 					});
@@ -114,47 +89,20 @@ class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewStat
 		}
 	};
 
-	renderIcon = () => {
+	return (
-		const { theme } = this.props;
+		<SafeAreaView testID='language-view'>
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
+			<StatusBar />
-	};
+			<FlatList
-
+				data={LANGUAGES}
-	renderItem = ({ item }: { item: { value: string; label: string } }) => {
+				keyExtractor={item => item.value}
-		const { value, label } = item;
+				ListHeaderComponent={List.Separator}
-		const { language } = this.state;
+				ListFooterComponent={List.Separator}
-		const isSelected = language === value;
+				contentContainerStyle={List.styles.contentContainerStyleFlatList}
-
+				renderItem={({ item }) => <LanguageItem item={item} language={language} submit={submit} />}
-		return (
+				ItemSeparatorComponent={List.Separator}
-			<List.Item
-				title={label}
-				onPress={() => this.submit(value)}
-				testID={`language-view-${value}`}
-				right={() => (isSelected ? this.renderIcon() : null)}
-				translateTitle={false}
 			/>
-		);
+		</SafeAreaView>
-	};
+	);
+};
 
-	render() {
+export default LanguageView;
-		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));