delay input

- temporary fix due to issues with slider component

client/src/common/input/TimeInput.jsx

@@ -0,0 +1,46 @@
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import style from './TimeInput.module.css';
+
+const inputProps = {
+  width: 20,
+  backgroundColor: '#fff5',
+  placeholder: '-',
+  textAlign: 'center',
+};
+
+export default function TimeInput(props) {
+  const [value, setValue] = useState(props.value);
+
+  useEffect(() => {
+    if (props.value === null) return;
+    setValue(props.value);
+  }, [props.value]);
+
+  const handleChange = (val) => {
+    if (val <= 999) setValue(val);
+  };
+
+  const handleSubmit = (val) => {
+    if (val === props.value) return;
+    if (val === '') setValue(0);
+    if (val > 0 && val < 60) {
+      props.submitHandler(val);
+    }
+  };
+
+  return (
+    <div className={style.timeInput}>
+      <Editable
+        {...inputProps}
+        value={value}
+        onChange={(v) => handleChange(v)}
+        onSubmit={(v) => handleSubmit(v)}
+      >
+        <EditablePreview />
+        <EditableInput type='number' min='0' max='60' />
+      </Editable>
+      <span className={style.label}>{'(min)'}</span>
+    </div>
+  );
+}

client/src/common/input/TimeInput.module.css

@@ -0,0 +1,9 @@
+.timeInput {
+  display: flex;
+  font-size: 15px;
+}
+
+.label {
+  color: #0005;
+  padding-left: 0.8em;
+}

client/src/features/editors/list/DelayBlock.jsx

@@ -1,58 +1,32 @@
-import { Box } from '@chakra-ui/layout';
-import {
-  Slider,
-  SliderFilledTrack,
-  SliderThumb,
-  SliderTrack,
-} from '@chakra-ui/slider';
 import { useEffect, useState } from 'react';
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
+import { millisToMinutes } from '../../../common/dateConfig';
+import TimeInput from '../../../common/input/TimeInput';
 import style from './Block.module.css';
 
 export default function DelayBlock(props) {
-  const [delay, setDelay] = useState(0);
-  const { data, eventsHandler, index, updateData } = props;
+  const { data, eventsHandler, index } = props;
 
-  // update delay value in parent
-  const populateDelay = (value) => {
-    // check if value has changed
-    if (data.timerDuration !== value) {
-      // create object with new field
-      const newData = { ...data, timerDuration: delay };
-
-      // request update in parent
-      updateData(index, newData);
-    }
-  };
-
-  // update delay value in state
-  useEffect(() => {
-    setDelay(data.timerDuration);
-  }, [data]);
   const addHandler = () => {
+    eventsHandler('add', { type: 'event', order: index + 1 });
   };
+
+  const submitHandler = (value) => {
+    // convert to ms and patch
+    eventsHandler('patch', { id: data.id, duration: value * 1000 * 60 });
+  };
+
   const deleteHandler = () => {
     eventsHandler('delete', data.id);
   };
 
   return (
     <div className={style.delay}>
-      <div className={style.delayValue}>{`${delay} min`}</div>
-      <Slider
-        defaultValue={data.timerDuration}
-        min={0}
-        max={60}
-        step={5}
-        onChange={(value) => setDelay(value)}
-        onChangeEnd={(value) => populateDelay(value)}
-      >
-        <SliderTrack bg='orange.100'>
-          <Box position='relative' right={10} />
-          <SliderFilledTrack bg='orange' />
-        </SliderTrack>
-        <SliderThumb boxSize={4} />
-      </Slider>
+      <TimeInput
+        value={millisToMinutes(data.duration)}
+        submitHandler={submitHandler}
+      />
       <div className={style.actionOverlay}>
         <DeleteIconBtn clickHandler={deleteHandler} />
         <AddIconBtn clickHandler={addHandler} />