New implementation for currency on native app

app/actions/apiRouting.js

@@ -2,8 +2,8 @@ const routes = require('../server/routes/fos_js_routes.json');
 import Routing from './router.min.js';
 import { debug } from '../debug';
 import { context } from '../config';
+import { getCdnMediaUrl } from './fetchConfig';
 import { getLocaleAsync } from './getLocale';
-import { getCdnMediaUrl } from './fetchLocation';
 Routing.setRoutingData(routes);
 
 export const getApiRoute = async (routeName, params) => {

app/actions/fetchLocation.js → app/actions/fetchConfig.js

@@ -10,8 +10,10 @@ import { find } from 'lodash';
 import { setCurrencyAction } from './globalCurrency';
 // import { setCdnMedia } from '../reducers/configReducer';
 let cdnMedia = {};
+let currency = '';
 export function fetchLocation() {
   return dispatch => {
+    console.log('got preferred currency', getItemSync('preferredCurrency'));
     if (!getItemSync('preferredCurrency')) {
       getRequest('public_ipstack')
         .then(data => {
@@ -29,17 +31,33 @@ export function fetchLocation() {
     }
   };
 }
+
+export function getCurrency() {
+  return currency;
+}
+
 export function getCdnMediaUrl() {
   return cdnMedia;
 }
 export function fetchConfig() {
-  return () => {
+  return dispatch => {
     // if (!getItemSync('preferredCurrency')) {
     getRequest('config_get')
       .then(data => {
         debug('Got config fetch data:', data.data);
         cdnMedia = data.data.cdnMedia;
 
+        // fake data manipulation for debug purpose, please remove this when debug finishes
+        // data.data.currency = 'USD';
+        // debug code ends
+
+        if (data.data && data.data.currency) {
+          currency = data.data.currency;
+          supportedCurrency.includes(data.data.currency) &&
+            dispatch(setCurrencyAction(data.data.currency));
+        } else {
+          dispatch(fetchLocation());
+        }
         // for now we are not storing those in redux, please uncomment this when you need these urls in your components
         // dispatch(setCdnMedia(data.data.cdnMedia));
       })

app/components/App/TreeCounter.js

@@ -110,7 +110,7 @@ const RedirectedPrivateAcceptEmail = lazy(() =>
 );
 
 import { initLocale } from '../../actions/getLocale';
-import { fetchLocation, fetchConfig } from '../../actions/fetchLocation';
+import { fetchConfig } from '../../actions/fetchConfig';
 import { fetchCurrencies } from '../../actions/currencies';
 
 // Class implementation
@@ -134,7 +134,6 @@ class TreeCounter extends Component {
       isCancelled: false
     };
     initLocale();
-    this.props.fetchLocation();
     this.props.fetchCurrencies();
     this.props.fetchConfig();
   }
@@ -430,7 +429,6 @@ const mapDispatchToProps = dispatch => {
   return bindActionCreators(
     {
       fetchCurrencies,
-      fetchLocation,
       fetchConfig,
       loadUserProfile,
       NotificationAction,

app/components/App/TreeCounter.native.js

@@ -11,7 +11,7 @@ import { bindActionCreators } from 'redux';
 import { SafeAreaView } from 'react-navigation';
 import { initLocale } from '../../actions/getLocale.native.js';
 import { fetchCurrencies } from '../../actions/currencies';
-import { fetchConfig } from '../../actions/fetchLocation';
+import { fetchConfig } from '../../actions/fetchConfig';
 class App extends Component {
   componentDidMount() {
     initLocale();

app/components/Common/NumberFormat.native.js

@@ -9,15 +9,20 @@ const NumberFormat = ({
   locale,
   currency,
   userProfile,
-  currencies
-  // globalCurrency
+  currencies,
+  globalCurrency,
+  force
 }) => {
-  if (!userProfile && currency) {
+  if (!userProfile) {
     userProfile = {
-      currency: currency
+      // we use redux currency or use EUR if not found for now, dont use localstorage currency for now
+      currency: globalCurrency.currency || 'EUR'
     };
   }
-
+  if (force && currency) {
+    // force use provided currency
+    userProfile.currency = currency;
+  }
   return formatNumber(data, locale, currency, userProfile, currencies);
 };
 

app/components/Currency/CurrencySelector.native.js

@@ -2,74 +2,109 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dimensions } from 'react-native';
 import i18n from '../../locales/i18n';
-// import styles from '../../styles/currencies/currencyselector';
-// import t from 'tcomb-form-native';
+import { connect } from 'react-redux';
+import { getCurrency } from '../../selectors';
 import { Dropdown } from 'react-native-material-dropdown';
-// import { getFormSchema } from '../../server/parsedSchemas/currencySelector';
 import { currencySort } from './utils';
+import { currentUserProfileSelector } from '../../selectors/index';
+import { bindActionCreators } from 'redux';
+import { setCurrencyAction } from '../../actions/globalCurrency';
+class CurrencySelector extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    let { selectedCurrency, globalCurrency } = props;
+    this.state = {
+      selectedCurrency:
+        (globalCurrency && globalCurrency.currency) || selectedCurrency
+    };
+  }
+  componentDidMount() {
+    if (this.props.globalCurrency) {
+      this.setState(
+        { selectedCurrency: this.props.globalCurrency.currency },
+        () => {
+          this.props.onChange(this.state.selectedCurrency);
+        }
+      );
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    console.log('next props currency', nextProps);
+    if (
+      nextProps.globalCurrency &&
+      nextProps.globalCurrency.currency !== this.state.selectedCurrency
+    ) {
+      this.setState({ selectedCurrency: nextProps.globalCurrency.currency });
+      this.props.onChange(nextProps.globalCurrency.currency);
+    }
+    // if (nextProps.userProfile &&
+    //   nextProps.userProfile.currency) {
+    //   this.setState({ preferredCurrency: nextProps.userProfile.currency });
+    //   this.props.setCurrencyAction(nextProps.userProfile.currency);
+    //   this.props.onChange(nextProps.userProfile.currency);
+    // }
+  }
+  render() {
+    const { currencies } = this.props;
+    const { selectedCurrency } = this.state;
+    const currenciesArray = currencySort(Object.keys(currencies));
 
-// let Form = t.form.Form;
-
-const CurrencySelector = ({ currencies, selectedCurrency, onChange }) => {
-  // const {
-  //   schemaOptions,
-  //   transformedSchema: currencySelectorFormSchema
-  // } = getFormSchema(currencies);
-  const currenciesArray = currencySort(Object.keys(currencies));
-
-  const currenciesDropdownFormat = currenciesArray.map(item => {
-    return { value: item, text: currencies[item] };
-  });
-  const textColor = '#686060';
-  return (
-    <Dropdown
-      containerStyle={{
-        width: '100%',
-        marginLeft: 10,
-        marginBottom: 10,
-        paddingRight: 10,
-        elevation: 2
-      }}
-      pickerStyle={{
-        position: 'absolute',
-        maxHeight: Dimensions.get('window').height
-          ? Dimensions.get('window').height - 160
-          : 400,
-        top: 160,
-        zIndex: 60
-      }}
-      itemCount={10}
-      dropdownPosition={1}
-      animationDuration={0}
-      itemTextStyle={{
-        fontSize: 13,
-        color: textColor
-      }}
-      initialNumToRender={currenciesDropdownFormat.length}
-      value={i18n.t(selectedCurrency)}
-      textColor="rgba(104,96,96, 0.8)"
-      selectedItemColor="rgba(104,96,96, 0.8)"
-      labelExtractor={item => i18n.t(item.text)}
-      valueExtractor={item => item.value}
-      onChangeText={item => onChange(item)}
-      // label={i18n.t(locals.value.text)}
-      data={currenciesDropdownFormat}
-    />
-    // <Form
-    //   onChange={currency => {
-    //     onChange(currency.currency);
-    //   }}
-    //   type={currencySelectorFormSchema}
-    //   options={schemaOptions}
-    //   value={{ currency: selectedCurrency }}
-    // />
-  );
-};
+    const currenciesDropdownFormat = currenciesArray.map(item => {
+      return { value: item, text: currencies[item] };
+    });
+    const textColor = '#686060';
+    return (
+      <Dropdown
+        containerStyle={{
+          width: '100%',
+          marginLeft: 10,
+          marginBottom: 10,
+          paddingRight: 10,
+          elevation: 2
+        }}
+        pickerStyle={{
+          position: 'absolute',
+          maxHeight: Dimensions.get('window').height
+            ? Dimensions.get('window').height - 160
+            : 400,
+          top: 160,
+          zIndex: 60
+        }}
+        itemCount={10}
+        dropdownPosition={1}
+        animationDuration={0}
+        itemTextStyle={{
+          fontSize: 13,
+          color: textColor
+        }}
+        initialNumToRender={currenciesDropdownFormat.length}
+        value={i18n.t(selectedCurrency)}
+        textColor="rgba(104,96,96, 0.8)"
+        selectedItemColor="rgba(104,96,96, 0.8)"
+        labelExtractor={item => i18n.t(item.text)}
+        valueExtractor={item => item.value}
+        onChangeText={item => this.props.onChange(item)}
+        data={currenciesDropdownFormat}
+      />
+    );
+  }
+}
 
 CurrencySelector.propTypes = {
   selectedCurrency: PropTypes.string,
   currencies: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired
 };
-
-export default CurrencySelector;
+const mapStateToProps = state => ({
+  globalCurrency: getCurrency(state),
+  userProfile: currentUserProfileSelector(state)
+});
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators(
+    {
+      setCurrencyAction
+    },
+    dispatch
+  );
+};
+export default connect(mapStateToProps, mapDispatchToProps)(CurrencySelector);