Converted all components to javascript - added math expression support for input field

Author: Christian DeCarle

electron/electron.ts electron/electron.js

@@ -17,6 +17,7 @@
     "@types/react-dom": "^17.0.0",
     "concurrently": "^6.0.0",
     "electron-is-dev": "^2.0.0",
+    "mathjs": "^9.3.0",
     "moment": "^2.29.1",
     "node": "^15.10.0",
     "react": "^17.0.2",

package.json

@@ -1,20 +1,7 @@
 import React from 'react';
-import Moment from 'react-moment';
 import TimeInput from './TimeInput';
-import Timer from './Timer';
 
-type MainFormState = {
-    durationInput: string, 
-    currentDateTime: Date
-}
-
-export class MainForm extends React.Component<{ message: string}, MainFormState>{
-    state: MainFormState = {
-        durationInput:"",
-        
-        currentDateTime: new Date()
-    }
-    intervalId : any;
+export class MainForm extends React.Component{
 
     render(){
         return(

src/App.tsx src/App.jsx

@@ -0,0 +1,22 @@
+class SoudPlayer extends Component {
+    state = { play: false }
+
+    audio = new Audio(this.props.url)
+
+    componentDidMount() {
+        audio.addEventListener('ended', () => this.setState({play:false}));
+    }
+
+    componentWillUnmount() {
+        audio.removeEventListener('ended', () => this.setState({play:false}));
+    }
+    render() { 
+        return ( 
+            <div>
+                
+            </div>
+          );
+    }
+}
+ 
+export default SoudPlayer;

src/App.test.tsx src/App.test.jsx

@@ -1,31 +1,22 @@
-import React, { createRef } from "react";
+import React from "react";
 import Timer from "./Timer";
 
 const defaultTimerDuration = "15";
 
-type TimeInputProps = {
-}
+export default class TimeInput extends React.Component{
 
-
-type TimeInputState = {
-    value: string,
-}
-
-export default class TimeInput extends React.Component<TimeInputProps, TimeInputState>{
-    private instanceRef = createRef<HTMLInputElement>();
-
-    constructor(props: TimeInputProps){
+    constructor(props){
         super(props);
         this.state = { value: defaultTimerDuration }
         this.handleChange = this.handleChange.bind(this);
         this.handleClick = this.handleClick.bind(this);
     }
 
-    handleChange(e: React.ChangeEvent<HTMLInputElement>){
-        this.setState({ value: e.target.value })
+    handleChange(e){
+     this.setState({ value: e.target.value })
     }
 
-    handleClick(e: React.MouseEvent<HTMLInputElement>){
+    handleClick(e){ 
         this.setState({ value: ""})
     }
 
@@ -38,7 +29,7 @@ export default class TimeInput extends React.Component<TimeInputProps, TimeInput
                     onClick={this.handleClick}
                     ref={this.instanceRef} />
                 </form>
-                <Timer duration={parseInt(this.state.value)} /*clickHandler={this.handleBtnClick}*/ ></Timer>
+                <Timer duration={this.state.value} /*clickHandler={this.handleBtnClick}*/ ></Timer>
             </div>
         )
     }

src/Components/MainForm.tsx src/Components/MainForm.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import './styles.css';
+import Moment from 'react-moment';
+import moment from 'moment';
+import { evaluate } from 'mathjs';
+
+export default class Timer extends React.Component {
+    state = {
+        running: false,
+        start: new Date(),
+        end: new Date(),
+        remainingTime: 0,
+        soundPlaying: false
+    }
+
+    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()
+        })
+    }
+
+    stopTimer = () => {
+        //this.audio.play();
+        this.setState({
+            running: false,
+        })
+    }
+
+    tick = () => {
+        var now = moment(new Date())
+        this.setState({ 
+            remainingTime: moment(this.state.end).diff(now)
+        })
+        if (this.state.running && this.state.remainingTime <= 0) {
+            this.stopTimer();
+            window.confirm("Timer is finished", this.audio.play());
+        }
+    }
+
+    pauseAudio = () => {
+        this.audio.pause();
+    }
+
+    componentWillMount = () => {
+        this.tick();
+    }
+
+    componentDidMount = () => {
+        this.intervalId = setInterval(() => this.tick(), 100);
+    }
+
+    componentWillUnmount = () => {
+        this.intervalId = null;
+    }
+
+    render() {
+        const toPositiveFilter = (d) => {
+            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 durationFromNow filter={toPositiveFilter}>{this.state.end}</Moment> : null}</p>
+            </div>
+        )
+    }
+}

src/Components/SoundPlayer.jsx

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/Components/TimeInput.tsx src/Components/TimeInput.jsx

@@ -3672,6 +3672,11 @@ commondir@^1.0.1:
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+complex.js@^2.0.11:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/complex.js/-/complex.js-2.0.12.tgz#fa4df97d8928e5f7b6a86b35bdeecc3a3eda8a22"
+  integrity sha512-oQX99fwL6LrTVg82gDY1dIWXy6qZRnRL35N+YhIX0N7tSwsa0KFy6IEMHTNuCW4mP7FS7MEqZ/2I/afzYwPldw==
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
@@ -4265,7 +4270,7 @@ decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decimal.js@^10.2.0:
+decimal.js@^10.2.0, decimal.js@^10.2.1:
   version "10.2.1"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.1.tgz"
   integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
@@ -4887,6 +4892,11 @@ escape-html@~1.0.3:
   resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
+escape-latex@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/escape-latex/-/escape-latex-1.2.0.tgz#07c03818cf7dac250cce517f4fda1b001ef2bca1"
+  integrity sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==
+
 [email protected], escape-string-regexp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz"
@@ -5572,6 +5582,11 @@ forwarded@~0.1.2:
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+  integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz"
@@ -6822,6 +6837,11 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=
+
 jest-changed-files@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz"
@@ -7733,6 +7753,20 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+mathjs@^9.3.0:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-9.3.0.tgz#59cc43b536b22616197e56da303604b430daa6ac"
+  integrity sha512-0kYW+TXgB8lCqUj5wHR2hqAO2twSbPRelSFgRJXiwAx4nM6FrIb43Jd6XhW7sVbwYB+9HCNiyg5Kn8VYeB7ilg==
+  dependencies:
+    complex.js "^2.0.11"
+    decimal.js "^10.2.1"
+    escape-latex "^1.2.0"
+    fraction.js "^4.0.13"
+    javascript-natural-sort "^0.7.1"
+    seedrandom "^3.0.5"
+    tiny-emitter "^2.1.0"
+    typed-function "^2.0.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
@@ -10505,6 +10539,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+seedrandom@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
+  integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
@@ -11442,6 +11481,11 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 [email protected]:
   version "1.0.4"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz"
@@ -11661,6 +11705,11 @@ type@^2.0.0:
   resolved "https://registry.npmjs.org/type/-/type-2.3.0.tgz"
   integrity sha512-rgPIqOdfK/4J9FhiVrZ3cveAjRRo5rsQBAIhnylX874y1DX/kEKSVdLsnuHB6l1KTjHyU01VjiMBHgU2adejyg==
 
+typed-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-2.0.0.tgz#15ab3825845138a8b1113bd89e60cd6a435739e8"
+  integrity sha512-Hhy1Iwo/e4AtLZNK10ewVVcP2UEs408DS35ubP825w/YgSBK1KVLwALvvIG4yX75QJrxjCpcWkzkVRB0BwwYlA==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz"