Allow changing the time interval

zoeesilcock · May 7, 2015 · 389be65 · 389be65
1 parent 378f5fe
commit 389be65
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/actions/timer_actions.js b/src/actions/timer_actions.js
@@ -3,7 +3,8 @@ import Reflux from 'reflux';
 var Actions = Reflux.createActions([
   'start',
   'pause',
-  'reset'
+  'reset',
+  'minutesChanged'
 ]);
 
 export default Actions;
diff --git a/src/components/interval.js b/src/components/interval.js
@@ -1,12 +1,17 @@
 import React from 'react';
 import TimerControl from './timer_control';
 import PeopleActions from '../actions/people_actions';
+import TimerActions from '../actions/timer_actions';
 
 class Interval extends React.Component {
+  handleChange(event) {
+    TimerActions.minutesChanged(event.target.value);
+  }
+
   render() {
     return (
       <div>
-        <input type="text" value={this.props.minutes} />
+        <input type="text" defaultValue={this.props.minutes} onChange={this.handleChange.bind(this)} />
         <TimerControl state={this.props.state} />
       </div>
     );

diff --git a/src/stores/timer_store.js b/src/stores/timer_store.js
@@ -8,7 +8,7 @@ var Store = Reflux.createStore({
 
   init() {
     this.data = {
-      minutes: 0.1,
+      minutes: 30,
       msLeft: 0,
       end: 0,
       state: 'idle' // idle -> running -> paused
@@ -46,6 +46,11 @@ var Store = Reflux.createStore({
     this.trigger();
   },
 
+  onMinutesChanged(minutes) {
+    this.data.minutes = minutes;
+    this.trigger();
+  },
+
   // Internal
 
   scheduleUpdate() {

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,4 +1,7 @@
 .people {
+  list-style: none;
+  padding: 0;
+
   li.active {
     font-weight: bold;
   }