useSite merge to useSites

hooks/useSite.ts

@@ -1,94 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import axios from "axios";
-import { Site } from "@/app/types";
-
-const useSite = () => {
-    const [site, setSite] = useState<Site>({
-        id: "",
-        name: "",
-        description: "",
-        networks: []
-    });
-    const [siteId, setSiteId] = useState("");
-    const [loading, setLoading] = useState(false);
-
-    const loadSite = useCallback(() => {
-        if (!siteId) return;
-        setLoading(true);
-        axios.get('/api/sites/get', {
-            params: { siteId }
-        }).then((response) => {
-            setSite(response.data.site);
-            setLoading(false);
-        });
-    }, [siteId]);
-
-    const updateSite = useCallback(() => {
-        if (!siteId) return;
-        axios.get('/api/sites/get', {
-            params: { siteId }
-        }).then((response) => {
-            setSite(response.data.site);
-        });
-    }, [siteId]);
-    
-
-    useEffect(() => {
-        loadSite();
-    }, [loadSite]);
-
-    const editSite = (site: Site): Promise<string> | string => {
-        if (!site.id) {
-            return 'Site ID is required';
-        }
-
-        if(site.name.length < 3) {
-            return 'Site name must be at least 3 characters long';
-        }
-        return axios.post('/api/sites/edit', site)
-        .then(() => {
-            return "Site edited successfully";
-        })
-        .catch(err => {
-            throw err.response?.data?.error || 'An error occurred';
-        });
-    };
-
-    const addSite = (site: Site): Promise<Site> | string => {
-        if(site.name.length < 3) {
-            return 'Site name must be at least 3 characters long';
-        }
-        
-        return axios.post('/api/sites/add', site)
-        .then((response) => {
-            return response.data.site;
-        })
-        .catch(err => {
-            throw err.response?.data?.error || 'An error occurred';
-        });
-    };
-
-    const deleteSite = (siteId: string) => {
-        axios.delete('/api/sites/delete', {
-            params: { siteId }
-        })
-        .then(() => {
-            setSiteId('');
-        })
-        .catch(err => {
-            console.error(err);
-        })
-    };
-    return {
-        site,
-        loadSite,
-        setSiteId,
-        updateSite,
-        editSite,
-        addSite,
-        deleteSite,
-        loading
-    };
-};
-
-export default useSite;

hooks/useSites.ts

@@ -1,17 +1,90 @@
 import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
+import { Site } from "@/app/types";
 import Cookies from "js-cookie";
 
-const useSites = () => {
-    const savedLayout = Cookies.get('sites-itemPerPage');
-    const defaultLayout = savedLayout ? Number(savedLayout) : 5;
-    
-    const [sites, setSites] = useState([]);
+const useSite = () => {
+    const [site, setSite] = useState<Site>({
+        id: "",
+        name: "",
+        description: "",
+        networks: []
+    });
+    const [siteId, setSiteId] = useState("");
+    const [loading, setLoading] = useState(false);
     const [currentPage, setCurrentPage] = useState(1);
-    const [itemPerPage, setItemPerPage] = useState(defaultLayout);
+    const [itemPerPage, setItemPerPage] = useState(5);
     const [total, setTotal] = useState(0);
     const [search, setSearch] = useState("");
-    const [loading, setLoading] = useState(false);
+    const [sites, setSites] = useState([]);
+
+    const loadSite = useCallback(() => {
+        if (!siteId) return;
+        setLoading(true);
+        axios.get('/api/sites/get', {
+            params: { siteId }
+        }).then((response) => {
+            setSite(response.data.site);
+            setLoading(false);
+        });
+    }, [siteId]);
+
+    const updateSite = useCallback(() => {
+        if (!siteId) return;
+        axios.get('/api/sites/get', {
+            params: { siteId }
+        }).then((response) => {
+            setSite(response.data.site);
+        });
+    }, [siteId]);
+    
+
+    useEffect(() => {
+        loadSite();
+    }, [loadSite]);
+
+    const editSite = (site: Site): Promise<string> | string => {
+        if (!site.id) {
+            return 'Site ID is required';
+        }
+
+        if(site.name.length < 3) {
+            return 'Site name must be at least 3 characters long';
+        }
+        return axios.post('/api/sites/edit', site)
+        .then(() => {
+            return "Site edited successfully";
+        })
+        .catch(err => {
+            throw err.response?.data?.error || 'An error occurred';
+        });
+    };
+
+    const addSite = (site: Site): Promise<Site> | string => {
+        if(site.name.length < 3) {
+            return 'Site name must be at least 3 characters long';
+        }
+        
+        return axios.post('/api/sites/add', site)
+        .then((response) => {
+            return response.data.site;
+        })
+        .catch(err => {
+            throw err.response?.data?.error || 'An error occurred';
+        });
+    };
+
+    const deleteSite = (siteId: string) => {
+        axios.delete('/api/sites/delete', {
+            params: { siteId }
+        })
+        .then(() => {
+            setSiteId('');
+        })
+        .catch(err => {
+            console.error(err);
+        })
+    };
 
     const loadSites = useCallback(() => {
         setLoading(true);
@@ -35,7 +108,16 @@ const useSites = () => {
 
     const handlePageChange = (page: number) => setCurrentPage(page);
 
+
     return {
+        site,
+        loadSite,
+        setSiteId,
+        updateSite,
+        editSite,
+        addSite,
+        deleteSite,
+        loading,
         sites,
         currentPage,
         itemPerPage,
@@ -44,9 +126,8 @@ const useSites = () => {
         setSearch,
         handlePageChange,
         setItemPerPage,
-        loadSites,
-        loading
+        loadSites
     };
 };
 
-export default useSites;
+export default useSite;