mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-22 15:04:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

rewrite currency screen usign funcional components

Browse source
This commit is contained in:
Evgeny Sokovikov 2020-03-23 19:11:46 +04:00 • committed by Overtorment
parent c0d2157d9c
commit ffd7f76669
1 changed files with 62 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
screen/settings/currency.js
View file

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState, useEffect } from 'react';
import { FlatList, TouchableOpacity, ActivityIndicator, View } from 'react-native';
import { SafeBlueArea, BlueNavigationStyle, BlueListItem, BlueText, BlueCard } from '../../BlueComponents';
import PropTypes from 'prop-types';
@ -7,80 +7,69 @@ import { FiatUnit } from '../../models/fiatUnit';
let loc = require('../../loc');
let currency = require('../../currency');
export default class Currency extends Component {
static navigationOptions = () => ({
...BlueNavigationStyle(),
title: loc.settings.currency,
});
const data = Object.values(FiatUnit);
constructor(props) {
super(props);
this.state = { data: Object.values(FiatUnit), isSavingNewPreferredCurrency: false };
}
const Currency = () => {
const [isSavingNewPreferredCurrency, setIsSavingNewPreferredCurrency] = useState(false);
const [selectedCurrency, setSelectedCurrency] = useState(null);
async componentDidMount() {
try {
const preferredCurrency = await currency.getPreferredCurrency();
if (preferredCurrency === null) {
throw Error();
useEffect(() => {
const fetchCurrency = async () => {
try {
const preferredCurrency = await currency.getPreferredCurrency();
if (preferredCurrency === null) {
throw Error();
}
setSelectedCurrency(preferredCurrency);
} catch (_error) {
setSelectedCurrency(FiatUnit.USD);
}
this.setState({ selectedCurrency: preferredCurrency });
} catch (_error) {
this.setState({ selectedCurrency: FiatUnit.USD });
}
}
};
fetchCurrency();
}, []);
renderItem = ({ item }) => {
if (selectedCurrency !== null && selectedCurrency !== undefined) {
return (
<TouchableOpacity
onPress={() => {
this.setState({ isSavingNewPreferredCurrency: true, selectedCurrency: item }, async () => {
await currency.setPrefferedCurrency(item);
await currency.startUpdater();
this.setState({ isSavingNewPreferredCurrency: false });
});
}}
>
<BlueListItem
title={item.endPointKey + ' (' + item.symbol + ')'}
{...(this.state.selectedCurrency.endPointKey === item.endPointKey
? {
rightIcon: this.state.selectedNewCurrency ? (
<ActivityIndicator />
) : (
<Icon name="check" type="font-awesome" color="#0c2550" />
),
}
: { hideChevron: true })}
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<FlatList
style={{ flex: 1 }}
keyExtractor={(_item, index) => `${index}`}
data={data}
extraData={data}
renderItem={({ item }) => {
return (
<TouchableOpacity
disabled={isSavingNewPreferredCurrency}
onPress={async () => {
setIsSavingNewPreferredCurrency(true);
setSelectedCurrency(item);
await currency.setPrefferedCurrency(item);
await currency.startUpdater();
setIsSavingNewPreferredCurrency(false);
}}
>
<BlueListItem
title={`${item.endPointKey} (${item.symbol})`}
{...(selectedCurrency.endPointKey === item.endPointKey
? { rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" /> }
: { hideChevron: true })}
/>
</TouchableOpacity>
);
}}
/>
</TouchableOpacity>
);
};
render() {
if (this.state.selectedCurrency !== null && this.state.selectedCurrency !== undefined) {
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<FlatList
style={{ flex: 1 }}
keyExtractor={(_item, index) => `${index}`}
data={this.state.data}
extraData={this.state.data}
renderItem={this.renderItem}
/>
<BlueCard>
<BlueText>Prices are obtained from CoinDesk</BlueText>
</BlueCard>
</SafeBlueArea>
);
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator />
</View>
<BlueCard>
<BlueText>Prices are obtained from CoinDesk</BlueText>
</BlueCard>
</SafeBlueArea>
);
}
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator />
</View>
);
};
Currency.propTypes = {
navigation: PropTypes.shape({
@ -88,3 +77,9 @@ Currency.propTypes = {
goBack: PropTypes.func,
}),
};
Currency.navigationOptions = () => ({
...BlueNavigationStyle(),
title: loc.settings.currency,
});
export default Currency;