use pagination hook

src/hooks/api.ts

@@ -1,49 +1,34 @@
-import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
-import { useEffect, useState } from "react"
+import { type Dispatch, type SetStateAction, useState } from "react"
 
-import type { Fields, ListArg, ListResult, Model } from "../utils/api"
+export function usePagination(
+  options?: Partial<{
+    page: number
+    limit: number
+  }>,
+): [
+  { page: number; limit: number; offset: number },
+  Dispatch<SetStateAction<{ page: number; limit: number }>>,
+] {
+  const { page = 0, limit = 150 } = options || {}
 
-export function useFullList<
-  QueryArg extends ListArg,
-  M extends Model<any>,
-  MFields extends keyof Omit<M, "id">,
-  ExtraFields extends Fields,
-  ResultType extends ListResult<M, MFields, ExtraFields>,
->(
-  useLazyListQuery: TypedUseLazyQuery<ResultType, QueryArg, any>,
-  arg: Partial<QueryArg> = {},
-) {
-  const { limit = 150, offset = 0, ...filters } = arg
+  const [pagination, _setPagination] = useState({
+    page,
+    limit,
+    offset: page * limit,
+  })
 
-  const [trigger] = useLazyListQuery()
-  const [isLoading, setIsLoading] = useState(true)
-  const [isError, setIsError] = useState(false)
-  const [error, setError] = useState<unknown>()
-  const [data, setData] = useState<ResultType["data"]>()
+  function setPagination(
+    value: SetStateAction<{ page: number; limit: number }>,
+  ) {
+    _setPagination(({ page: previousPage, limit: previousLimit }) => {
+      const { page, limit } =
+        typeof value === "function"
+          ? value({ page: previousPage, limit: previousLimit })
+          : value
 
-  function getPage(limit: number, offset: number, _data: ResultType["data"]) {
-    trigger({ ...filters, limit, offset } as QueryArg)
-      .unwrap()
-      .then(({ data, offset, limit, count }) => {
-        _data.push(...data)
-
-        offset += limit
-        if (offset < count) getPage(limit, offset, _data)
-        else {
-          setData(_data)
-          setIsLoading(false)
-        }
-      })
-      .catch(error => {
-        setError(error)
-        setIsError(true)
-      })
+      return { page, limit, offset: page * limit }
+    })
   }
 
-  useEffect(() => {
-    getPage(limit, offset, [])
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [limit, offset])
-
-  return { data, isLoading, isError, error }
+  return [pagination, setPagination]
 }

src/hooks/index.ts

@@ -1,4 +1,4 @@
-import { useFullList } from "./api"
+import { usePagination } from "./api"
 import {
   useSession,
   useSessionMetadata,
@@ -14,9 +14,9 @@ export {
   useCountdown,
   useEventListener,
   useExternalScript,
-  useFullList,
   useLocation,
   useNavigate,
+  usePagination,
   useParams,
   useSearchParams,
   useSession,