Update to v1.4.0: Hint toggle and custom signal duration

jacobkrol · jacobkrol · commit ecd92784548d · 2021-04-11T19:52:09.000-05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lptimer",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "private": true,
   "homepage": "https://kroljs.com/LP-Timer",
   "dependencies": {
diff --git a/src/components/App.js b/src/components/App.js
@@ -23,8 +23,9 @@ function App() {
     const initSettings = {
         "delay": 0,
         "durationMin": 7,
-        "durationSec": "00",
-        "showMS": false
+        "signalDuration": 5,
+        "showMS": false,
+        "showTips": true
     };
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [settings, setSettings] = useState(initSettings);
@@ -49,13 +50,25 @@ function App() {
                 <Switch>
                     <Route exact path="/" component={HomePage} />
                     <Route path="/ext">
-                        <ExtPage min={settings.durationMin} delay={settings.delay} />
+                        <ExtPage 
+                            min={settings.durationMin}
+                            delay={settings.delay}
+                            showTips={settings.showTips}
+                            signalDuration={settings.signalDuration} />
                     </Route>
                     <Route path="/imp">
-                        <ImpPage min={settings.durationMin} delay={settings.delay} />
+                        <ImpPage
+                            min={settings.durationMin}
+                            delay={settings.delay}
+                            showTips={settings.showTips}
+                            signalDuration={settings.signalDuration} />
                     </Route>
                     <Route path="/timer">
-                        <TimerPage min={settings.durationMin} delay={settings.delay} showMS={settings.showMS} />
+                        <TimerPage
+                            min={settings.durationMin}
+                            delay={settings.delay}
+                            showMS={settings.showMS}
+                            showTips={settings.showTips} />
                     </Route>
                     <Route path="/guide" component={GuidePage} />
                     <Route path="/about" component={AboutPage} />
diff --git a/src/components/pages/AboutPage.js b/src/components/pages/AboutPage.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Form from '../utilities/Form';
 import '../../styles/AboutPage.css';
 import { FiAlertTriangle } from 'react-icons/fi';
+import { version } from '../../../package.json';
 
 function AboutPage() {
     return (
@@ -14,7 +15,7 @@ function AboutPage() {
             <h3>Licensing</h3>
                 <p>The limited preparation timer progressive web application is open-sourced under a MIT license. To read the conditions of this license, visit the <a href="https://github.com/jacobkrol/LP-Timer/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">LICENSE file in the host repository</a>.</p>
             <h3>Updates</h3>
-                <p>This is LP Timer PWA v1.3.2. You can check for the latest version <a href="https://github.com/jacobkrol/LP-Timer/releases" target="_blank" rel="noopener noreferrer">on the project releases page</a>.</p>
+                <p>This is LP Timer PWA v{version}. You can check for the latest version <a href="https://github.com/jacobkrol/LP-Timer/releases" target="_blank" rel="noopener noreferrer">on the project releases page</a>.</p>
         </div>
     )
 }
diff --git a/src/components/pages/ExtPage.js b/src/components/pages/ExtPage.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import Timer from '../utilities/Timer';
 
-function ExtPage({ min=7, delay=0 }) {
+function ExtPage({ min=7, delay=0, showTips=true, signalDuration=5 }) {
     return (
         <>
-            <Timer mode="ext" min={min} delay={delay} />
+            <Timer mode="ext" min={min} delay={delay} showTips={showTips} signalDuration={signalDuration} />
         </>
     )
 }
diff --git a/src/components/pages/ImpPage.js b/src/components/pages/ImpPage.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import Timer from '../utilities/Timer';
 
-function ImpPage({ min=7, delay=0 }) {
+function ImpPage({ min=7, delay=0, showTips=true, signalDuration=5 }) {
     return (
         <>
-            <Timer mode="imp" min={min} delay={delay} />
+            <Timer mode="imp" min={min} delay={delay} showTips={showTips} signalDuration={signalDuration} />
         </>
     )
 }
diff --git a/src/components/pages/TimerPage.js b/src/components/pages/TimerPage.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import Timer from '../utilities/Timer';
 
-function TimerPage({ min=7, delay=0, showMS=false }) {
+function TimerPage({ min=7, delay=0, showMS=false, showTips=true }) {
     return (
         <>
-            <Timer mode="none" min={min} delay={delay} showMS={showMS} />
+            <Timer mode="none" min={min} delay={delay} showMS={showMS} showTips={showTips} />
         </>
     )
 }
diff --git a/src/components/utilities/Form.js b/src/components/utilities/Form.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import 'whatwg-fetch';
 import '../../styles/Form.css';
+import { version } from '../../../package.json';
 
 class Form extends React.Component {
     state = {
@@ -92,7 +93,7 @@ class Form extends React.Component {
     getFormData = () => {
         let data = {...this.state};
         delete data.disabled;
-        data['version'] = "1.3.2";
+        data['version'] = version;
         return JSON.stringify(data);
     }
 
diff --git a/src/components/utilities/Settings.js b/src/components/utilities/Settings.js
@@ -7,14 +7,12 @@ const reducer = (state, action) => {
             return {...state, delay: action.value};
         case 'durationMin':
             return {...state, durationMin: action.value};
-        case 'durationSec':
-            let value = String(action.value);
-            if(Number(value) < 0) value = "0";
-            if(Number(value) > 59) value = "59";
-            if(Number(value) < 10) value = "0"+String(value);
-            return {...state, durationSec: value};
+        case 'signalDuration':
+            return {...state, signalDuration: action.value};
         case 'showMS':
             return {...state, showMS: Boolean(action.value)};
+        case 'showTips':
+            return {...state, showTips: Boolean(action.value)};
         case 'all':
             return {...action.value};
         default:
@@ -23,7 +21,13 @@ const reducer = (state, action) => {
     }
 }
 
-const SanitizeInt = (val) => val.replace(/\D/g, '');
+const SanitizeInt = (element, value) => {
+    value = value.replace(/(?=\.).+/,'');
+    value = value.replace(/[^0-9]/g,'');
+    if(Number(value) < element.min) value = element.min;
+    if(Number(value) > element.max) value = element.max;
+    return Number(value);
+}
 
 function Settings({ open, setOpen, settings, setSettings }) {
     const [state, dispatch] = useReducer(reducer, settings);
@@ -44,26 +48,38 @@ function Settings({ open, setOpen, settings, setSettings }) {
                         id="settings-delay"
                         name="delay"
                         type="number"
+                        min="0"
+                        max="99"
                         value={state.delay}
-                        onChange={(event) => dispatch({modify: "delay", value: SanitizeInt(event.target.value)})} />
+                        onChange={(event) => dispatch({modify: "delay", value: event.target.value})}
+                        onBlur={(event) => dispatch({modify: "delay", value: SanitizeInt(event.target, event.target.value)})} />
                     <span>&nbsp;seconds</span>
                 </div>
                 <div className="setting-row">
-                    <label htmlFor="settings-duration-min">Duration</label>
+                    <label htmlFor="settings-duration-min">Timer Duration</label>
                     <input 
                         id="settings-duration-min"
                         name="durationMin"
                         type="number"
+                        min="1"
+                        max="60"
                         value={state.durationMin}
-                        onChange={(event) => dispatch({modify: "durationMin", value: SanitizeInt(event.target.value)})} />
+                        onChange={(event) => dispatch({modify: "durationMin", value: event.target.value})}
+                        onBlur={(event) => dispatch({modify: "durationMin", value: SanitizeInt(event.target, event.target.value)})} />
                     <span>&nbsp;minutes</span>
-                    {/* <span>&nbsp;:&nbsp;</span>
+                </div>
+                <div className="setting-row">
+                    <label htmlFor="settings-signal-duration">Display Signals</label>
                     <input 
-                        id="settings-duration-sec"
-                        name="durationSec"
+                        id="settings-signal-duration"
+                        name="signalDuration"
                         type="number"
-                        value={state.durationSec}
-                        onChange={(event) => dispatch({modify: "durationSec", value: SanitizeInt(event.target.value)})} /> */}
+                        min="1"
+                        max="59"
+                        value={state.signalDuration}
+                        onChange={(event) => dispatch({modify: "signalDuration", value: event.target.value})}
+                        onBlur={(event) => dispatch({modify: "signalDuration", value: SanitizeInt(event.target, event.target.value)})} />
+                    <span>&nbsp;seconds</span>
                 </div>
                 <div className="setting-row">
                     <input
@@ -74,6 +90,15 @@ function Settings({ open, setOpen, settings, setSettings }) {
                         onChange={(event) => dispatch({modify: "showMS", value: event.target.checked})} />
                     <label htmlFor="settings-show-ms" className="after">Show milliseconds</label>
                 </div>
+                <div className="setting-row">
+                    <input
+                        id="settings-show-tips"
+                        name="showTips"
+                        type="checkbox"
+                        checked={state.showTips}
+                        onChange={(event) => dispatch({modify: "showTips", value: event.target.checked})} />
+                    <label htmlFor="settings-show-tips" className="after">Show hint details</label>
+                </div>
                 <div id="settings-button-row">
                     <div
                         className="setting-button"
diff --git a/src/components/utilities/Timer.js b/src/components/utilities/Timer.js
diff --git a/src/styles/Settings.css b/src/styles/Settings.css

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "lptimer",`
`3`		`- "version": "1.3.2",`
	`3`	`+ "version": "1.4.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"homepage": "https://kroljs.com/LP-Timer",`
`6`	`6`	`"dependencies": {`
Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`import React from 'react';`
`2`	`2`	`import Timer from '../utilities/Timer';`
`3`	`3`
`4`		`-function ExtPage({ min=7, delay=0 }) {`
	`4`	`+function ExtPage({ min=7, delay=0, showTips=true, signalDuration=5 }) {`
`5`	`5`	`return (`
`6`	`6`	`<>`
`7`		`- <Timer mode="ext" min={min} delay={delay} />`
	`7`	`+ <Timer mode="ext" min={min} delay={delay} showTips={showTips} signalDuration={signalDuration} />`
`8`	`8`	`</>`
`9`	`9`	`)`
`10`	`10`	`}`