xState and separate logic from Counter

Author: flextremedev

package.json

@@ -5,10 +5,12 @@
   "homepage": "https://workout-interval-timer.netlify.com",
   "dependencies": {
     "@testing-library/react": "^9.1.4",
+    "@xstate/react": "^0.8.1",
     "date-fns": "^2.1.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "xstate": "^4.11.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -5,6 +5,7 @@ import { useWorkoutTimer } from './hooks/useWorkoutTimer';
 import { Status } from './model/Status';
 import { FormFields } from './components/FormFields/FormFields';
 import { Counter } from './components/Counter/Counter';
+import { evaluateStatus } from './utils/evaluateStatus';
 
 function App() {
   const {
@@ -22,7 +23,7 @@ function App() {
   return (
     <div className={styles.content}>
       <div className={styles.centerArea}>
-        {status === Status.stopped ? (
+        {status === Status.STOPPED ? (
           <FormFields
             rounds={rounds}
             handleRoundsChange={handleRoundsChange}
@@ -34,14 +35,14 @@ function App() {
         ) : (
           <Counter
             timeLeft={timeLeft}
-            status={status}
+            text={evaluateStatus(status)}
             roundsLeft={roundsLeft}
             rounds={rounds}
           />
         )}
       </div>
       <Button onClick={start} data-testid={'start-button'}>
-        {status === Status.stopped ? 'Start' : 'Stop'}
+        {status === Status.STOPPED ? 'Start' : 'Stop'}
       </Button>
     </div>
   );

src/components/Counter/Counter.js

@@ -2,17 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Counter.module.css';
 import { DurationInput } from '../DurationInput/DurationInput';
-import { Status } from '../../model/Status';
-const evaluateStatus = status => {
-  if (status === Status.prework) {
-    return 'PREP';
-  }
-  if (status === Status.break) {
-    return 'REST';
-  }
-  return 'WORK';
-};
-export function Counter({ timeLeft, status, roundsLeft, rounds }) {
+import { StatusDisplay } from '../../model/StatusDisplay';
+
+export function Counter({ text, timeLeft, roundsLeft, rounds }) {
   return (
     <div className={styles.container}>
       <div className={styles.round}>
@@ -32,16 +24,20 @@ export function Counter({ timeLeft, status, roundsLeft, rounds }) {
       <div className={styles.statusContainer}>
         <div className={`${styles.progress} ${styles.progressBottom}`}></div>
         <span className={`${styles.status}`} data-testid={'status'}>
-          {evaluateStatus(status)}
+          {text}
         </span>
       </div>
     </div>
   );
 }
 Counter.propTypes = {
+  text: PropTypes.oneOf([
+    StatusDisplay.BREAK,
+    StatusDisplay.PREWORK,
+    StatusDisplay.WORK,
+  ]),
   timeLeft: PropTypes.instanceOf(Date),
   dataTestId: PropTypes.string,
-  status: PropTypes.oneOf([Status.work, Status.prework, Status.break]),
   roundsLeft: PropTypes.number,
   rounds: PropTypes.number,
 };

src/hooks/useWorkoutTimer.js

@@ -1,34 +1,61 @@
 import React from 'react';
+import { useMachine } from '@xstate/react';
 import beepBreakFile from '../BeepBreak.mp3';
 import beepBreakLongFile from '../BeepBreakLong.mp3';
 import beepWorkFile from '../BeepWork.mp3';
 import beepWorkLongFile from '../BeepWorkLong.mp3';
 import { subSeconds, getSeconds, addSeconds, getMinutes } from 'date-fns';
 import { useAudio } from './useAudio';
+import { Status } from '../model/Status';
 import { hasOneSecondElapsed } from '../utils/hasOneSecondElapsed';
+import { Machine } from 'xstate';
 const SECONDS_PER_MINUTE = 60;
 const PREP_TIME_SECONDS = 5;
-const Status = {
-  stopped: 'stopped',
-  prework: 'prework',
-  work: 'work',
-  break: 'break',
-};
 
+const statusEvents = {
+  START: 'START',
+  WORK: 'WORK',
+  BREAK: 'BREAK',
+  STOP: 'STOP',
+};
+const statusMachine = Machine({
+  id: 'status',
+  initial: Status.STOPPED,
+  states: {
+    [Status.STOPPED]: {
+      on: { [statusEvents.START]: Status.PREWORK },
+    },
+    [Status.PREWORK]: {
+      on: { [statusEvents.WORK]: Status.WORK, STOP: Status.STOPPED },
+    },
+    [Status.WORK]: {
+      on: {
+        [statusEvents.STOP]: Status.STOPPED,
+        [statusEvents.BREAK]: Status.BREAK,
+      },
+    },
+    [Status.BREAK]: {
+      on: {
+        [statusEvents.WORK]: Status.WORK,
+        [statusEvents.STOP]: Status.STOPPED,
+      },
+    },
+  },
+});
 export function useWorkoutTimer() {
   const { audio: beepBreak } = useAudio(beepBreakFile);
   const { audio: beepWork } = useAudio(beepWorkFile);
   const { audio: beepBreakLong } = useAudio(beepBreakLongFile);
   const { audio: beepWorkLong } = useAudio(beepWorkLongFile);
-  const [status, setStatus] = React.useState(Status.stopped);
+  const [status, send] = useMachine(statusMachine);
   const [timeLeft, setTimeLeft] = React.useState(new Date(0));
   const [rounds, setRounds] = React.useState(1);
   const [roundsLeft, setRoundsLeft] = React.useState(rounds);
   const [workInterval, setWorkInterval] = React.useState(new Date(0));
   const [breakInterval, setBreakInterval] = React.useState(new Date(0));
   const timestamp = React.useRef(Date.now());
-  let statusRef = React.useRef(status);
-  statusRef.current = status;
+  let statusRef = React.useRef(status.value);
+  statusRef.current = status.value;
   let roundsLeftRef = React.useRef(roundsLeft);
   roundsLeftRef.current = roundsLeft;
   let timeLeftRef = React.useRef(timeLeft);
@@ -37,19 +64,20 @@ export function useWorkoutTimer() {
     setRounds(Number(value));
   };
   const start = React.useCallback(() => {
-    const shouldStart = status === Status.stopped;
+    const shouldStart = status.value === Status.STOPPED;
     if (shouldStart) {
       timestamp.current = Date.now();
-      setStatus(Status.prework);
+      send(statusEvents.START);
       setTimeLeft(addSeconds(new Date(0), PREP_TIME_SECONDS));
       setRoundsLeft(rounds);
     } else {
-      setStatus(Status.stopped);
+      send(statusEvents.STOP);
     }
-  }, [rounds, status]);
+  }, [rounds, status, send]);
   React.useEffect(() => {
     let interval = null;
-    const startWasInitiated = status !== Status.stopped && interval === null;
+    const startWasInitiated =
+      status.value !== Status.STOPPED && interval === null;
     if (startWasInitiated) {
       interval = setInterval(function countDown() {
         if (hasOneSecondElapsed(timestamp.current)) {
@@ -62,7 +90,8 @@ export function useWorkoutTimer() {
             const shouldBeepFromTwoDown = secondsLeft <= 4;
             if (shouldBeepFromTwoDown) {
               const shouldGetReady =
-                status === Status.prework || status === Status.break;
+                status.value === Status.PREWORK ||
+                status.value === Status.BREAK;
               if (shouldGetReady) {
                 beepBreak.play();
               } else {
@@ -72,24 +101,24 @@ export function useWorkoutTimer() {
             setTimeLeft(previousTimeLeft => subSeconds(previousTimeLeft, 1));
           } else {
             const shouldSwitchToWork =
-              (statusRef.current === Status.prework ||
-                statusRef.current === Status.break) &&
+              (statusRef.current === Status.PREWORK ||
+                statusRef.current === Status.BREAK) &&
               roundsLeftRef.current > 0 &&
               workInterval.valueOf() !== 0;
             const shouldSwitchToRest =
-              statusRef.current === Status.work && roundsLeftRef.current > 0;
+              statusRef.current === Status.WORK && roundsLeftRef.current > 0;
 
             if (shouldSwitchToWork) {
               beepBreakLong.play();
-              setStatus(Status.work);
+              send(statusEvents.WORK);
               setTimeLeft(workInterval);
               setRoundsLeft(prevRoundsLeft => prevRoundsLeft - 1);
             } else if (shouldSwitchToRest) {
-              setStatus(Status.break);
+              send(statusEvents.BREAK);
               setTimeLeft(breakInterval);
               beepWorkLong.play();
             } else {
-              setStatus(Status.stopped);
+              send(statusEvents.STOP);
               clearInterval(interval);
             }
           }
@@ -108,6 +137,7 @@ export function useWorkoutTimer() {
     beepBreak,
     beepBreakLong,
     beepWorkLong,
+    send,
   ]);
   return {
     rounds,
@@ -118,7 +148,7 @@ export function useWorkoutTimer() {
     setBreakInterval,
     start,
     timeLeft,
-    status,
+    status: status.value,
     roundsLeft,
   };
 }

src/model/Status.js

@@ -1,6 +1,6 @@
 export const Status = {
-  stopped: 'stopped',
-  prework: 'prework',
-  work: 'work',
-  break: 'break',
+  STOPPED: 'STOPPED',
+  PREWORK: 'PREWORK',
+  WORK: 'WORK',
+  BREAK: 'BREAK',
 };

src/model/StatusDisplay.js

@@ -0,0 +1,5 @@
+export const StatusDisplay = {
+  PREWORK: 'PREP',
+  BREAK: 'REST',
+  WORK: 'WORK',
+};

src/utils/evaluateStatus.js

@@ -0,0 +1,9 @@
+import { Status } from '../model/Status';
+import { StatusDisplay } from '../model/StatusDisplay';
+
+export const evaluateStatus = status => {
+  if (status === Status.PREWORK || status === Status.BREAK) {
+    return StatusDisplay[status];
+  }
+  return StatusDisplay.WORK;
+};

yarn.lock

@@ -1660,6 +1660,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@xstate/react@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@xstate/react/-/react-0.8.1.tgz#df200547cca24c909572b7aef1ddab8bca3a0603"
+  integrity sha512-8voZm4GX3x70lNQVvoGedoObPYapkQIbgMhE+xOQEsm8Ait4Zto6R01SZ6WJD4qvLl8JPV6uq96OcFRdEsVESg==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -11091,6 +11096,11 @@ xregexp@4.0.0:
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
   integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
+xstate@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.11.0.tgz#dc0bd31079fe22918c2c27c118d6310bef3dcd9e"
+  integrity sha512-v+S3jF2YrM2tFOit8o7+4N3FuFd9IIGcIKHyfHeeNjMlmNmwuiv/IbY9uw7ECifx7H/A9aGLcxPSr0jdjTGDww==
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"