diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 9b11b1a47..68a3bebd4 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -172,7 +172,7 @@ const SettingsStackNavigator = () => {
component={E2EEncryptionSecurityView}
options={E2EEncryptionSecurityView.navigationOptions}
/>
-
+
{
component={SettingsView}
options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })}
/>
-
+
Promise;
+}) => {
+ const { colors } = useTheme();
+
+ const { value, label } = item;
+ const isSelected = language === value;
+
+ return (
+ submit(value)}
+ testID={`language-view-${value}`}
+ right={() => (isSelected ? : null)}
+ translateTitle={false}
+ />
+ );
+};
+
+export default LanguageItem;
diff --git a/app/views/LanguageView/index.tsx b/app/views/LanguageView/index.tsx
index 04e3263d0..26d1a0352 100644
--- a/app/views/LanguageView/index.tsx
+++ b/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 {
- user: IUser;
-}
+const LanguageView = () => {
+ const { languageDefault, id } = useAppSelector(state => ({
+ languageDefault: getUserSelector(state).language,
+ id: getUserSelector(state).id
+ }));
+ const language = languageDefault || 'en';
-interface ILanguageViewState {
- language: string;
-}
+ const dispatch = useDispatch();
+ const navigation = useNavigation>();
-class LanguageView extends React.Component {
- static navigationOptions = () => ({
- title: I18n.t('Change_Language')
- });
+ useLayoutEffect(() => {
+ navigation.setOptions({
+ title: I18n.t('Change_Language')
+ });
+ }, [navigation]);
- 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;
- }
-
- formIsChanged = (language: string) => {
- const { user } = this.props;
- return user.language !== language;
- };
-
- submit = async (language: string) => {
- if (!this.formIsChanged(language)) {
+ const submit = async (language: string) => {
+ if (languageDefault === language) {
return;
}
- const { dispatch, user } = this.props;
-
- const shouldRestart = isRTL(language) || isRTL(user.language);
+ const shouldRestart = isRTL(language) || isRTL(languageDefault);
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 {
+ 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 {
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 {
- const { theme } = this.props;
- return ;
- };
-
- renderItem = ({ item }: { item: { value: string; label: string } }) => {
- const { value, label } = item;
- const { language } = this.state;
- const isSelected = language === value;
-
- return (
- this.submit(value)}
- testID={`language-view-${value}`}
- right={() => (isSelected ? this.renderIcon() : null)}
- translateTitle={false}
+ return (
+
+
+ item.value}
+ ListHeaderComponent={List.Separator}
+ ListFooterComponent={List.Separator}
+ contentContainerStyle={List.styles.contentContainerStyleFlatList}
+ renderItem={({ item }) => }
+ ItemSeparatorComponent={List.Separator}
/>
- );
- };
+
+ );
+};
- render() {
- return (
-
-
- item.value}
- ListHeaderComponent={List.Separator}
- ListFooterComponent={List.Separator}
- contentContainerStyle={List.styles.contentContainerStyleFlatList}
- renderItem={this.renderItem}
- ItemSeparatorComponent={List.Separator}
- />
-
- );
- }
-}
-
-const mapStateToProps = (state: IApplicationState) => ({
- user: getUserSelector(state)
-});
-
-export default connect(mapStateToProps)(withTheme(LanguageView));
+export default LanguageView;