Improve stopwatch

Author: hamsterbacke23

app/components/Stopwatch/index.js

@@ -4,7 +4,7 @@
 *
 */
 
-import React from 'react';
+import React, { PropTypes } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -21,7 +21,6 @@ const formattedSeconds = (sec) => {
 
 
 function Stopwatch(props) {
-
   return (
     <CenteredSection>
       <TimeDisplay>
@@ -31,14 +30,19 @@ function Stopwatch(props) {
       </TimeDisplay>
 
       <ControlGroup>
-        {(props.intervalsElapsed !== 0
+        {(props.intervalsElapsed !== 0 && props.isPaused
           ? <Control onClick={props.resetTimer}><FormattedMessage {...messages.reset} /></Control>
           : null
         )}
 
-        {(props.intervalsElapsed === 0
+        {(props.isPaused || props.intervalsElapsed === 0
           ? <Control onClick={props.startTimer}><FormattedMessage {...messages.start} /></Control>
-          : <Control onClick={props.stopTimer}><FormattedMessage {...messages.stop} /></Control>
+          : ''
+        )}
+
+        {(!props.isPaused && props.intervalsElapsed !== 0
+          ? <Control onClick={props.pauseTimer}><FormattedMessage {...messages.stop} /></Control>
+          : ''
         )}
 
       </ControlGroup>
@@ -48,7 +52,11 @@ function Stopwatch(props) {
 }
 
 Stopwatch.propTypes = {
-
+  resetTimer: PropTypes.func.isRequired,
+  startTimer: PropTypes.func.isRequired,
+  pauseTimer: PropTypes.func.isRequired,
+  intervalsElapsed: PropTypes.number,
+  isPaused: PropTypes.bool,
 };
 
 export default Stopwatch;

app/containers/Timer/actions.js

@@ -7,8 +7,7 @@
 import {
   RESET,
   START,
-  STOP,
-  ADDLAP,
+  PAUSE,
   TICK,
 } from './constants';
 
@@ -23,10 +22,10 @@ export function startTimer(dispatch) {
     type: START,
   };
 }
-export function stopTimer() {
+export function pauseTimer() {
   clearInterval(timer);
   return {
-    type: STOP,
+    type: PAUSE,
   };
 }
 
@@ -36,11 +35,6 @@ export function resetTimer() {
   };
 }
 
-export function addLap() {
-  return {
-    type: ADDLAP,
-  };
-}
 
 function tick() {
   return {

app/containers/Timer/constants.js

@@ -6,6 +6,6 @@
 
 export const RESET = 'app/Timer/RESET';
 export const START = 'app/Timer/START';
-export const STOP = 'app/Timer/STOP';
+export const PAUSE = 'app/Timer/PAUSE';
 export const ADDLAP = 'app/Timer/ADDLAP';
 export const TICK = 'app/Timer/TICK';

app/containers/Timer/index.js

@@ -9,10 +9,10 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 
 import Stopwatch from 'components/Stopwatch';
-import { resetTimer, startTimer, stopTimer, addLap } from './actions';
+import { resetTimer, startTimer, pauseTimer } from './actions';
 
 
-import { makeSelectIntervalsElapsed } from './selectors';
+import { makeSelectIsPaused, makeSelectIntervalsElapsed } from './selectors';
 
 class Timer extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
 
@@ -22,8 +22,9 @@ class Timer extends React.PureComponent { // eslint-disable-line react/prefer-st
         <Stopwatch
           intervalsElapsed={this.props.intervalsElapsed}
           startTimer={this.props.startTimer}
-          stopTimer={this.props.stopTimer}
+          pauseTimer={this.props.pauseTimer}
           resetTimer={this.props.resetTimer}
+          isPaused={this.props.isPaused}
         />
       </div>
     );
@@ -34,21 +35,22 @@ class Timer extends React.PureComponent { // eslint-disable-line react/prefer-st
 Timer.propTypes = {
   resetTimer: PropTypes.func.isRequired,
   startTimer: PropTypes.func.isRequired,
-  stopTimer: PropTypes.func.isRequired,
+  pauseTimer: PropTypes.func.isRequired,
   intervalsElapsed: PropTypes.number,
+  isPaused: PropTypes.bool,
 };
 
 function mapDispatchToProps(dispatch) {
   return {
     startTimer: () => dispatch(startTimer(dispatch)),
-    stopTimer: () => dispatch(stopTimer()),
+    pauseTimer: () => dispatch(pauseTimer()),
     resetTimer: () => dispatch(resetTimer()),
-    lapTimer: () => dispatch(addLap()),
   };
 }
 
 const mapStateToProps = createStructuredSelector({
   intervalsElapsed: makeSelectIntervalsElapsed(),
+  isPaused: makeSelectIsPaused(),
 });
 
 

app/containers/Timer/reducer.js

@@ -7,13 +7,14 @@
 import { fromJS } from 'immutable';
 import {
   RESET,
-  ADDLAP,
   TICK,
+  START,
+  PAUSE,
 } from './constants';
 
 const initialState = fromJS({
   intervalsElapsed: 0,
-  laps: [],
+  isPaused: false,
   lastClearedIncrementer: null,
 });
 
@@ -23,14 +24,15 @@ function timerReducer(state = initialState, action) {
     case RESET: {
       return state.set('intervalsElapsed', 0);
     }
+    case START: {
+      return state.set('isPaused', false);
+    }
+    case PAUSE: {
+      return state.set('isPaused', true);
+    }
     case TICK: {
       return state.set('intervalsElapsed', state.get('intervalsElapsed') + 1);
     }
-    case ADDLAP: {
-      const laps = state.laps.slice();
-      laps.push(this.state.intervalsElapsed);
-      return state.set('laps', laps);
-    }
     default: {
       return state;
     }

app/containers/Timer/selectors.js

@@ -11,7 +11,13 @@ const makeSelectIntervalsElapsed = () => createSelector(
   (timerState) => timerState.get('intervalsElapsed')
 );
 
+const makeSelectIsPaused = () => createSelector(
+  selectTimer,
+  (timerState) => timerState.get('isPaused')
+);
+
 export {
   selectTimer,
   makeSelectIntervalsElapsed,
+  makeSelectIsPaused,
 };