Servers Page & updates useSerevrs hook

app/dashboard/servers/ServersPage.tsx

@@ -0,0 +1,45 @@
+"use client";
+import Sidebar from "@/components/Sidebar";
+import { Plus } from "lucide-react";
+import AddSite from "@/components/dialogues/AddSite";
+import Sites from "@/components/cards/Site";
+import Pagination from "@/components/Pagination";
+import SearchAndLayout from "@/components/SearchAndLayout";
+import Loading from "@/components/Loading";
+import useServers from "@/hooks/useServers";
+
+interface ServersPageProps {
+    username: string;
+    name: string;
+}
+
+export default function ServersPage({ username, name }: ServersPageProps) {
+    const {
+        servers,
+        loading,
+        currentPage,
+        itemPerPage,
+        total,
+        search,
+        setSearch,
+        handlePageChange,
+        setItemPerPage,
+        loadServers,
+        addServer
+    } = useServers();
+    return (
+        <Sidebar
+            username={username}
+            fullName={name}
+            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Servers']}
+        >
+            <main>
+                <div className="flex gap-4 items-center">
+                    <div className="flex-1">
+                        
+                    </div>
+                </div>
+            </main>
+        </Sidebar>
+    )
+}

app/dashboard/servers/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import ServersPage from "./ServersPage";
+import Loading from "@/components/Loading";
+
+import { useEffect } from "react";
+import useAuth from "@/hooks/useAuth";
+
+export default function Dashboard() {
+  const { loading, username, name, validate } = useAuth();
+
+  useEffect(() => {
+    const runValidation = async () => {
+    await validate();
+  };
+    
+    runValidation();
+  }, [validate]);
+
+  if (loading) {
+    return <Loading />;
+  } else {
+    return <ServersPage username={username} name={name} />;
+  }
+}

hooks/useServers.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosError } from "axios";
-
+import { useState, useEffect, useCallback } from "react";
+import Cookies from "js-cookie";
 interface Server {
     id: number;
     networkId: number;
@@ -28,15 +29,34 @@ interface AddServer {
 
 
 const useServers = () => {
-    const getAllServers = (): Promise<Server[]> | string => {
-        return axios.get('/api/servers/get_all')
-        .then((response) => {
-            return response.data.servers;
-        })
-        .catch(err => {
-            throw err.response?.data?.error || 'Failed to fetch servers';
+    const [servers, setServers] = useState<Server[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemPerPage, setItemPerPage] = useState(() => {
+        const savedValue = Cookies.get('servers-itemPerPage');
+        return savedValue ? parseInt(savedValue, 10) : 5;
+    });
+    const [total, setTotal] = useState(0);
+    const [search, setSearch] = useState("");
+
+    const loadServers = useCallback(() => {
+        setLoading(true);
+        axios.get('/api/servers/get_all', {
+            params: { currentPage, itemPerPage, search }
+        }).then((response) => {
+            setServers(response.data.servers);
+            setTotal(response.data.total);
+            setLoading(false);
         });
-    };
+    }, [currentPage, itemPerPage, search]);
+    
+    useEffect(() => {
+        loadServers();
+    }, [loadServers]);
+
+    useEffect(() => {
+        Cookies.set('servers-itemPerPage', itemPerPage.toString());
+    }, [itemPerPage]);
 
     const addServer = (server: AddServer): Promise<Server> | string => {
         return axios.post('/api/servers/add', server)
@@ -48,9 +68,20 @@ const useServers = () => {
         });
     };
 
+    const handlePageChange = (page: number) => setCurrentPage(page);
+    
     return {
-        getAllServers,
-        addServer,
+        servers,
+        loading,
+        currentPage,
+        itemPerPage,
+        total,
+        search,
+        setSearch,
+        handlePageChange,
+        setItemPerPage,
+        loadServers,
+        addServer
     };
 };