From ca1d60b0581772e8c0a95ca1c6cf15efd6e00912 Mon Sep 17 00:00:00 2001 From: headlesdev Date: Tue, 20 May 2025 00:06:32 +0200 Subject: [PATCH] hooks promises --- app/dashboard/sites/[siteId]/SitePage.tsx | 36 ++++++++++++++++++----- components/dialogues/AddNetwork.tsx | 15 ++++++---- components/dialogues/DeleteNetwork.tsx | 16 ++++++---- components/dialogues/EditNetwork.tsx | 19 +++++++----- components/dialogues/EditSite.tsx | 18 ++++++++---- hooks/useNetworks.ts | 22 +++++++------- hooks/useSite.ts | 8 ++--- 7 files changed, 88 insertions(+), 46 deletions(-) diff --git a/app/dashboard/sites/[siteId]/SitePage.tsx b/app/dashboard/sites/[siteId]/SitePage.tsx index 3a622bb..cdb0d21 100644 --- a/app/dashboard/sites/[siteId]/SitePage.tsx +++ b/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" @@ -20,6 +21,9 @@ interface SitesPageProps { export default function SitesPage({ username, name, siteId }: SitesPageProps) { const { site, loadSite, setSiteId, loading } = useSite() const [isEditMode, setIsEditMode] = useState(false) + + const [selectedNetwork, setSelectedNetwork] = useState(null) + const [selectedNetworkId, setSelectedNetworkId] = useState('') useEffect(() => { if (siteId) { @@ -114,19 +118,23 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
- - )} @@ -155,11 +163,25 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) { - - - )} + + + + + {selectedNetwork && ( + + )} + {selectedNetworkId && ( + + )} ) diff --git a/components/dialogues/AddNetwork.tsx b/components/dialogues/AddNetwork.tsx index 46c9f0c..9507b52 100644 --- a/components/dialogues/AddNetwork.tsx +++ b/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(() => { - if (onNetworkAdded) { + try { + const successMessage = await response + if (onNetworkAdded && successMessage) { onNetworkAdded() - setSuccess("Network added successfully") + setSuccess(successMessage) } - }, 500); + } catch (apiError: any) { + setError(apiError) + } } catch (err) { setError("Failed to add network") } diff --git a/components/dialogues/DeleteNetwork.tsx b/components/dialogues/DeleteNetwork.tsx index 93704e0..18662b8 100644 --- a/components/dialogues/DeleteNetwork.tsx +++ b/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) } - }, 500); + } catch (apiError: any) { + setError(apiError) + } } catch (err) { setError("Failed to delete network") } diff --git a/components/dialogues/EditNetwork.tsx b/components/dialogues/EditNetwork.tsx index 55a0cfc..69cc119 100644 --- a/components/dialogues/EditNetwork.tsx +++ b/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 (err) { + } catch (apiError: any) { + setError(apiError) + } + + } catch (err: any) { setError("Failed to edit network") } }; diff --git a/components/dialogues/EditSite.tsx b/components/dialogues/EditSite.tsx index da0af85..45cc1aa 100644 --- a/components/dialogues/EditSite.tsx +++ b/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 }) - if (result) { + const result = editSite({ id: site.id, name, description, networks: site.networks }) + + if (typeof result === "string") { setError(result) return } - if (onSiteEdited) { - onSiteEdited() - setSuccess("Site edited successfully") + + try { + const successMessage = await result + if (onSiteEdited && successMessage) { + onSiteEdited() + 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") } } diff --git a/hooks/useNetworks.ts b/hooks/useNetworks.ts index 08599d1..ab466b7 100644 --- a/hooks/useNetworks.ts +++ b/hooks/useNetworks.ts @@ -3,48 +3,48 @@ import { Network } from "@/app/types"; const useNetworks = () => { - const addNetwork = (network: Network): Promise | string => { + const addNetwork = (network: Network): Promise | string => { if (!network.name) { return 'Network name is required'; } return axios.post('/api/sites/networks/add', network) - .then((response) => { - return response.data.network; + .then(() => { + return "Network added successfully"; }) .catch(err => { throw err.response?.data?.error || 'An error occurred'; }); }; - const editNetwork = (network: Network) => { + const editNetwork = (network: Network): Promise | 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 => { 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'; }); }; diff --git a/hooks/useSite.ts b/hooks/useSite.ts index 8f8cb43..18bb739 100644 --- a/hooks/useSite.ts +++ b/hooks/useSite.ts @@ -27,7 +27,7 @@ const useSite = () => { loadSite(); }, [loadSite]); - const editSite = (site: Site): string | void => { + const editSite = (site: Site): Promise | 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'; }); };