Feat/seconds (#38)

* change directory structure

move test file to __tests__ at the module directory

* test function

Add more tests to ensure the function remains safe

* fix coverage filter

* change directory structure

move to utilities folder

* refract formatDisplay with tst

* test millis

* test millis to seconds

* refract millis functions

* refractor timeStringToMillis

* create utility consts

* style component

* fixed bug with hidezero parameter

* fix issue with cancelling input edit

* style tweak

client/src/common/input/EditableTimer.jsx

@@ -1,10 +1,6 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useEffect, useState } from 'react';
-import {
-  timeFormat,
-  stringFromMillis,
-  timeStringToMillis,
-} from '../dateConfig';
+import { stringFromMillis, timeStringToMillis } from '../utils/dateConfig';
 import { showErrorToast } from '../helpers/toastManager';
 import style from './EditableTimer.module.css';
 
@@ -16,7 +12,7 @@ export default function EditableTimer(props) {
   useEffect(() => {
     if (time == null) return;
     try {
-      setValue(stringFromMillis(time + delay, false));
+      setValue(stringFromMillis(time + delay));
     } catch (error) {
       showErrorToast('Error parsing date', error.text);
     }
@@ -24,9 +20,8 @@ export default function EditableTimer(props) {
 
   const validateValue = (value) => {
     const success = handleSubmit(value);
-
     if (success) setValue(value);
-    else setValue(stringFromMillis(time + delay, false));
+    else setValue(stringFromMillis(time + delay, true));
   };
 
   const handleSubmit = (value) => {
@@ -34,13 +29,13 @@ export default function EditableTimer(props) {
     if (value === '') return false;
 
     // Time now and time submitedVal
-    const original = stringFromMillis(time + delay, false);
+    const original = stringFromMillis(time + delay, true);
 
     // check if time is different from before
     if (value === original) return false;
 
     // convert to millis object
-    const millis = timeStringToMillis(value, timeFormat);
+    const millis = timeStringToMillis(value);
 
     // validate with parent
     if (!validate(name, millis)) return false;
@@ -55,12 +50,13 @@ export default function EditableTimer(props) {
     <Editable
       onChange={(v) => setValue(v)}
       onSubmit={(v) => validateValue(v)}
+      onCancel={() => setValue(stringFromMillis(time + delay, true))}
       value={value}
-      placeholder='--:--'
+      placeholder='--:--:--'
       className={delay > 0 ? style.delayedEditable : style.editable}
     >
       <EditablePreview />
-      <EditableInput type='time' min='00:00' max='23:59' />
+      <EditableInput type='time' step='1' min='00:00:00' max='23:59:00' />
     </Editable>
   );
 }