Servers Page & updates useSerevrs hook

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)
@@ -47,10 +67,21 @@ const useServers = () => {
             throw err.response?.data?.error || 'Failed to add server';
         });
     };
+
+    const handlePageChange = (page: number) => setCurrentPage(page);
     
     return {
-        getAllServers,
-        addServer,
+        servers,
+        loading,
+        currentPage,
+        itemPerPage,
+        total,
+        search,
+        setSearch,
+        handlePageChange,
+        setItemPerPage,
+        loadServers,
+        addServer
     };
 };