From 0abc4de3cdeec84642ba4c6232192ebc8ef8fcda Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sat, 15 Jun 2024 21:28:35 +0200
Subject: [PATCH] fix: column reordering in cuesheet

---
 .../client/src/features/cuesheet/Cuesheet.tsx | 30 +++++-------
 .../src/features/cuesheet/cuesheetCols.tsx    |  2 -
 .../features/cuesheet/useColumnManager.tsx    | 46 +++++++++++++++++++
 3 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 apps/client/src/features/cuesheet/useColumnManager.tsx

diff --git a/apps/client/src/features/cuesheet/Cuesheet.tsx b/apps/client/src/features/cuesheet/Cuesheet.tsx
index 6811ae7d3..e3e641d03 100644
--- a/apps/client/src/features/cuesheet/Cuesheet.tsx
+++ b/apps/client/src/features/cuesheet/Cuesheet.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useLocalStorage } from '@mantine/hooks';
+import { useCallback, useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
@@ -13,7 +12,7 @@ import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import { initialColumnOrder } from './cuesheetCols';
+import useColumnManager from './useColumnManager';
 
 import style from './Cuesheet.module.scss';
 
@@ -27,23 +26,20 @@ interface CuesheetProps {
 export default function Cuesheet({ data, columns, handleUpdate, selectedId }: CuesheetProps) {
   const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
 
-  const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} });
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
-    key: 'table-order',
-    defaultValue: initialColumnOrder,
-  });
-  const [columnSizing, setColumnSizing] = useLocalStorage({ key: 'table-sizes', defaultValue: {} });
+  const {
+    columnVisibility,
+    columnOrder,
+    columnSizing,
+    resetColumnOrder,
+    setColumnVisibility,
+    saveColumnOrder,
+    setColumnSizing,
+  } = useColumnManager(columns);
 
   const selectedRef = useRef<HTMLTableRowElement | null>(null);
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
   useFollowComponent({ followRef: selectedRef, scrollRef: tableContainerRef, doFollow: followSelected });
 
-  // keep column order in sync with columns
-  useEffect(() => {
-    const order = columns.map((col) => col.id as string);
-    saveColumnOrder(order);
-  }, [columns, saveColumnOrder]);
-
   const table = useReactTable({
     data,
     columns,
@@ -61,10 +57,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
     getCoreRowModel: getCoreRowModel(),
   });
 
-  const resetColumnOrder = () => {
-    saveColumnOrder(initialColumnOrder);
-  };
-
   const setAllVisible = () => {
     table.toggleAllColumnsVisible(true);
   };
diff --git a/apps/client/src/features/cuesheet/cuesheetCols.tsx b/apps/client/src/features/cuesheet/cuesheetCols.tsx
index 9df415af4..54f426095 100644
--- a/apps/client/src/features/cuesheet/cuesheetCols.tsx
+++ b/apps/client/src/features/cuesheet/cuesheetCols.tsx
@@ -117,5 +117,3 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
     ...dynamicCustomFields,
   ];
 }
-
-export const initialColumnOrder: string[] = makeCuesheetColumns({}).map((column) => column.id as string);
diff --git a/apps/client/src/features/cuesheet/useColumnManager.tsx b/apps/client/src/features/cuesheet/useColumnManager.tsx
new file mode 100644
index 000000000..7e8e33aaa
--- /dev/null
+++ b/apps/client/src/features/cuesheet/useColumnManager.tsx
@@ -0,0 +1,46 @@
+import { useCallback, useEffect } from 'react';
+import { useLocalStorage } from '@mantine/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { OntimeRundownEntry } from 'ontime-types';
+
+export default function useColumnManager(columns: ColumnDef<OntimeRundownEntry>[]) {
+  const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} });
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
+    key: 'table-order',
+    defaultValue: columns.map((col) => col.id as string),
+  });
+  const [columnSizing, setColumnSizing] = useLocalStorage({ key: 'table-sizes', defaultValue: {} });
+
+  // if the columns change, we update the dataset
+  useEffect(() => {
+    let shouldReplace = false;
+    const newColumns: string[] = [];
+
+    // iterate through columns to see if there are new ids
+    columns.forEach((column) => {
+      const columnnId = column.id as string;
+      if (!shouldReplace && !columnOrder.includes(columnnId)) {
+        shouldReplace = true;
+      }
+      newColumns.push(columnnId);
+    });
+
+    if (shouldReplace) {
+      saveColumnOrder(newColumns);
+    }
+  }, [columnOrder, columns, saveColumnOrder]);
+
+  const resetColumnOrder = useCallback(() => {
+    saveColumnOrder(columns.map((col) => col.id as string));
+  }, [columns, saveColumnOrder]);
+
+  return {
+    columnVisibility,
+    columnOrder,
+    columnSizing,
+    resetColumnOrder,
+    setColumnVisibility,
+    saveColumnOrder,
+    setColumnSizing,
+  };
+}