refactor: delete several events

apps/client/src/common/api/rundown.ts

@@ -74,8 +74,8 @@ export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<
 /**
  * HTTP request to delete given event
  */
-export async function requestDelete(eventId: string): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(`${rundownPath}/${eventId}`);
+export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: eventIds } });
 }
 
 /**

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

@@ -337,7 +337,7 @@ export const useEventAction = () => {
   const _deleteEventMutation = useMutation({
     mutationFn: requestDelete,
     // we optimistically update here
-    onMutate: async (eventId) => {
+    onMutate: async (eventIds: string[]) => {
       // cancel ongoing queries
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
@@ -346,9 +346,11 @@ export const useEventAction = () => {
 
       if (previousData) {
         // optimistically update object
-        const newOrder = previousData.order.filter((id) => id !== eventId);
+        const newOrder = previousData.order.filter((id) => !eventIds.includes(id));
         const newRundown = { ...previousData.rundown };
-        delete newRundown[eventId];
+        for (const eventId of eventIds) {
+          delete newRundown[eventId];
+        }
 
         queryClient.setQueryData(RUNDOWN, {
           order: newOrder,
@@ -377,9 +379,9 @@ export const useEventAction = () => {
    * Deletes an event form the list
    */
   const deleteEvent = useCallback(
-    async (eventId: string) => {
+    async (eventIds: string[]) => {
       try {
-        await _deleteEventMutation.mutateAsync(eventId);
+        await _deleteEventMutation.mutateAsync(eventIds);
       } catch (error) {
         logAxiosError('Error deleting event', error);
       }

apps/client/src/features/rundown/Rundown.tsx

@@ -45,7 +45,7 @@ export default function Rundown({ data }: RundownProps) {
     (cursor: string | null) => {
       if (!cursor) return;
       const previous = getPreviousNormal(rundown, order, cursor).entry?.id ?? null;
-      deleteEvent(cursor);
+      deleteEvent([cursor]);
       setCursor(previous);
     },
     [deleteEvent, order, rundown, setCursor],

apps/client/src/features/rundown/RundownEntry.tsx

@@ -58,18 +58,20 @@ export default function RundownEntry(props: RundownEntryProps) {
   const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
   const cursor = useAppMode((state) => state.cursor);
   const setCursor = useAppMode((state) => state.setCursor);
-  const { selectedEvents, clearSelectedEvents } = useEventSelection();
+  const { selectedEvents, unselect, clearSelectedEvents } = useEventSelection();
 
   const removeOpenEvent = useCallback(() => {
-    if (selectedEvents.has(data.id)) {
-      clearSelectedEvents();
-    }
-
+    unselect(data.id);
     // clear cursor if we are deleting the event that is currently selected
     if (cursor === data.id) {
       setCursor(null);
     }
-  }, [selectedEvents, data.id, cursor, clearSelectedEvents, setCursor]);
+  }, [unselect, data.id, cursor, setCursor]);
+
+  const clearMultiSelection = useCallback(() => {
+    clearSelectedEvents();
+    setCursor(null);
+  }, [clearSelectedEvents, setCursor]);
 
   // Create / delete new events
   type FieldValue = {
@@ -111,10 +113,12 @@ export default function RundownEntry(props: RundownEntryProps) {
         return swapEvents({ from: value as string, to: data.id });
       }
       case 'delete': {
-        if (selectedEvents.has(data.id)) {
-          removeOpenEvent();
+        if (selectedEvents.size > 1) {
+          clearMultiSelection();
+          return deleteEvent(Array.from(selectedEvents));
         }
-        return deleteEvent(data.id);
+        removeOpenEvent();
+        return deleteEvent([data.id]);
       }
       case 'clone': {
         const newEvent = cloneEvent(data as OntimeEvent, data.id);
@@ -134,7 +138,7 @@ export default function RundownEntry(props: RundownEntryProps) {
         if (selectedEvents.size > 1) {
           const changes: Partial<OntimeEvent> = { [field]: value };
           batchUpdateEvents(changes, Array.from(selectedEvents));
-          return clearSelectedEvents();
+          return;
         }
         if (field in data) {
           // @ts-expect-error -- not sure how to type this

apps/client/src/features/rundown/delay-block/DelayBlock.tsx

@@ -50,7 +50,7 @@ export default function DelayBlock(props: DelayBlockProps) {
   };
 
   const cancelDelayHandler = () => {
-    deleteEvent(data.id);
+    deleteEvent([data.id]);
   };
 
   const blockClasses = cx([style.delay, hasCursor ? style.hasCursor : null]);

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

@@ -113,6 +113,7 @@ export default function EventBlock(props: EventBlockProps) {
                 value: false,
               }),
           },
+          { withDivider: true, label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
         ]
       : [
           {

apps/client/src/features/rundown/useEventSelection.ts

@@ -13,6 +13,8 @@ interface EventSelectionStore {
   anchoredIndex: number | null;
   setSelectedEvents: (selectionArgs: { id: string; index: number; selectMode: SelectionMode }) => void;
   clearSelectedEvents: () => void;
+  clearMultiSelect: () => void;
+  unselect: (id: string) => void;
 }
 
 export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
@@ -81,7 +83,17 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
       });
     }
   },
-  clearSelectedEvents: () => set({ selectedEvents: new Set() }),
+  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null }),
+  clearMultiSelect: () => {
+    const { selectedEvents } = get();
+    const [firstSelected] = selectedEvents;
+    set({ selectedEvents: new Set(firstSelected || undefined), anchoredIndex: null });
+  },
+  unselect: (id: string) => {
+    const { selectedEvents } = get();
+    selectedEvents.delete(id);
+    set({ selectedEvents });
+  },
 }));
 
 export function getSelectionMode(event: MouseEvent): SelectionMode {