cleanup

client/src/features/editors/Editor.jsx

@@ -3,7 +3,6 @@ import { Box } from '@chakra-ui/layout';
 import NumberedText from '../../common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
 import MessageControl from '../control/MessageControl';
-import PreviewContainer from '../viewers/PreviewContainer';
 import styles from './Editor.module.css';
 import EventListWrapper from './list/EventListWrapper';
 import { useDisclosure } from '@chakra-ui/hooks';
@@ -28,7 +27,7 @@ export default function Editor() {
           <Heading size='lg' paddingBottom={'0.25em'}>
             Event List
           </Heading>
-          <NumberedText number={1} text={'Manage and select event to run'} />
+          <NumberedText number={1} text={'Manage events'} />
           <div className={styles.content}>
             <EventListWrapper />
           </div>
@@ -39,8 +38,8 @@ export default function Editor() {
             Display Messages
           </Heading>
           <NumberedText
-            number={2}
-            text={'Show realtime messages on separate screen types'}
+            number={3}
+            text={'Show realtime messages on different screens'}
           />
           <div className={styles.content}>
             <MessageControl />
@@ -51,18 +50,12 @@ export default function Editor() {
           <Heading size='lg' paddingBottom={'0.25em'}>
             Time Control
           </Heading>
-          <NumberedText number={3} text={'Control Timer'} />
+          <NumberedText number={2} text={'Control timers'} />
           <div className={styles.content}>
             <PlaybackControl />
           </div>
         </Box>
 
-        <Box className={styles.settings}>
-          <div className={styles.content}>
-            <SettingsIconBtn size='md' clickhandler={onOpen} />
-          </div>
-        </Box>
-
         <Box className={styles.info} borderRadius='0.5em' overflowX='auto'>
           <Heading size='lg' paddingBottom={'0.25em'}>
             Info
@@ -70,6 +63,12 @@ export default function Editor() {
           <NumberedText number={4} text={'Running Info'} />
           <div className={styles.content}></div>
         </Box>
+
+        <Box className={styles.settings}>
+          <div className={styles.content}>
+            <SettingsIconBtn size='md' clickhandler={onOpen} />
+          </div>
+        </Box>
       </div>
     </>
   );

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

@@ -1,188 +0,0 @@
-import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
-import { memo, useCallback, useEffect, useState } from 'react';
-import { showErrorToast } from '../../../common/helpers/toastManager';
-import { Draggable } from 'react-beautiful-dnd';
-import EventTimes from '../../../common/components/eventTimes/EventTimes';
-// import common from './Block.module.css';
-import style from './EventBlock.module.css';
-import EditableText from '../../../common/input/EditableText';
-import DelayValue from '../../../common/input/DelayValue';
-import ActionButtons from './ActionButtons';
-import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
-import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
-
-const areEqual = (prevProps, nextProps) => {
-  return (
-    prevProps.data.revision === nextProps.data.revision &&
-    prevProps.selected === nextProps.selected &&
-    prevProps.next === nextProps.next &&
-    prevProps.index === nextProps.index &&
-    prevProps.delay === nextProps.delay
-  );
-};
-
-const EventBlock = (props) => {
-  const { data, selected, next, delay, index, eventsHandler } = props;
-
-  const [more, setMore] = useState(true);
-  const [visible, setVisible] = useState(data.isPublic || false);
-
-  // Set visibility indicator
-  useEffect(() => {
-    setVisible(data.isPublic);
-  }, [data.isPublic]);
-
-  // Create / delete new events
-  const actionHandler = (action) => {
-    switch (action) {
-      case 'event':
-        eventsHandler('add', { type: 'event', order: index + 1 });
-        break;
-      case 'delay':
-        eventsHandler('add', { type: 'delay', order: index + 1 });
-        break;
-      case 'block':
-        eventsHandler('add', { type: 'block', order: index + 1 });
-        break;
-      case 'delete':
-        eventsHandler('delete', data.id);
-        break;
-      default:
-        break;
-    }
-  };
-
-  // Update data in fields
-  const updateValues = (field, value) => {
-    // validate field
-    if (field in data) {
-      // create object with new field
-      const newData = { id: data.id, [field]: value };
-
-      // request update in parent
-      eventsHandler('patch', newData);
-    } else {
-      showErrorToast('Field Error: ' + field);
-    }
-  };
-
-  const handleTitleSubmit = (v) => {
-    updateValues('title', v);
-  };
-
-  const handleSubtitleSubmit = (v) => {
-    updateValues('subtitle', v);
-  };
-
-  const handlePresenterSubmit = (v) => {
-    updateValues('presenter', v);
-  };
-
-  const handleNoteSubmit = (v) => {
-    updateValues('note', v);
-  };
-
-  const handleVisibleToggle = useCallback(() => {
-    const viz = !data.isPublic || !visible;
-    updateValues('isPublic', viz);
-  }, [data.isPublic, visible, updateValues]);
-
-  // TODO: inside useEffect()
-  const isSelected = selected ? style.active : '';
-  const isExpanded = more ? style.expanded : style.collapsed;
-  const classSelect = ` ${style.event} ${isExpanded} ${isSelected}`;
-
-  return (
-    <Draggable key={data.id} draggableId={data.id} index={index}>
-      {(provided) => (
-        <div
-          className={classSelect}
-          {...provided.draggableProps}
-          ref={provided.innerRef}
-        >
-          <span className={style.drag} {...provided.dragHandleProps}>
-            <FiMoreVertical />
-          </span>
-          <div className={style.indicators}>
-            <div className={next ? style.next : style.nextDisabled}>Next</div>
-            <DelayValue delay={delay} />
-          </div>
-          <EventTimes
-            updateValues={updateValues}
-            timeStart={data.timeStart}
-            timeEnd={data.timeEnd}
-            delay={delay}
-            className={style.time}
-          />
-          {more && <div className={style.start}>Start Time</div>}
-          {more && <div className={style.end}>End Time</div>}
-          {more && <div className={style.duration}>Duration</div>}
-
-          <div className={style.rowDetailed}>
-            {more ? (
-              <div className={style.titleContainer}>
-                <EditableText
-                  label='Title'
-                  defaultValue={data.title}
-                  placeholder='Add Title'
-                  submitHandler={handleTitleSubmit}
-                  underlined
-                />
-                <EditableText
-                  label='Presenter'
-                  defaultValue={data.presenter}
-                  placeholder='Add Presenter name'
-                  submitHandler={handlePresenterSubmit}
-                  underlined
-                />
-                <EditableText
-                  label='Subtitle'
-                  defaultValue={data.subtitle}
-                  placeholder='Add Subtitle'
-                  submitHandler={handleSubtitleSubmit}
-                  underlined
-                />
-                <EditableText
-                  label='note'
-                  defaultValue={data.note}
-                  placeholder='Add note'
-                  submitHandler={handleNoteSubmit}
-                  underlined
-                />
-              </div>
-            ) : (
-              <div className={style.titleContainer}>
-                <EditableText
-                  label='Title'
-                  defaultValue={data.title}
-                  placeholder='Add Title'
-                  submitHandler={handleTitleSubmit}
-                  isTight
-                />
-              </div>
-            )}
-            <div className={style.more} onClick={() => setMore(!more)}>
-              {more ? <FiChevronUp /> : <FiChevronDown />}
-            </div>
-          </div>
-          <div className={style.actionOverlay}>
-            <VisibleIconBtn
-              clickhandler={handleVisibleToggle}
-              active={visible}
-            />
-            <DeleteIconBtn actionHandler={actionHandler} />
-            <ActionButtons
-              showAdd
-              showDelay
-              showBlock
-              actionHandler={actionHandler}
-            />
-          </div>
-        </div>
-      )}
-    </Draggable>
-  );
-};
-
-export default memo(EventBlock, areEqual);
-// export default EventBlock;

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

@@ -203,93 +203,104 @@ export default function EventListWrapper() {
   }, [isError]);
 
   // Events API
-  const eventsHandler = useCallback(async (action, payload) => {
-    switch (action) {
-      case 'add':
-        try {
-          let t = Date.now();
-          await addEvent.mutateAsync(payload);
-          console.log('debug m add', Date.now() - t);
-        } catch (error) {
-          showErrorToast('Error creating event', error.message);
-        }
-        break;
-      case 'update':
-        try {
-          let t = Date.now();
-          await updateEvent.mutateAsync(payload);
-          console.log('debug m update', Date.now() - t);
-        } catch (error) {
-          showErrorToast('Error updating event', error.message);
-        }
-        break;
-      case 'patch':
-        try {
-          let t = Date.now();
-          await patchEvent.mutateAsync(payload);
-          console.log('debug m patch', Date.now() - t);
-        } catch (error) {
-          showErrorToast('Error updating event', error.message);
-        }
-        break;
-      case 'delete':
-        try {
-          let t = Date.now();
-          await deleteEvent.mutateAsync(payload);
-          console.log('debug m delete', Date.now() - t);
-        } catch (error) {
-          showErrorToast('Error deleting event', error.message);
-        }
-        break;
-      case 'reorder':
-        try {
-          let t = Date.now();
-          await reorderEvent.mutateAsync(payload);
-          console.log('debug m reorder', Date.now() - t);
-        } catch (error) {
-          showErrorToast('Error reordering event', error.message);
-        }
-        break;
-      case 'applyDelay':
-        let t = Date.now();
-
-        // if delay <= 0 delete delay and next block
-        if (payload.duration <= 0) {
+  const eventsHandler = useCallback(
+    async (action, payload) => {
+      switch (action) {
+        case 'add':
           try {
-            // look for block after
-            let afterId = false;
-            let blockAfter = null;
-            for (const d of data) {
-              if (d.id === payload.id) afterId = true;
-              if (afterId && d.type === 'block') {
-                blockAfter = d.id;
-                break;
+            let t = Date.now();
+            await addEvent.mutateAsync(payload);
+            console.log('debug m add', Date.now() - t);
+          } catch (error) {
+            showErrorToast('Error creating event', error.message);
+          }
+          break;
+        case 'update':
+          try {
+            let t = Date.now();
+            await updateEvent.mutateAsync(payload);
+            console.log('debug m update', Date.now() - t);
+          } catch (error) {
+            showErrorToast('Error updating event', error.message);
+          }
+          break;
+        case 'patch':
+          try {
+            let t = Date.now();
+            await patchEvent.mutateAsync(payload);
+            console.log('debug m patch', Date.now() - t);
+          } catch (error) {
+            showErrorToast('Error updating event', error.message);
+          }
+          break;
+        case 'delete':
+          try {
+            let t = Date.now();
+            await deleteEvent.mutateAsync(payload);
+            console.log('debug m delete', Date.now() - t);
+          } catch (error) {
+            showErrorToast('Error deleting event', error.message);
+          }
+          break;
+        case 'reorder':
+          try {
+            let t = Date.now();
+            await reorderEvent.mutateAsync(payload);
+            console.log('debug m reorder', Date.now() - t);
+          } catch (error) {
+            showErrorToast('Error reordering event', error.message);
+          }
+          break;
+        case 'applyDelay':
+          let t = Date.now();
+
+          // if delay <= 0 delete delay and next block
+          if (payload.duration <= 0) {
+            try {
+              // look for block after
+              let afterId = false;
+              let blockAfter = null;
+              for (const d of data) {
+                if (d.id === payload.id) afterId = true;
+                if (afterId && d.type === 'block') {
+                  blockAfter = d.id;
+                  break;
+                }
               }
+
+              // delete delay
+              await deleteEvent.mutateAsync(payload.id);
+              // delete block after, if any
+              if (blockAfter) await deleteEvent.mutateAsync(blockAfter);
+            } catch (error) {
+              showErrorToast('Error applying delay', error.message);
+            }
+          } else {
+            console.log('debug applydelay', payload.id);
+            try {
+              await applyDelay.mutateAsync(payload.id);
+            } catch (error) {
+              showErrorToast('Error applying delay', error.message);
             }
-
-            // delete delay
-            await deleteEvent.mutateAsync(payload.id);
-            // delete block after, if any
-            if (blockAfter) await deleteEvent.mutateAsync(blockAfter);
-          } catch (error) {
-            showErrorToast('Error applying delay', error.message);
           }
-        } else {
-          console.log('debug applydelay', payload.id);
-          try {
-            await applyDelay.mutateAsync(payload.id);
-          } catch (error) {
-            showErrorToast('Error applying delay', error.message);
-          }
-        }
-        console.log('debug m apply', Date.now() - t);
+          console.log('debug m apply', Date.now() - t);
 
-        break;
-      default:
-        showErrorToast('Unrecognised request', action);
-        break;
-    }
-  }, []);
+          break;
+        default:
+          showErrorToast('Unrecognised request', action);
+          break;
+      }
+    },
+    [
+      addEvent,
+      applyDelay,
+      data,
+      deleteEvent,
+      patchEvent,
+      reorderEvent,
+      updateEvent,
+    ]
+  );
 
   return (
     <>