Keep ether conversion in state

embark-ui/src/actions/index.js

@@ -1,3 +1,5 @@
+import Units from 'ethereumjs-units';
+
 export const REQUEST = 'REQUEST';
 export const SUCCESS = 'SUCCESS';
 export const FAILURE = 'FAILURE';
@@ -296,6 +298,52 @@ export function listenToGasOracle(){
 export function stopGasOracle(){
   return {
     type: STOP_GAS_ORACLE
+  }
+}
+
+// Actions without Side Effect
+const UNITS = [
+  { key: 'wei', name: 'Wei' },
+  { key: 'kwei', name: 'KWei' },
+  { key: 'mwei', name: 'MWei' },
+  { key: 'gwei', name: 'Szabo' },
+  { key: 'finney', name: 'Finney' },
+  { key: 'ether', name: 'Ether' },
+  { key: 'kether', name: 'KEther' },
+  { key: 'mether', name: 'MEther' },
+  { key: 'gether', name: 'GEther' },
+  { key: 'tether', namw: 'TEther' }
+];
+
+const safeConvert = (value, from, to) => {
+  try {
+    value = Units.convert(value, from, to);
+  } catch (e) {
+    value = '';
+  }
+  return value;
+};
+
+const calculateUnits = (value, from) => {
+  return UNITS.map((unit) => {
+    unit.value = safeConvert(value, from, unit.key);
+    return unit;
+  });
+};
+
+export const INIT_ETHER_CONVERSIONS = 'INIT_ETHER_CONVERSIONS';
+export function initEtherConversions() {
+  return {
+    type: INIT_ETHER_CONVERSIONS,
+    payload: calculateUnits('1', 'ether')
+  };
+}
+
+export const UPDATE_ETHER_CONVERSIONS = 'UPDATED_ETHER_CONVERSIONS';
+export function updateEtherConversions(value, key) {
+  return {
+    type: UPDATE_ETHER_CONVERSIONS,
+    payload: calculateUnits(value, key)
   };
 }
 

embark-ui/src/components/Converter.js

@@ -1,76 +1,30 @@
-import React, {Component} from 'react';
-import {Page, Form, Icon, Button} from "tabler-react";
-import Units from 'ethereumjs-units';
+import PropTypes from "prop-types";
+import React from 'react';
+import {Page, Form, Button, Icon} from "tabler-react";
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 
-const UNITS = [
-  { key: 'wei', name: 'Wei' },
-  { key: 'kwei', name: 'KWei' },
-  { key: 'mwei', name: 'MWei' },
-  { key: 'gwei', name: 'Szabo' },
-  { key: 'finney', name: 'Finney' },
-  { key: 'ether', name: 'Ether' },
-  { key: 'kether', name: 'KEther' },
-  { key: 'mether', name: 'MEther' },
-  { key: 'gether', name: 'GEther' },
-  { key: 'tether', namw: 'TEther' }
-];
+const Converter = (props) => (
+  <Page.Content title="Ether Converter">
+    <Form.FieldSet>
+      {
+        props.etherConversions.map(unit => {
+          return (
+            <Form.Group label={unit.name} key={unit.key}>
+              <Form.Input placeholder={unit.name} value={unit.value} onChange={e => props.updateEtherConversions(e.target.value, unit.key)} />
+              <CopyToClipboard text={this.state.units[unit.key]} title="Copy value to clipboard">
+                <Button color="primary"><Icon name="copy"/></Button>
+              </CopyToClipboard>
+            </Form.Group>
+          )
+        })
+      }
+    </Form.FieldSet>
+  </Page.Content>
+)
 
-const safeConvert = (value, from, to) => {
-  try {
-    value = Units.convert(value, from, to);
-  } catch (e) {
-    value = ''
-  }
-  return value;
-}
-
-const calculateUnits = (value, from) => {
-  return UNITS.reduce((acc, unit) => {
-    acc[unit.key] = safeConvert(value, from, unit.key)
-    return acc;
-  }, {});
-}
-
-class Converter extends Component {
-
-  constructor(props) {
-    super(props);
-    const units = calculateUnits('1', 'ether')
-
-    this.state = {
-      units
-    };
-  }
-
-  calculate(value, from) {
-    const units = calculateUnits(value, from);
-    this.setState({ units })
-  }
-
-  render() {
-    return (
-      <Page.Content title="Ether Converter">
-        <Form.FieldSet>
-          {
-            UNITS.map(unit => {
-              return (
-                <Form.Group label={unit.name} key={unit.key}>
-                  <Form.InputGroup>
-                    <Form.Input placeholder={unit.name} value={this.state.units[unit.key]} onChange={e => this.calculate(e.target.value, unit.key)} />
-
-                    <CopyToClipboard text={this.state.units[unit.key]} title="Copy value to clipboard">
-                      <Button color="primary"><Icon name="copy"/></Button>
-                    </CopyToClipboard>
-                  </Form.InputGroup>
-                </Form.Group>
-              )
-            })
-          }
-        </Form.FieldSet>
-      </Page.Content>
-    )
-  }
-}
+Converter.propTypes = {
+  etherConversions: PropTypes.arrayOf(PropTypes.object),
+  updateEtherConversions: PropTypes.func
+};
 
 export default Converter;

embark-ui/src/components/UtilsLayout.js

@@ -2,10 +2,10 @@ import React from 'react';
 import {Page, Grid, List} from 'tabler-react'
 import {NavLink, Route, Switch} from 'react-router-dom';
 
-import Converter from '../components/Converter';
+import ConverterContainer from '../containers/ConverterContainer';
 
 const groupItems = [
-  {to: "/embark/utilities/converter", icon: "dollar-sign", value: "Ether Converter"},
+  {to: "/embark/utilities/converter", icon: "dollar-sign", value: "Ether Converter"}
 ];
 
 const className = "d-flex align-items-center";
@@ -34,11 +34,11 @@ class UtilsLayout extends React.Component {
         </Grid.Col>
         <Grid.Col md={9}>
           <Switch>
-            <Route exact path="/embark/utilities/converter" component={Converter} />
+            <Route exact path="/embark/utilities/converter" component={ConverterContainer} />
           </Switch>
         </Grid.Col>
       </Grid.Row>
-    )
+    );
   }
 }
 

