From 624bc4c4caa7f5ab2024879d7d1d05142435d2ac Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Sat, 12 Apr 2025 15:49:07 +0200
Subject: [PATCH] Grid Layout ItemsPerPage

---
 app/api/applications/get/route.ts           |  3 ++-
 app/dashboard/applications/Applications.tsx | 10 +++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/api/applications/get/route.ts b/app/api/applications/get/route.ts
index 354f915..5c0eaab 100644
--- a/app/api/applications/get/route.ts
+++ b/app/api/applications/get/route.ts
@@ -3,15 +3,16 @@ import { PrismaClient } from '@/lib/generated/prisma'
 
 interface GetRequest {
     page: number;
+    ITEMS_PER_PAGE: number;
 }
 
 const prisma = new PrismaClient();
-const ITEMS_PER_PAGE = 5; 
 
 export async function POST(request: NextRequest) {
     try {
         const body: GetRequest = await request.json();
         const page = Math.max(1, body.page || 1);
+        const ITEMS_PER_PAGE = body.ITEMS_PER_PAGE;
         
         const applications = await prisma.application.findMany({
             skip: (page - 1) * ITEMS_PER_PAGE,
diff --git a/app/dashboard/applications/Applications.tsx b/app/dashboard/applications/Applications.tsx
index d187546..98b5f4a 100644
--- a/app/dashboard/applications/Applications.tsx
+++ b/app/dashboard/applications/Applications.tsx
@@ -68,13 +68,16 @@ export default function Dashboard() {
   const [serverId, setServerId] = useState<number | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
   const [maxPage, setMaxPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
   const [applications, setApplications] = useState([]);
   const [servers, setServers] = useState([]);
   const [isGridLayout, setIsGridLayout] = useState(false);
 
   useEffect(() => {
     const savedLayout = Cookies.get('layoutPreference');
-    setIsGridLayout(savedLayout === 'grid');
+    const layout_bool = savedLayout === 'grid'
+    setIsGridLayout(layout_bool);
+    setItemsPerPage(layout_bool ? 15 : 5)
   }, []);
 
   const toggleLayout = () => {
@@ -85,6 +88,7 @@ export default function Dashboard() {
       path: '/',
       sameSite: 'strict'
     });
+    setItemsPerPage(newLayout ? 15 : 5);
   };
 
   const add = async () => {
@@ -105,7 +109,7 @@ export default function Dashboard() {
 
   const getApplications = async () => {
     try {
-      const response = await axios.post('/api/applications/get', { page: currentPage });
+      const response = await axios.post('/api/applications/get', { page: currentPage, ITEMS_PER_PAGE: itemsPerPage });
       setApplications(response.data.applications);
       setServers(response.data.servers);
       setMaxPage(response.data.maxPage);
@@ -116,7 +120,7 @@ export default function Dashboard() {
 
   useEffect(() => {
     getApplications();
-  }, [currentPage]);
+  }, [currentPage, itemsPerPage]);
 
   const handlePrevious = () => setCurrentPage(prev => Math.max(1, prev - 1));
   const handleNext = () => setCurrentPage(prev => Math.min(maxPage, prev + 1));