Refactoring

src/components/Home/index.js

@@ -30,12 +30,13 @@ const { CROWDSALE_STRATEGY, TOKEN_SETUP, CROWDSALE_SETUP, PUBLISH, CROWDSALE_PAG
 )
 @observer
 export class Home extends Component {
+  state = {
+    showModal: false,
+    loading: false
+  }
+
   constructor(props) {
     super(props)
-    this.state = {
-      showModal: false,
-      loading: false
-    }
 
     let { contractStore } = this.props
     contractStore.setProperty('downloadStatus', DOWNLOAD_STATUS.PENDING)
@@ -46,7 +47,7 @@ export class Home extends Component {
     await checkWeb3(web3Store.web3)
   }
 
-  async chooseContract() {
+  chooseContract = async () => {
     this.setState({
       loading: true
     })
@@ -65,13 +66,15 @@ export class Home extends Component {
     }
   }
 
-  async goNextStep() {
+  goNextStep = async () => {
     // Clear local storage if there is no incomplete deployment, and reload
-    if (storage.has('DeploymentStore') && storage.get('DeploymentStore').deploymentStep === null) {
+    if (storage.has('DeploymentStore') && storage.get('DeploymentStore').deploymentStep) {
+      this.props.history.push('/')
+    } else {
       this.clearStorage()
       await this.reloadStorage()
+      this.props.history.push('1')
     }
-    this.props.history.push('1')
   }
 
   async reloadStorage() {

src/components/stepOne/index.js

@@ -1,43 +1,62 @@
-import React from 'react'
+import React, { Component } from 'react'
 import '../../assets/stylesheets/application.css'
 import { Link } from 'react-router-dom'
 import { StepNavigation } from '../Common/StepNavigation'
 import { inject, observer } from 'mobx-react'
 import { ButtonContinue } from '../Common/ButtonContinue'
+import { checkWeb3 } from '../../utils/blockchainHelpers'
 import {
   NAVIGATION_STEPS,
   CROWDSALE_STRATEGIES,
   CROWDSALE_STRATEGIES_DISPLAYNAMES,
   DOWNLOAD_STATUS
 } from '../../utils/constants'
 import logdown from 'logdown'
+import { Loader } from '../Common/Loader'
 
 const logger = logdown('TW:stepOne')
 const { CROWDSALE_STRATEGY } = NAVIGATION_STEPS
 const { MINTED_CAPPED_CROWDSALE, DUTCH_AUCTION } = CROWDSALE_STRATEGIES
 
-@inject('crowdsaleStore', 'contractStore')
+@inject('crowdsaleStore', 'contractStore', 'web3Store')
 @observer
-export class stepOne extends React.Component {
-  /**
-   * Function that handle configuration, update our state and prepare for first render
-   */
-  componentWillMount() {
-    logger.log('CrowdsaleStore strategy', this.props.crowdsaleStore.strategy)
+export class stepOne extends Component {
+  state = {
+    loading: false,
+    strategy: null
+  }
+
+  async componentDidMount() {
+    const { crowdsaleStore, web3Store } = this.props
+    await checkWeb3(web3Store.web3)
+
+    this.setState({ loading: true })
+    logger.log('CrowdsaleStore strategy', crowdsaleStore.strategy)
 
     // Set default value
-    if (this.props.crowdsaleStore && !this.props.crowdsaleStore.strategy) {
-      this.props.crowdsaleStore.setProperty('strategy', MINTED_CAPPED_CROWDSALE)
+    if (crowdsaleStore && !crowdsaleStore.strategy) {
+      crowdsaleStore.setProperty('strategy', MINTED_CAPPED_CROWDSALE)
     }
+
+    this.setState({
+      loading: false,
+      strategy: crowdsaleStore.strategy
+    })
   }
 
   /**
    * Handle radio input and set value for strategy
    * @param e
    */
   handleChange = e => {
-    this.props.crowdsaleStore.setProperty('strategy', e.currentTarget.value)
-    logger.log('CrowdsaleStore strategy selected:', e.currentTarget.value)
+    const { crowdsaleStore } = this.props
+    const strategy = e.currentTarget.value
+
+    crowdsaleStore.setProperty('strategy', strategy)
+    this.setState({
+      strategy: crowdsaleStore.strategy
+    })
+    logger.log('CrowdsaleStore strategy selected:', strategy)
   }
 
   /**
@@ -47,7 +66,7 @@ export class stepOne extends React.Component {
   render() {
     const { contractStore } = this.props
 
-    let status = contractStore && contractStore.downloadStatus === DOWNLOAD_STATUS.SUCCESS && localStorage.length > 0
+    let status = (contractStore && contractStore.downloadStatus === DOWNLOAD_STATUS.SUCCESS) || localStorage.length > 0
 
     return (
       <section className="steps steps_crowdsale-contract">
@@ -65,7 +84,7 @@ export class stepOne extends React.Component {
                 value={MINTED_CAPPED_CROWDSALE}
                 name="contract-type"
                 type="radio"
-                checked={this.props.crowdsaleStore.strategy === MINTED_CAPPED_CROWDSALE}
+                checked={this.state.strategy === MINTED_CAPPED_CROWDSALE}
                 onChange={this.handleChange}
               />
               <span className="title">{CROWDSALE_STRATEGIES_DISPLAYNAMES.MINTED_CAPPED_CROWDSALE}</span>
@@ -79,7 +98,7 @@ export class stepOne extends React.Component {
                 value={DUTCH_AUCTION}
                 name="contract-type"
                 type="radio"
-                checked={this.props.crowdsaleStore.strategy === DUTCH_AUCTION}
+                checked={this.state.strategy === DUTCH_AUCTION}
                 onChange={this.handleChange}
               />
               <span className="title">{CROWDSALE_STRATEGIES_DISPLAYNAMES.DUTCH_AUCTION}</span>
@@ -92,6 +111,7 @@ export class stepOne extends React.Component {
             <ButtonContinue status={status} />
           </Link>
         </div>
+        <Loader show={this.state.loading} />
       </section>
     )
   }