import React from 'react';
import { connect } from 'react-redux';
import TimerComponent from '../components/TimerComponent';
import { setTime, startBreak, finishBreak, startTimer, finishTimer, tickTimer, skipTimer, pauseTimer, resumeTimer } from '../actions/TimerActions';
import { createNewTask } from '../actions/TaskActions';
import { transformTimeFromSeconds, createNowDate } from '../utils/DateTime';
import { CONST } from '../constants/TimerConstants';
import Timer from '../utils/Timer';
class TimerContainer extends React.Component {
constructor(props) {
super(props);
this.timer = new Timer(0, this.props.timeout);
this.notification = new Audio('notification.mp3');
this.mount = true;
}
componentWillMount() {
this.mount = true;
console.log(this.mount);
}
componentWillUnmount() {
this.mount = false;
console.log(this.mount);
}
startTimer(e) {
this.props.start();
this.timer.start(this.updateTime.bind(this));
}
startBreak(e) {
this.props.startBreak();
this.timer.start(this.updateTime.bind(this))
}
finishTimer() {
this.notification.play();
this.props.finish();
this.timer.setTime(this.props.shortBreak);
this.props.newTask(
'test',
this.props.sessionTime,
createNowDate()
);
}
finishBreak() {
this.props.finishBreak();
this.timer.setTime(this.props.timeout);
}
tickTimer() {
this.props.tickTimer();
}
skipTimer(e) {
this.props.skip();
this.timer.stop();
this.timer.setTime(this.props.timeout);
}
pauseTimer(e) {
this.props.pause();
this.timer.pause();
}
resumeTimer() {
this.props.resume();
this.timer.resume();
}
updateTime(time) {
if(time === 0) this.props.prevStatus === CONST.START_TIMER ? this.finishTimer() : this.finishBreak();
if(this.mount) this.forceUpdate();
}
getTimePrecent() {
return (this.timer.getFullTime() - this.timer.getCurrentTime()) * 100 / this.timer.getFullTime();
}
render() {
var time = this.props.status === CONST.TICK_TIMER ? this.timer.getCurrentTime() : this.timer.getFullTime();
var percent = this.getTimePrecent();
return (
<TimerComponent
status={this.props.status}
time={time}
percent={percent}
startTimer={this.startTimer.bind(this)}
skipTimer={this.skipTimer.bind(this)}
pauseTimer={this.pauseTimer.bind(this)}
resumeTimer={this.resumeTimer.bind(this)}
startBreak={this.startBreak.bind(this)}
/>
);
}
}
const mapStateToProps = ({ timer, settings }) => ({
status: timer.status,
prevStatus: timer.prevStatus,
timeout: settings.timeout,
shortBreak: settings.shortBreak
});
const mapDispatchToProps = (dispatch) => ({
start: () => dispatch(startTimer()),
finish: () => dispatch(finishTimer()),
tickTimer: () => dispatch(tickTimer()),
skip: () => dispatch(skipTimer()),
pause: () => dispatch(pauseTimer()),
resume: () => dispatch(resumeTimer()),
startBreak: () => dispatch(startBreak()),
finishBreak: () => dispatch(finishBreak()),
newTask: (name, time, date) => dispatch(createNewTask(name, time, date))
});
export default connect(mapStateToProps, mapDispatchToProps)(TimerContainer);export default class Timer {
constructor(currentTime, fullTime) {
this.fullTime = fullTime;
this.currentTime = currentTime;
this.interval = undefined;
this.callBackTime = undefined;
}
start(callBackTime) {
this.currentTime = this.fullTime;
this.callBackTime = callBackTime;
this.interval = setInterval(this.update.bind(this), 1000);
}
setTime(time) {
this.fullTime = time;
this.currentTime = 0;
}
update() {
if(this.currentTime === 0) this.stop();
else this.currentTime--;
this.callBackTime(this.currentTime);
}
stop() {
clearInterval(this.interval);
this.currentTime = 0;
this.fullTime = 0;
}
pause() {
clearInterval(this.interval);
}
resume() {
this.interval = setInterval(this.update.bind(this), 1000);
}
getFullTime() {
return this.fullTime;
}
getCurrentTime() {
return this.currentTime;
}
}update() {
if(this.currentTime === 0) this.stop();
else this.currentTime--;
this.callBackTime(this.currentTime);
}