abstracted polls fetch and pagination logic in their hooks

packages/nextjs/app/admin/page.tsx

@@ -6,14 +6,17 @@ import CreatePollModal from "./_components/CreatePollModal";
 import { useAccount } from "wagmi";
 import Paginator from "~~/components/Paginator";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
+import { useFetchPolls } from "~~/hooks/useFetchPolls";
+import { useTotalPages } from "~~/hooks/useTotalPages";
 
 export default function AdminPage() {
   const { address } = useAccount();
   const [openCreatePollModal, setOpenCreatePollModal] = useState(false);
-  const [totalPages, setTotalPages] = useState(1);
   const [currentPage, setCurrentPage] = useState(1);
-
   const { data: admin } = useScaffoldContractRead({ contractName: "MACI", functionName: "owner" });
+  const [limit] = useState(10);
+  const { totalPolls, polls } = useFetchPolls(currentPage, limit);
+  const totalPages = useTotalPages(totalPolls, limit);
 
   useEffect(() => {
     if (!admin || !address) return;
@@ -22,28 +25,6 @@ export default function AdminPage() {
     }
   }, [address, admin]);
 
-  const { data: totalPolls } = useScaffoldContractRead({
-    contractName: "PollManager",
-    functionName: "totalPolls",
-  });
-
-  const { data: polls } = useScaffoldContractRead({
-    contractName: "PollManager",
-    functionName: "fetchPolls",
-    args: [BigInt(currentPage), 10n, true],
-  });
-
-  useEffect(() => {
-    if (!totalPolls) {
-      setTotalPages(0);
-      return;
-    }
-    setTotalPages(Math.ceil(Number(totalPolls) / 10));
-  }, [totalPolls]);
-
-  console.log(totalPolls);
-  console.log(polls);
-
   return (
     <div className="container mx-auto pt-10">
       <div className="flex">

packages/nextjs/hooks/useFetchPolls.tsx

@@ -0,0 +1,16 @@
+import { useScaffoldContractRead } from "./scaffold-eth";
+
+export const useFetchPolls = (currentPage = 1, limit = 10, reversed = true) => {
+  const { data: totalPolls } = useScaffoldContractRead({
+    contractName: "PollManager",
+    functionName: "totalPolls",
+  });
+
+  const { data: polls } = useScaffoldContractRead({
+    contractName: "PollManager",
+    functionName: "fetchPolls",
+    args: [BigInt(currentPage), BigInt(limit), reversed],
+  });
+
+  return { totalPolls: Number(totalPolls || 0n), polls };
+};

packages/nextjs/hooks/useTotalPages.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export const useTotalPages = (totalItems: number, limit: number) => {
+  const [totalPages, setTotalPages] = useState(0);
+
+  useEffect(() => {
+    if (!totalItems) {
+      setTotalPages(0);
+      return;
+    }
+
+    setTotalPages(Math.ceil(totalItems / limit));
+  }, [totalItems, limit]);
+
+  return totalPages;
+};