From ae86d3dfa2aecf8e96b91102fd34327edd6e6921 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 18 Jan 2018 14:53:10 -0800
Subject: [PATCH] updated progress bar to store data not jsx
---
react/components/ProgressBar.jsx | 31 ++++++++++++++++++------------
react/components/PublishStatus.jsx | 2 +-
2 files changed, 20 insertions(+), 13 deletions(-)
diff --git a/react/components/ProgressBar.jsx b/react/components/ProgressBar.jsx
index 9084a221..33b49182 100644
--- a/react/components/ProgressBar.jsx
+++ b/react/components/ProgressBar.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
function ActiveBar () {
return <span className="progress-bar progress-bar--active">| </span>;
@@ -17,22 +18,24 @@ class ProgressBar extends React.Component {
index : 0,
incrementer: 1,
};
+ this.createBars = this.createBars.bind(this);
this.startProgressBar = this.startProgressBar.bind(this);
this.updateProgressBar = this.updateProgressBar.bind(this);
this.stopProgressBar = this.stopProgressBar.bind(this);
}
componentDidMount () {
- const bars = [];
- for (let i = 0; i <= this.state.size; i++) {
- bars.push(<InactiveBar key={i} />);
- }
- this.setState({ bars });
+ this.createBars();
+ this.startProgressBar();
}
componentWillUnmount () {
this.stopProgressBar();
}
- componentDidMount () {
- this.startProgressBar();
+ createBars () {
+ const bars = [];
+ for (let i = 0; i <= this.props.size; i++) {
+ bars.push({isActive: false});
+ }
+ this.setState({ bars });
}
startProgressBar () {
this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
@@ -42,15 +45,15 @@ class ProgressBar extends React.Component {
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)) {
+ if ((index < 0) || (index > this.props.size)) {
incrementer = incrementer * -1;
index += incrementer;
}
- // update the indexed value
+ // update the indexed bar
if (incrementer > 0) {
- bars[index] = <ActiveBar key={index} />;
+ bars[index].isActive = true;
} else {
- bars[index] = <InactiveBar key={index} />;
+ bars[index].isActive = false;
};
// increment index
index += incrementer;
@@ -67,10 +70,14 @@ class ProgressBar extends React.Component {
render () {
return (
<div>
- {this.state.bars}
+ {this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index}/> )}
</div>
);
}
};
+ProgressBar.propTypes = {
+ size: PropTypes.number.isRequired,
+};
+
export default ProgressBar;
diff --git a/react/components/PublishStatus.jsx b/react/components/PublishStatus.jsx
index c88b6c6b..49673c26 100644
--- a/react/components/PublishStatus.jsx
+++ b/react/components/PublishStatus.jsx
@@ -23,7 +23,7 @@ function PublishStatus ({ status, message }) {
{(status === publishStates.PUBLISHING) &&
<div className="row align-content-center">
<p>Upload complete. Your file is now being published on the blockchain...</p>
- <ProgressBar/>
+ <ProgressBar size={12}/>
<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>
}