handle delete

client/src/Pages/StatusPage/Create/Components/HeaderConfigStatusControls.tsx

@@ -1,12 +1,10 @@
 import Stack from "@mui/material/Stack";
-import { Icon, MonitorStatus } from "@/Components/v2/design-elements";
+import { Icon } from "@/Components/v2/design-elements";
 import { Button } from "@/Components/v2/inputs";
 import { Trash } from "lucide-react";
 
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
-import { usePost } from "@/Hooks/UseApi";
 
 interface HeaderConfigStatusControlsProps {
 	onDelete: () => void;

client/src/Pages/StatusPage/Create/index.tsx

@@ -13,16 +13,17 @@ import {
 	TextField,
 	Autocomplete,
 	Checkbox,
+	Dialog,
 } from "@/Components/v2/inputs";
 
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
 import type { StatusPageFormData } from "@/Validation/statusPage";
-import { useGet, usePost, usePut } from "@/Hooks/UseApi";
+import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import type { StatusPageResponse } from "@/Types/StatusPage";
 import timezones from "@/Utils/timezones.json";
@@ -55,6 +56,10 @@ const CreateStatusPage = () => {
 
 	const { post, loading: isSubmittingPost } = usePost();
 	const { put, loading: isSubmittingPut } = usePut();
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	// Delete dialog state
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 	const isSubmitting = isSubmittingPost || isSubmittingPut;
 
 	const { schema, defaults } = useStatusPageForm({
@@ -78,6 +83,22 @@ const CreateStatusPage = () => {
 		console.log(errors);
 	};
 
+	const handleDeleteClick = () => {
+		setIsDeleteDialogOpen(true);
+	};
+
+	const handleDeleteConfirm = async () => {
+		const result = await deleteFn(`/status-page/${statusPageData?.statusPage?.id}`);
+		if (result) {
+			navigate("/status");
+		}
+		setIsDeleteDialogOpen(false);
+	};
+
+	const handleDeleteCancel = () => {
+		setIsDeleteDialogOpen(false);
+	};
+
 	const onSubmit = async (data: StatusPageFormData) => {
 		const fd = new FormData();
 		fd.append("type", "uptime");
@@ -136,13 +157,7 @@ const CreateStatusPage = () => {
 			component="form"
 			onSubmit={handleSubmit(onSubmit, onError)}
 		>
-			{!isCreate && (
-				<HeaderConfigStatusControls
-					onDelete={() => {
-						console.log("poo");
-					}}
-				/>
-			)}
+			{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
 			<ConfigBox
 				title={t("pages.statusPages.form.access.title")}
 				subtitle={t("pages.statusPages.form.access.description")}
@@ -459,6 +474,14 @@ const CreateStatusPage = () => {
 					{t("common.buttons.save")}
 				</Button>
 			</Stack>
+			<Dialog
+				open={isDeleteDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleDeleteConfirm}
+				onCancel={handleDeleteCancel}
+				loading={isDeleting}
+			/>
 		</BasePage>
 	);
 };

client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx

@@ -50,7 +50,7 @@ export const HeaderStatusPageControls = ({
 						<Typography
 							onClick={() => {
 								window.open(
-									`/status/uptime/public/${statusPage.url}`,
+									`/status/public/${statusPage.url}`,
 									"_blank",
 									"noopener,noreferrer"
 								);
@@ -77,7 +77,7 @@ export const HeaderStatusPageControls = ({
 					variant="contained"
 					color="secondary"
 					startIcon={<Icon icon={Settings} />}
-					onClick={() => navigate(`/status/uptime/configure/${statusPage.url}`)}
+					onClick={() => navigate(`/status/configure/${statusPage.url}`)}
 				>
 					{t("common.buttons.configure")}
 				</Button>

client/src/Pages/StatusPage/Status/index.tsx

@@ -19,7 +19,7 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
-	const isPublic = location.pathname.startsWith("/status/uptime/public");
+	const isPublic = location.pathname.startsWith("/status/public");
 
 	const apiUrl = url ? `/status-page/${url}?type=uptime` : null;
 
@@ -47,7 +47,7 @@ const StatusPageView = () => {
 							{t("pages.statusPages.details.empty.title")}
 						</Typography>
 						{isAdmin && (
-							<Link to={`/status/uptime/configure/${url}`}>
+							<Link to={`/status/configure/${url}`}>
 								{t("pages.statusPages.details.empty.addMonitor")}
 							</Link>
 						)}

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx

@@ -22,7 +22,7 @@ export const StatusPagesTable = ({ data }: StatusPagesTableProps) => {
 	const handleUrlClick = (e: React.MouseEvent, row: StatusPage) => {
 		if (row.isPublished) {
 			e.stopPropagation();
-			const url = `/status/uptime/public/${row.url}`;
+			const url = `/status/public/${row.url}`;
 			window.open(url, "_blank", "noopener,noreferrer");
 		}
 	};
@@ -91,7 +91,7 @@ export const StatusPagesTable = ({ data }: StatusPagesTableProps) => {
 	};
 
 	const handleRowClick = (statusPage: StatusPage) => {
-		navigate(`/status/uptime/${statusPage.url}`);
+		navigate(`/status/${statusPage.url}`);
 	};
 
 	return (

client/src/Pages/StatusPage/StatusPages/index.tsx

@@ -27,10 +27,10 @@ const StatusPages = () => {
 			error={!!error}
 			items={statusPages ?? []}
 			actionButtonText={t("pages.statusPages.fallback.actionButton")}
-			actionLink="/status/uptime/create"
+			actionLink="/status/create"
 		>
 			<HeaderCreate
-				path="/status/uptime/create"
+				path="/status/create"
 				isAdmin={isAdmin}
 			/>
 			<StatusPagesTable data={statusPages ?? []} />

client/src/Routes/index.jsx

@@ -237,7 +237,7 @@ const Routes = () => {
 				/>
 
 				<Route
-					path="status/uptime/:url"
+					path="status/:url"
 					element={
 						<>
 							<ThemeProvider theme={v2theme}>
@@ -248,7 +248,7 @@ const Routes = () => {
 				/>
 
 				<Route
-					path="status/uptime/create"
+					path="status/create"
 					element={
 						<>
 							<ThemeProvider theme={v2theme}>
@@ -259,7 +259,7 @@ const Routes = () => {
 				/>
 
 				<Route
-					path="status/uptime/configure/:url"
+					path="status/configure/:url"
 					element={
 						<>
 							<ThemeProvider theme={v2theme}>
@@ -377,7 +377,7 @@ const Routes = () => {
 				element={<AuthNewPasswordConfirmed />}
 			/>
 			<Route
-				path="/status/uptime/public/:url"
+				path="/status/public/:url"
 				element={
 					<>
 						<ThemeProvider theme={v2theme}>

client/src/locales/en.json

@@ -861,6 +861,7 @@
 			}
 		},
 		"statusPages": {
+			"deleteSuccess": "Status page deleted successfully",
 			"fallback": {
 				"title": "A status page is used to:",
 				"checks": [

server/src/routes/statusPageRoute.ts

@@ -19,7 +19,7 @@ class StatusPageRoutes {
 		this.router.put("/:id", upload.single("logo"), verifyJWT, this.statusPageController.updateStatusPage);
 
 		this.router.get("/:url", this.statusPageController.getStatusPageByUrl);
-		this.router.delete("/:url(*)", verifyJWT, this.statusPageController.deleteStatusPage);
+		this.router.delete("/:id", verifyJWT, this.statusPageController.deleteStatusPage);
 	}
 
 	getRouter() {