refract make reusable components

client/src/common/components/buttons/AddIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiPlus } from "react-icons/fi";
+
+export default function AddIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiPlus />}
+      colorScheme='blue'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiMinusCircle } from 'react-icons/fi';
+
+export default function BlockIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiMinusCircle />}
+      colorScheme='purple'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiClock } from 'react-icons/fi';
+
+export default function DelayIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiClock />}
+      colorScheme='yellow'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -0,0 +1,13 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiMinus } from 'react-icons/fi';
+
+export default function DeleteIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiMinus />}
+      colorScheme='red'
+      onClick={() => props.clickHandler}
+    />
+  );
+}

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

@@ -0,0 +1,24 @@
+import EditableTimer from '../../input/EditableTimer';
+import DelayValue from '../../input/DelayValue';
+
+export default function EventTimes(props) {
+  const { updateValues, delay, timeStart, timeEnd } = props;
+
+  return (
+    <>
+      <EditableTimer
+        name='timeStart'
+        updateValues={updateValues}
+        time={timeStart}
+        delay={delay}
+      />
+      <EditableTimer
+        name='timeEnd'
+        updateValues={updateValues}
+        time={timeEnd}
+        delay={delay}
+      />
+      <DelayValue delay={delay} />
+    </>
+  );
+}

client/src/common/dateConfig.js

@@ -1,17 +1,22 @@
-import { addMinutes, format, parseISO } from "date-fns";
+import { addMinutes, format, parseISO } from 'date-fns';
 
 export const timeFormat = 'HH:mm';
 export const timeFormatSeconds = 'HH:mm:ss';
 
- // make date with string
+// make date with string
 export const timeToDate = (time) => {
   const today = new Date();
   return new Date(today.toDateString() + ' ' + time);
 };
 
+// utility to parse and format
+export const dateToTime = (time) => {
+  const fTime = parseISO(time, 1);
+  return format(fTime, timeFormat);
+};
+
 // small shorthand for adding delay and formatting date
 export const addAndFormat = (time, delay) => {
   const fTime = parseISO(time, 1);
   return format(addMinutes(fTime, delay), timeFormat);
 };
-

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;
+}

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

