How do you reset a loading bar in react JS? - reactjs

Question

Just a quick problem here. Was finishing a project that I had asked before about here (How to pass values between components in React JS?) and had another question. In the machine component here I need a loading bar, and the teacher showed us this as an example: https://codepen.io/AaronCoding/pen/GjVaGp. I have modified it so it works when values are pressed rather than off a button press but I need it to reset so when the user presses another button it "loads" again. I have tried resting the progress variable to 0 but that just seems to cause the loading bar to get stuck in a loop.
import React, { Component } from 'react';
class CoffeeMachine extends Component {
state = {
brewing: "Now Brewing: Nothing",
progress: 0,
speed: 1,
color: "#ff0050",
frame: this.frame.bind(this),
green: this.green.bind(this),
red: this.red.bind(this)
}
frame() {
if (this.state.progress < 100){
this.setState((prevState, props) => ({
progress: prevState.progress + this.state.speed,
color: "#" + this.red() + this.green() + "50"
}));
console.log(this.state.color);
}
}
componentWillUnmount() {
clearInterval(this.interval);
}
green() {
let progress = this.state.progress;
progress *= 2.55;
progress = Math.round(progress);
progress = progress.toString(16);
return progress;
}
red() {
let progress = this.state.progress;
progress *= 2.55;
progress = Math.round(progress);
progress = 255 - progress;
progress = progress.toString(16);
return progress;
}
brewCoffee() {
this.setState({brewing: "Now brewing: " + this.props.coffee})
setTimeout(() => {this.brewingComplete()}, 5000);
this.interval = setInterval(() => this.frame(), 50);
}
brewingComplete() {
this.setState({brewing: this.props.coffee + " is done"})
setTimeout(() => {this.brewingComplete()}, 5000);
}
componentWillUpdate(nextProps,nextState) {
if (this.props.coffee !== null && this.state === nextState) {
setTimeout(() => {this.brewCoffee()}, 3000);
}
}
render(){
return(
<div>
{ this.state.brewing}
<div id="myBar" style={{
width: this.state.progress + "%",
backgroundColor: this.state.color
}}>
<div id="label">Loaded {this.state.progress}%</div>
</div>
</div>
)
}
}
export default CoffeeMachine;

Answer 1

In your componentWillUpdate() make sure no brewing is running by checking if progress is equal to zero.
You should also check if the choice of coffee to brew has changed in there.
Then you may clear the interval and set the progress to zero.
Make sure you say brewing is done when it is really done because the timeout for that continues running.
Also, you can't bind your methods in the state. You may bind them directly by using fat arrows or bind them in the constructor (old fashioned).
I would also advise to store brewingDelay and brewingTime in a const as they are used several times for matters that must be "synchronized".
import React, { Component } from "react";
const brewingDelay = 2000;
const brewingTime = 5000;
const initialColor = "#ff0050";
class CoffeeMachine extends Component {
state = {
brewing: "Now Brewing: Nothing",
progress: 0,
speed: 1,
color: initialColor,
frame: null,
green: null,
red: null
};
frame = () => {
if (this.state.progress < 100) {
this.setState((prevState, props) => ({
progress: prevState.progress + this.state.speed,
color: "#" + this.red() + this.green() + "50"
}));
console.log(this.state.color);
}
};
componentWillUnmount() {
clearInterval(this.interval);
}
green = () => {
let progress = this.state.progress;
progress *= 2.55;
progress = Math.round(progress);
progress = progress.toString(16);
return progress;
};
red = () => {
let progress = this.state.progress;
progress *= 2.55;
progress = Math.round(progress);
progress = 255 - progress;
progress = progress.toString(16);
return progress;
};
brewCoffee = () => {
this.setState({ brewing: "Now brewing: " + this.props.coffee });
setTimeout(() => {
this.brewingComplete();
}, brewingTime);
this.interval = setInterval(() => this.frame(), 50);
};
brewingComplete = () => {
if (this.state.progress >= 99)
this.setState({ brewing: this.props.coffee + " is done" });
setTimeout(() => {
this.brewingComplete();
}, brewingTime);
};
componentWillUpdate(nextProps, nextState) {
if (
this.props.coffee !== undefined &&
nextProps.coffee !== this.props.coffee &&
this.state.progress !== 0
) {
clearInterval(this.interval);
setTimeout(() => {
this.setState({ progress: 0, color: initialColor }, () => {});
}, brewingDelay);
}
if (this.props.coffee !== null && this.state === nextState) {
setTimeout(() => {
this.brewCoffee();
}, brewingDelay);
}
}
render() {
return (
<div>
{this.state.brewing}
<div
id="myBar"
style={{
width: this.state.progress + "%",
backgroundColor: this.state.color
}}
>
<div id="label">Loaded {this.state.progress}%</div>
</div>
</div>
);
}
}
class ParentChoice extends React.PureComponent {
state = {};
render() {
return (
<React.Fragment>
<button onClick={() => this.setState({ coffee: "Arabica" })}>
Arabica
</button>
<button onClick={() => this.setState({ coffee: "Robusta" })}>
Robusta
</button>
<CoffeeMachine coffee={this.state.coffee} />
</React.Fragment>
);
}
}
export default ParentChoice;