Pagination & working sites layout

app/api/sites/get_all/route.ts

@@ -3,25 +3,24 @@ import prisma from "@/app/prisma";
 
 interface QueryParams {
     currentPage: number;
-    pageSize: number;
     itemPerPage: number;
 }
 
 export async function GET(request: NextRequest) {
     const { searchParams } = request.nextUrl;
     const currentPage = Number(searchParams.get("currentPage")) || 1;
-    const pageSize = Number(searchParams.get("pageSize")) || 10;
+    const itemPerPage = Number(searchParams.get("itemPerPage")) || 1;
-    const itemPerPage = Number(searchParams.get("itemPerPage")) || 10;
 
-    const skip = (currentPage - 1) * pageSize;  
+    const skip = (currentPage - 1) * itemPerPage;  
     const take = itemPerPage;
+
     try {
         const sites = await prisma.site.findMany({
             skip,
             take,
         });
         const total = await prisma.site.count();
-        return NextResponse.json({ sites, total, currentPage, pageSize, itemPerPage }, { status: 200 });
+        return NextResponse.json({ sites, total, currentPage, itemPerPage }, { status: 200 });
     } catch (error: any) {
         return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
     }

app/dashboard/sites/SitesPage.tsx

@@ -14,11 +14,24 @@ interface SitesPageProps {
 
 export default function SitesPage({ username, name }: SitesPageProps) {
     const [sites, setSites] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemPerPage, setItemPerPage] = useState(5);
+    const [total, setTotal] = useState(0);
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
     useEffect(() => {
-        axios.get('/api/sites/get_all').then((response) => {
+        axios.get('/api/sites/get_all', {
+            params: {
+                currentPage,
+                itemPerPage,
+            },
+        }).then((response) => {
             setSites(response.data.sites);
+            setTotal(response.data.total);
         });
-    }, []);
+    }, [currentPage, itemPerPage]);
     
     return (
         <Sidebar 
@@ -41,18 +54,26 @@ export default function SitesPage({ username, name }: SitesPageProps) {
 
                 <div className="flex gap-2 items-center pt-4">
                     <input type="text" placeholder="Search..." className="input input-bordered w-full" />
-                    <select defaultValue="Pick a font" className="select w-24">
+                    <select defaultValue="Pick a font" className="select w-24" onChange={(e) => setItemPerPage(Number(e.target.value))}>
                         <option disabled={true}>Layout</option>
-                        <option>List</option>
+                        <option value={5}>List</option>
-                        <option>Grid</option>
+                        <option value={10}>Grid</option>
                     </select>
                 </div>
 
-                <div className="flex flex-col gap-4 pt-4">
+                <div className={itemPerPage === 5 ? "flex flex-col gap-4 pt-4" : "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"}>
                     {sites.map((site: any) => (
                         <Sites key={site.id} id={site.id} name={site.name} description={site.description} networks={site.networks} />
                     ))}
                 </div>
+                
+                <div className="flex justify-center pt-4">   
+                    <div className="join">
+                        <button className="join-item btn" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>«</button>
+                        <button className="join-item btn">Page {currentPage}</button>
+                        <button className="join-item btn" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(total / itemPerPage)}>»</button>
+                    </div>
+                </div>
             </main>
         </Sidebar>
     )