Improve timer

mdelura · Mar 5, 2020 · 5f8b95e · 5f8b95e
1 parent 6f200ab
commit 5f8b95e
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/components/Brewer.tsx b/src/components/Brewer.tsx
@@ -32,7 +32,7 @@ const Brewer: React.SFC<BrewerProps> = ({ recipe }) => {
                 const finishTime = stepTime * initialPortions;
 
                 if (time + 1 < finishTime) {
-                    if (time !== 0 && time % stepTime === 0) sound.play();
+                    if ((time + 1) % stepTime === 0) sound.play();
                     return time + 1;
                 } else {
                     sound.play();
@@ -49,6 +49,13 @@ const Brewer: React.SFC<BrewerProps> = ({ recipe }) => {
         });
     };
 
+    const toggleTimer = () => (!timer ? startTimer() : killTimer());
+
+    const resetTimer = () => {
+        if (timer) killTimer();
+        setTime(0);
+    };
+
     const stepIndex = Math.floor(time / stepTime);
 
     const currentStep = sortedSteps[stepIndex];
@@ -75,11 +82,16 @@ const Brewer: React.SFC<BrewerProps> = ({ recipe }) => {
                 <Grid item xs={6}>
                     <Typography variant="h4">{moment.unix(time).format('mm:ss')}</Typography>
                 </Grid>
-                <Grid item xs={6}>
-                    <Button variant="contained" color="primary" onClick={() => (!timer ? startTimer() : killTimer())}>
+                <Grid item xs={3}>
+                    <Button variant="contained" color="primary" onClick={toggleTimer}>
                         {!timer ? 'Start' : 'Pause'}
                     </Button>
                 </Grid>
+                <Grid item xs={3}>
+                    <Button variant="contained" color="primary" onClick={resetTimer}>
+                        Reset
+                    </Button>
+                </Grid>
             </Grid>
             <Typography variant="h5">Step {stepIndex + 1}</Typography>
             <Typography variant="h5">Pour {currentPortion} ml of water</Typography>