major: event block redesign

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

@@ -2,13 +2,13 @@ import { IconButton } from '@chakra-ui/button';
 import { FiMinus } from 'react-icons/fi';
 
 export default function DeleteIconBtn(props) {
-  const { clickhandler, ...rest } = props;
+  const { actionHandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiMinus />}
       colorScheme='red'
-      onClick={clickhandler}
+      onClick={() => actionHandler('delete')}
       _focus={{ boxShadow: 'none' }}
       {...rest}
     />

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

@@ -0,0 +1,16 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiTrash2 } from 'react-icons/fi';
+
+export default function TrashIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiTrash2 />}
+      colorScheme='red'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+      {...rest}
+    />
+  );
+}

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

@@ -2,14 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSun } from 'react-icons/fi';
 
 export default function VisibleIconBtn(props) {
-  const { clickhandler, active, ...rest } = props;
+  const { actionHandler, active, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiSun />}
       colorScheme='blue'
       variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
+      onClick={() =>
+        actionHandler('update', { field: 'isPublic', value: !active })
+      }
       _focus={{ boxShadow: 'none' }}
       {...rest}
     />

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

@@ -2,7 +2,7 @@ import EditableTimer from '../../input/EditableTimer';
 import { showWarningToast } from '../../helpers/toastManager';
 
 export default function EventTimes(props) {
-  const { updateValues, delay, timeStart, timeEnd } = props;
+  const { actionHandler, delay, timeStart, timeEnd } = props;
 
   const handleValidate = (entry, v) => {
     // we dont inforce validation here
@@ -26,14 +26,14 @@ export default function EventTimes(props) {
       <EditableTimer
         name='timeStart'
         validate={handleValidate}
-        updateValues={updateValues}
+        actionHandler={actionHandler}
         time={timeStart}
         delay={delay}
       />
       <EditableTimer
         name='timeEnd'
         validate={handleValidate}
-        updateValues={updateValues}
+        actionHandler={actionHandler}
         time={timeEnd}
         delay={delay}
       />

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

@@ -0,0 +1,129 @@
+import EditableTimer from '../../input/EditableTimer';
+import { showWarningToast } from '../../helpers/toastManager';
+import { useEffect, useState } from 'react';
+import { millisToMinutes, stringFromMillis } from '../../dateConfig';
+
+const label = {
+  fontSize: '0.75em',
+  color: '#aaa',
+};
+
+const TimesDelayed = (props) => {
+  const { handleValidate, actionHandler, delay, timeStart, timeEnd } = props;
+
+  const scheduledStart = stringFromMillis(timeStart, false);
+
+  const scheduledEnd = stringFromMillis(timeEnd, false);
+
+  return (
+    <>
+      <span style={label}>
+        Start <span>{scheduledStart}</span>
+      </span>
+      <EditableTimer
+        name='timeStart'
+        validate={handleValidate}
+        actionHandler={actionHandler}
+        time={timeStart}
+        delay={delay}
+      />
+      <span style={label}>
+        End <span>{scheduledEnd}</span>
+      </span>
+      <EditableTimer
+        name='timeEnd'
+        validate={handleValidate}
+        actionHandler={actionHandler}
+        time={timeEnd}
+        delay={delay}
+      />
+      <span style={label}>Duration</span>
+      <EditableTimer
+        name='duration'
+        validate={handleValidate}
+        actionHandler={actionHandler}
+        time={timeEnd - timeStart}
+        delay={0}
+      />
+    </>
+  );
+};
+
+const Times = (props) => {
+  const { handleValidate, actionHandler, timeStart, timeEnd, duration } = props;
+
+  return (
+    <>
+      <span style={label}>Start</span>
+      <EditableTimer
+        name='timeStart'
+        validate={handleValidate}
+        actionHandler={actionHandler}
+        time={timeStart}
+        delay={0}
+      />
+      <span style={label}>End</span>
+      <EditableTimer
+        name='timeEnd'
+        validate={handleValidate}
+        actionHandler={actionHandler}
+        time={timeEnd}
+        delay={0}
+      />
+      <span style={label}>Duration (min)</span>
+      <EditableTimer
+        name='durationOverride'
+        validate={handleValidate}
+        actionHandler={actionHandler}
+        time={timeEnd - timeStart}
+        delay={0}
+      />
+    </>
+  );
+};
+
+export default function EventTimesVertical(props) {
+  const { delay, timeStart, timeEnd } = props;
+  const [duration, setDuration] = useState(
+    millisToMinutes(timeEnd - timeStart) || 0
+  );
+  useEffect(() => {
+    setDuration(millisToMinutes(timeEnd - timeStart));
+  }, [timeStart, timeEnd]);
+
+  const handleValidate = (entry, v) => {
+    // we dont enforce validation here
+
+    if (v == null || timeStart == null || timeEnd == null) return true;
+    if (timeStart === 0) return true;
+
+    let validate = { value: true, catch: '' };
+    if (entry === 'timeStart' && v > timeEnd)
+      validate.catch = 'Start time later than end time';
+    else if (entry === 'timeEnd' && v < timeStart)
+      validate.catch = 'End time earlier than start time';
+
+    if (validate.catch !== '')
+      showWarningToast('Time Input Warning', validate.catch);
+    return validate.value;
+  };
+
+  return (delay != null) & (delay > 0) ? (
+    <TimesDelayed
+      handleValidate={handleValidate}
+      actionHandler={props.actionHandler}
+      delay={delay}
+      timeStart={timeStart}
+      timeEnd={timeEnd}
+      duration={duration}
+    />
+  ) : (
+    <Times
+      handleValidate={handleValidate}
+      actionHandler={props.actionHandler}
+      timeStart={timeStart}
+      timeEnd={timeEnd}
+      duration={duration}
+    />
+  );
+}