LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

updated progress bar to store data not jsx

Browse source
This commit is contained in:
bill bittner 2018-01-18 14:53:10 -08:00
parent e663460c87
commit ae86d3dfa2
2 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
react/components/ProgressBar.jsx
View file

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
function ActiveBar () { function ActiveBar () {
return <span className="progress-bar progress-bar--active">| </span>; return <span className="progress-bar progress-bar--active">| </span>;
@ -17,22 +18,24 @@ class ProgressBar extends React.Component {
index : 0, index : 0,
incrementer: 1, incrementer: 1,
}; };
this.createBars = this.createBars.bind(this);
this.startProgressBar = this.startProgressBar.bind(this); this.startProgressBar = this.startProgressBar.bind(this);
this.updateProgressBar = this.updateProgressBar.bind(this); this.updateProgressBar = this.updateProgressBar.bind(this);
this.stopProgressBar = this.stopProgressBar.bind(this); this.stopProgressBar = this.stopProgressBar.bind(this);
} }
componentDidMount () { componentDidMount () {
const bars = []; this.createBars();
for (let i = 0; i <= this.state.size; i++) { this.startProgressBar();
bars.push(<InactiveBar key={i} />);
}
this.setState({ bars });
} }
componentWillUnmount () { componentWillUnmount () {
this.stopProgressBar(); this.stopProgressBar();
} }
componentDidMount () { createBars () {
this.startProgressBar(); const bars = [];
for (let i = 0; i <= this.props.size; i++) {
bars.push({isActive: false});
}
this.setState({ bars });
} }
startProgressBar () { startProgressBar () {
this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300); this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
@ -42,15 +45,15 @@ class ProgressBar extends React.Component {
let incrementer = this.state.incrementer; let incrementer = this.state.incrementer;
let bars = this.state.bars; let bars = this.state.bars;
// flip incrementer if necessary, to stay in bounds // 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; incrementer = incrementer * -1;
index += incrementer; index += incrementer;
} }
// update the indexed value // update the indexed bar
if (incrementer > 0) { if (incrementer > 0) {
bars[index] = <ActiveBar key={index} />; bars[index].isActive = true;
} else { } else {
bars[index] = <InactiveBar key={index} />; bars[index].isActive = false;
}; };
// increment index // increment index
index += incrementer; index += incrementer;
@ -67,10 +70,14 @@ class ProgressBar extends React.Component {
render () { render () {
return ( return (
<div> <div>
{this.state.bars} {this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index}/> )}
</div> </div>
); );
} }
}; };
ProgressBar.propTypes = {
size: PropTypes.number.isRequired,
};
export default ProgressBar; export default ProgressBar;

2
react/components/PublishStatus.jsx
View file

@ -23,7 +23,7 @@ function PublishStatus ({ status, message }) {
{(status === publishStates.PUBLISHING) && {(status === publishStates.PUBLISHING) &&
<div className="row align-content-center"> <div className="row align-content-center">
<p>Upload complete. Your file is now being published on the blockchain...</p> <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> <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> </div>
} }