refactor: v2 event loader (#260)

* refactor: extract jest config

* refactor: rename params in reoder endpoint

* refactor: avoid app exports

* refactor: small code smells

* refactor: run development server

* refactor: extract rundown service and event loader logic

* refactor: rename events > rundown

* refactor: code style

* fix: handle external change of title

* refactor: cleanup dictionary

* refactor: rename MessageService

* refactor: use eventID for operations

* refactor: migrate OSC controller to service

* refactor: migrate Socket controller to service

* refactor: migrate HTTP controller to service

* refactor: extract logic into discrete services

* refactor: remove rundown from event timer

* refactor: remove duplicate

* refactor: remove unused

* chore: update tests

client/src/common/hooks/useEventAction.js

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { RUNDOWN_TABLE_KEY,RUNDOWN_TABLE } from '../api/apiConstants';
+import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
 import {
   requestApplyDelay,
   requestDelete,
@@ -106,7 +106,7 @@ export const useEventAction = () => {
         emitError(`Error updating event: ${error.message}`);
       }
     },
-    [_updateEventMutation, emitError]
+    [_updateEventMutation, emitError],
   );
 
   /**
@@ -272,7 +272,7 @@ export const useEventAction = () => {
     async (eventId, from, to) => {
       try {
         const reorderObject = {
-          index: eventId,
+          eventId: eventId,
           from: from,
           to: to,
         };

client/src/features/rundown/Rundown.jsx

@@ -193,51 +193,51 @@ export default function Rundown(props) {
         <Droppable droppableId='eventlist'>
           {(provided) => (
             <div className={style.list} {...provided.droppableProps} ref={provided.innerRef}>
-              {entries.map((e, index) => {
+              {entries.map((entry, index) => {
                 if (index === 0) {
                   cumulativeDelay = 0;
                   eventIndex = -1;
                 }
-                if (e.type === 'delay' && e.duration != null) {
-                  cumulativeDelay += e.duration;
-                } else if (e.type === 'block') {
+                if (entry.type === 'delay' && entry.duration != null) {
+                  cumulativeDelay += entry.duration;
+                } else if (entry.type === 'block') {
                   cumulativeDelay = 0;
-                } else if (e.type === 'event') {
+                } else if (entry.type === 'event') {
                   eventIndex++;
                   previousEnd = thisEnd;
-                  thisEnd = e.timeEnd;
-                  previousEventId = e.id;
+                  thisEnd = entry.timeEnd;
+                  previousEventId = entry.id;
                 }
                 const isLast = index === entries.length - 1;
                 return (
                   <div
-                    key={e.id}
+                    key={entry.id}
                     className={`${style.bgElement}
-                    ${e.type === 'event' && cumulativeDelay !== 0 ? style.delayed : ''}`}
+                    ${entry.type === 'event' && cumulativeDelay !== 0 ? style.delayed : ''}`}
                   >
                     <div
                       ref={cursor === index ? cursorRef : undefined}
                       className={cursor === index ? style.cursor : ''}
                     >
                       <RundownEntry
-                        type={e.type}
+                        type={entry.type}
                         index={index}
                         eventIndex={eventIndex}
-                        data={e}
-                        selected={selectedId === e.id}
-                        next={nextId === e.id}
+                        data={entry}
+                        selected={selectedId === entry.id}
+                        next={nextId === entry.id}
                         delay={cumulativeDelay}
                         previousEnd={previousEnd}
-                        playback={selectedId === e.id ? data.playback : undefined}
+                        playback={selectedId === entry.id ? data.playback : undefined}
                       />
                     </div>
                     {((showQuickEntry && index === cursor) || isLast) && (
                       <QuickAddBlock
                         showKbd={index === cursor}
-                        previousId={e.id}
+                        previousId={entry.id}
                         previousEventId={previousEventId}
-                        disableAddDelay={e.type === 'delay'}
-                        disableAddBlock={e.type === 'block'}
+                        disableAddDelay={entry.type === 'delay'}
+                        disableAddBlock={entry.type === 'block'}
                       />
                     )}
                   </div>

client/src/features/rundown/event-block/EventBlock.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/react';
 import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
@@ -85,6 +85,11 @@ export default function EventBlock(props: EventBlockProps) {
   const binderColours = colour && getAccessibleColour(colour);
   const hasDelay = delay !== 0 && delay !== null;
 
+  // Todo: could I re-render the item without causing a state change here?
+  useEffect(() => {
+    setBlockTitle(title);
+  }, [title]);
+
   const handleTitle = useCallback(
     (text: string) => {
       if (text === title) {
@@ -107,7 +112,7 @@ export default function EventBlock(props: EventBlockProps) {
   if (!skip && eventIsPlaying) {
     playBtnStyles._hover = { bg: '#c05621' };
   } else if (!skip && !eventIsPlaying) {
-    playBtnStyles._hover = {  };
+    playBtnStyles._hover = {};
   }
 
   return (

client/src/features/table/TableWrapper.jsx

@@ -14,7 +14,7 @@ import { makeCSV, makeTable } from './utils';
 import style from './Table.module.scss';
 
 export default function TableWrapper() {
-  const { data: events } = useRundown();
+  const { data: rundown } = useRundown();
   const { data: userFields } = useUserFields();
   const { data: featureData } = useCuesheet();
 
@@ -32,7 +32,7 @@ export default function TableWrapper() {
       }
 
     // check if value is the same
-    const event = events[rowIndex];
+    const event = rundown[rowIndex];
     if (event == null) {
       return;
     }
@@ -59,15 +59,15 @@ export default function TableWrapper() {
     } catch (error) {
       console.error(error);
     }
-  }, [mutation, events]);
+  }, [mutation, rundown]);
 
   const exportHandler = useCallback(
     (headerData) => {
-      if (!headerData || !events || !userFields) {
+      if (!headerData || !rundown || !userFields) {
         return;
       }
 
-      const sheetData = makeTable(headerData, events, userFields);
+      const sheetData = makeTable(headerData, rundown, userFields);
       const csvContent = makeCSV(sheetData);
       const encodedUri = encodeURI(csvContent);
       const link = document.createElement('a');
@@ -76,10 +76,10 @@ export default function TableWrapper() {
       document.body.appendChild(link);
       link.click();
     },
-    [events, userFields]
+    [rundown, userFields]
   );
 
-  if (typeof events === 'undefined' || typeof userFields === 'undefined') {
+  if (typeof rundown === 'undefined' || typeof userFields === 'undefined') {
     return <span>loading...</span>;
   }
   return (
@@ -89,7 +89,7 @@ export default function TableWrapper() {
     >
       <TableHeader handleCSVExport={exportHandler} featureData={featureData} />
       <OntimeTable
-        tableData={events}
+        tableData={rundown}
         userFields={userFields}
         handleUpdate={handleUpdate}
         selectedId={featureData.selectedEventId}