delete pagepseed

client/src/Components/v2/inputs/Dialog.tsx

@@ -0,0 +1,56 @@
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { Button } from "@/Components/v2/inputs";
+import { typographyLevels } from "@/Utils/Theme/v2Palette";
+import { useTranslation } from "react-i18next";
+
+export const DialogInput = ({
+	open,
+	title,
+	content,
+	onConfirm,
+	onCancel,
+	confirmColor = "primary",
+	cancelColor = "error",
+	loading = false,
+}: {
+	open: boolean;
+	title?: string;
+	content?: string;
+	onConfirm?(item: any): any;
+	onCancel?(item: any): any;
+	confirmColor?: "error" | "primary";
+	cancelColor?: "error" | "primary";
+	loading?: boolean;
+}) => {
+	const { t } = useTranslation();
+	return (
+		<Dialog open={open}>
+			<DialogTitle sx={{ fontSize: typographyLevels.l }}>{title}</DialogTitle>
+			<DialogContent>
+				<DialogContentText>{content}</DialogContentText>
+			</DialogContent>
+			<DialogActions>
+				<Button
+					loading={loading}
+					variant="contained"
+					color={cancelColor}
+					onClick={onCancel}
+				>
+					{t("common.buttons.cancel")}
+				</Button>
+				<Button
+					loading={loading}
+					variant="contained"
+					color={confirmColor}
+					onClick={onConfirm}
+				>
+					{t("common.buttons.confirm")}
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};

client/src/Components/v2/inputs/index.tsx

@@ -8,3 +8,4 @@ export {
 	ToggleButtonInput as ToggleButton,
 	ToggleButtonGroupInput as ToggleButtonGroup,
 } from "./ToggleButton";
+export { DialogInput as Dialog } from "./Dialog";

client/src/Hooks/UseApi.ts

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import type { SWRConfiguration } from "swr";
 import type { AxiosRequestConfig } from "axios";
-import { get, patch, post } from "@/Utils/ApiClient";
+import { get, patch, post, deleteOp } from "@/Utils/ApiClient";
 import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
 
@@ -107,3 +107,38 @@ export const usePatch = <B = any, R = any>() => {
 
 	return { patch: patchFn, loading, error };
 };
+
+export const useDelete = <R = any>() => {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const { toastError, toastSuccess } = useToast();
+
+	const deleteFn = async (
+		endpoint: string,
+		config?: AxiosRequestConfig
+	): Promise<ApiResponse<R> | null> => {
+		setLoading(true);
+		setError(null);
+
+		try {
+			const res = await deleteOp<ApiResponse<R>>(endpoint, {
+				...config,
+				headers: {
+					...config?.headers,
+				},
+			});
+			toastSuccess(res.data?.msg || "Operation successful");
+			return res.data;
+		} catch (err: any) {
+			console.error(err);
+			const errMsg = err?.response?.data?.message || err.message || "An error occurred";
+			toastError(errMsg);
+			setError(errMsg);
+			return null;
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return { deleteFn, loading, error };
+};

client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx

@@ -13,13 +13,13 @@ import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import { usePatch } from "@/Hooks/UseApi";
 
-import type { Check } from "@/Types/Check";
 import type { Monitor, MonitorWithChecks } from "@/Types/Monitor";
 import type { ActionMenuItem } from "@/Components/v2/actions-menu";
 
 export const PageSpeedMonitorsTable = ({
 	monitors,
 	refetch,
+	setSelectedMonitor,
 	sortField,
 	setSortField,
 	sortOrder,
@@ -32,6 +32,7 @@ export const PageSpeedMonitorsTable = ({
 }: {
 	monitors: MonitorWithChecks[];
 	refetch: Function;
+	setSelectedMonitor: Function;
 	sortField: string;
 	setSortField: (field: string) => void;
 	sortOrder: "asc" | "desc";
@@ -138,7 +139,7 @@ export const PageSpeedMonitorsTable = ({
 					</Typography>
 				),
 				action: () => {
-					// setSelectedMonitor(monitor);
+					setSelectedMonitor(monitor);
 				},
 				closeMenu: true,
 			},

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -4,20 +4,24 @@ import {
 	// DownStatusBox,
 	// PausedStatusBox,
 } from "@/Components/v2/design-elements";
+import { Dialog } from "@/Components/v2/inputs";
 import { HeaderCreate } from "@/Components/v2/common";
 // import Stack from "@mui/material/Stack";
 import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable";
+import type { Monitor } from "@/Types/Monitor";
 
+import { useTranslation } from "react-i18next";
 import { useState } from "react";
-import { useTheme } from "@mui/material";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { useGet } from "@/Hooks/UseApi";
+import { useGet, useDelete } from "@/Hooks/UseApi";
 import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
 import type { AppSettingsResponse } from "@/Types/Settings";
 
 const PageSpeedMonitorsPage = () => {
-	const theme = useTheme();
+	const { t } = useTranslation();
 	const isAdmin = useIsAdmin();
+	const { deleteFn, loading: isDeleting } = useDelete();
+
 	const monitorsUrl = "/monitors/team/with-checks?type=pagespeed&limit=10";
 	const {
 		data: monitorsData,
@@ -33,18 +37,30 @@ const PageSpeedMonitorsPage = () => {
 		error: settingsError,
 	} = useGet<AppSettingsResponse>(settingsUrl);
 
-	const monitors = monitorsData?.monitors;
-	const monitorsCount = monitorsData?.count;
-	// const summary = monitorsData?.summary;
-	const settings = settingsData;
-
-	const isLoading = monitorsIsLoading || settingsIsLoading;
-
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+	const isDialogOpen = Boolean(selectedMonitor);
 	const [sortField, setSortField] = useState<string>("name");
 	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 
+	const monitors = monitorsData?.monitors;
+	const monitorsCount = monitorsData?.count;
+	// const summary = monitorsData?.summary;
+
+	const isLoading = monitorsIsLoading || settingsIsLoading;
+
+	const handleConfirm = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+
+	const handleCancel = () => {
+		setSelectedMonitor(null);
+	};
+
 	return (
 		<MonitorBasePageWithStates
 			loading={isLoading}
@@ -69,6 +85,7 @@ const PageSpeedMonitorsPage = () => {
 			<PageSpeedMonitorsTable
 				monitors={monitors || []}
 				refetch={refetch}
+				setSelectedMonitor={setSelectedMonitor}
 				sortField={sortField}
 				setSortField={setSortField}
 				sortOrder={sortOrder}
@@ -79,6 +96,14 @@ const PageSpeedMonitorsPage = () => {
 				rowsPerPage={rowsPerPage}
 				setRowsPerPage={setRowsPerPage}
 			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
 		</MonitorBasePageWithStates>
 	);
 };

client/src/Pages/Uptime/Monitors/index.tsx

@@ -173,7 +173,6 @@ const UptimeMonitorsPage = () => {
 				sortOrder={sortOrder}
 				setSortOrder={setSortOrder}
 				setRowsPerPage={(rowsPerPage: number) => {
-					console.log("wtf");
 					dispatch(
 						setRowsPerPage({
 							value: rowsPerPage,

client/src/locales/en.json

@@ -9,7 +9,15 @@
 			"incidents": "Incidents",
 			"pause": "Pause",
 			"resume": "Resume",
-			"delete": "Delete"
+			"delete": "Delete",
+			"cancel": "Cancel",
+			"confirm": "Confirm"
+		},
+		"dialogs": {
+			"delete": {
+				"description": "This action cannot be undone.",
+				"title": "Are you sure you want to delete this?"
+			}
 		},
 		"toasts": {
 			"networkError": "Network error",