Network alerts

components/dialogues/AddNetwork.tsx

@@ -21,7 +21,8 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
     const { addNetwork } = useNetworks();
     
     const handleAddNetwork = () => {
-        addNetwork({ 
+        try {
+            const response = addNetwork({ 
                 id: "0", 
                 siteId, 
                 name, 
@@ -29,12 +30,19 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
                 ipv6Subnet, 
                 gateway 
             });
-        
+            if (response) {
+                setError(response)
+                return
+            }
             setTimeout(() => {
                 if (onNetworkAdded) {
-                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);
+        try {
+            const response = deleteNetwork(networkId);
+            if (response) {
+                setError(response)
+                return
+            }
             setTimeout(() => {
                 if (onNetworkDeleted) {
-                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,7 +23,8 @@ export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNe
     const { editNetwork } = useNetworks();
     
     const handleEdit = () => {
-        editNetwork({ 
+        try {
+            const response = editNetwork({ 
                 id: network.id, 
                 siteId, 
                 name: editName, 
@@ -31,11 +32,19 @@ export default function EditNetwork({ onNetworkEdited, siteId, network }: EditNe
                 ipv6Subnet: editIpv6Subnet, 
                 gateway: editGateway 
             });
+            if (response) {
+                setError(response)
+                return
+            }
             setTimeout(() => {
                 if (onNetworkEdited) {
-                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';
         });
     };