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