embark-ui/src/containers/ConverterContainer.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {updateEtherConversions, initEtherConversions} from '../actions';
+import {getEtherConversions} from "../reducers/selectors";
+import Converter from '../components/Converter';
+
+class ConverterContainer extends React.Component {
+  componentDidMount() {
+    if(this.props.etherConversions.length === 0) {
+      this.props.initEtherConversions();
+    }
+  }
+
+  render() {
+    return <Converter etherConversions={this.props.etherConversions}
+                      updateEtherConversions={this.props.updateEtherConversions} />;
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    etherConversions: getEtherConversions(state)
+  };
+}
+
+ConverterContainer.propTypes = {
+  etherConversions: PropTypes.arrayOf(PropTypes.object),
+  updateEtherConversions: PropTypes.func,
+  initEtherConversions: PropTypes.func
+};
+
+export default connect(
+  mapStateToProps,
+  {
+    updateEtherConversions,
+    initEtherConversions
+  }
+)(ConverterContainer);

embark-ui/src/reducers/index.js

@@ -1,5 +1,6 @@
 import {combineReducers} from 'redux';
-import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE, FETCH_CREDENTIALS} from "../actions";
+import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE, 
+        FETCH_CREDENTIALS, INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS} from "../actions";
 
 const BN_FACTOR = 10000;
 const VOID_ADDRESS = '0x0000000000000000000000000000000000000000';
@@ -180,13 +181,21 @@ function credentials(state = DEFAULT_CREDENTIALS_STATE, action) {
   return state;
 }
 
+function etherConversions(state = [], action) {
+  if ([INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS].includes(action.type)) {
+    return action.payload;
+  }
+  return state;
+}
+
 const rootReducer = combineReducers({
   entities,
   loading,
   compilingContract,
   errorMessage,
   errorEntities,
-  credentials
+  credentials,
+  etherConversions
 });
 
 export default rootReducer;

embark-ui/src/reducers/selectors.js

@@ -156,3 +156,7 @@ export function getFiles(state) {
 export function getCurrentFile(state) {
   return last(state.entities.currentFiles);
 }
+
+export function getEtherConversions(state) {
+  return state.etherConversions;
+}