updated progress bar

public/assets/js/constants.js

@@ -1 +0,0 @@
-const EMAIL_FORMAT = 'ERROR_EMAIL_FORMAT';

public/assets/js/dropzoneFunctions.js

@@ -1,2 +0,0 @@
-
-

public/assets/js/generalFunctions.js

@@ -39,27 +39,6 @@ function postRequest (url, params) {
     })
 }
 
-function toggleSection(event){
-	event.preventDefault();
-
-	var dataSet = event.target.dataset;
-	var status = dataSet.open;
-	var masterElement = document.getElementById(event.target.id||event.srcElement.id);
-	var slaveElement = document.getElementById(dataSet.slaveelementid);
-	var closedLabel = dataSet.closedlabel;
-	var openLabel = dataSet.openlabel;
-
-	if (status === "false") {
-		slaveElement.hidden = false;
-		masterElement.innerText = openLabel;
-		masterElement.dataset.open = "true";
-	} else {
-		slaveElement.hidden = true;
-		masterElement.innerText = closedLabel;
-		masterElement.dataset.open = "false";
-	}
-}
-
 function createProgressBar(element, size){
 	var x = 0;
 	var adder = 1;

public/assets/js/publishFileFunctions.js

@@ -1,37 +0,0 @@
-var stagedFiles = null;
-
-const publishFileFunctions = {
-    // Validate the publish submission and then trigger upload
-    showUploadStartedMessage: function (){
-        console.log('starting upload');
-        // hide the publish tool
-        this.hidePublishTools();
-        // show the progress status and animation
-        this.showPublishStatus();
-        this.showPublishProgressBar();
-    },
-    showUploadProgressMessage: function (percentage){
-        this.updatePublishStatus('<p>File is loading to server</p>');
-        this.updateUploadPercent('<p class="blue">' + percentage + '% </p>');
-    },
-    showFilePublishUpdate: function (msg) {
-        this.updatePublishStatus('<p>' + msg + '</p>');
-        this.updateUploadPercent('<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>');
-    },
-    showFilePublishFailure: function (msg){
-        this.updatePublishStatus('<p>Something went wrong...</p><p><strong>' + msg + '</strong></p><p>For help, post the above error text in the #speech channel on the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a>');
-        this.hidePublishProgressBar();
-        this.hideUploadPercent();
-    },
-    showFilePublishComplete: function (msg) {
-        console.log('Publish complete!');
-        const showUrl = msg.lbryTx.claim_id + "/" + msg.name;
-        // update status
-        this.updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
-        this.updateUploadPercent('<p><a class="link--primary" target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>')
-        // redirect the user
-        window.location.href = showUrl;
-    },
-}
-
-

react/components/ProgressBar.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+function ActiveBar () {
+  return <span className="progress-bar progress-bar--active">| </span>;
+}
+
+function InactiveBar () {
+  return <span className="progress-bar progress-bar--inactive">| </span>;
+}
+
+class ProgressBar extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      size       : 12,
+      bars       : [],
+      index      : 0,
+      incrementer: 1,
+    };
+    this.startProgressBar = this.startProgressBar.bind(this);
+    this.updateProgressBar = this.updateProgressBar.bind(this);
+    this.stopProgressBar = this.stopProgressBar.bind(this);
+  }
+  componentWillMount () {
+    const bars = [];
+    for (let i = 0; i <= this.state.size; i++) {
+      bars.push(<InactiveBar key={i} />);
+    }
+    this.setState({ bars });
+  }
+  componentWillUnmount () {
+    this.stopProgressBar();
+  }
+  componentDidMount () {
+    this.startProgressBar();
+  }
+  startProgressBar () {
+    this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
+  };
+  updateProgressBar () {
+    let index = this.state.index;
+    let incrementer = this.state.incrementer;
+    let bars = this.state.bars;
+    // flip incrementer if necessary, to stay in bounds
+    if ((index < 0) || (index > this.state.size)) {
+      incrementer = incrementer * -1;
+      index += incrementer;
+    }
+    // update the indexed value
+    if (incrementer > 0) {
+      bars[index] = <ActiveBar key={index} />;
+    } else {
+      bars[index] = <InactiveBar key={index} />;
+    };
+    // increment index
+    index += incrementer;
+    // update state
+    this.setState({
+      bars,
+      incrementer,
+      index,
+    });
+  };
+  stopProgressBar () {
+    clearInterval(this.updateInterval);
+  };
+  render () {
+    return (
+      <div>
+        {this.state.bars}
+      </div>
+    );
+  }
+};
+
+export default ProgressBar;

react/components/PublishStatus.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ProgressBar from '../components/ProgressBar.jsx';
 
 const LOAD_START = 'LOAD_START';
 const LOADING = 'LOADING';
@@ -26,7 +27,7 @@ function PublishStatus ({ status, message }) {
       {(status === PUBLISHING) &&
       <div className="row align-content-center">
         <p>Upload complete.  Your file is now being published on the blockchain...</p>
-        <p>PROGRESS BAR HERE</p>
+        <ProgressBar/>
         <p>Curious what magic is happening here? <a className="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
       </div>
       }

react/containers/PublishTool.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PreviewDropzone from './Dropzone.jsx';
+import Dropzone from './Dropzone.jsx';
 import PublishForm from './PublishForm.jsx';
 import PublishStatus from '../components/PublishStatus.jsx';
 import {connect} from 'react-redux';
@@ -18,7 +18,7 @@ class PublishTool extends React.Component {
         return <PublishForm />;
       }
     } else {
-      return <PreviewDropzone />;
+      return <Dropzone />;
     }
   }
 };