From 809bf19eb4a2bde64cfd3f66115ff3aaeb9ac320 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Mon, 21 Apr 2025 12:56:32 +0200
Subject: [PATCH] Grid/List View Pagination Fix

---
 app/dashboard/applications/Applications.tsx | 14 ++++++------
 app/dashboard/servers/Servers.tsx           | 24 ++++++++++-----------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/app/dashboard/applications/Applications.tsx b/app/dashboard/applications/Applications.tsx
index 8b0adc5..1b55709 100644
--- a/app/dashboard/applications/Applications.tsx
+++ b/app/dashboard/applications/Applications.tsx
@@ -116,21 +116,19 @@ export default function Dashboard() {
 
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [maxPage, setMaxPage] = useState<number>(1);
-  const [itemsPerPage, setItemsPerPage] = useState<number>(5);
   const [applications, setApplications] = useState<Application[]>([]);
   const [servers, setServers] = useState<Server[]>([]);
-  const [isGridLayout, setIsGridLayout] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
 
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [isSearching, setIsSearching] = useState<boolean>(false);
 
-  useEffect(() => {
-    const savedLayout = Cookies.get("layoutPreference-app");
-    const layout_bool = savedLayout === "grid";
-    setIsGridLayout(layout_bool);
-    setItemsPerPage(layout_bool ? 15 : 5);
-  }, []);
+  const savedLayout = Cookies.get("layoutPreference-app");
+  const initialIsGridLayout = savedLayout === "grid";
+  const initialItemsPerPage = initialIsGridLayout ? 15 : 5;
+
+  const [isGridLayout, setIsGridLayout] = useState<boolean>(initialIsGridLayout);
+  const [itemsPerPage, setItemsPerPage] = useState<number>(initialItemsPerPage);
 
   const toggleLayout = () => {
     const newLayout = !isGridLayout;
diff --git a/app/dashboard/servers/Servers.tsx b/app/dashboard/servers/Servers.tsx
index e332b07..a11faef 100644
--- a/app/dashboard/servers/Servers.tsx
+++ b/app/dashboard/servers/Servers.tsx
@@ -116,9 +116,7 @@ export default function Dashboard() {
 
   const [currentPage, setCurrentPage] = useState<number>(1)
   const [maxPage, setMaxPage] = useState<number>(1)
-  const [itemsPerPage, setItemsPerPage] = useState<number>(4)
   const [servers, setServers] = useState<Server[]>([])
-  const [isGridLayout, setIsGridLayout] = useState<boolean>(false)
   const [loading, setLoading] = useState<boolean>(true)
 
   const [editId, setEditId] = useState<number | null>(null)
@@ -144,23 +142,23 @@ export default function Dashboard() {
 
   const [monitoringInterval, setMonitoringInterval] = useState<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    const savedLayout = Cookies.get("layoutPreference-servers")
-    const layout_bool = savedLayout === "grid"
-    setIsGridLayout(layout_bool)
-    setItemsPerPage(layout_bool ? 6 : 4)
-  }, [])
+  const savedLayout = Cookies.get("layoutPreference-servers");
+  const initialIsGridLayout = savedLayout === "grid";
+  const initialItemsPerPage = initialIsGridLayout ? 6 : 4;
+
+  const [isGridLayout, setIsGridLayout] = useState<boolean>(initialIsGridLayout);
+  const [itemsPerPage, setItemsPerPage] = useState<number>(initialItemsPerPage);
 
   const toggleLayout = () => {
-    const newLayout = !isGridLayout
-    setIsGridLayout(newLayout)
+    const newLayout = !isGridLayout;
+    setIsGridLayout(newLayout);
     Cookies.set("layoutPreference-servers", newLayout ? "grid" : "standard", {
       expires: 365,
       path: "/",
       sameSite: "strict",
-    })
-    setItemsPerPage(newLayout ? 6 : 4)
-  }
+    });
+    setItemsPerPage(newLayout ? 6 : 4); // Update itemsPerPage based on new layout
+  };
 
   const add = async () => {
     try {