You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.6 KiB
73 lines
1.6 KiB
import { Component } from "react"; |
|
|
|
export default class Timer extends Component { |
|
constructor(props) { |
|
super(props); |
|
this.state = { |
|
time: { |
|
h: 0, |
|
m: 0, |
|
s: 0, |
|
}, |
|
seconds : props.seconds, |
|
flag: true, |
|
}; |
|
this.timer = 0; |
|
this.startTimer = this.startTimer.bind(this); |
|
this.countDown = this.countDown.bind(this); |
|
} |
|
|
|
secondsToTime(secs) { |
|
let hours = Math.floor(secs / (60 * 60)); |
|
|
|
let divisor_for_minutes = secs % (60 * 60); |
|
let minutes = Math.floor(divisor_for_minutes / 60); |
|
|
|
let divisor_for_seconds = divisor_for_minutes % 60; |
|
let seconds = Math.ceil(divisor_for_seconds); |
|
|
|
let obj = { |
|
h: hours, |
|
m: minutes, |
|
s: seconds, |
|
}; |
|
return obj; |
|
} |
|
|
|
componentDidMount() { |
|
this.startTimer(); |
|
let timeLeftVar = this.secondsToTime(this.state.seconds); |
|
this.setState({ time: timeLeftVar }); |
|
} |
|
|
|
startTimer() { |
|
if (this.timer === 0 && this.state.seconds > 0) { |
|
this.timer = setInterval(this.countDown, 1000); |
|
} |
|
} |
|
|
|
countDown = async () => { |
|
// Remove one second, set state so a re-render happens. |
|
let seconds = this.state.seconds - 1; |
|
this.setState({ |
|
time: this.secondsToTime(seconds), |
|
seconds: seconds, |
|
}); |
|
if (seconds === 0) { |
|
this.props.refresh(true); |
|
} |
|
}; |
|
|
|
componentWillUnmount() { |
|
clearInterval(this.timer); |
|
} |
|
render() { |
|
return ( |
|
<> |
|
<div className="timer text-greenBA text-sm lg:text-tiny inline"> |
|
{this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''} |
|
</div> |
|
</> |
|
); |
|
} |
|
}
|
|
|