Show one progress bar for each peer.

client/components/ProgressBar.js

@@ -10,7 +10,8 @@ export default class ProgressBar extends React.Component {
   render() {
     const failed = this.props.value < 0;
     const classes = classnames('progress-bar', {
-      'progress-bar-failed': failed
+      'progress-bar-failed': failed,
+      'progress-bar-small': this.props.small
     })
 
     const formatted = formatProgress(this.props.value)
@@ -30,5 +31,10 @@ export default class ProgressBar extends React.Component {
 }
 
 ProgressBar.propTypes = {
-  value: React.PropTypes.number.isRequired
+  value: React.PropTypes.number.isRequired,
+  small: React.PropTypes.boolean
+}
+
+ProgressBar.defaultProps = {
+  small: false
 }

client/components/UploadPage.js

@@ -1,5 +1,6 @@
 import Spinner from './Spinner'
 import DropZone from './DropZone'
+import ProgressBar from './ProgressBar'
 import React from 'react'
 import Tempalink from './Tempalink'
 import UploadActions from '../actions/UploadActions'
@@ -59,6 +60,17 @@ export default class UploadPage extends React.Component {
         </div>
 
       case 'uploading':
+        var keys = Object.keys(this.state.peerProgress)
+        var numInProgress = 0
+        var numCompleted = 0
+        for (var k = 0; k < keys.length; k++) {
+          if (this.state.peerProgress[keys[k]] < 1) {
+            numInProgress++
+          } else {
+            numCompleted++
+          }
+        }
+
         return <div className="page">
 
           <Spinner dir="up" animated {...this.state.file} />
@@ -68,8 +80,9 @@ export default class UploadPage extends React.Component {
           <p>This link will work as long as this page is open.</p>
 
           <div className="data">
-            <div className="datum"><strong>In Progress:</strong> {this.state.inProgress}</div>
-            <div className="datum"><strong>Completed:</strong> {this.state.completed}</div>
+            { Object.keys(this.state.peerProgress).map((key) => {
+              return <ProgressBar value={this.state.peerProgress[key]} small />
+            })}
           </div>
 
         </div>

client/stores/UploadStore.js

@@ -12,7 +12,6 @@ export default alt.createStore(class UploadStore {
     this.status = 'ready'
     this.token = null
     this.file = null
-
     this.peerProgress = {}
   }
 
@@ -44,7 +43,6 @@ export default alt.createStore(class UploadStore {
     let i = 0
 
     let sendNextChunk = () => {
-      this.peerProgress[peerID] = i/totalChunks
       if (i === totalChunks) return
       let packet = this.file.getChunk(i)
       conn.send(packet)
@@ -52,42 +50,18 @@ export default alt.createStore(class UploadStore {
       this.peerProgress[peerID] = i/totalChunks
     }
 
-    let numInProgess = () => {
-      var keys = Object.keys(this.peerProgress)
-      var num = 0
-      for (var k = 0; k < keys.length; k++) {
-        if (this.peerProgress[keys[k]] < 1) {
-          num++
-        }
-      }
-      return num
-    }
-
-    let numCompleted = () => {
-      var keys = Object.keys(this.peerProgress)
-      var num = 0
-      for (var k = 0; k < keys.length; k++) {
-        if (this.peerProgress[keys[k]] == 1) {
-          num++
-        }
-      }
-      return num
-    }
-
     conn.on('open', () => {
       sendNextChunk()
-      this.setState({ inProgress: numInProgess()})
+      this.setState({ peerProgress: this.peerProgress })
     })
 
     conn.on('data', (data) => {
       if (data === 'more') sendNextChunk()
+      this.setState({ peerProgress: this.peerProgress })
     })
 
     conn.on('close', () => {
-      this.setState({
-        inProgress: numInProgess(),
-        completed: numCompleted()
-      })
+      this.setState({ peerProgress: this.peerProgress })
     })
   }
 

css/index.styl

@@ -199,4 +199,15 @@ p {
             margin-right: 0
         }
     }
+
+    &.progress-bar-small {
+        height: 30px
+        width: 50%
+        margin: 8px auto
+        border-radius: 5px
+
+        .progress-bar-text {
+            line-height: 30px
+        }
+    }
 }