Permalink
Browse files

Make use of the timer

I had to change the API a bit so I can start and stop timers on
page transitions. Not really satisfied with the API but that's always
the case when I'm writing code.
  • Loading branch information...
lucapette committed Mar 13, 2017
1 parent 24d680b commit 977a01f338f0dbb79e393e8cc915e8050aae249c
Showing with 70 additions and 36 deletions.
  1. +28 −22 src/Layout.js
  2. +18 −8 src/timer.js
  3. +24 −6 src/timer.test.js
View
@@ -1,48 +1,54 @@
//@flow
-import React, { Component } from "react"
-import { Segment } from "semantic-ui-react"
+import React, { Component } from 'react'
+import { Segment } from 'semantic-ui-react'
-import ContentPanel from "./ContentPanel"
-import ProgressPanel from "./ProgressPanel"
-import ControlPanel from "./ControlPanel"
+import Timer from './timer'
-type Page = 'home' | 'run';
+import ContentPanel from './ContentPanel'
+import ProgressPanel from './ProgressPanel'
+import ControlPanel from './ControlPanel'
+
+type Page = 'home' | 'run' | 'rest';
export default class Layout extends Component {
state: {
page: Page;
progress?: number;
};
+ timer: Timer;
+
constructor() {
super();
this.state = {
- page: "home"
+ page: 'home'
}
+
+ this.timer = new Timer();
+ this.timer.on('tick', this.tick);
+ this.timer.on('done', this.startBreak);
}
tick = (progress : number) => {
this.setState({progress});
}
- startTimer = (minutes : number = 1) => {
- var start = Date.now();
- var total = minutes * 60;
-
- setInterval(() => {
- var elapsed = Math.floor((Date.now() - start) / 1000);
-
- if (elapsed >= total || this.props.page === "home") {
- return
- } else {
- this.tick(Math.floor((elapsed/total) * 100));
- }
- }, 1000);
+ startBreak = () => {
+ this.changePage('rest');
}
changePage = (page : Page) => {
- if (page === "run") {
- this.startTimer();
+ if (this.timer.isRunning()) {
+ this.timer.stop();
+ }
+
+ switch(page) {
+ case 'run':
+ this.timer.start();
+ break;
+ case 'rest':
+ this.timer.start(300);
+ break;
}
this.setState({page})
View
@@ -1,34 +1,33 @@
//@flow
type CallbackType = 'tick' | 'done';
-type Callback = (number | void) => void;
+type Callback = (any) => void;
export default class Timer {
- seconds: number;
callbacks: Map<CallbackType, Callback>;
+ interval: number;
- constructor(seconds: number = 25 * 60) {
- this.seconds = seconds;
+ constructor() {
this.callbacks = new Map();
}
- start() {
+ start(seconds: number = 25 * 60) {
let start = Date.now();
let elapsed = 0;
let lastElapsed = 0;
- setInterval(() => {
+ this.interval = setInterval(() => {
elapsed = Math.floor((Date.now() - start) / 1000);
if (elapsed != lastElapsed) {
lastElapsed = elapsed;
let callback = this.callbacks.get('tick');
if (callback) {
- callback(Math.floor((elapsed/this.seconds) * 100));
+ callback(Math.floor((elapsed/seconds) * 100));
}
}
- if (elapsed >= this.seconds) {
+ if (elapsed >= seconds) {
let callback = this.callbacks.get('done');
if (callback) {
callback();
@@ -38,6 +37,17 @@ export default class Timer {
}, 1000);
}
+ stop() {
+ if (this.interval) {
+ clearInterval(this.interval);
+ }
+ }
+
+ isRunning() {
+ return this.interval != undefined;
+ }
+
+
on(type : CallbackType, callback : Callback) {
this.callbacks.set(type, callback);
}
View
@@ -9,29 +9,47 @@ beforeEach(() => {
});
test('it ticks correctly', () => {
- var timer = new Timer(1);
+ var timer = new Timer();
const tick = jest.fn();
timer.on('tick', tick);
- timer.start();
+ timer.start(1);
jest.runTimersToTime(1000);
- expect(tick.mock.calls.length).toBe(1);
+ expect(tick).toHaveBeenCalledTimes(1);
});
test('it finishes correctly', () => {
- var timer = new Timer(1);
+ var timer = new Timer();
const done = jest.fn();
timer.on('done', done);
- timer.start();
+ timer.start(1);
jest.runTimersToTime(1000);
- expect(done.mock.calls.length).toBe(1);
+ expect(done).toHaveBeenCalledTimes(1);
+});
+
+test('it stops correctly', () => {
+ var timer = new Timer();
+
+ const tick = jest.fn();
+
+ timer.on('tick', tick);
+
+ timer.start(2);
+
+ jest.runTimersToTime(1000);
+
+ timer.stop();
+
+ jest.runTimersToTime(1000);
+
+ expect(tick).toHaveBeenCalledTimes(1);
});

0 comments on commit 977a01f

Please sign in to comment.