hooks promises

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

@@ -2,6 +2,7 @@
 import Sidebar from "@/components/Sidebar"
 import useSite from "@/hooks/useSite"
 import { useEffect, useState } from "react"
+import { Network } from "@/app/types"
 import Loading from "@/components/Loading"
 import { EditModeToggle } from "@/components/EditModeToggle"
 import AddNetwork from "@/components/dialogues/AddNetwork"
@@ -21,6 +22,9 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
   const { site, loadSite, setSiteId, loading } = useSite()
   const [isEditMode, setIsEditMode] = useState(false)
   
+  const [selectedNetwork, setSelectedNetwork] = useState<Network | null>(null)
+  const [selectedNetworkId, setSelectedNetworkId] = useState('')
+
   useEffect(() => {
     if (siteId) {
       setSiteId(siteId)
@@ -114,19 +118,23 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                                 <div className="flex gap-1 justify-center">
                                   <button 
                                     className="btn btn-primary btn-s px-2" 
-                                    onClick={() => (document.getElementById('edit_network') as HTMLDialogElement)?.showModal()}
+                                    onClick={() => {
+                                      setSelectedNetwork(network);
+                                      (document.getElementById('edit_network') as HTMLDialogElement)?.showModal();
+                                    }}
                                   >
                                     <Pencil className="h-3 w-3" />
                                   </button>
                                   <button 
                                     className="btn btn-error btn-s px-2" 
-                                    onClick={() => (document.getElementById('delete_network') as HTMLDialogElement)?.showModal()}
+                                    onClick={() => {
+                                      setSelectedNetworkId(network.id);
+                                      (document.getElementById('delete_network') as HTMLDialogElement)?.showModal();
+                                    }}
                                   >
                                     <Trash className="h-3 w-3" />
                                   </button>
                                 </div>
-                                <EditNetwork siteId={site.id} network={network} onNetworkEdited={loadSite}/>
-                                <DeleteNetwork networkId={network.id} onNetworkDeleted={loadSite}/>
                               </td>
                             )}
                           </tr>
@@ -155,10 +163,24 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
             </div>
           </div>
           
+        </div>
+        )}
+
         <AddNetwork siteId={site.id} onNetworkAdded={loadSite}/>
         <EditSite site={site} onSiteEdited={loadSite} />
         <DeleteSite siteId={site.id} />
-        </div>
+        {selectedNetwork && (
+          <EditNetwork 
+            siteId={site.id} 
+            network={selectedNetwork} 
+            onNetworkEdited={loadSite} 
+          />
+        )}
+        {selectedNetworkId && (
+          <DeleteNetwork 
+            networkId={selectedNetworkId} 
+            onNetworkDeleted={loadSite} 
+          />
         )}
       </main>
     </Sidebar>

components/dialogues/AddNetwork.tsx

@@ -20,7 +20,7 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
     const [success, setSuccess] = useState("");
     const { addNetwork } = useNetworks();
     
