Network alerts

components/dialogues/AddNetwork.tsx

@@ -21,20 +21,28 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
     const { addNetwork } = useNetworks();
     
     const handleAddNetwork = () => {
-        addNetwork({ 
-            id: "0", 
-            siteId, 
-            name, 
-            ipv4Subnet, 
-            ipv6Subnet, 
-            gateway 
-        });
-        
-        setTimeout(() => {
-            if (onNetworkAdded) {
-                onNetworkAdded();
+        try {
+            const response = addNetwork({ 
+                id: "0", 
+                siteId, 
+                name, 
+                ipv4Subnet, 
+                ipv6Subnet, 
+                gateway 
+            });
+            if (response) {
+                setError(response)
+                return
             }
-        }, 500);
+            setTimeout(() => {
+                if (onNetworkAdded) {
+                    onNetworkAdded()
+                    setSuccess("Network added successfully")
+                }
+            }, 500);
+        } catch (err) {
+            setError("Failed to add network")
+        }
     };
 
     return (

components/dialogues/DeleteNetwork.tsx

@@ -1,6 +1,9 @@
 "use client";
 import useNetworks from "@/hooks/useNetworks";
 import { Trash2, AlertTriangle } from "lucide-react";
+import { useState } from "react";
+import ErrorToast from "@/components/Error";
+import SuccessToast from "@/components/Success";
 
 interface DeleteNetworkProps {
     networkId: string;
@@ -8,15 +11,26 @@ interface DeleteNetworkProps {
 }
 
 export default function DeleteNetwork({ networkId, onNetworkDeleted }: DeleteNetworkProps) {
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState("");
     const { deleteNetwork } = useNetworks();
     
     const handleDelete = () => {
-        deleteNetwork(networkId);
-        setTimeout(() => {
-            if (onNetworkDeleted) {
-                onNetworkDeleted();
+        try {
+            const response = deleteNetwork(networkId);
+            if (response) {
+                setError(response)
+                return
             }
-        }, 500);
+            setTimeout(() => {
+                if (onNetworkDeleted) {
+                    onNetworkDeleted()
+                    setSuccess("Network deleted successfully")
+                }
+            }, 500);
+        } catch (err) {
+            setError("Failed to delete network")
+        }
     };
 
     return (
@@ -56,6 +70,8 @@ export default function DeleteNetwork({ networkId, onNetworkDeleted }: DeleteNet
                     </div>
                 </div>
             </dialog>
+            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
+            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
         </div>
     );
 }

components/dialogues/EditNetwork.tsx

@@ -23,19 +23,28 @@ export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNe
     const { editNetwork } = useNetworks();
     
     const handleEdit = () => {
-        editNetwork({ 
-            id: network.id, 
-            siteId, 
-            name: editName, 
-            ipv4Subnet: editIpv4Subnet, 
-            ipv6Subnet: editIpv6Subnet, 
-            gateway: editGateway 
-        });
-        setTimeout(() => {
-            if (onNetworkEdited) {
-                onNetworkEdited();
+        try {
+            const response = editNetwork({ 
+                id: network.id, 
+                siteId, 
+                name: editName, 
+                ipv4Subnet: editIpv4Subnet, 
+                ipv6Subnet: editIpv6Subnet, 
+                gateway: editGateway 
+            });
+            if (response) {
+                setError(response)
+                return
             }
-        }, 500);
+            setTimeout(() => {
+                if (onNetworkEdited) {
+                    onNetworkEdited()
+                    setSuccess("Network edited successfully")
+                }
+            }, 500);
+        } catch (err) {
+            setError("Failed to edit network")
+        }
     };
 
     return (

hooks/useNetworks.ts

@@ -1,20 +1,49 @@
-import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
 import { Network } from "@/app/types";
 
 const useNetworks = () => {
    
     const addNetwork = (network: Network) => {
-        axios.post('/api/sites/networks/add', network);
+        if (!network.name) {
+            return 'Network name is required';
+        }
+        axios.post('/api/sites/networks/add', network)
+        .then(() => {
+            return;
+        })
+        .catch(err => {
+            return err.response?.data?.error || 'An error occurred';
+        });
     };
 
     const editNetwork = (network: Network) => {
-        axios.post('/api/sites/networks/edit', network);
+        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)
+        .then(() => {
+            return;
+        })
+        .catch(err => {
+            return err.response?.data?.error || 'An error occurred';
+        });
     };
 
     const deleteNetwork = (networkId: string) => {
+        if (!networkId) {
+            return 'Network ID is required';
+        }
         axios.delete('/api/sites/networks/delete', {
             params: { networkId }
+        })
+        .then(() => {
+            return;
+        })
+        .catch(err => {
+            return err.response?.data?.error || 'An error occurred';
         });
     };