verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

* Chore: Hooks app/views/LanguageView

* minor tweak app selector
This commit is contained in:
Reinaldo Neto 2022-09-22 18:40:32 -03:00 committed by Diego Mello
parent ed66246d0a
commit 27af3bf5eb
4 changed files with 75 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/stacks/InsideStack.tsx
View File

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

2
app/stacks/MasterDetailStack/index.tsx
View File

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

31
app/views/LanguageView/LanguageItem.tsx Normal file
View File

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

136
app/views/LanguageView/index.tsx
View File

@ -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'> {
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<StackNavigationProp<SettingsStackParamList, 'LanguageView'>>();
class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewState> {
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<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 = () => {
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;