refract make reusable components

client/src/common/input/DelayValue.jsx

@@ -0,0 +1,11 @@
+import style from './EditableTimer.module.css';
+
+export default function DelayValue(props) {
+  const { delay } = props;
+  const delayed = delay > 0;
+  return (
+    <div className={delayed && style.delayValue}>
+      {delayed && <span>{`+ ${delay}`}</span>}
+    </div>
+  );
+}

client/src/common/input/EditableText.jsx

@@ -0,0 +1,22 @@
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import style from './EditableText.module.css';
+
+export default function EditableText(props) {
+  const { label, defaultValue, placeholder, handleSubmit } = props;
+  return (
+    <div style={{ display: 'block' }}>
+      <span className={props.underlined ? style.titleUnderlined : style.title}>
+        {label}
+      </span>
+      <Editable
+        onSubmit={(v) => handleSubmit(v)}
+        defaultValue={defaultValue}
+        placeholder={placeholder}
+        style={{ display: 'inline' }}
+      >
+        <EditablePreview />
+        <EditableInput style={{ width: '13em', minWidth: '13em' }} />
+      </Editable>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+.title,
+.titleUnderlined {
+  padding-left: 1em;
+  font-size: 0.8em;
+  color: #888;
+  display: inline-block;
+  width: 6em;
+  cursor: default;
+}
+
+.titleUnderlined {
+  border-bottom: 1px solid #0001;
+}

client/src/common/input/EditableTimer.jsx

@@ -0,0 +1,60 @@
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { useEffect, useState } from 'react';
+import { addAndFormat, timeToDate, dateToTime } from '../dateConfig';
+import style from './EditableTimer.module.css';
+
+export default function EditableTimer(props) {
+  const { name, updateValues, time, delay } = props;
+  const [value, setValue] = useState('');
+  const [showValue, setShowValue] = useState('');
+
+  // prepare time fields
+  useEffect(() => {
+    setValue(addAndFormat(time, delay));
+  }, [time, delay]);
+
+  const handleSubmit = (submitedVal) => {
+    console.log('edit: on submit');
+
+    if (submitedVal === value) return;
+
+    updateValues(name, timeToDate(submitedVal));
+    setValue(addAndFormat(time, delay));
+  };
+
+  const showNormal = () => {
+    console.log('edit: on edit');
+    setValue(dateToTime(time));
+  };
+
+  const handleChange = (submitedVal) => {
+    console.log('edit: change handler', submitedVal);
+    setValue(submitedVal);
+  };
+
+  const handleBlur = () => {
+    console.log('edit: onBlur');
+    setValue(addAndFormat(time, delay));
+  };
+
+  console.log('hh', value, time);
+
+  return (
+    <div className={style.time}>
+      <Editable
+        // submitOnBlur={false}
+        // onEdit={showNormal}
+        onSubmit={(v) => handleSubmit(v)}
+        onChange={(v) => handleChange(v)}
+        onBlur={(v) => handleBlur(v)}
+        value={value}
+        placeholder='--:--'
+        style={{ textAlign: 'center' }}
+        className={delay > 0 && style.delayedEditable}
+      >
+        <EditablePreview />
+        <EditableInput type='time' min='00:00' max='23:59' />
+      </Editable>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+.time {
+  background-color: #fff8;
+  border: 1px solid #0001;
+  border-radius: 4px;
+  width: 5em;
+  height: fit-content;
+}
+
+.delayedEditable {
+  background-color: #ecc94b22;
+}
+
+.delayValue {
+  font-size: 14px;
+  line-height: 2em;
+  color: #555;
+  background-color: #ffeaa066;
+  border-radius: 4px;
+  text-align: center;
+  border: 1px solid #0001;
+}