Started adding sound

Author: decarlec

package.json

@@ -25,6 +25,7 @@
     "react-moment": "^1.1.1",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
+    "use-sound": "^2.0.1",
     "wait-on": "^5.3.0",
     "web-vitals": "^1.0.1"
   },
@@ -38,6 +39,7 @@
     "postinstall": "electron-builder install-app-deps",
     "electron-pack": "yarn build --em.main=build/electron.js",
     "preelectron-pack": "yarn build",
+    "prepackage-win": "yarn build",
     "package-win": "electron-packager . electimer --overwrite --platform=win32 --arch=x64 --icon=public/favicon.ico --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electimer\""
   },
   "build": {

public/bensound-creativeminds.mp3

@@ -20,11 +20,7 @@ export class MainForm extends React.Component<{ message: string}, MainFormState>
     render(){
         return(
             <div>
-                <div onClick={() => this.increment(1)}>
-                    {this.state.count}
-                </div>
                 <TimeInput ></TimeInput>
-                <Moment format="YYYY/MM/DD hh:mm:ss"></Moment>
             </div>
 
         )

src/Components/MainForm.tsx

@@ -2,15 +2,16 @@ import React from "react";
 import './styles.css';
 import Moment from 'react-moment';
 import moment from 'moment';
+import useSound from 'use-sound';
 
 type TimerProps = {
     duration: number
    }
 
 type TimerState = {
     running: boolean
-    start: number 
-    end: number 
+    start: Date 
+    end: Date 
     remainingTime: number
 }
 
@@ -21,33 +22,32 @@ export default class Timer extends React.Component<TimerProps, TimerState>{
         super(props);       
         this.state = {
             running: false,
-            start: 0,
-            end: 0,
+            start: new Date(),
+            end: new Date(),
             remainingTime: 0
         }
     }
 
 
     startTimer = () => {
-        var start = new Date().getTime();
+        var start = new Date();
         this.setState({
             running: true,
             start: start, 
-            end: start + this.props.duration * 1000 
+            end: moment(start).add(this.props.duration, 's').toDate()
         })
     }
 
     stopTimer = () => {
        this.setState({
            running: false,
-           start: 0, 
-           end: 0
        }) 
     }
 
     tick = () => {
+        var now = moment(new Date())
         this.setState({
-            remainingTime: this.state.end - new Date().getTime()
+            remainingTime: moment(this.state.end).diff(now)
         })
         if(this.state.running && this.state.remainingTime <= 0)        
         {
@@ -69,11 +69,13 @@ export default class Timer extends React.Component<TimerProps, TimerState>{
         this.intervalId = null;
     }
     render(){ 
+        const toPositiveFilter = (d: string) => {
+            return d.replace("-", "")
+        }
         return(
             <div>
                 <button onClick={this.startTimer} className="button" >Start</button> <button onClick={this.stopTimer} className="button">Stop</button> 
-                <p>{ this.state.running ? <Moment format="YYYY/mm/dd hh:mm:ss">{this.state.remainingTime}</Moment> : null }</p>
-                <p>{ this.state.running ? this.state.remainingTime/1000 : null }</p>
+                <p>{ this.state.running ? <Moment durationFromNow filter={toPositiveFilter}>{this.state.end}</Moment> : null }</p>
             </div>
         ) 
     }

src/Components/Timer.tsx

@@ -6028,6 +6028,11 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+howler@^2.1.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.1.tgz#a521a9b495841e8bb9aa12e651bebba0affc179e"
+  integrity sha512-0iIXvuBO/81CcrQ/HSSweYmbT50fT2mIc9XMFb+kxIfk2pW/iKzDbX1n3fZmDXMEIpYvyyfrB+gXwPYSDqUxIQ==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
@@ -11841,6 +11846,13 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-sound@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-2.0.1.tgz#72e70d4bfdda71a6959e5adab0c7e10ff4080a0a"
+  integrity sha512-wNwnyIOe8QPDQgWRZd3PqVEJ9BpLO+VJX+EpQSb6EvvjblHhnYMD7WIOTQ4hgloC2jC7Az6FhclHilC441De7A==
+  dependencies:
+    howler "^2.1.3"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"