UI Fixes & reload

app/dashboard/sites/SitesPage.tsx

@@ -24,8 +24,6 @@ export default function SitesPage({ username, name }: SitesPageProps) {
         setItemPerPage,
         loadSites
     } = useSites();
-    console.log(sites);
-
     return (
         <Sidebar 
             username={username} 

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

@@ -119,8 +119,8 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                                     <Trash className="h-3 w-3" />
                                   </button>
                                 </div>
-                                <EditNetwork siteId={site.id} network={network} />
-                                <DeleteNetwork networkId={network.id} />
+                                <EditNetwork siteId={site.id} network={network} onNetworkEdited={loadSite}/>
+                                <DeleteNetwork networkId={network.id} onNetworkDeleted={loadSite}/>
                               </td>
                             )}
                           </tr>
@@ -149,8 +149,8 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
             </div>
           </div>
           
-          <AddNetwork siteId={site.id} />
-          <EditSite site={site} />
+          <AddNetwork siteId={site.id} onNetworkAdded={loadSite}/>
+          <EditSite site={site} onSiteEdited={loadSite} />
           <DeleteSite siteId={site.id} />
         </div>
       </main>

components/dialogues/AddNetwork.tsx

@@ -30,9 +30,11 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
             gateway 
         });
         
-        if (onNetworkAdded) {
-            onNetworkAdded();
-        }
+        setTimeout(() => {
+            if (onNetworkAdded) {
+                onNetworkAdded();
+            }
+        }, 500);
     };
 
     return (

components/dialogues/DeleteNetwork.tsx

@@ -4,13 +4,19 @@ import { Trash2, AlertTriangle } from "lucide-react";
 
 interface DeleteNetworkProps {
     networkId: string;
+    onNetworkDeleted?: () => void;
 }
 
-export default function DeleteNetwork({ networkId }: DeleteNetworkProps) {
+export default function DeleteNetwork({ networkId, onNetworkDeleted }: DeleteNetworkProps) {
     const { deleteNetwork } = useNetworks();
     
     const handleDelete = () => {
         deleteNetwork(networkId);
+        setTimeout(() => {
+            if (onNetworkDeleted) {
+                onNetworkDeleted();
+            }
+        }, 500);
     };
 
     return (

components/dialogues/DeleteSite.tsx

@@ -11,6 +11,11 @@ interface DeleteSiteProps {
 export default function DeleteSite({ siteId }: DeleteSiteProps) {
     const router = useRouter()
     const { deleteSite } = useSite()
+
+    const handleDeleteSite = () => {
+        deleteSite(siteId)
+        router.push("/dashboard/sites")
+    }
     
     return (
         <div>
@@ -41,7 +46,7 @@ export default function DeleteSite({ siteId }: DeleteSiteProps) {
                             <button className="btn btn-outline">Cancel</button>
                             <button 
                                 className="btn btn-error text-error-content" 
-                                onClick={() => deleteSite(siteId)}
+                                onClick={handleDeleteSite}
                             >
                                 Delete Site
                             </button>

components/dialogues/EditNetwork.tsx

@@ -8,12 +8,12 @@ import { Network } from "@/app/types";
 import { PencilLine, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
 
 interface EditNetworkProps {
-    onNetworkAdded?: () => void;
+    onNetworkEdited?: () => void;
     siteId: string;
     network: Network;
 }
 
-export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNetworkProps) {
+export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNetworkProps) {
     const [editName, setEditName] = useState(network.name);
     const [editIpv4Subnet, setEditIpv4Subnet] = useState(network.ipv4Subnet);
     const [editIpv6Subnet, setEditIpv6Subnet] = useState(network.ipv6Subnet);
@@ -31,6 +31,11 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
             ipv6Subnet: editIpv6Subnet, 
             gateway: editGateway 
         });
+        setTimeout(() => {
+            if (onNetworkEdited) {
+                onNetworkEdited();
+            }
+        }, 500);
     };
 
     return (

components/dialogues/EditSite.tsx

@@ -9,9 +9,10 @@ import useSite from "@/hooks/useSite"
 
 interface EditSiteProps {
   site: Site
+  onSiteEdited?: () => void
 }
 
-export default function EditSite({ site }: EditSiteProps) {
+export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
   const [name, setName] = useState(site.name)
   const [description, setDescription] = useState(site.description || "")
   const [error, setError] = useState("")
@@ -23,6 +24,17 @@ export default function EditSite({ site }: EditSiteProps) {
     setDescription(site.description || "")
   }, [site])
 
+  const handleEditSite = () => {
+    editSite({ id: site.id, name, description, networks: site.networks })
+    
+    setTimeout(() => {
+      if (onSiteEdited) {
+        console.log("onSiteEdited")
+        onSiteEdited()
+      }
+    }, 500)
+  }
+
   return (
     <div>
       <dialog id="edit_site" className="modal">
@@ -75,7 +87,7 @@ export default function EditSite({ site }: EditSiteProps) {
               <button className="btn btn-outline">Cancel</button>
               <button 
                 className="btn btn-primary" 
-                onClick={() => editSite({ id: site.id, name, description, networks: site.networks })}
+                onClick={handleEditSite}
                 disabled={!name}
               >
                 Save Changes

hooks/useSite.ts

@@ -27,7 +27,7 @@ const useSite = () => {
     const editSite = (site: Site) => {
         axios.post('/api/sites/edit', site)
         .then(() => {
-            setSite(site);
+            console.log("Site edited successfully");
         })
         .catch(err => {
             console.error(err);