refactor: implement operations on nested events

apps/client/src/common/hooks/useEntryAction.ts

@@ -4,6 +4,7 @@ import {
   EntryId,
   isOntimeEvent,
   MaybeString,
+  OntimeBlock,
   OntimeEntry,
   OntimeEvent,
   Rundown,
@@ -11,7 +12,7 @@ import {
   TimeStrategy,
   TransientEventPayload,
 } from 'ontime-types';
-import { dayInMs, MILLIS_PER_SECOND, parseUserTime, reorderArray, swapEventData } from 'ontime-utils';
+import { dayInMs, generateId, MILLIS_PER_SECOND, parseUserTime, reorderArray, swapEventData } from 'ontime-utils';
 
 import { RUNDOWN } from '../api/constants';
 import {
@@ -71,6 +72,7 @@ export const useEntryActions = () => {
    * @private
    */
   const _addEntryMutation = useMutation({
+    // TODO(v4): optimistic create entry
     mutationFn: postAddEntry,
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: RUNDOWN });
@@ -83,7 +85,7 @@ export const useEntryActions = () => {
    */
   const addEntry = useCallback(
     async (entry: Partial<OntimeEntry>, options?: EventOptions) => {
-      const newEntry: TransientEventPayload = { ...entry };
+      const newEntry: TransientEventPayload = { ...entry, id: generateId() };
 
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEntry)) {
@@ -188,6 +190,7 @@ export const useEntryActions = () => {
           id: previousData.id,
           title: previousData.title,
           order: previousData.order,
+          flatOrder: previousData.flatOrder,
           entries: newRundown,
           revision: -1,
         });
@@ -355,6 +358,7 @@ export const useEntryActions = () => {
           id: previousRundown.id,
           title: previousRundown.title,
           order: previousRundown.order,
+          flatOrder: previousRundown.flatOrder,
           entries: newRundown,
           revision: -1,
         });
@@ -399,17 +403,14 @@ export const useEntryActions = () => {
 
       if (previousData) {
         // optimistically update object
-        const newOrder = previousData.order.filter((id) => !entryIds.includes(id));
-        const newRundown = { ...previousData.entries };
-        for (const eventId of entryIds) {
-          delete newRundown[eventId];
-        }
+        const { entries, order, flatOrder } = optimisticDeleteEntries(entryIds, previousData);
 
         queryClient.setQueryData<Rundown>(RUNDOWN, {
           id: previousData.id,
           title: previousData.title,
-          order: newOrder,
-          entries: newRundown,
+          order,
+          flatOrder,
+          entries,
           revision: -1,
         });
       }
@@ -462,8 +463,9 @@ export const useEntryActions = () => {
       queryClient.setQueryData<Rundown>(RUNDOWN, {
         id: previousData?.id ?? 'default',
         title: previousData?.title ?? '',
-        entries: {},
         order: [],
+        flatOrder: [],
+        entries: {},
         revision: -1,
       });
 
@@ -542,6 +544,7 @@ export const useEntryActions = () => {
           id: previousData.id,
           title: previousData.title,
           order: newOrder,
+          flatOrder: previousData.flatOrder,
           entries: previousData.entries,
           revision: -1,
         });
@@ -613,6 +616,7 @@ export const useEntryActions = () => {
           id: previousData.id,
           title: previousData.title,
           order: previousData.order,
+          flatOrder: previousData.flatOrder,
           entries: newRundown,
           revision: -1,
         });
@@ -662,3 +666,32 @@ export const useEntryActions = () => {
     updateCustomField,
   };
 };
+
+/**
+ * Utility to optimistically delete entries from client cache
+ */
+function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
+  const entries = { ...rundown.entries };
+  let order = [...rundown.order];
+  let flatOrder = [...rundown.flatOrder];
+
+  for (let i = 0; i < entryIds.length; i++) {
+    const entry = entries[entryIds[i]];
+    deleteEntry(entry);
+  }
+
+  function deleteEntry(entry: OntimeEntry) {
+    if (isOntimeEvent(entry) && entry.parent) {
+      const parent = entries[entry.parent] as OntimeBlock;
+      parent.events = parent.events.filter((event) => event !== entry.id);
+      parent.numEvents -= 1;
+    } else {
+      order = order.filter((id) => id !== entry.id);
+    }
+
+    delete entries[entry.id];
+    flatOrder = flatOrder.filter((id) => id !== entry.id);
+  }
+
+  return { entries, order, flatOrder };
+}