better ui and sync addition

daviddias · Sep 20, 2016 · de63c1f · de63c1f
1 parent 5926997
commit de63c1f
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 31 deletions.
diff --git a/examples/webui/src/app/actions/buttons.js b/examples/webui/src/app/actions/buttons.js
@@ -4,6 +4,22 @@ import blocks from '../../../../../test/data/real-chain/first-1000-blocks.json'
 const limitedBlocks = blocks.slice(1, 6)
 
 export const SET_CURRENT_HEAD = 'SET_CURRENT_HEAD'
+export const START = 'START_PROCESSING'
+export const STOP = 'STOP_PROCESSING'
+
+export function start (prop) {
+  return {
+    type: START,
+    prop: prop
+  }
+}
+
+export function stop (prop) {
+  return {
+    type: STOP,
+    prop: prop
+  }
+}
 
 export function setCurrentHead (head) {
   return {
@@ -14,8 +30,9 @@ export function setCurrentHead (head) {
 
 export function simulate () {
   return (dispatch, getState, getNode) => {
+    dispatch(start('simulate'))
     return getNode.then((node) => {
-      Promise.all(limitedBlocks.map((raw) => new Promise((resolve, reject) => {
+      return Promise.all(limitedBlocks.map((raw) => new Promise((resolve, reject) => {
         const block = new Block(new Buffer(raw.slice(2), 'hex'))
         node.vm._blockchain.putBlock(block, (err) => {
           if (err) {
@@ -38,24 +55,39 @@ export function simulate () {
 
           resolve(block)
         })
-      })).then((block) => {
-        const head = '0x' + node.vm._blockchain.meta.rawHead.toString('hex')
-        dispatch(setCurrentHead(head))
-      })
+      }))
+      .then(() => updateHead(dispatch, node))
+      .then(() => dispatch(stop('simulate')))
     })
   }
 }
 
 export function sync () {
-  return (dispatch) => {
-    console.log('SYNCING')
-    return Promise.resolve()
+  return (dispatch, getState, getNode) => {
+    dispatch(start('sync'))
+    return getNode.then((node) => {
+      return new Promise((resolve, reject) => {
+        node.block.sync((err) => {
+          if (err) return reject(err)
+          resolve()
+        })
+      })
+      .then(() => updateHead(dispatch, node))
+      .then(() => dispatch(stop('sync')))
+    })
   }
 }
 
 export function star () {
   return (dispatch) => {
+    dispatch(start('star'))
     console.log('STARING')
+    dispatch(stop('star'))
     return Promise.resolve()
   }
 }
+
+function updateHead (dispatch, node) {
+  const head = '0x' + node.vm._blockchain.meta.rawHead.toString('hex')
+  dispatch(setCurrentHead(head))
+}
diff --git a/examples/webui/src/app/components/accounts.js b/examples/webui/src/app/components/accounts.js
@@ -28,7 +28,7 @@ export default class Accounts extends Component {
       <div className='loader'>
         <Spinner size='md' type='primary' />
         <br />
-        Loading your accounts
+        Loading accounts
       </div>
     )
 

diff --git a/examples/webui/src/app/components/blocks.js b/examples/webui/src/app/components/blocks.js
@@ -23,7 +23,7 @@ export default class Blocks extends Component {
       <div className='loader'>
         <Spinner size='md' type='primary' />
         <br />
-        Loading your blocks
+        Loading blocks
       </div>
     )
 

diff --git a/examples/webui/src/app/components/peers.js b/examples/webui/src/app/components/peers.js
@@ -2,6 +2,8 @@ import React, {Component, PropTypes} from 'react'
 import {Col, Glyph, Spinner} from 'elemental'
 import {AutoSizer, List} from 'react-virtualized'
 
+import Hash from './hash'
+
 export default class Peers extends Component {
   static propTypes = {
     feed: PropTypes.array.isRequired
@@ -11,7 +13,7 @@ export default class Peers extends Component {
     const item = this.props.feed[index]
     return (
       <div key={key} style={style} className='peer'>
-        <Glyph icon='chevron-right' /> {item.decapsulate('ipfs').toString()}
+        <Glyph icon='chevron-right' /> <Hash value={item.id.toB58String()} />
       </div>
     )
   }
@@ -21,7 +23,7 @@ export default class Peers extends Component {
       <div className='loader'>
         <Spinner size='md' type='primary' />
         <br />
-        Loading your peers
+        Waiting for peers
       </div>
     )
 

diff --git a/examples/webui/src/app/containers/action-buttons.js b/examples/webui/src/app/containers/action-buttons.js
@@ -1,44 +1,79 @@
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux'
-import {Row, Col, Button, ButtonGroup, Glyph} from 'elemental'
+import {Row, Col, Button, ButtonGroup, Glyph, Spinner} from 'elemental'
 
 import {buttons} from '../actions'
+import Hash from '../components/hash'
 
-class Home extends Component {
+class ActionButtons extends Component {
   static propTypes = {
     simulate: PropTypes.func.isRequired,
     sync: PropTypes.func.isRequired,
-    star: PropTypes.func.isRequired
+    star: PropTypes.func.isRequired,
+    head: PropTypes.string,
+    processing: PropTypes.shape({
+      simulate: PropTypes.bool.isRequired,
+      sync: PropTypes.bool.isRequired,
+      star: PropTypes.bool.isRequired
+    }).isRequired
   };
 
+  _onClick = (prop) => {
+    return () => {
+      this.props[prop]()
+    }
+  }
+
   render () {
+    let head
+
+    if (this.props.head) {
+      head = (
+        <h3 className='current-head'>
+          <em>Head</em> <Hash value={this.props.head} />
+        </h3>
+      )
+    }
     return (
       <Col sm='1' className='action-buttons'>
         <h2 className='title'>
           libp2p <Glyph icon='heart' type='danger' /> ethereum
         </h2>
         <ButtonGroup>
-          <Button type='hollow-primary' onClick={this.props.simulate} >
-            Simulation
+          <Button type='hollow-primary' onClick={this._onClick('simulate')} >
+            {this.props.processing.simulate ?
+             <Spinner type='primary' /> :
+             'Simulation'
+            }
           </Button>
-          <Button type='hollow-primary' onClick={this.props.sync} >
-            Sync
+          <Button type='hollow-primary' onClick={this._onClick('sync')} >
+            {this.props.processing.sync ?
+             <Spinner type='primary' /> :
+             'Sync'
+            }
           </Button>
-          <Button type='hollow-primary' onClick={this.props.star} >
-            <Glyph icon='star' type='primary' />
+          <Button type='hollow-primary' onClick={this._onClick('star')} >
+            {this.props.processing.star ?
+             <Spinner type='primary' /> :
+             <Glyph icon='star' type='primary' />
+            }
           </Button>
         </ButtonGroup>
+        {head}
       </Col>
     )
   }
 }
 
 function mapStateToProps (state) {
-  return {}
+  return {
+    head: state.head,
+    processing: state.processing
+  }
 }
 
 export default connect(mapStateToProps, {
   simulate: buttons.simulate,
   sync: buttons.sync,
   star: buttons.star
-})(Home)
+})(ActionButtons)
diff --git a/examples/webui/src/app/reducers/index.js b/examples/webui/src/app/reducers/index.js
@@ -7,6 +7,7 @@ import transactions from './transactions'
 import peers from './peers'
 import accounts from './accounts'
 import head from './head'
+import processing from './processing'
 
 const rootReducer = combineReducers({
   blocks,
@@ -15,6 +16,7 @@ const rootReducer = combineReducers({
   accounts,
   errors,
   head,
+  processing,
   routing: routerReducer
 })
 

diff --git a/examples/webui/src/app/reducers/peers.js b/examples/webui/src/app/reducers/peers.js
@@ -2,21 +2,29 @@ import {peers as actions} from '../actions'
 import multiaddr from 'multiaddr'
 
 const defaultState = {
-  list: [
-    multiaddr('/ip4/46.5.20.17/tcp/4001/ipfs/QmVqkWPYn5WSgETUdviL63uR62sRT7ZKQHAohanttCgQ5C'),
-    multiaddr('/ip4/127.5.20.17/tcp/4001/ipfs/QmVqkWPYn5WSgETUdviL63uR62sRT7ZKQHAohanttCgQ5C')
-  ]
+  list: []
+}
+
+function filter (list, peer) {
+  return list.filter((p) => {
+    return p.id.toB58String() !== peer.id.toB58String()
+  })
 }
 
 export default function peers (state = defaultState, action) {
   const {type, peer} = action
   switch (type) {
     case actions.ADD_PEER:
-      console.log('add', peer)
-      return state
+      return {
+        list: [
+          ...filter(state.list, peer),
+          peer
+        ]
+      }
     case actions.REMOVE_PEER:
-      console.log('remove', peer)
-      return state
+      return {
+        list: filter(state.list, peer)
+      }
     default:
       return state
   }

diff --git a/examples/webui/src/app/reducers/processing.js b/examples/webui/src/app/reducers/processing.js
@@ -0,0 +1,26 @@
+import {buttons as actions} from '../actions'
+
+const defaultState = {
+  simulate: false,
+  sync: false,
+  star: false
+}
+
+export default function processing (state = defaultState, action) {
+  const {type, prop} = action
+
+  switch (type) {
+    case actions.START:
+      return {
+        ...state,
+       [prop]: true
+      }
+    case actions.STOP:
+      return {
+        ...state,
+        [prop]: false
+      }
+    default:
+      return state
+  }
+}
diff --git a/examples/webui/src/styles/buttons.less b/examples/webui/src/styles/buttons.less
@@ -12,4 +12,10 @@ h2.title {
   .octicon {
     font-size: 1em;
   }
+}
+
+h3.current-head {
+  display: inline;
+  margin-left: 40px;
+  vertical-align: middle;
 }