[FIX] i18n being called outside render (#2334)

* Fix I18n usage in ThemeView

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* Fix I18n usage in NotificationPreferencesView

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* Fix some I18n wrong uses

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Ezequiel de Oliveira 2020-07-24 16:23:34 -03:00 committed by GitHub
parent b4e353c3d3
commit 5532d0f368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 50 additions and 53 deletions

View File

@ -19,11 +19,11 @@ import SafeAreaView from '../containers/SafeAreaView';
const DEFAULT_BROWSERS = [ const DEFAULT_BROWSERS = [
{ {
title: I18n.t('In_app'), title: 'In_app',
value: 'inApp' value: 'inApp'
}, },
{ {
title: isIOS ? 'Safari' : I18n.t('Browser'), title: isIOS ? 'Safari' : 'Browser',
value: 'systemDefault:' value: 'systemDefault:'
} }
]; ];
@ -137,7 +137,7 @@ class DefaultBrowserView extends React.Component {
const { title, value } = item; const { title, value } = item;
return ( return (
<ListItem <ListItem
title={title} title={I18n.t(title, { defaultValue: title })}
onPress={() => this.changeDefaultBrowser(value)} onPress={() => this.changeDefaultBrowser(value)}
testID={`default-browser-view-${ title }`} testID={`default-browser-view-${ title }`}
right={this.isSelected(value) ? this.renderIcon : null} right={this.isSelected(value) ? this.renderIcon : null}

View File

@ -21,9 +21,6 @@ import SafeAreaView from '../../containers/SafeAreaView';
const OPTIONS = { const OPTIONS = {
days: [{ days: [{
label: I18n.t('Never'), value: 0
},
{
label: '1', value: 1 label: '1', value: 1
}, },
{ {
@ -36,9 +33,6 @@ const OPTIONS = {
label: '30', value: 30 label: '30', value: 30
}], }],
maxUses: [{ maxUses: [{
label: I18n.t('No_limit'), value: 0
},
{
label: '1', value: 1 label: '1', value: 1
}, },
{ {
@ -91,9 +85,12 @@ class InviteUsersView extends React.Component {
navigation.pop(); navigation.pop();
} }
renderPicker = (key) => { renderPicker = (key, first) => {
const { props } = this; const { props } = this;
const { theme } = props; const { theme } = props;
const firstEl = [{
label: I18n.t(first), value: 0
}];
return ( return (
<RNPickerSelect <RNPickerSelect
style={{ viewContainer: styles.viewContainer }} style={{ viewContainer: styles.viewContainer }}
@ -102,7 +99,7 @@ class InviteUsersView extends React.Component {
useNativeAndroidPickerStyle={false} useNativeAndroidPickerStyle={false}
placeholder={{}} placeholder={{}}
onValueChange={value => this.onValueChangePicker(key, value)} onValueChange={value => this.onValueChangePicker(key, value)}
items={OPTIONS[key]} items={firstEl.concat(OPTIONS[key])}
/> />
); );
} }
@ -121,13 +118,13 @@ class InviteUsersView extends React.Component {
<Separator theme={theme} /> <Separator theme={theme} />
<ListItem <ListItem
title={I18n.t('Expiration_Days')} title={I18n.t('Expiration_Days')}
right={() => this.renderPicker('days')} right={() => this.renderPicker('days', 'Never')}
theme={theme} theme={theme}
/> />
<Separator theme={theme} /> <Separator theme={theme} />
<ListItem <ListItem
title={I18n.t('Max_number_of_uses')} title={I18n.t('Max_number_of_uses')}
right={() => this.renderPicker('maxUses')} right={() => this.renderPicker('maxUses', 'No_limit')}
theme={theme} theme={theme}
/> />
<Separator theme={theme} /> <Separator theme={theme} />

View File

@ -71,58 +71,58 @@ Info.propTypes = {
const OPTIONS = { const OPTIONS = {
desktopNotifications: [{ desktopNotifications: [{
label: I18n.t('Default'), value: 'default' label: 'Default', value: 'default'
}, { }, {
label: I18n.t('All_Messages'), value: 'all' label: 'All_Messages', value: 'all'
}, { }, {
label: I18n.t('Mentions'), value: 'mentions' label: 'Mentions', value: 'mentions'
}, { }, {
label: I18n.t('Nothing'), value: 'nothing' label: 'Nothing', value: 'nothing'
}], }],
audioNotifications: [{ audioNotifications: [{
label: I18n.t('Default'), value: 'default' label: 'Default', value: 'default'
}, { }, {
label: I18n.t('All_Messages'), value: 'all' label: 'All_Messages', value: 'all'
}, { }, {
label: I18n.t('Mentions'), value: 'mentions' label: 'Mentions', value: 'mentions'
}, { }, {
label: I18n.t('Nothing'), value: 'nothing' label: 'Nothing', value: 'nothing'
}], }],
mobilePushNotifications: [{ mobilePushNotifications: [{
label: I18n.t('Default'), value: 'default' label: 'Default', value: 'default'
}, { }, {
label: I18n.t('All_Messages'), value: 'all' label: 'All_Messages', value: 'all'
}, { }, {
label: I18n.t('Mentions'), value: 'mentions' label: 'Mentions', value: 'mentions'
}, { }, {
label: I18n.t('Nothing'), value: 'nothing' label: 'Nothing', value: 'nothing'
}], }],
emailNotifications: [{ emailNotifications: [{
label: I18n.t('Default'), value: 'default' label: 'Default', value: 'default'
}, { }, {
label: I18n.t('All_Messages'), value: 'all' label: 'All_Messages', value: 'all'
}, { }, {
label: I18n.t('Mentions'), value: 'mentions' label: 'Mentions', value: 'mentions'
}, { }, {
label: I18n.t('Nothing'), value: 'nothing' label: 'Nothing', value: 'nothing'
}], }],
desktopNotificationDuration: [{ desktopNotificationDuration: [{
label: I18n.t('Default'), value: 0 label: 'Default', value: 0
}, { }, {
label: I18n.t('Seconds', { second: 1 }), value: 1 label: 'Seconds', second: 1, value: 1
}, { }, {
label: I18n.t('Seconds', { second: 2 }), value: 2 label: 'Seconds', second: 2, value: 2
}, { }, {
label: I18n.t('Seconds', { second: 3 }), value: 3 label: 'Seconds', second: 3, value: 3
}, { }, {
label: I18n.t('Seconds', { second: 4 }), value: 4 label: 'Seconds', second: 4, value: 4
}, { }, {
label: I18n.t('Seconds', { second: 5 }), value: 5 label: 'Seconds', second: 5, value: 5
}], }],
audioNotificationValue: [{ audioNotificationValue: [{
label: 'None', value: 'none None' label: 'None', value: 'none None'
}, { }, {
label: I18n.t('Default'), value: '0 Default' label: 'Default', value: '0 Default'
}, { }, {
label: 'Beep', value: 'beep Beep' label: 'Beep', value: 'beep Beep'
}, { }, {
@ -229,7 +229,7 @@ class NotificationPreferencesView extends React.Component {
const { room } = this.state; const { room } = this.state;
const { theme } = this.props; const { theme } = this.props;
const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : OPTIONS[key][0]; const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : OPTIONS[key][0];
return <Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>{text?.label}</Text>; return <Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>{I18n.t(text?.label, { defaultValue: text?.label, second: text?.second })}</Text>;
} }
renderSwitch = (key) => { renderSwitch = (key) => {

View File

@ -42,7 +42,7 @@ const Item = React.memo(({
theme theme
}) => ( }) => (
<ListItem <ListItem
title={item.label} title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
right={selected && (() => <Check theme={theme} style={styles.check} />)} right={selected && (() => <Check theme={theme} style={styles.check} />)}
onPress={onItemPress} onPress={onItemPress}
theme={theme} theme={theme}

View File

@ -24,16 +24,16 @@ import SafeAreaView from '../containers/SafeAreaView';
const STATUS = [{ const STATUS = [{
id: 'online', id: 'online',
name: I18n.t('Online') name: 'Online'
}, { }, {
id: 'busy', id: 'busy',
name: I18n.t('Busy') name: 'Busy'
}, { }, {
id: 'away', id: 'away',
name: I18n.t('Away') name: 'Away'
}, { }, {
id: 'offline', id: 'offline',
name: I18n.t('Invisible') name: 'Invisible'
}]; }];
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -164,7 +164,7 @@ class StatusView extends React.Component {
const { id, name } = item; const { id, name } = item;
return ( return (
<ListItem <ListItem
title={name} title={I18n.t(name)}
onPress={async() => { onPress={async() => {
if (user.status !== item.id) { if (user.status !== item.id) {
try { try {

View File

@ -21,28 +21,28 @@ const THEME_GROUP = 'THEME_GROUP';
const DARK_GROUP = 'DARK_GROUP'; const DARK_GROUP = 'DARK_GROUP';
const SYSTEM_THEME = { const SYSTEM_THEME = {
label: I18n.t('Automatic'), label: 'Automatic',
value: 'automatic', value: 'automatic',
group: THEME_GROUP group: THEME_GROUP
}; };
const THEMES = [ const THEMES = [
{ {
label: I18n.t('Light'), label: 'Light',
value: 'light', value: 'light',
group: THEME_GROUP group: THEME_GROUP
}, { }, {
label: I18n.t('Dark'), label: 'Dark',
value: 'dark', value: 'dark',
group: THEME_GROUP group: THEME_GROUP
}, { }, {
label: I18n.t('Dark'), label: 'Dark',
value: 'dark', value: 'dark',
separator: true, separator: true,
header: I18n.t('Dark_level'), header: 'Dark_level',
group: DARK_GROUP group: DARK_GROUP
}, { }, {
label: I18n.t('Black'), label: 'Black',
value: 'black', value: 'black',
group: DARK_GROUP group: DARK_GROUP
} }
@ -129,7 +129,7 @@ class ThemeView extends React.Component {
<> <>
{item.separator || isFirst ? this.renderSectionHeader(item.header) : null} {item.separator || isFirst ? this.renderSectionHeader(item.header) : null}
<ListItem <ListItem
title={label} title={I18n.t(label)}
onPress={() => this.onClick(item)} onPress={() => this.onClick(item)}
testID={`theme-view-${ value }`} testID={`theme-view-${ value }`}
right={this.isSelected(item) ? this.renderIcon : null} right={this.isSelected(item) ? this.renderIcon : null}
@ -139,12 +139,12 @@ class ThemeView extends React.Component {
); );
} }
renderSectionHeader = (header = I18n.t('Theme')) => { renderSectionHeader = (header = 'Theme') => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<> <>
<View style={styles.info}> <View style={styles.info}>
<Text style={[styles.infoText, { color: themes[theme].infoText }]}>{header}</Text> <Text style={[styles.infoText, { color: themes[theme].infoText }]}>{I18n.t(header)}</Text>
</View> </View>
{this.renderSeparator()} {this.renderSeparator()}
</> </>
@ -169,7 +169,7 @@ class ThemeView extends React.Component {
<StatusBar theme={theme} /> <StatusBar theme={theme} />
<FlatList <FlatList
data={THEMES} data={THEMES}
keyExtractor={item => item.value} keyExtractor={item => item.value + item.group}
contentContainerStyle={[ contentContainerStyle={[
styles.list, styles.list,
{ borderColor: themes[theme].separatorColor } { borderColor: themes[theme].separatorColor }