@@ -30,6 +30,12 @@ export default function DelayBlock(props) {
   useEffect(() => {
     setDelay(data.timerDuration);
   }, [data]);
+  const addHandler = () => {
+    eventsHandler('add', { type: 'block', order: index + 1 });
+  };
+  const deleteHandler = () => {
+    eventsHandler('delete', data.id);
+  };
 
   return (
     <div className={style.delayContainer}>
@@ -49,11 +55,6 @@ export default function DelayBlock(props) {
         <SliderThumb boxSize={4} />
       </Slider>
       <div className={style.actionOverlay}>
-        <IconButton
-          size='xs'
-          icon={<MinusIcon />}
-          colorScheme='red'
-          onClick={() => eventsHandler('delete', data.id)}
         />
         <IconButton
           size='xs'
@@ -63,6 +64,8 @@ export default function DelayBlock(props) {
             eventsHandler('add', { type: 'event', order: index + 1 })
           }
         />
+        <DeleteIconBtn clickHandler={deleteHandler} />
+        <AddIconBtn clickHandler={addHandler} />
       </div>
     </div>
   );

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

@@ -1,34 +1,19 @@
-import {
-  AddIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  MinusIcon,
-  NotAllowedIcon,
-  TimeIcon,
-} from '@chakra-ui/icons';
-import {
-  IconButton,
-  Editable,
-  EditablePreview,
-  EditableInput,
-} from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
-import { addAndFormat, timeToDate } from '../../../common/dateConfig';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { Editable, EditablePreview, EditableInput } from '@chakra-ui/react';
+import { useState } from 'react';
+import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
+import BlockIconBtn from '../../../common/components/buttons/BlockIconBtn';
+import DelayIconBtn from '../../../common/components/buttons/DelayIconBtn';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
+import EventTimes from '../../../common/components/eventTimes/EventTimes';
 import { showErrorToast } from '../../../common/helpers/toastManager';
 import style from './List.module.css';
+import EditableText from '../../../common/input/EditableText';
 
 export default function EventBlock(props) {
   const { data, selected, delay, index, eventsHandler } = props;
 
   const [more, setMore] = useState(false);
-  const [timeStart, setTimeStart] = useState(0);
-  const [timeEnd, setTimeEnd] = useState(addAndFormat(data.timeEnd, delay));
-
-  // prepare time fields
-  useEffect(() => {
-    setTimeStart(addAndFormat(data.timeStart, delay));
-    setTimeEnd(addAndFormat(data.timeEnd, delay));
-  }, [data, delay]);
 
   const updateValues = (field, value) => {
     // validate field
@@ -43,129 +28,84 @@ export default function EventBlock(props) {
     }
   };
 
+  const addHandler = () => {
+    eventsHandler('add', { type: 'block', order: index + 1 });
+  };
+  const delayHandler = () => {
+    eventsHandler('add', { type: 'delay', order: index + 1 });
+  };
+  const blockHandler = () => {
+    eventsHandler('add', { type: 'block', order: index + 1 });
+  };
+  const deleteHandler = () => {
+    eventsHandler('delete', data.id);
+  };
+
+  const handleTitleSubmit = (v) => {
+    updateValues('title', v);
+  };
+
+  const handleSubtitleSubmit = (v) => {
+    updateValues('subtitle', v);
+  };
+
+  const handlePresenterSubmit = (v) => {
+    updateValues('presenter', v);
+  };
+
   return (
-    <form>
-      <div className={selected ? style.eventRowActive : style.eventRow}>
-        <div className={style.time}>
-          <Editable
-            onSubmit={(v) => updateValues('timeStart', timeToDate(v))}
-            value={timeStart}
-            onChange={(val) => setTimeStart(val)}
-            placeholder='--:--'
-            style={{ textAlign: 'center' }}
-            className={delay > 0 && style.delayedEditable}
-          >
-            <EditablePreview />
-            <EditableInput type='time' min='00:00' max='23:59' />
-          </Editable>
-        </div>
-        <div className={style.time}>
-          <Editable
-            onSubmit={(v) => updateValues('timeEnd', timeToDate(v))}
-            value={timeEnd}
-            onChange={(val) => setTimeEnd(val)}
-            placeholder='--:--'
-            style={{ textAlign: 'center' }}
-            className={delay > 0 && style.delayedEditable}
-          >
-            <EditablePreview />
-            <EditableInput type='time' min='00:00' max='23:59' />
-          </Editable>
-        </div>
-        <div className={style.rowDetailed}>
-          {more ? (
-            <div className={style.detailedContainer}>
-              <div style={{ display: 'block' }}>
-                <span className={style.detailedTitleUnderlined}>Title</span>
-                <Editable
-                  onSubmit={(v) => updateValues('title', v)}
-                  defaultValue={data.title}
-                  placeholder='Add title'
-                  style={{ display: 'inline' }}
-                >
-                  <EditablePreview />
-                  <EditableInput style={{ width: '13em' }} />
-                </Editable>
-              </div>
-              <div style={{ display: 'block' }}>
-                <span className={style.detailedTitleUnderlined}>Subtitle</span>
-                <Editable
-                  onSubmit={(v) => updateValues('subtitle', v)}
-                  defaultValue={data.subtitle}
-                  placeholder='Add subtitle'
-                  style={{ display: 'inline' }}
-                >
-                  <EditablePreview />
-                  <EditableInput style={{ width: '13em', minWidth: '13em' }} />
-                </Editable>
-              </div>
-              <div style={{ display: 'block' }}>
-                <span className={style.detailedTitleUnderlined}>Presenter</span>
-                <Editable
-                  onSubmit={(v) => updateValues('presenter', v)}
-                  defaultValue={data.presenter}
-                  placeholder='Add presenter name'
-                  style={{ display: 'inline' }}
-                >
-                  <EditablePreview style={{}} />
-                  <EditableInput style={{ width: '13em' }} />
-                </Editable>
-              </div>
-            </div>
-          ) : (
-            <div className={style.titleContainer}>
-              <div>
-                <span className={style.detailedTitle}>Title</span>
-                <Editable
-                  onSubmit={(v) => updateValues('title', v)}
-                  defaultValue={data.title}
-                  placeholder='Add title'
-                  style={{ display: 'inline' }}
-                  id='title'
-                >
-                  <EditablePreview />
-                  <EditableInput style={{ width: '13em' }} />
-                </Editable>
-              </div>
-            </div>
-          )}
-          <div className={style.more} onClick={() => setMore(!more)}>
-            {more ? <ChevronUpIcon /> : <ChevronDownIcon />}
+    <div className={selected ? style.eventRowActive : style.eventRow}>
+      <EventTimes
+        updateValues={updateValues}
+        timeStart={data.timeStart}
+        timeEnd={data.timeEnd}
+        delay={delay}
+      />
+      <div className={style.rowDetailed}>
+        {more ? (
+          <div className={style.detailedContainer}>
+            <EditableText
+              label='Title'
+              defaultValue={data.title}
+              placeholder='Add Title'
+              underlined
+              submitHandler={handleTitleSubmit}
+            />
+            <EditableText
+              label='Subtitle'
+              defaultValue={data.subtitle}
+              placeholder='Add Subtitle'
+              underlined
+              submitHandler={handleSubtitleSubmit}
+            />
+            <EditableText
+              label='Presenter'
+              defaultValue={data.subtitle}
+              placeholder='Add Presenter name'
+              underlined
+              submitHandler={handlePresenterSubmit}
+            />
           </div>
-        </div>
-        <div className={style.actionOverlay}>
-          <IconButton
-            size='xs'
-            icon={<MinusIcon />}
-            colorScheme='red'
-            onClick={() => eventsHandler('delete', data.id)}
-          />
-          <IconButton
-            size='xs'
-            icon={<AddIcon />}
-            colorScheme='blue'
-            onClick={() =>
-              eventsHandler('add', { type: 'event', order: index + 1 })
-            }
-          />
-          <IconButton
-            size='xs'
-            icon={<TimeIcon />}
-            colorScheme='yellow'
-            onClick={() =>
-              eventsHandler('add', { type: 'delay', order: index + 1 })
-            }
-          />
-          <IconButton
-            size='xs'
-            icon={<NotAllowedIcon />}
-            colorScheme='purple'
-            onClick={() =>
-              eventsHandler('add', { type: 'block', order: index + 1 })
-            }
-          />
+        ) : (
+          <div className={style.titleContainer}>
+            <EditableText
+              label='Title'
+              defaultValue={data.title}
+              placeholder='Add Title'
+              submitHandler={handleTitleSubmit}
+            />
+          </div>
+        )}
+        <div className={style.more} onClick={() => setMore(!more)}>
+          {more ? <FiChevronUp /> : <FiChevronDown />}
         </div>
       </div>
-    </form>
+      <div className={style.actionOverlay}>
+        <DeleteIconBtn clickHandler={deleteHandler} />
+        <AddIconBtn clickHandler={addHandler} />
+        <DelayIconBtn clickHandler={delayHandler} />
+        <BlockIconBtn clickHandler={blockHandler} />
+      </div>
+    </div>
   );
 }

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

@@ -1,7 +1,7 @@
-import EventListItem from './EventListItem';
 import style from './List.module.css';
 import DelayBlock from './DelayBlock';
 import BlockBlock from './BlockBlock';
+import EventBlock from './EventBlock';
 
 export default function EventList(props) {
   const { events, selected, eventsHandler } = props;
@@ -19,7 +19,7 @@ export default function EventList(props) {
         if (e.type === 'event') {
           eventCount = eventCount + 1;
           return (
-            <EventListItem
+            <EventBlock
               key={e.id}
               index={index}
               data={e}

client/src/features/menu/EventListMenu.jsx

@@ -8,6 +8,7 @@ import {
   MenuItem,
   MenuList,
 } from '@chakra-ui/react';
+import AddIconBtn from '../../common/components/buttons/AddIconBtn';
 import style from './EventListMenu.module.css';
 
 export default function EventListMenu(props) {
@@ -17,6 +18,10 @@ export default function EventListMenu(props) {
     variant: 'outline',
   };
 
+  const addHandler = () => {
+    eventsHandler('add', { type: 'event', order: 0 });
+  };
+
   return (
     <div className={style.headerButtons}>
       <Menu>
@@ -45,12 +50,7 @@ export default function EventListMenu(props) {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
-      <IconButton
-        size='sm'
-        icon={<AddIcon />}
-        colorScheme='blue'
-        onClick={() => eventsHandler('add', { type: 'event', order: 0 })}
-      />
+      <AddIconBtn clickHandler={addHandler} size='sm' />
     </div>
   );
 }