Merge c412861 into 33f2b6a

src/App.js

@@ -13,7 +13,7 @@ import {
   Crowdsales
 } from './components/index'
 import NoWeb3 from './components/Common/NoWeb3'
-import CheckIncompleteDeploy from './components/CheckIncompleteDeploy'
+import { ProtectedRoute } from './components/Common/ProtectedRoute'
 import { getAddrFromQuery, toast } from './utils/utils'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import AlertContainer from 'react-alert'
@@ -52,27 +52,15 @@ class App extends Component {
             <Route exact path="/" component={crowdsaleAddr ? Crowdsale : Home} />
             <Web3Provider onChangeAccount={deploymentStore.handleAccountChange} web3UnavailableScreen={NoWeb3}>
               <Switch>
-                <Route path="/1" component={StepOne} />
-                <Route exact path="/crowdsale" component={Crowdsale} />
+                <ProtectedRoute path="/1" component={StepOne} />
+                <ProtectedRoute path="/2" component={StepTwo} />
+                <ProtectedRoute path="/3" component={StepThree} />
+                <Route path="/4" component={StepFour} />
+                <ProtectedRoute exact path="/manage/:crowdsalePointer" component={Manage} />
+                <ProtectedRoute exact path="/crowdsale" component={Crowdsale} />
+                <ProtectedRoute exact path="/stats" component={Stats} />
+                <ProtectedRoute exact path="/crowdsales" component={Crowdsales} />
                 <Route exact path="/contribute" component={Contribute} />
-                <Route exact path="/stats" component={Stats} />
-                <Route exact path="/crowdsales" component={Crowdsales} />
-                <Route>
-                  <Switch>
-                    {/* The route to /4 must be first for the incomplete deploy redirect to work */}
-                    <Route path="/4" component={StepFour} />
-
-                    {deploymentStore.deployInProgress ? (
-                      <CheckIncompleteDeploy />
-                    ) : (
-                      <Switch>
-                        <Route exact path="/manage/:crowdsalePointer" component={Manage} />
-                        <Route path="/2" component={StepTwo} />
-                        <Route path="/3" component={StepThree} />
-                      </Switch>
-                    )}
-                  </Switch>
-                </Route>
               </Switch>
             </Web3Provider>
           </Switch>

src/components/Common/ProtectedRoute.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { inject, observer } from 'mobx-react/index'
+import { Route, Redirect } from 'react-router-dom'
+
+@inject('deploymentStore')
+@observer
+export class ProtectedRoute extends Component {
+  render() {
+    const { component: Component, deploymentStore, ...props } = this.props
+    return (
+      <Route
+        {...props}
+        render={props => (!deploymentStore.deployInProgress ? <Component {...props} /> : <Redirect to="/" />)}
+      />
+    )
+  }
+}

src/components/Crowdsales/index.js

@@ -16,7 +16,7 @@ export class Crowdsales extends Component {
   state = {
     account: null,
     crowdsales: [],
-    loading: true
+    loading: false
   }
 
   constructor(props) {

src/components/Home/CancelCrowdsale.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import logdown from 'logdown'
+import cancelDeploy from '../../utils/cancelDeploy'
+
+const logger = logdown('TW:Home:CancelCrowdsale')
+
+export class CancelCrowdsale extends Component {
+  cancel = () => {
+    logger.log('Cancel crowdsale')
+    cancelDeploy()
+  }
+
+  render() {
+    return (
+      <button onClick={() => this.cancel()} className="hm-Home_BtnChoose">
+        Cancel crowdsale
+      </button>
+    )
+  }
+}

src/components/Home/ChooseCrowdsale.js

@@ -1,21 +1,14 @@
 import React, { Component } from 'react'
 import { navigateTo } from '../../utils/utils'
-import logdown from 'logdown'
-
-const logger = logdown('TW:Home:ChooseCrowdsale')
 
 export class ChooseCrowdsale extends Component {
   goToCrowdsales = () => {
-    try {
-      localStorage.reload = true
-      navigateTo({
-        history: this.props.history,
-        location: 'crowdsales',
-        fromLocation: 'home'
-      })
-    } catch (err) {
-      logger.log('Error to navigate', err)
-    }
+    localStorage.reload = true
+    navigateTo({
+      history: this.props.history,
+      location: 'crowdsales',
+      fromLocation: 'home'
+    })
   }
 
   render() {

src/components/Home/CreateCrowdsale.js

@@ -1,30 +1,14 @@
 import React, { Component } from 'react'
 import { navigateTo } from '../../utils/utils'
-import storage from 'store2'
-import logdown from 'logdown'
-
-const logger = logdown('TW:Home:CreateCrowdsale')
 
 export class CreateCrowdsale extends Component {
   goToStepOne = () => {
-    try {
-      if (storage.has('DeploymentStore') && storage.get('DeploymentStore').deploymentStep) {
-        navigateTo({
-          history: this.props.history,
-          location: 'home',
-          fromLocation: 'home'
-        })
-      } else {
-        localStorage.reload = true
-        navigateTo({
-          history: this.props.history,
-          location: 'stepOne',
-          fromLocation: 'home'
-        })
-      }
-    } catch (err) {
-      logger.log('Error to navigate', err)
-    }
+    localStorage.reload = true
+    navigateTo({
+      history: this.props.history,
+      location: 'stepOne',
+      fromLocation: 'home'
+    })
   }
 
   render() {

src/components/Home/ResumeCrowdsale.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+export class ResumeCrowdsale extends Component {
+  resume = () => {
+    localStorage.reload = true
+    window.location = '/4'
+  }
+
+  render() {
+    return (
+      <button onClick={() => this.resume()} className="hm-Home_BtnNew">
+        Resume crowdsale
+      </button>
+    )
+  }
+}

src/components/Home/index.js

@@ -2,10 +2,16 @@ import React, { Component } from 'react'
 import { LogoPrimary } from '../LogoPrimary/index'
 import { ChooseCrowdsale } from './ChooseCrowdsale'
 import { CreateCrowdsale } from './CreateCrowdsale'
+import { ResumeCrowdsale } from './ResumeCrowdsale'
+import { CancelCrowdsale } from './CancelCrowdsale'
+import { inject, observer } from 'mobx-react/index'
 
+@inject('deploymentStore')
+@observer
 export class Home extends Component {
   render() {
-    const { history } = this.props
+    const { history, deploymentStore } = this.props
+
     return (
       <div>
         <section className={`hm-Home`}>
@@ -26,10 +32,17 @@ export class Home extends Component {
                     Token Wizard is powered by <a href="https://github.com/auth-os/beta">Auth-os</a>.
                   </p>
                 </div>
-                <div className="hm-Home_MainInfoButtonContainer">
-                  <CreateCrowdsale history={history} />
-                  <ChooseCrowdsale history={history} />
-                </div>
+                {deploymentStore.deployInProgress ? (
+                  <div className="hm-Home_MainInfoButtonContainer">
+                    <ResumeCrowdsale history={history} />
+                    <CancelCrowdsale history={history} />
+                  </div>
+                ) : (
+                  <div className="hm-Home_MainInfoButtonContainer">
+                    <CreateCrowdsale history={history} />
+                    <ChooseCrowdsale history={history} />
+                  </div>
+                )}
               </div>
             </div>
           </div>

src/components/LogoWhite/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 
 export const LogoWhite = () => {
-  return <Link className="sw-LogoWhite" to="/" />
+  // eslint-disable-next-line
+  return <a className="sw-LogoWhite" href="/" />
 }

test/App.spec.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Adapter from 'enzyme-adapter-react-15'
 import { configure, mount, render } from 'enzyme'
-import { MemoryRouter } from 'react-router'
+import { Provider } from 'mobx-react'
 import renderer from 'react-test-renderer'
 import { Web3Provider } from '../src/react-web3'
 import { deploymentStore } from '../src/stores'
@@ -23,9 +23,9 @@ describe('App Index', () => {
   it(`should render app screen`, () => {
     // Given
     const component = renderer.create(
-      <MemoryRouter initialEntries={['/']}>
-        <App {...stores} />
-      </MemoryRouter>
+      <Provider {...stores}>
+        <App />
+      </Provider>
     )
 
     // When
@@ -38,9 +38,9 @@ describe('App Index', () => {
   it('renders without crashing', () => {
     // Given
     const wrapper = mount(
-      <MemoryRouter initialEntries={['/']}>
-        <App {...stores} />
-      </MemoryRouter>
+      <Provider {...stores}>
+        <App />
+      </Provider>
     )
 
     // Given
@@ -53,9 +53,9 @@ describe('App Index', () => {
   it('should render screen with render without throwing an error', () => {
     // When
     const wrapper = render(
-      <MemoryRouter initialEntries={['/']}>
-        <App {...stores} />
-      </MemoryRouter>
+      <Provider {...stores}>
+        <App />
+      </Provider>
     )
 
     // Given
@@ -67,7 +67,11 @@ describe('App Index', () => {
 
   it(`should not find web3Provider at home`, () => {
     // Given
-    const wrapper = mount(<App {...stores} />)
+    const wrapper = mount(
+      <Provider {...stores}>
+        <App />
+      </Provider>
+    )
     jest.runTimersToTime(2000)
 
     // When
@@ -76,5 +80,4 @@ describe('App Index', () => {
     // Then
     expect(web3ProviderWrapper).toHaveLength(0)
   })
-
 })

test/components/Common/__snapshots__/StepNavigation.spec.js.snap

@@ -7,7 +7,6 @@ exports[`StepNavigation should render StepNavigation component 1`] = `
   <a
     className="sw-LogoWhite"
     href="/"
-    onClick={[Function]}
   />
   <div
     className="st-StepNavigation_Container"

test/components/Home/CancelCrowdsale.spec.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import Adapter from 'enzyme-adapter-react-15'
+import { configure, mount, shallow, render } from 'enzyme'
+import { MemoryRouter } from 'react-router'
+import { CancelCrowdsale } from '../../../src/components/Home/CancelCrowdsale'
+
+configure({ adapter: new Adapter() })
+
+describe('CancelCrowdsale', () => {
+  const history = {
+    push: jest.fn()
+  }
+
+  it('should render screen with shallow without throwing an error', () => {
+    const wrapper = shallow(<CancelCrowdsale />)
+
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should render screen with mount without throwing an error', () => {
+    // Given
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/']}>
+        <CancelCrowdsale />
+      </MemoryRouter>
+    )
+
+    // When
+    const tree = wrapper.find('.hm-Home_BtnChoose')
+
+    // Then
+    expect(tree).toHaveLength(1)
+  })
+
+  it('should render screen with render without throwing an error', () => {
+    // Given
+    const wrapper = render(
+      <MemoryRouter initialEntries={['/']}>
+        <CancelCrowdsale />
+      </MemoryRouter>
+    )
+    // When
+    const tree = wrapper.html()
+
+    // Then
+    expect(tree).toMatchSnapshot()
+  })
+
+  it(`should simulate click`, () => {
+    // Given
+    const wrapper = shallow(<CancelCrowdsale history={history} />)
+    const instance = wrapper.instance()
+    const cancelHandler = jest.spyOn(instance, 'cancel')
+    instance.forceUpdate()
+    // When
+    const buttonCancelCrowdsale = wrapper.find('.hm-Home_BtnChoose')
+    buttonCancelCrowdsale.simulate('click')
+
+    // Then
+    expect(buttonCancelCrowdsale.length).toBe(1)
+    expect(cancelHandler).toHaveBeenCalledTimes(1)
+  })
+})