refactor: revert useReducer, keep useState with persistence

Restore original useState pattern for filters/sort/pageSize to minimize
diff from main. Persistence read/write is the only addition.

Author: IzumiSy

packages/core/src/hooks/use-collection-variables.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type {
   BuildQueryVariables,
   CollectionControl,
@@ -16,80 +16,6 @@ import type {
 } from "@/types/collection";
 import { useCursorPagination } from "./use-cursor-pagination";
 
-// -----------------------------------------------------------------------------
-// Reducer
-// -----------------------------------------------------------------------------
-
-interface CollectionState {
-  filters: Filter[];
-  sortStates: SortState[];
-  pageSize: number;
-}
-
-type CollectionAction =
-  | {
-      type: "ADD_FILTER";
-      field: string;
-      operator: string;
-      value: unknown;
-      caseSensitive?: boolean;
-    }
-  | { type: "SET_FILTERS"; filters: Filter[] }
-  | { type: "REMOVE_FILTER"; field: string }
-  | { type: "CLEAR_FILTERS" }
-  | { type: "SET_SORT"; field: string; direction?: "Asc" | "Desc" }
-  | { type: "CLEAR_SORT" }
-  | { type: "SET_PAGE_SIZE"; pageSize: number };
-
-function collectionReducer(state: CollectionState, action: CollectionAction): CollectionState {
-  switch (action.type) {
-    case "ADD_FILTER": {
-      const { field, operator, value, caseSensitive } = action;
-      const newFilter: Filter = {
-        field,
-        operator: operator as Filter["operator"],
-        value,
-        caseSensitive,
-      };
-      const existing = state.filters.findIndex((f) => f.field === field);
-      const filters =
-        existing >= 0
-          ? state.filters.map((f, i) => (i === existing ? newFilter : f))
-          : [...state.filters, newFilter];
-      return { ...state, filters };
-    }
-    case "SET_FILTERS":
-      return { ...state, filters: action.filters };
-    case "REMOVE_FILTER":
-      return {
-        ...state,
-        filters: state.filters.filter((f) => f.field !== action.field),
-      };
-    case "CLEAR_FILTERS":
-      return { ...state, filters: [] };
-    case "SET_SORT": {
-      const { field, direction } = action;
-      if (direction === undefined) {
-        return {
-          ...state,
-          sortStates: state.sortStates.filter((s) => s.field !== field),
-        };
-      }
-      const filtered = state.sortStates.filter((s) => s.field !== field);
-      return {
-        ...state,
-        sortStates: [...filtered, { field, direction }],
-      };
-    }
-    case "CLEAR_SORT":
-      return { ...state, sortStates: [] };
-    case "SET_PAGE_SIZE":
-      return { ...state, pageSize: action.pageSize };
-    default:
-      return state;
-  }
-}
-
 // -----------------------------------------------------------------------------
 // Case-insensitive regex conversion helpers
 // -----------------------------------------------------------------------------
@@ -208,52 +134,48 @@ export function useCollectionVariables(
   const { initialFilters = [], initialSort = [], pageSize: initialPageSize = 20 } = params;
 
   // ---------------------------------------------------------------------------
-  // State (reducer-based)
+  // Persistence read (once on mount)
   // ---------------------------------------------------------------------------
-  const [state, dispatch] = useReducer(collectionReducer, undefined, () => {
-    const snapshot = persistence?.read();
-    return {
-      filters: snapshot?.filters ?? initialFilters,
-      sortStates: snapshot?.sort ?? initialSort,
-      pageSize: snapshot?.pageSize ?? initialPageSize,
-    };
-  });
-
-  const { filters, sortStates, pageSize } = state;
+  const [snapshot] = useState(() => persistence?.read());
 
   // ---------------------------------------------------------------------------
-  // Persistence write-back (skip initial render)
+  // State
   // ---------------------------------------------------------------------------
-  const isFirstRenderRef = useRef(true);
-  useEffect(() => {
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-      return;
-    }
-    persistence?.write({
-      filters: state.filters,
-      sort: state.sortStates,
-      pageSize: state.pageSize,
-    });
-  }, [state.filters, state.sortStates, state.pageSize, persistence]);
+  const [filters, setFiltersState] = useState<Filter[]>(snapshot?.filters ?? initialFilters);
+  const [sortStates, setSortStates] = useState<SortState[]>(snapshot?.sort ?? initialSort);
 
-  // ---------------------------------------------------------------------------
-  // Cursor pagination (pageSize owned by reducer, passed in)
-  // ---------------------------------------------------------------------------
   const {
+    pageSize,
     paginationVariables,
     goToNextPage,
     goToPrevPage,
     resetPage,
     goToFirstPage,
     goToLastPage,
+    setPageSize: setCursorPageSize,
     getHasPrevPage,
     getHasNextPage,
     resetCount,
-  } = useCursorPagination(pageSize);
+  } = useCursorPagination(snapshot?.pageSize ?? initialPageSize);
 
   // ---------------------------------------------------------------------------
