Hotfix/4.0.0 (#48)

* validate time string
* handle time entered in seconds
* fix: id in delays and blocks

client/src/common/input/EditableTimer.jsx

@@ -1,6 +1,10 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useEffect, useState } from 'react';
-import { stringFromMillis, timeStringToMillis } from '../utils/dateConfig';
+import {
+  isTimeString,
+  stringFromMillis,
+  timeStringToMillis,
+} from '../utils/dateConfig';
 import { showErrorToast } from '../helpers/toastManager';
 import style from './EditableTimer.module.css';
 
@@ -28,23 +32,23 @@ export default function EditableTimer(props) {
     // Check if there is anything there
     if (value === '') return false;
 
-    // ensure we have seconds
-    const val = value.split(':').length === 3 ? value : `${value}:00`;
+    // check if its valid time string
+    if (!isTimeString(value)) return false;
+
+    // convert entered value to milliseconds
+    const newValMillis = timeStringToMillis(value);
 
     // Time now and time submitedVal
-    const original = stringFromMillis(time + delay, true);
+    const originalMillis = time + delay;
 
     // check if time is different from before
-    if (val === original) return false;
-
-    // convert to millis object
-    const millis = timeStringToMillis(val);
+    if (newValMillis === originalMillis) return false;
 
     // validate with parent
-    if (!validate(name, millis)) return false;
+    if (!validate(name, newValMillis)) return false;
 
     // update entry
-    actionHandler('update', { field: name, value: millis });
+    actionHandler('update', { field: name, value: newValMillis });
 
     return true;
   };
@@ -58,13 +62,7 @@ export default function EditableTimer(props) {
       className={delay > 0 ? style.delayedEditable : style.editable}
     >
       <EditablePreview />
-      <EditableInput
-        type='time'
-        placeholder='--:--:--'
-        min='00:00:00'
-        max='23:59:59'
-        step='1'
-      />
+      <EditableInput type='text' placeholder='--:--:--' />
     </Editable>
   );
 }

client/src/common/utils/__tests__/dateConfig.test.js

@@ -213,4 +213,34 @@ describe('test timeStringToMillis function', () => {
     const t = { val: '1:00:00', result: 3600000 };
     expect(timeStringToMillis(t.val)).toBe(t.result);
   });
+
+  it('test with 1', () => {
+    const t = { val: '1', result: 1000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 120', () => {
+    const t = { val: '120', result: 120000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 56', () => {
+    const t = { val: '56', result: 56000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 2:3', () => {
+    const t = { val: '2:3', result: 123000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 02:3', () => {
+    const t = { val: '02:3', result: 123000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 2:03', () => {
+    const t = { val: '2:03', result: 123000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
 });

client/src/common/utils/dateConfig.js

@@ -90,8 +90,31 @@ export const millisToMinutes = (millis) => {
 export const timeStringToMillis = (string) => {
   if (typeof string !== 'string') return 0;
   const time = string.split(':');
-  if (time.length === 2) return Math.abs(time[0]) * mth + time[1];
+  if (time.length === 1) return Math.abs(time[0] * mts);
+  if (time.length === 2) return Math.abs(time[0]) * mtm + time[1] * mts;
   if (time.length === 3)
     return Math.abs(time[0]) * mth + time[1] * mtm + time[2] * mts;
   else return 0;
 };
+
+/**
+ * @description Validates a time string
+ * @param {string} string - time string "23:00:12"
+ * @returns {boolean} string represents time
+ */
+
+// isTimeString
+export const isTimeString = (string) => {
+  // ^                   # Start of string
+  // (?:                 # Try to match...
+  //  (?:                #  Try to match...
+  //   ([01]?\d|2[0-3]): #   HH:
+  //  )?                 #  (optionally).
+  //  ([0-5]?\d):        #  MM: (required)
+  // )?                  # (entire group optional, so either HH:MM:, MM: or nothing)
+  // ([0-5]?\d)          # SS (required)
+  // $                   # End of string
+
+  const regex = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/;
+  return regex.test(string);
+};