Change artwork table to be persistent in its filters and sorting

src/stores/artworksTableStore.ts

@@ -0,0 +1,74 @@
+import type { SortingState } from "@tanstack/react-table";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+const defaultSorting: SortingState = [{ id: "updatedAt", desc: true }];
+
+type ArtworksTableState = {
+  sorting: SortingState;
+  pageIndex: number;
+  pageSize: number;
+  filters: {
+    name: string;
+    published: "any" | "true" | "false";
+    needsWork: "any" | "true" | "false";
+    categoryIds: string[];
+  };
+  setSorting: (next: SortingState) => void;
+  setPageIndex: (next: number | ((prev: number) => number)) => void;
+  setPageSize: (next: number) => void;
+  setFilters: (
+    next:
+      | ArtworksTableState["filters"]
+      | ((prev: ArtworksTableState["filters"]) => ArtworksTableState["filters"]),
+  ) => void;
+  reset: () => void;
+};
+
+export const useArtworksTableStore = create<ArtworksTableState>()(
+  persist(
+    (set) => ({
+      sorting: defaultSorting,
+      pageIndex: 0,
+      pageSize: 25,
+      filters: {
+        name: "",
+        published: "any",
+        needsWork: "any",
+        categoryIds: [],
+      },
+      setSorting: (next) => set({ sorting: next }),
+      setPageIndex: (next) =>
+        set((state) => {
+          const value = typeof next === "function" ? next(state.pageIndex) : next;
+          return { pageIndex: Math.max(0, value) };
+        }),
+      setPageSize: (next) => set({ pageSize: next }),
+      setFilters: (next) =>
+        set((state) => ({
+          filters: typeof next === "function" ? next(state.filters) : next,
+        })),
+      reset: () =>
+        set({
+          sorting: defaultSorting,
+          pageIndex: 0,
+          pageSize: 25,
+          filters: {
+            name: "",
+            published: "any",
+            needsWork: "any",
+            categoryIds: [],
+          },
+        }),
+    }),
+    {
+      name: "admin-artworks-table",
+      partialize: (state) => ({
+        sorting: state.sorting,
+        pageIndex: state.pageIndex,
+        pageSize: state.pageSize,
+        filters: state.filters,
+      }),
+    },
+  ),
+);