React/Redux - publish component #323
|
|
@ -1,4 +1,5 @@
|
|||
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
|
||||
function ActiveBar () {
|
||||
return <span className="progress-bar progress-bar--active">| </span>;
|
||||
|
|
@ -17,22 +18,24 @@ class ProgressBar extends React.Component {
|
|||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
index : 0,
|
||||
incrementer: 1,
|
||||
};
|
||||
this.createBars = this.createBars.bind(this);
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
this.startProgressBar = this.startProgressBar.bind(this);
|
||||
this.updateProgressBar = this.updateProgressBar.bind(this);
|
||||
this.stopProgressBar = this.stopProgressBar.bind(this);
|
||||
}
|
||||
componentDidMount () {
|
||||
const bars = [];
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
for (let i = 0; i <= this.state.size; i++) {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
bars.push(<InactiveBar key={i} />);
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
}
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
this.setState({ bars });
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
this.createBars();
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
this.startProgressBar();
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
}
|
||||
componentWillUnmount () {
|
||||
this.stopProgressBar();
|
||||
}
|
||||
componentDidMount () {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
this.startProgressBar();
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
createBars () {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
const bars = [];
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
for (let i = 0; i <= this.props.size; i++) {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
bars.push({isActive: false});
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
}
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
this.setState({ bars });
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
}
|
||||
startProgressBar () {
|
||||
this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
|
||||
|
|
@ -42,15 +45,15 @@ class ProgressBar extends React.Component {
|
|||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
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)) {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
if ((index < 0) || (index > this.props.size)) {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
incrementer = incrementer * -1;
|
||||
index += incrementer;
|
||||
}
|
||||
// update the indexed value
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
// update the indexed bar
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
if (incrementer > 0) {
|
||||
bars[index] = <ActiveBar key={index} />;
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
bars[index].isActive = true;
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
} else {
|
||||
bars[index] = <InactiveBar key={index} />;
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
bars[index].isActive = false;
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
};
|
||||
// increment index
|
||||
index += incrementer;
|
||||
|
|
@ -67,10 +70,14 @@ class ProgressBar extends React.Component {
|
|||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
{this.state.bars}
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
{this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index}/> )}
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
ProgressBar.propTypes = {
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
size: PropTypes.number.isRequired,
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
};
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
|
||||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
export default ProgressBar;
|
||||
|
|
|
|||
|
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
What is the What is the `|` doing here?
It looks as if its seeding the progress visually, is that correct? It looks as if its seeding the progress visually, is that correct?
Instead of adding react elements to state, just store the data. Then in the Instead of adding react elements to state, just store the data.
Then in the `render` function, you can do
`this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index} />)`
Yes, I am rendering the Yes, I am rendering the `|`s for the progress bars
|
||||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
What is the
|doing here?