refract: cleanup

client/src/app/api/apiConstants.js

@@ -0,0 +1,2 @@
+// TODO: should be defined dynamically?
+export const serverURL = 'http://localhost:4001/';

client/src/common/dateConfig.js

@@ -1,3 +1,5 @@
+import { addMinutes, format, parseISO } from "date-fns";
+
 export const timeFormat = 'HH:mm';
 export const timeFormatSeconds = 'HH:mm:ss';
 
@@ -6,3 +8,10 @@ export const timeToDate = (time) => {
   const today = new Date();
   return new Date(today.toDateString() + ' ' + time);
 };
+
+// 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/features/editors/list/BlockBlock.jsx

@@ -3,6 +3,7 @@ import { AddIcon, MinusIcon } from '@chakra-ui/icons';
 import style from './List.module.css';
 
 export default function BlockBlock(props) {
+  const { eventsHandler, index, data } = props;
   return (
     <div className={style.blockContainer}>
       <div className={style.actionOverlay}>
@@ -10,13 +11,15 @@ export default function BlockBlock(props) {
           size='xs'
           icon={<MinusIcon />}
           colorScheme='red'
-          onClick={() => props.deleteEvent(props.index)}
+          onClick={() => eventsHandler('delete', data.id)}
         />
         <IconButton
           size='xs'
           icon={<AddIcon />}
           colorScheme='blue'
-          onClick={() => props.createEvent(props.index)}
+          onClick={() =>
+            eventsHandler('add', { type: 'event', order: index + 1 })
+          }
         />
       </div>
     </div>

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

@@ -12,7 +12,7 @@ import style from './List.module.css';
 
 export default function DelayBlock(props) {
   const [delay, setDelay] = useState(0);
-  const { data, ...rest } = props;
+  const { data, eventsHandler, index, updateData } = props;
 
   // update delay value in parent
   const populateDelay = (value) => {
@@ -22,7 +22,7 @@ export default function DelayBlock(props) {
       const newData = { ...data, timerDuration: delay };
 
       // request update in parent
-      props.updateData(props.index, newData);
+      updateData(index, newData);
     }
   };
 
@@ -53,13 +53,15 @@ export default function DelayBlock(props) {
           size='xs'
           icon={<MinusIcon />}
           colorScheme='red'
-          onClick={() => props.deleteEvent(props.index)}
+          onClick={() => eventsHandler('delete', data.id)}
         />
         <IconButton
           size='xs'
           icon={<AddIcon />}
           colorScheme='blue'
-          onClick={() => props.createEvent(props.index)}
+          onClick={() =>
+            eventsHandler('add', { type: 'event', order: index + 1 })
+          }
         />
       </div>
     </div>

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

@@ -12,33 +12,23 @@ import {
   EditablePreview,
   EditableInput,
 } from '@chakra-ui/react';
-import { addMinutes, format } from 'date-fns';
 import { useEffect, useState } from 'react';
-import { timeFormat, timeToDate } from '../../../common/dateConfig';
+import { addAndFormat, timeToDate } from '../../../common/dateConfig';
+import { showErrorToast } from '../../../common/helpers/toastManager';
 import style from './List.module.css';
 
-// small shorthand for adding delay and formatting date
-const addAndFormat = (time, delay) => {
-  return format(addMinutes(time, delay), timeFormat);
-};
-
 export default function EventListItem(props) {
-  const [more, setMore] = useState(false);
+  const { data, selected, delay, index, eventsHandler, updateData } = props;
-  // const [timeStart, setTimeStart] = useState(
-  //   addAndFormat(props.data.timeStart, props.delay)
-  // );
-  const [timeStart, setTimeStart] = useState(0);
-  const [timeEnd, setTimeEnd] = useState(
-    addAndFormat(props.data.timeEnd, props.delay)
-  );
 
-  const { data, selected, delay, ...rest } = 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(props.data.timeStart, props.delay));
+    setTimeStart(addAndFormat(data.timeStart, delay));
-    setTimeEnd(addAndFormat(props.data.timeEnd, props.delay));
+    setTimeEnd(addAndFormat(data.timeEnd, delay));
-  }, [props.data, props.delay]);
+  }, [data, delay]);
 
   const updateValues = (field, value) => {
     // validate field
@@ -47,9 +37,9 @@ export default function EventListItem(props) {
       const newData = { ...data, [field]: value };
 
       // request update in parent
-      props.updateData(props.index, newData);
+      updateData(index, newData);
     } else {
-      console.log('field error', field);
+      showErrorToast('Field Error: ' + field);
     }
   };
 
@@ -148,25 +138,31 @@ export default function EventListItem(props) {
             size='xs'
             icon={<MinusIcon />}
             colorScheme='red'
-            onClick={() => props.deleteEvent(props.index)}
+            onClick={() => eventsHandler('delete', data.id)}
           />
           <IconButton
             size='xs'
             icon={<AddIcon />}
             colorScheme='blue'
-            onClick={() => props.createEvent(props.index)}
+            onClick={() =>
+              eventsHandler('add', { type: 'event', order: index + 1 })
+            }
           />
           <IconButton
             size='xs'
             icon={<TimeIcon />}
             colorScheme='yellow'
-            onClick={() => props.createDelay(props.index)}
+            onClick={() =>
+              eventsHandler('add', { type: 'delay', order: index + 1 })
+            }
           />
           <IconButton
             size='xs'
             icon={<NotAllowedIcon />}
             colorScheme='purple'
-            onClick={() => props.createBlock(props.index)}
+            onClick={() =>
+              eventsHandler('add', { type: 'block', order: index + 1 })
+            }
           />
         </div>
       </div>

client/src/features/menu/EventListMenu.jsx

@@ -11,10 +11,12 @@ import {
 import style from './EventListMenu.module.css';
 
 export default function EventListMenu(props) {
+  const { eventsHandler } = props;
   const buttonProps = {
     size: 'sm',
     variant: 'outline',
   };
+
   return (
     <div className={style.headerButtons}>
       <Menu>
@@ -47,7 +49,7 @@ export default function EventListMenu(props) {
         size='sm'
         icon={<AddIcon />}
         colorScheme='blue'
-        onClick={() => props.createEvent()}
+        onClick={() => eventsHandler('add', { type: 'event', order: 0 })}
       />
     </div>
   );

server/timer.js

@@ -57,10 +57,7 @@ class Timer {
   }
 
   #getExpectedFinish() {
-    return (
+    return this.#finishAt + (this.#pausedInterval + this.#pausedTotal);
-      this.#finishAt +
-      (this.#pausedInterval + this.#pausedTotal)
-    );
   }
 
   // getObject
@@ -98,7 +95,6 @@ class Timer {
 
     // change state
     this.state = 'start';
-    console.log('started');
   }
   pause() {
     // do we need to change
@@ -109,8 +105,6 @@ class Timer {
 
     // change state
     this.state = 'pause';
-
-    console.log('paused');
   }
   stop() {
     console.log('stop: not yet implemented');