Chore: Migrate LanguageView to TypeScript
* chore: migrate the view LanguageView to ts * chore: create the `ILanguageViewState` interface
This commit is contained in:
parent
6746d674cc
commit
f52a017ff3
|
@ -9,3 +9,4 @@ declare module '@rocket.chat/ui-kit';
|
||||||
declare module '@rocket.chat/sdk';
|
declare module '@rocket.chat/sdk';
|
||||||
declare module 'react-native-config-reader';
|
declare module 'react-native-config-reader';
|
||||||
declare module 'react-native-keycommands';
|
declare module 'react-native-keycommands';
|
||||||
|
declare module 'react-native-restart';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { FlatList } from 'react-native';
|
import { FlatList } from 'react-native';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import RNRestart from 'react-native-restart';
|
import RNRestart from 'react-native-restart';
|
||||||
|
import { Dispatch } from 'redux';
|
||||||
|
|
||||||
import RocketChat from '../../lib/rocketchat';
|
import RocketChat from '../../lib/rocketchat';
|
||||||
import I18n, { LANGUAGES, isRTL } from '../../i18n';
|
import I18n, { LANGUAGES, isRTL } from '../../i18n';
|
||||||
|
@ -18,26 +18,33 @@ import { getUserSelector } from '../../selectors/login';
|
||||||
import database from '../../lib/database';
|
import database from '../../lib/database';
|
||||||
import SafeAreaView from '../../containers/SafeAreaView';
|
import SafeAreaView from '../../containers/SafeAreaView';
|
||||||
|
|
||||||
class LanguageView extends React.Component {
|
interface ILanguageViewProps {
|
||||||
|
user: {
|
||||||
|
id: string;
|
||||||
|
language: string;
|
||||||
|
};
|
||||||
|
setUser(user: object): void;
|
||||||
|
appStart(params: any): void;
|
||||||
|
theme: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ILanguageViewState {
|
||||||
|
language: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewState> {
|
||||||
static navigationOptions = () => ({
|
static navigationOptions = () => ({
|
||||||
title: I18n.t('Change_Language')
|
title: I18n.t('Change_Language')
|
||||||
});
|
});
|
||||||
|
|
||||||
static propTypes = {
|
constructor(props: ILanguageViewProps) {
|
||||||
user: PropTypes.object,
|
|
||||||
setUser: PropTypes.func,
|
|
||||||
appStart: PropTypes.func,
|
|
||||||
theme: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
language: props.user ? props.user.language : 'en'
|
language: props.user ? props.user.language : 'en'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps, nextState) {
|
shouldComponentUpdate(nextProps: ILanguageViewProps, nextState: ILanguageViewState) {
|
||||||
const { language } = this.state;
|
const { language } = this.state;
|
||||||
const { user, theme } = this.props;
|
const { user, theme } = this.props;
|
||||||
if (nextProps.theme !== theme) {
|
if (nextProps.theme !== theme) {
|
||||||
|
@ -52,12 +59,12 @@ class LanguageView extends React.Component {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
formIsChanged = language => {
|
formIsChanged = (language: string) => {
|
||||||
const { user } = this.props;
|
const { user } = this.props;
|
||||||
return user.language !== language;
|
return user.language !== language;
|
||||||
};
|
};
|
||||||
|
|
||||||
submit = async language => {
|
submit = async (language: string) => {
|
||||||
if (!this.formIsChanged(language)) {
|
if (!this.formIsChanged(language)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -78,11 +85,11 @@ class LanguageView extends React.Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
changeLanguage = async language => {
|
changeLanguage = async (language: string) => {
|
||||||
logEvent(events.LANG_SET_LANGUAGE);
|
logEvent(events.LANG_SET_LANGUAGE);
|
||||||
const { user, setUser } = this.props;
|
const { user, setUser } = this.props;
|
||||||
|
|
||||||
const params = {};
|
const params: { language?: string } = {};
|
||||||
|
|
||||||
// language
|
// language
|
||||||
if (user.language !== language) {
|
if (user.language !== language) {
|
||||||
|
@ -95,10 +102,10 @@ class LanguageView extends React.Component {
|
||||||
|
|
||||||
const serversDB = database.servers;
|
const serversDB = database.servers;
|
||||||
const usersCollection = serversDB.get('users');
|
const usersCollection = serversDB.get('users');
|
||||||
await serversDB.action(async () => {
|
await serversDB.write(async () => {
|
||||||
try {
|
try {
|
||||||
const userRecord = await usersCollection.find(user.id);
|
const userRecord = await usersCollection.find(user.id);
|
||||||
await userRecord.update(record => {
|
await userRecord.update((record: any) => {
|
||||||
record.language = params.language;
|
record.language = params.language;
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
@ -117,7 +124,7 @@ class LanguageView extends React.Component {
|
||||||
return <List.Icon name='check' color={themes[theme].tintColor} />;
|
return <List.Icon name='check' color={themes[theme].tintColor} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
renderItem = ({ item }) => {
|
renderItem = ({ item }: { item: { value: string; label: string } }) => {
|
||||||
const { value, label } = item;
|
const { value, label } = item;
|
||||||
const { language } = this.state;
|
const { language } = this.state;
|
||||||
const isSelected = language === value;
|
const isSelected = language === value;
|
||||||
|
@ -151,13 +158,13 @@ class LanguageView extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = (state: any) => ({
|
||||||
user: getUserSelector(state)
|
user: getUserSelector(state)
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
setUser: params => dispatch(setUserAction(params)),
|
setUser: (params: any) => dispatch(setUserAction(params)),
|
||||||
appStart: params => dispatch(appStartAction(params))
|
appStart: (params: any) => dispatch(appStartAction(params))
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LanguageView));
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LanguageView));
|
Loading…
Reference in New Issue