fix: column reordering

refactor: migrate local storage hook

apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx

@@ -1,4 +1,3 @@
-import { memo, useEffect } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import {
   closestCenter,
@@ -14,10 +13,8 @@ import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordin
 import { flexRender, HeaderGroup } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
 
-import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { tooltipDelayFast } from '../../../ontimeConfig';
-import { initialColumnOrder } from '../cuesheetCols';
 
 import { SortableCell } from './SortableCell';
 
@@ -25,17 +22,11 @@ import style from '../Cuesheet.module.scss';
 
 interface CuesheetHeaderProps {
   headerGroups: HeaderGroup<OntimeRundownEntry>[];
+  saveColumnOrder: (fromId: string, toId: string) => void;
 }
 
-function CuesheetHeader(props: CuesheetHeaderProps) {
-  const { headerGroups } = props;
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
-
-  useEffect(() => {
-    if (!localStorage.getItem('table-order')) {
-      saveColumnOrder(initialColumnOrder);
-    }
-  }, [saveColumnOrder]);
+export default function CuesheetHeader(props: CuesheetHeaderProps) {
+  const { headerGroups, saveColumnOrder } = props;
 
   const handleOnDragEnd = (event: DragEndEvent) => {
     const { delta, active, over } = event;
@@ -45,21 +36,7 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
     // cancel if we do not have an over id
     if (over?.id == null) return;
 
-    // get index of from
-    const fromIndex = columnOrder.indexOf(active.id as string);
-
-    // get index of to
-    const toIndex = columnOrder.indexOf(over.id as string);
-
-    if (toIndex === -1) {
-      return;
-    }
-
-    const reorderedCols = [...columnOrder];
-    const reorderedItem = reorderedCols.splice(fromIndex, 1);
-    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
-
-    saveColumnOrder(reorderedCols);
+    saveColumnOrder(active.id as string, over.id as string);
   };
 
   const sensors = useSensors(
@@ -119,5 +96,3 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
     </thead>
   );
 }
-
-export default memo(CuesheetHeader);