Chore: Migrate LanguageView to TypeScript

* chore: migrate the view LanguageView to ts

* chore: create the `ILanguageViewState` interface
This commit is contained in:
Alex Junior 2021-11-10 11:35:01 -03:00 committed by GitHub
parent 6746d674cc
commit f52a017ff3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 22 deletions

View File

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

View File

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