-    const handleAddNetwork = () => {
+    const handleAddNetwork = async () => {
         try {
             const response = addNetwork({ 
                 id: "0", 
@@ -30,16 +30,19 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
                 ipv6Subnet, 
                 gateway 
             });
-            if (response) {
+            if (typeof response === "string") {
                 setError(response)
                 return
             }
-            setTimeout(() => {
+            try {
-                if (onNetworkAdded) {
+                const successMessage = await response
+                if (onNetworkAdded && successMessage) {
                     onNetworkAdded()
-                    setSuccess("Network added successfully")
+                    setSuccess(successMessage)
+                }
+            } catch (apiError: any) {
+                setError(apiError)
             }
-            }, 500);
         } catch (err) {
             setError("Failed to add network")
         }

components/dialogues/DeleteNetwork.tsx

@@ -15,19 +15,23 @@ export default function DeleteNetwork({ networkId, onNetworkDeleted }: DeleteNet
     const [success, setSuccess] = useState("");
     const { deleteNetwork } = useNetworks();
     
-    const handleDelete = () => {
+    const handleDelete = async () => {
         try {
             const response = deleteNetwork(networkId);
-            if (response) {
+            if (typeof response === "string") {
                 setError(response)
                 return
             }
-            setTimeout(() => {
+
-                if (onNetworkDeleted) {
+            try {
+                const successMessage = await response
+                if (onNetworkDeleted && successMessage) {
                     onNetworkDeleted()
-                    setSuccess("Network deleted successfully")
+                    setSuccess(successMessage)
+                }
+            } catch (apiError: any) {
+                setError(apiError)
             }
-            }, 500);
         } catch (err) {
             setError("Failed to delete network")
         }

components/dialogues/EditNetwork.tsx

@@ -22,7 +22,7 @@ export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNe
     const [success, setSuccess] = useState("");
     const { editNetwork } = useNetworks();
     
-    const handleEdit = () => {
+    const handleEdit = async () => {
         try {
             const response = editNetwork({ 
                 id: network.id, 
@@ -32,17 +32,22 @@ export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNe
                 ipv6Subnet: editIpv6Subnet, 
                 gateway: editGateway 
             });
-            if (response) {
+            if (typeof response === "string") {
                 setError(response)
                 return
             }
-            setTimeout(() => {
+
-                if (onNetworkEdited) {
+            try{
+                const successMessage = await response
+                if (onNetworkEdited && successMessage) {
                     onNetworkEdited()
-                    setSuccess("Network edited successfully")
+                    setSuccess(successMessage)
                 }
-            }, 500);
+            } catch (apiError: any) {
-        } catch (err) {
+                setError(apiError)
+            }
+
+        } catch (err: any) {
             setError("Failed to edit network")
         }
     };

components/dialogues/EditSite.tsx

@@ -26,16 +26,24 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
 
   const handleEditSite = async () => {
     try {
-      const result = await editSite({ id: site.id, name, description, networks: site.networks })
+      const result = editSite({ id: site.id, name, description, networks: site.networks })
-      if (result) {
+      
+      if (typeof result === "string") {
         setError(result)
         return
       }
-      if (onSiteEdited) {
+      
+      try {
+        const successMessage = await result
+        if (onSiteEdited && successMessage) {
           onSiteEdited()
-        setSuccess("Site edited successfully")
+          setSuccess(successMessage)
+        }
+      } catch (apiError) {
+        setError(typeof apiError === "string" ? apiError : "Failed to edit site")
       }
     } catch (err) {
+      console.error("Error in handleEditSite:", err)
       setError("Failed to edit site")
     }
   }

hooks/useNetworks.ts

@@ -3,48 +3,48 @@ import { Network } from "@/app/types";
 
 const useNetworks = () => {
    
-    const addNetwork = (network: Network): Promise<Network> | string => {
+    const addNetwork = (network: Network): Promise<string> | string => {
         if (!network.name) {
             return 'Network name is required';
         }
         
         return axios.post('/api/sites/networks/add', network)
-        .then((response) => {
+        .then(() => {
-            return response.data.network;
+            return "Network added successfully";
         })
         .catch(err => {
             throw err.response?.data?.error || 'An error occurred';
         });
     };
 
-    const editNetwork = (network: Network) => {
+    const editNetwork = (network: Network): Promise<string> | string => {
         if (!network.id) {
             return 'Network ID is required';
         }
         if(network.name.length < 1) {
             return 'Network name must be at least 1 character long';
         }
-        axios.post('/api/sites/networks/edit', network)
+        return axios.post('/api/sites/networks/edit', network)
         .then(() => {
-            return;
+            return "Network edited successfully";
         })
         .catch(err => {
-            return err.response?.data?.error || 'An error occurred';
+            throw err.response?.data?.error || 'An error occurred';
         });
     };
 
-    const deleteNetwork = (networkId: string) => {
+    const deleteNetwork = (networkId: string): Promise<string> | string => {
         if (!networkId) {
             return 'Network ID is required';
         }
-        axios.delete('/api/sites/networks/delete', {
+        return axios.delete('/api/sites/networks/delete', {
             params: { networkId }
         })
         .then(() => {
-            return;
+            return "Network deleted successfully";
         })
         .catch(err => {
-            return err.response?.data?.error || 'An error occurred';
+            throw err.response?.data?.error || 'An error occurred';
         });
     };
 

hooks/useSite.ts

@@ -27,7 +27,7 @@ const useSite = () => {
         loadSite();
     }, [loadSite]);
 
-    const editSite = (site: Site): string | void => {
+    const editSite = (site: Site): Promise<string> | string => {
         if (!site.id) {
             return 'Site ID is required';
         }
@@ -35,12 +35,12 @@ const useSite = () => {
         if(site.name.length < 3) {
             return 'Site name must be at least 3 characters long';
         }
-        axios.post('/api/sites/edit', site)
+        return axios.post('/api/sites/edit', site)
         .then(() => {
-            return;
+            return "Site edited successfully";
         })
         .catch(err => {
-            return err.response?.data?.error || 'An error occurred';
+            throw err.response?.data?.error || 'An error occurred';
         });
     };