useSite merge to useSites

app/dashboard/sites/SitesPage.tsx

@@ -4,7 +4,7 @@ import { Plus } from "lucide-react";
 import AddSite from "@/components/dialogues/AddSite";
 import Sites from "@/components/cards/Sites";
 import Pagination from "@/components/Pagination";
-import useSites from "@/hooks/useSites";
+import useSite from "@/hooks/useSites";
 import SearchAndLayout from "@/components/SearchAndLayout";
 import Loading from "@/components/Loading";
 
@@ -25,7 +25,7 @@ export default function SitesPage({ username, name }: SitesPageProps) {
         setItemPerPage,
         loadSites,
         loading
-    } = useSites();
+    } = useSite();
     return (
         <Sidebar 
             username={username} 

app/dashboard/sites/[siteId]/SitePage.tsx

@@ -1,6 +1,6 @@
 "use client"
 import Sidebar from "@/components/Sidebar"
-import useSite from "@/hooks/useSite"
+import useSite from "@/hooks/useSites"
 import { useEffect, useState } from "react"
 import { Network } from "@/app/types"
 import Loading from "@/components/Loading"

app/setup/SetupPage.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { Mail, User, Lock } from "lucide-react"
 import ErrorToast from "@/components/Error"
 import { useRouter } from "next/navigation"
-import useSite from "@/hooks/useSite"
+import useSite from "@/hooks/useSites"
 import axios from "axios"
 import useNetworks from "@/hooks/useNetworks"
 import { Site } from "@/app/types"

components/dialogues/AddSite.tsx

@@ -5,7 +5,7 @@ import axios from "axios";
 import ErrorToast from "@/components/Error";
 import SuccessToast from "@/components/Success";
 import { Building2, MapPin, FileText } from "lucide-react";
-import useSite from "@/hooks/useSite";
+import useSite from "@/hooks/useSites";
 
 interface AddSiteProps {
     onSiteAdded?: () => void;

components/dialogues/DeleteSite.tsx

@@ -2,7 +2,7 @@
 import axios from "axios"
 import { useRouter } from "next/navigation"
 import { Trash2, AlertTriangle } from "lucide-react";
-import useSite from "@/hooks/useSite";
+import useSite from "@/hooks/useSites";
 
 interface DeleteSiteProps {
     siteId: string;

components/dialogues/EditSite.tsx

@@ -5,7 +5,7 @@ import { Site } from "@/app/types"
 import { PencilLine, Building2, FileText } from "lucide-react"
 import ErrorToast from "@/components/Error"
 import SuccessToast from "@/components/Success"
-import useSite from "@/hooks/useSite"
+import useSite from "@/hooks/useSites"
 
 interface EditSiteProps {
   site: Site

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 useSite = () => {
-    const savedLayout = Cookies.get('sites-itemPerPage');
+    const [site, setSite] = useState<Site>({
-    const defaultLayout = savedLayout ? Number(savedLayout) : 5;
+        id: "",
-    
+        name: "",
-    const [sites, setSites] = useState([]);
+        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,
+        loadSites
-        loading
     };
 };
 
-export default useSites;
+export default useSite;