-  // Control actions (dispatch user actions + reset pagination)
+  // Persistence write-back (skip initial render)
+  // ---------------------------------------------------------------------------
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    persistence?.write({
+      filters,
+      sort: sortStates,
+      pageSize,
+    });
+  }, [filters, sortStates, pageSize, persistence]);
+
+  // ---------------------------------------------------------------------------
+  // Filter operations
   // ---------------------------------------------------------------------------
   const addFilter = useCallback(
     (
@@ -262,12 +184,20 @@ export function useCollectionVariables(
       value: unknown,
       filterOptions?: { caseSensitive?: boolean },
     ) => {
-      dispatch({
-        type: "ADD_FILTER",
-        field,
-        operator,
-        value,
-        caseSensitive: filterOptions?.caseSensitive,
+      setFiltersState((prev) => {
+        const existing = prev.findIndex((f) => f.field === field);
+        const newFilter: Filter = {
+          field,
+          operator,
+          value,
+          caseSensitive: filterOptions?.caseSensitive,
+        };
+        if (existing >= 0) {
+          const updated = [...prev];
+          updated[existing] = newFilter;
+          return updated;
+        }
+        return [...prev, newFilter];
       });
       resetPage();
     },
@@ -276,44 +206,53 @@ export function useCollectionVariables(
 
   const setFilters = useCallback(
     (newFilters: Filter[]) => {
-      dispatch({ type: "SET_FILTERS", filters: newFilters });
+      setFiltersState(newFilters);
       resetPage();
     },
     [resetPage],
   );
 
   const removeFilter = useCallback(
     (field: string) => {
-      dispatch({ type: "REMOVE_FILTER", field });
+      setFiltersState((prev) => prev.filter((f) => f.field !== field));
       resetPage();
     },
     [resetPage],
   );
 
   const clearFilters = useCallback(() => {
-    dispatch({ type: "CLEAR_FILTERS" });
+    setFiltersState([]);
     resetPage();
   }, [resetPage]);
 
+  // ---------------------------------------------------------------------------
+  // Sort operations
+  // ---------------------------------------------------------------------------
   const setSort = useCallback(
     (field: string, direction?: "Asc" | "Desc") => {
-      dispatch({ type: "SET_SORT", field, direction });
+      setSortStates((prev) => {
+        if (direction === undefined) {
+          return prev.filter((s) => s.field !== field);
+        }
+        const newState: SortState = { field, direction };
+        const filtered = prev.filter((s) => s.field !== field);
+        return [...filtered, newState];
+      });
       resetPage();
     },
     [resetPage],
   );
 
   const clearSort = useCallback(() => {
-    dispatch({ type: "CLEAR_SORT" });
+    setSortStates([]);
     resetPage();
   }, [resetPage]);
 
   const setPageSize = useCallback(
     (size: number) => {
-      dispatch({ type: "SET_PAGE_SIZE", pageSize: size });
-      resetPage();
+      setCursorPageSize(size);
     },
-    [resetPage],
+    [setCursorPageSize],
   );
 
   // ---------------------------------------------------------------------------

packages/core/src/hooks/use-cursor-pagination.ts

@@ -82,6 +82,8 @@ export interface UseCursorPaginationReturn {
   cursorStack: string[];
   /** Current fetch direction — determines whether `first`/`after` or `last`/`before` is sent. */
   paginationDirection: "forward" | "backward";
+  /** Current page size. */
+  pageSize: number;
   /** Ready-to-spread pagination variables for the GraphQL query. */
   paginationVariables: PaginationVariables;
   /**
@@ -114,6 +116,8 @@ export interface UseCursorPaginationReturn {
    * back to a full `pageSize` fetch.
    */
   goToLastPage: (total?: number | null) => void;
+  /** Change the page size and reset to the first page. */
+  setPageSize: (size: number) => void;
   /**
    * Determine whether a previous page exists, given the server's `pageInfo`.
    *
@@ -153,7 +157,8 @@ export interface UseCursorPaginationReturn {
  *
  * @see {@link file://./use-collection-variables.ts useCollectionVariables} — the primary consumer.
  */
-export function useCursorPagination(pageSize: number): UseCursorPaginationReturn {
+export function useCursorPagination(initialPageSize: number): UseCursorPaginationReturn {
+  const [pageSize, setPageSizeState] = useState(initialPageSize);
   const [cursor, setCursor] = useState<string | null>(null);
   const [cursorStack, setCursorStack] = useState<string[]>([]);
   const [paginationDirection, setPaginationDirection] = useState<"forward" | "backward">("forward");
@@ -253,6 +258,14 @@ export function useCursorPagination(pageSize: number): UseCursorPaginationReturn
     [pageSize],
   );
 
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size);
+    setCursor(null);
+    setCursorStack([]);
+    setPaginationDirection("forward");
+    setLastPageSize(null);
+  }, []);
+
   // ---------------------------------------------------------------------------
   // Computed pagination variables
   // ---------------------------------------------------------------------------
@@ -290,12 +303,14 @@ export function useCursorPagination(pageSize: number): UseCursorPaginationReturn
     cursor,
     cursorStack,
     paginationDirection,
+    pageSize,
     paginationVariables,
     goToNextPage,
     goToPrevPage,
     resetPage: resetPagination,
     goToFirstPage,
     goToLastPage,
+    setPageSize,
     getHasPrevPage,
     getHasNextPage,
     resetCount,