diff --git a/client/src/Components/v2/inputs/Dialog.tsx b/client/src/Components/v2/inputs/Dialog.tsx new file mode 100644 index 000000000..373d95023 --- /dev/null +++ b/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 ( + + {title} + + {content} + + + + + + + ); +}; diff --git a/client/src/Components/v2/inputs/index.tsx b/client/src/Components/v2/inputs/index.tsx index 87698a4f0..70e740dbd 100644 --- a/client/src/Components/v2/inputs/index.tsx +++ b/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"; diff --git a/client/src/Hooks/UseApi.ts b/client/src/Hooks/UseApi.ts index 441c2b77b..aa71f01af 100644 --- a/client/src/Hooks/UseApi.ts +++ b/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 = () => { return { patch: patchFn, loading, error }; }; + +export const useDelete = () => { + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const { toastError, toastSuccess } = useToast(); + + const deleteFn = async ( + endpoint: string, + config?: AxiosRequestConfig + ): Promise | null> => { + setLoading(true); + setError(null); + + try { + const res = await deleteOp>(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 }; +}; diff --git a/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx b/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx index 0322948c3..f38e1c706 100644 --- a/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx +++ b/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 = ({ ), action: () => { - // setSelectedMonitor(monitor); + setSelectedMonitor(monitor); }, closeMenu: true, }, diff --git a/client/src/Pages/PageSpeed/Monitors/index.tsx b/client/src/Pages/PageSpeed/Monitors/index.tsx index 158260456..64b39dbce 100644 --- a/client/src/Pages/PageSpeed/Monitors/index.tsx +++ b/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(settingsUrl); - const monitors = monitorsData?.monitors; - const monitorsCount = monitorsData?.count; - // const summary = monitorsData?.summary; - const settings = settingsData; - - const isLoading = monitorsIsLoading || settingsIsLoading; - + const [selectedMonitor, setSelectedMonitor] = useState(null); + const isDialogOpen = Boolean(selectedMonitor); const [sortField, setSortField] = useState("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 ( { { rowsPerPage={rowsPerPage} setRowsPerPage={setRowsPerPage} /> + ); }; diff --git a/client/src/Pages/Uptime/Monitors/index.tsx b/client/src/Pages/Uptime/Monitors/index.tsx index e3e90429a..061fb9454 100644 --- a/client/src/Pages/Uptime/Monitors/index.tsx +++ b/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, diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 8a44872ff..a630b68e2 100644 --- a/client/src/locales/en.json +++ b/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",