added paused functionality to start/stop

tryonlinux · Aug 7, 2021 · 0c4a619 · 0c4a619
1 parent 9e2a0df
commit 0c4a619
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 export interface ActionsProps {
   setTime: (time: number) => void;
   toggleTimer: (isCounting: boolean) => void;
+  toggleIsStopped: () => void;
+  isStopped: boolean;
   isCounting: boolean;
 }
 
@@ -12,25 +14,27 @@ class Actions extends React.Component<ActionsProps, ActionsState> {
     super(props);
     this.state = {};
   }
+
   render() {
     return (
       <div className="column">
         <button
           style={{ backgroundColor: 'lightgreen' }}
-          disabled={this.props.isCounting}
+          disabled={!this.props.isStopped}
           onClick={() => this.props.toggleTimer(true)}
         >
           Start
         </button>
         <button
           style={{ backgroundColor: 'crimson' }}
-          disabled={!this.props.isCounting}
-          onClick={() => this.props.toggleTimer(false)}
+          disabled={this.props.isStopped}
+          onClick={() => this.props.toggleIsStopped()}
         >
           Stop
         </button>
         <button
           style={{ backgroundColor: 'lightgray' }}
+          disabled={!this.props.isCounting}
           onClick={() => this.props.setTime(25)}
         >
           Reset

diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -1,5 +1,4 @@
 //TODO Add flash function
-//TODO add pause function to stop
 //TODO add gif to readme
 //TODO add to listed.to
 import React from 'react';
@@ -22,7 +21,7 @@ const initialState = {
   time: 25,
   soundOn: true,
   flashOn: true,
-  isStopped: false,
+  isStopped: true,
 };
 
 export default class Editor extends React.Component<{}, EditorInterface> {
@@ -33,25 +32,27 @@ export default class Editor extends React.Component<{}, EditorInterface> {
     this.toggleTimer = this.toggleTimer.bind(this);
     this.toggleSound = this.toggleSound.bind(this);
     this.toggleFlash = this.toggleFlash.bind(this);
+    this.toggleIsStopped = this.toggleIsStopped.bind(this);
     this.flash = this.flash.bind(this);
     let componentRelay = new ComponentRelay({ targetWindow: window });
     componentRelay.setSize('100%', '40px');
   }
 
   setTime(time: number): void {
-    this.setState({ time, isCounting: false });
+    this.setState({ time, isCounting: false, isStopped: true });
   }
   toggleTimer(isCounting: boolean) {
-    //TODO disable either start of stop
-    //TODO then either start the countdown or not
-    this.setState({ isCounting });
+    this.setState({ isCounting, isStopped: !this.state.isStopped });
   }
   toggleSound() {
     this.setState({ soundOn: !this.state.soundOn });
   }
   toggleFlash() {
     this.setState({ flashOn: !this.state.flashOn });
   }
+  toggleIsStopped() {
+    this.setState({ isStopped: !this.state.isStopped });
+  }
   flash() {
     alert('flash flash');
   }
@@ -66,25 +67,24 @@ export default class Editor extends React.Component<{}, EditorInterface> {
                 time={this.state.time}
                 soundOn={this.state.soundOn}
                 flashOn={this.state.flashOn}
+                isStopped={this.state.isStopped}
                 flash={this.flash}
               />
             ) : (
               <TimeInput time={this.state.time} setTime={this.setTime} />
             )}
           </div>
           <div className="vl column" />
-
           <Actions
             setTime={this.setTime}
             isCounting={this.state.isCounting}
+            isStopped={this.state.isStopped}
             toggleTimer={this.toggleTimer}
+            toggleIsStopped={this.toggleIsStopped}
           />
           <div className="vl column" />
-
           <Modes setTime={this.setTime} isCounting={this.state.isCounting} />
-
           <div className="vl column" />
-
           <Settings
             soundOn={this.state.soundOn}
             flashOn={this.state.flashOn}

diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
@@ -4,6 +4,7 @@ export interface TimerProps {
   time: number;
   soundOn: boolean;
   flashOn: boolean;
+  isStopped: boolean;
   flash: () => void;
 }
 
@@ -27,6 +28,14 @@ class Timer extends React.Component<TimerProps, TimerState> {
     if (this.props.time !== prevProps.time) {
       this.setState({ mins: this.props.time });
     }
+    if (this.props.isStopped !== prevProps.isStopped) {
+      if (this.props.isStopped) {
+        window.clearInterval(this.timer);
+      } else {
+        this.timer = 0;
+        this.startTimer();
+      }
+    }
   }
 
   componentDidMount() {