feat: switch to cursor pagination (#1884)

* add cursor pagination function

* support custom order modifier
* refactor returned object

* feat(db): migrate paginated endpoints to cursor-based pagination

* sync

* support hasPrevPage boolean

* feat(client): migrate pagination from offset to cursor-based

* support beforeCursor/prevCursor

* wrap search results in items array for API consistency

apps/client/src/hooks/use-cursor-paginate.tsx

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+
+export function useCursorPaginate() {
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([]);
+
+  const goNext = useCallback((nextCursor: string | null | undefined) => {
+    if (nextCursor) {
+      setCursorStack((prev) => [...prev, cursor]);
+      setCursor(nextCursor);
+    }
+  }, [cursor]);
+
+  const goPrev = useCallback(() => {
+    setCursorStack((prev) => {
+      const next = prev.slice(0, -1);
+      setCursor(prev[prev.length - 1]);
+      return next;
+    });
+  }, []);
+
+  const resetCursor = useCallback(() => {
+    setCursor(undefined);
+    setCursorStack([]);
+  }, []);
+
+  return { cursor, goNext, goPrev, resetCursor };
+}

apps/client/src/hooks/use-paginate-and-search.tsx

@@ -2,16 +2,33 @@ import { useState, useRef, useCallback } from "react";
 
 export function usePaginateAndSearch(initialQuery: string = "") {
   const [search, setSearch] = useState(initialQuery);
-  const [page, setPage] = useState(1);
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([]);
   const prevSearchRef = useRef(search);
 
   const handleSearch = useCallback((newQuery: string) => {
     if (prevSearchRef.current !== newQuery) {
       prevSearchRef.current = newQuery;
       setSearch(newQuery);
-      setPage(1);
+      setCursor(undefined);
+      setCursorStack([]);
     }
   }, []);
 
-  return { search, page, setPage, handleSearch };
+  const goNext = useCallback((nextCursor: string | null | undefined) => {
+    if (nextCursor) {
+      setCursorStack((prev) => [...prev, cursor]);
+      setCursor(nextCursor);
+    }
+  }, [cursor]);
+
+  const goPrev = useCallback(() => {
+    setCursorStack((prev) => {
+      const next = prev.slice(0, -1);
+      setCursor(prev[prev.length - 1]);
+      return next;
+    });
+  }, []);
+
+  return { search, cursor, goNext, goPrev, handleSearch };
 }