ADD: rerender UI after language change

This commit is contained in:
marcosrdz 2020-12-13 04:52:54 -05:00
parent d142f37332
commit 01cb2aba5e
5 changed files with 75 additions and 60 deletions

View file

@ -12,7 +12,9 @@ export const BlueStorageProvider = ({ children }) => {
const [selectedWallet, setSelectedWallet] = useState(''); const [selectedWallet, setSelectedWallet] = useState('');
const [walletsInitialized, setWalletsInitialized] = useState(false); const [walletsInitialized, setWalletsInitialized] = useState(false);
const [preferredFiatCurrency, _setPreferredFiatCurrency] = useState(); const [preferredFiatCurrency, _setPreferredFiatCurrency] = useState();
const [language, _setLanguage] = useState();
const getPreferredCurrencyAsyncStorage = useAsyncStorage(AppStorage.PREFERRED_CURRENCY).getItem; const getPreferredCurrencyAsyncStorage = useAsyncStorage(AppStorage.PREFERRED_CURRENCY).getItem;
const getLanguageAsyncStorage = useAsyncStorage(AppStorage.LANG).getItem;
const [newWalletAdded, setNewWalletAdded] = useState(false); const [newWalletAdded, setNewWalletAdded] = useState(false);
const saveToDisk = async () => { const saveToDisk = async () => {
BlueApp.tx_metadata = txMetadata; BlueApp.tx_metadata = txMetadata;
@ -34,8 +36,18 @@ export const BlueStorageProvider = ({ children }) => {
getPreferredCurrency(); getPreferredCurrency();
}; };
const getLanguage = async () => {
const item = await getLanguageAsyncStorage();
_setLanguage(item);
};
const setLanguage = () => {
getLanguage();
};
useEffect(() => { useEffect(() => {
getPreferredCurrency(); getPreferredCurrency();
getLanguageAsyncStorage();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
@ -169,6 +181,8 @@ export const BlueStorageProvider = ({ children }) => {
setIsAdancedModeEnabled, setIsAdancedModeEnabled,
setPreferredFiatCurrency, setPreferredFiatCurrency,
preferredFiatCurrency, preferredFiatCurrency,
setLanguage,
language,
}} }}
> >
{children} {children}

View file

@ -270,7 +270,7 @@ const cStyles = StyleSheet.create({
const WalletsCarousel = forwardRef((props, ref) => { const WalletsCarousel = forwardRef((props, ref) => {
const carouselRef = useRef(); const carouselRef = useRef();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const { preferredFiatCurrency } = useContext(BlueStorageContext); const { preferredFiatCurrency, language } = useContext(BlueStorageContext);
const renderItem = useCallback( const renderItem = useCallback(
({ item, index }) => ( ({ item, index }) => (
<WalletCarouselItem <WalletCarouselItem
@ -282,7 +282,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
/> />
), ),
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
[props.vertical, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency], [props.vertical, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency, language],
); );
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({

View file

@ -13,7 +13,7 @@ const currency = require('../blue_modules/currency');
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
// first-time loading sequence // first-time loading sequence
(async () => { const setLanguageAndDateTimeLocale = async () => {
// finding out whether lang preference was saved // finding out whether lang preference was saved
// For some reason using the AppStorage.LANG constant is not working. Hard coding string for now. // For some reason using the AppStorage.LANG constant is not working. Hard coding string for now.
let lang = await AsyncStorage.getItem('lang'); let lang = await AsyncStorage.getItem('lang');
@ -142,7 +142,8 @@ dayjs.extend(relativeTime);
strings.setLanguage('en'); strings.setLanguage('en');
} }
} }
})(); };
setLanguageAndDateTimeLocale();
const strings = new Localization({ const strings = new Localization({
en: require('./en.json'), en: require('./en.json'),
@ -187,6 +188,7 @@ const strings = new Localization({
strings.saveLanguage = lang => { strings.saveLanguage = lang => {
AsyncStorage.setItem(AppStorage.LANG, lang); AsyncStorage.setItem(AppStorage.LANG, lang);
strings.setLanguage(lang); strings.setLanguage(lang);
setLanguageAndDateTimeLocale();
}; };
export const transactionTimeToReadable = time => { export const transactionTimeToReadable = time => {

View file

@ -1,9 +1,12 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { FlatList, StyleSheet } from 'react-native'; import { FlatList, StyleSheet } from 'react-native';
import { SafeBlueArea, BlueListItem, BlueCard, BlueLoading, BlueNavigationStyle, BlueText } from '../../BlueComponents'; import { SafeBlueArea, BlueListItem, BlueLoading, BlueNavigationStyle } from '../../BlueComponents';
import { AvailableLanguages } from '../../loc/languages'; import { AvailableLanguages } from '../../loc/languages';
import loc from '../../loc'; import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import { useNavigation, useTheme } from '@react-navigation/native';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
flex: { flex: {
flex: 1, flex: 1,
@ -11,42 +14,51 @@ const styles = StyleSheet.create({
}); });
const Language = () => { const Language = () => {
const { setLanguage, language } = useContext(BlueStorageContext);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [language, setLanguage] = useState(loc.getLanguage()); const [selectedLanguage, setSelectedLanguage] = useState(loc.getLanguage());
const { setOptions } = useNavigation();
const { colors } = useTheme();
const stylesHook = StyleSheet.create({
flex: {
backgroundColor: colors.background,
},
});
useEffect(() => { useEffect(() => {
setIsLoading(false); setIsLoading(false);
}, []); }, []);
const renderItem = useCallback( useEffect(() => {
({ item }) => { setOptions({ headerTitle: loc.settings.language });
return ( // eslint-disable-next-line react-hooks/exhaustive-deps
<BlueListItem }, [language]);
onPress={() => {
console.log('setLanguage', item.value); const renderItem = item => {
loc.saveLanguage(item.value); return (
setLanguage(item.value); <BlueListItem
}} onPress={() => {
title={item.label} console.log('setLanguage', item.item.value);
{...(language === item.value loc.saveLanguage(item.item.value);
? { setSelectedLanguage(item.item.value);
rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' }, setLanguage();
} }}
: { hideChevron: true })} title={item.item.label}
/> checkmark={selectedLanguage === item.item.value}
); />
}, );
[language], };
);
return isLoading ? ( return isLoading ? (
<BlueLoading /> <BlueLoading />
) : ( ) : (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.flex}> <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.flex, stylesHook.flex]}>
<FlatList style={styles.flex} keyExtractor={(_item, index) => `${index}`} data={AvailableLanguages} renderItem={renderItem} /> <FlatList
<BlueCard> style={[styles.flex, stylesHook.flex]}
<BlueText>{loc.settings.language_restart}</BlueText> keyExtractor={(_item, index) => `${index}`}
</BlueCard> data={AvailableLanguages}
renderItem={renderItem}
initialNumToRender={25}
/>
</SafeBlueArea> </SafeBlueArea>
); );
}; };

View file

@ -1,8 +1,9 @@
import React from 'react'; import React, { useContext } from 'react';
import { ScrollView, TouchableOpacity, StyleSheet, StatusBar } from 'react-native'; import { ScrollView, StyleSheet, StatusBar } from 'react-native';
import { BlueListItem, BlueNavigationStyle, BlueHeaderDefaultSubHooks } from '../../BlueComponents'; import { BlueListItem, BlueNavigationStyle, BlueHeaderDefaultSubHooks } from '../../BlueComponents';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import loc from '../../loc'; import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
root: { root: {
@ -12,36 +13,22 @@ const styles = StyleSheet.create({
const Settings = () => { const Settings = () => {
const { navigate } = useNavigation(); const { navigate } = useNavigation();
// By simply having it here, it'll re-render the UI if language is changed
// eslint-disable-next-line no-unused-vars
const { language } = useContext(BlueStorageContext);
return ( return (
<ScrollView style={styles.root}> <ScrollView style={styles.root}>
<StatusBar barStyle="default" /> <StatusBar barStyle="default" />
<BlueHeaderDefaultSubHooks leftText={loc.settings.header} rightComponent={null} /> <BlueHeaderDefaultSubHooks leftText={loc.settings.header} rightComponent={null} />
<BlueListItem title={loc.settings.general} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} chevron /> <BlueListItem title={loc.settings.general} onPress={() => navigate('GeneralSettings')} chevron />
<BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} chevron /> <BlueListItem title={loc.settings.currency} onPress={() => navigate('Currency')} chevron />
<BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} chevron /> <BlueListItem title={loc.settings.language} onPress={() => navigate('Language')} chevron />
<BlueListItem <BlueListItem title={loc.settings.encrypt_title} onPress={() => navigate('EncryptStorage')} testID="SecurityButton" chevron />
title={loc.settings.encrypt_title} <BlueListItem title={loc.settings.network} onPress={() => navigate('NetworkSettings')} chevron />
onPress={() => navigate('EncryptStorage')} <BlueListItem title={loc.settings.notifications} onPress={() => navigate('NotificationSettings')} chevron />
component={TouchableOpacity} <BlueListItem title={loc.settings.privacy} onPress={() => navigate('SettingsPrivacy')} chevron />
testID="SecurityButton" <BlueListItem title={loc.settings.about} onPress={() => navigate('About')} testID="AboutButton" chevron />
chevron
/>
<BlueListItem title={loc.settings.network} component={TouchableOpacity} onPress={() => navigate('NetworkSettings')} chevron />
<BlueListItem
title={loc.settings.notifications}
component={TouchableOpacity}
onPress={() => navigate('NotificationSettings')}
chevron
/>
<BlueListItem title={loc.settings.privacy} component={TouchableOpacity} onPress={() => navigate('SettingsPrivacy')} chevron />
<BlueListItem
title={loc.settings.about}
component={TouchableOpacity}
onPress={() => navigate('About')}
testID="AboutButton"
chevron
/>
</ScrollView> </ScrollView>
); );
}; };