simplified to only track time remaining rather than complex date calculations

Author: decarlec

package.json

@@ -16,6 +16,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.0",
     "concurrently": "^6.0.0",
+    "dayjs": "^1.10.4",
     "electron-is-dev": "^2.0.0",
     "mathjs": "^9.3.0",
     "moment": "^2.29.1",

src/Components/TimeInput.jsx

@@ -5,22 +5,24 @@ const defaultTimerDuration = "15";
 
 const TimeInput = () => {
     const [value, setValue] = useState(defaultTimerDuration)
-    
-    const handleChange = (e) => {
-     setValue(e.target.value)
-    }
 
-    const handleClick = (e) => { 
-        this.setState({ value: ""})
+    function getDurationInMs(){
+        if(value.endsWith("m")){
+            return value.replace("m", "") * 60000;
+        }
+        else{
+            return value * 1000;
+        }
     }
+    
     return (
         <div>         
             <form>
                 <input type="text" value={value} 
                 onChange={(e) => { setValue(e.target.value) }}
                 onClick={(e) => { setValue(e.target.value) }}/>
             </form>
-            <Timer duration={value}></Timer>
+            <Timer duration={getDurationInMs()}></Timer>
         </div>
     )
 

src/Components/Timer.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import './styles.css';
-import Moment from 'react-moment';
-import moment from 'moment';
+import { msToTimeFormatted } from '../Helper';
 import { evaluate } from 'mathjs';
+import dayjs from 'dayjs';
 
 export default class Timer extends React.Component {
     state = {
@@ -13,36 +13,47 @@ export default class Timer extends React.Component {
         soundPlaying: false
     }
 
+    tickRate = 100;
     audio = new Audio('bensound-creativeminds.mp3')
 
     startTimer = () => {
         this.audio.pause();
-        var start = new Date();
         this.setState({
             running: true,
-            start: start,
-            end: moment(start).add(evaluate(this.props.duration), 's').toDate()
+            remainingTime: this.props.duration
         })
     }
 
     stopTimer = () => {
-        //this.audio.play();
         this.setState({
             running: false,
+            remainingTime: 0
         })
     }
 
-    tick = () => {
-        var now = moment(new Date())
-        this.setState({ 
-            remainingTime: moment(this.state.end).diff(now)
+    pauseTimer = () => {
+        this.setState({
+            running: false,
         })
-        if (this.state.running && this.state.remainingTime <= 0) {
-            this.stopTimer();
-            window.confirm("Timer is finished", this.audio.play());
-        }
     }
 
+    tick = () => {
+        if(this.state.running){
+            this.setState({ 
+                remainingTime: this.state.remainingTime - this.tickRate
+            });
+            if (this.state.remainingTime <= 0) {
+                this.stopTimer();
+                if(window.confirm("Timer is finished", this.audio.play()))
+                {
+                    this.audio.pause();
+                }
+            }
+        } 
+    }
+
+
+
     pauseAudio = () => {
         this.audio.pause();
     }
@@ -65,10 +76,10 @@ export default class Timer extends React.Component {
         }
         return (
             <div>
-
                 <button onClick={this.startTimer} className="button" >Start</button> <button onClick={this.stopTimer} className="button">Stop</button>
-                <p>{this.state.running ? <Moment durationFromNow filter={toPositiveFilter}>{this.state.end}</Moment> : null}</p>
+                <p onClick={this.pauseTimer}>{ msToTimeFormatted(this.state.remainingTime) }</p>
             </div>
         )
-    }
-}
+    }   
+}
+

src/Helper.js

@@ -0,0 +1,12 @@
+export function msToTimeFormatted(duration){
+    var milliseconds = Math.floor((duration % 1000) / 100),
+        seconds = Math.floor((duration / 1000) % 60),
+        minutes = Math.floor((duration / (1000 * 60)) % 60),
+        hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+    
+    hours = (hours < 10) ? "0" + hours : hours;
+    minutes = (minutes < 10) ? "0" + minutes : minutes;
+    seconds = (seconds < 10) ? "0" + seconds : seconds;
+      
+    return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
+}

src/react-app-env.d.ts

@@ -4244,6 +4244,11 @@ date-fns@^2.16.1:
   resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz"
   integrity sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg==
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"