Updated sort state on dashboard refresh

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.8.0 (IN PROGRESS)
+
+### Features / Enhancements
+
+- Updated sort state on dashboard refresh (#163)
+
 ## 1.7.0 (2024-11-16)
 
 ### Features / Enhancements

package.json

@@ -86,5 +86,5 @@
     "test:e2e:docker": "docker compose --profile e2e up --exit-code-from test",
     "upgrade": "npm upgrade --save"
   },
-  "version": "1.7.0"
+  "version": "1.8.0"
 }

src/components/Table/hooks/useSortState.test.ts

@@ -73,4 +73,60 @@ describe('useSortState', () => {
 
     expect(result.current.sorting).toEqual([{ id: 'age', desc: true }]);
   });
+
+  it('Should update sorting state when columns sort option is changed', () => {
+    const initialColumns = [
+      {
+        id: 'name',
+        enableSorting: true,
+        sortDescFirst: false,
+      },
+    ];
+
+    const { result, rerender } = renderHook(({ columns }) => useSortState({ columns }), {
+      initialProps: { columns: initialColumns },
+    });
+
+    expect(result.current.sorting).toEqual([{ id: 'name', desc: false }]);
+
+    const newColumns = [
+      {
+        id: 'name',
+        enableSorting: true,
+        sortDescFirst: true,
+      },
+    ];
+
+    rerender({ columns: newColumns });
+
+    expect(result.current.sorting).toEqual([{ id: 'name', desc: true }]);
+  });
+
+  it('Should update sorting state when column sort options is changed and no more sort columns', () => {
+    const initialColumns = [
+      {
+        id: 'name',
+        enableSorting: true,
+        sortDescFirst: false,
+      },
+    ];
+
+    const { result, rerender } = renderHook(({ columns }) => useSortState({ columns }), {
+      initialProps: { columns: initialColumns },
+    });
+
+    expect(result.current.sorting).toEqual([{ id: 'name', desc: false }]);
+
+    const newColumns = [
+      {
+        id: 'name',
+        enableSorting: false,
+        sortDescFirst: false,
+      },
+    ];
+
+    rerender({ columns: newColumns });
+
+    expect(result.current.sorting).toEqual([]);
+  });
 });

src/components/Table/hooks/useSortState.ts

@@ -9,6 +9,7 @@ export const useSortState = <TData>({ columns }: { columns: Array<ColumnDef<TDat
    * State
    */
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [column, setColumnId] = useState<ColumnDef<TData>>();
 
   /**
    * Update Sorting State
@@ -19,8 +20,32 @@ export const useSortState = <TData>({ columns }: { columns: Array<ColumnDef<TDat
      */
     const firstSortableColumn = columns.find((column) => column.enableSorting);
 
-    setSorting(firstSortableColumn ? [{ id: firstSortableColumn.id!, desc: firstSortableColumn.sortDescFirst! }] : []);
-  }, [columns]);
+    if (firstSortableColumn) {
+      /**
+       * Change if new column
+       */
+      if (firstSortableColumn.id !== column?.id) {
+        setSorting([{ id: firstSortableColumn.id!, desc: firstSortableColumn.sortDescFirst! }]);
+        setColumnId(firstSortableColumn);
+      }
+
+      /**
+       * Change if sort direction for column is changed
+       */
+      if (firstSortableColumn.id === column?.id && firstSortableColumn.sortDescFirst !== column?.sortDescFirst) {
+        setSorting([{ id: firstSortableColumn.id!, desc: firstSortableColumn.sortDescFirst! }]);
+        setColumnId(firstSortableColumn);
+      }
+    }
+
+    /**
+     * Reset state
+     */
+    if (!firstSortableColumn && !!sorting.length) {
+      setSorting([]);
+      setColumnId(undefined);
+    }
+  }, [column, columns, sorting]);
 
   /**
    * Change state via table handler