External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

hooks promises

Browse Source
This commit is contained in:
headlesdev 2025-05-20 00:06:32 +02:00
parent 6301997eac
commit ca1d60b058
7 changed files with 88 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/dashboard/sites/[siteId]/SitePage.tsx
View File

@ -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,11 +163,25 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
</div>
</div>
<AddNetwork siteId={site.id} onNetworkAdded={loadSite}/>
<EditSite site={site} onSiteEdited={loadSite} />
<DeleteSite siteId={site.id} />
</div>
)}
<AddNetwork siteId={site.id} onNetworkAdded={loadSite}/>
<EditSite site={site} onSiteEdited={loadSite} />
<DeleteSite siteId={site.id} />
{selectedNetwork && (
<EditNetwork
siteId={site.id}
network={selectedNetwork}
onNetworkEdited={loadSite}
/>
)}
{selectedNetworkId && (
<DeleteNetwork
networkId={selectedNetworkId}
onNetworkDeleted={loadSite}
/>
)}
</main>
</Sidebar>
)

15
components/dialogues/AddNetwork.tsx
View File

@ -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")
}

16
components/dialogues/DeleteNetwork.tsx
View File

@ -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")
}

19
components/dialogues/EditNetwork.tsx
View File

@ -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")
}
};

18
components/dialogues/EditSite.tsx
View File

@ -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")
}
}

22
hooks/useNetworks.ts
View File

@ -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) => {
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> | 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';
});
};

8
hooks/useSite.ts
View File

@ -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';
});
};