millis + validation

client/src/common/components/eventTimes/EventTimes.jsx

@@ -4,17 +4,33 @@ import DelayValue from '../../input/DelayValue';
 export default function EventTimes(props) {
   const { updateValues, delay, timeStart, timeEnd } = props;
 
+  // TODO: how to handle midnight rollover
+  const handleValidate = (entry, v) => {
+    // if one of the fields is not set, all good
+
+    if (v == null || timeStart == null || timeEnd == null) return true;
+
+    if (entry === 'timeStart') return v < timeEnd;
+    else if (entry === 'timeEnd') return v > timeStart;
+
+    // shouldnt come to this
+    return false;
+  };
+
+
   return (
     <>
       <DelayValue delay={delay} />
       <EditableTimer
         name='timeStart'
+        validate={handleValidate}
         updateValues={updateValues}
         time={timeStart}
         delay={delay}
       />
       <EditableTimer
         name='timeEnd'
+        validate={handleValidate}
         updateValues={updateValues}
         time={timeEnd}
         delay={delay}

client/src/common/input/EditableTimer.jsx

@@ -1,45 +1,67 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useEffect, useState } from 'react';
-import { addAndFormat, timeToDate, dateToTime } from '../dateConfig';
+import {
+  timeFormat,
+  stringFromMillis,
+  timeStringToMillis,
+} from '../dateConfig';
+import { showErrorToast } from '../helpers/toastManager';
 import style from './EditableTimer.module.css';
 
 export default function EditableTimer(props) {
-  const { name, updateValues, time, delay } = props;
+  const { name, updateValues, time, delay, validate } = props;
   const [value, setValue] = useState('');
-  const [editing, setEditing] = useState(false);
 
   // prepare time fields
   useEffect(() => {
     if (time == null) return;
-    setValue(addAndFormat(time, delay));
+    try {
+      setValue(stringFromMillis(time + delay, false));
+    } catch (error) {
+      showErrorToast('Error parsing date', error.text);
+    }
   }, [time, delay]);
 
-  const handleSubmit = (submitedVal) => {
-    setValue(addAndFormat(time, delay));
-    setEditing(false);
+  const validateValue = (value) => {
+    const success = handleSubmit(value);
 
-    const newTime = timeToDate(submitedVal);
-
-    // No need to update if it hasnt changed
-    if (newTime === value) return;
-    updateValues(name, newTime);
+    if (success) setValue(value);
+    else setValue(stringFromMillis(time + delay, false));
   };
 
-  const showNormal = () => {
-    if (!editing) setValue(dateToTime(time));
+  const handleSubmit = (value) => {
+    // Check if there is anything there
+    if (value === '') return false;
+
+    // Time now and time submitedVal
+    const original = stringFromMillis(time, false);
+
+    // check if time is different from before
+    if (value === original) return false;
+
+    // conver to millis object
+    const millis = timeStringToMillis(value, timeFormat);
+
+    // validate with parent
+    if (!validate(name, millis)) return false;
+
+    // update entry
+    updateValues(name, millis);
+
+    return true;
   };
 
-  const handleChange = (submitedVal) => {
-    setEditing(true);
-    setValue(submitedVal);
+  const showOriginal = () => {
+    setValue(stringFromMillis(time, false));
   };
 
   return (
     <div className={style.time}>
       <Editable
-        onEdit={() => showNormal}
-        onSubmit={(v) => handleSubmit(v)}
-        onChange={(v) => handleChange(v)}
+        onFocus={() => showOriginal()}
+        onEdit={() => showOriginal}
+        onChange={(v) => setValue(v)}
+        onSubmit={(v) => validateValue(v)}
         value={value}
         placeholder='--:--'
         className={delay > 0 ? style.delayedEditable : style.editable}