rewrite currency screen usign funcional components

screen/settings/currency.js

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