Merge pull request #1704 from bluewave-labs/fix/fe/status-page-delete-modal

fix: fe/status page delete modal

Client/src/Components/Dialog/index.jsx

@@ -1,18 +1,19 @@
 import PropTypes from "prop-types";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { Button, Stack } from "@mui/material";
 import { GenericDialog } from "./genericDialog";
+import { useTheme } from "@emotion/react";
 
 const Dialog = ({
 	title,
 	description,
 	open,
-	theme,
 	onCancel,
 	confirmationButtonLabel,
 	onConfirm,
 	isLoading,
 }) => {
+	const theme = useTheme();
+
 	return (
 		<GenericDialog
 			title={title}
@@ -34,14 +35,14 @@ const Dialog = ({
 				>
 					Cancel
 				</Button>
-				<LoadingButton
+				<Button
 					variant="contained"
 					color="error"
 					loading={isLoading}
 					onClick={onConfirm}
 				>
 					{confirmationButtonLabel}
-				</LoadingButton>
+				</Button>
 			</Stack>
 		</GenericDialog>
 	);
@@ -51,7 +52,6 @@ Dialog.propTypes = {
 	title: PropTypes.string.isRequired,
 	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
-	theme: PropTypes.object.isRequired,
 	onCancel: PropTypes.func.isRequired,
 	confirmationButtonLabel: PropTypes.string.isRequired,
 	onConfirm: PropTypes.func.isRequired,

Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
 
-const Controls = ({ deleteStatusPage, isDeleting }) => {
+const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting }) => {
 	const theme = useTheme();
 	const location = useLocation();
 	const currentPath = location.pathname;
@@ -17,7 +17,6 @@ const Controls = ({ deleteStatusPage, isDeleting }) => {
 	if (currentPath === "/status/public") {
 		return null;
 	}
-
 	return (
 		<Stack
 			direction="row"
@@ -27,7 +26,7 @@ const Controls = ({ deleteStatusPage, isDeleting }) => {
 				<Button
 					variant="contained"
 					color="error"
-					onClick={deleteStatusPage}
+					onClick={() => setIsDeleteOpen(!isDeleteOpen)}
 					loading={isDeleting}
 				>
 					Delete
@@ -56,11 +55,12 @@ const Controls = ({ deleteStatusPage, isDeleting }) => {
 };
 
 Controls.propTypes = {
-	deleteStatusPage: PropTypes.func,
 	isDeleting: PropTypes.bool,
+	isDeleteOpen: PropTypes.bool.isRequired,
+	setIsDeleteOpen: PropTypes.func.isRequired,
 };
 
-const ControlsHeader = ({ statusPage, deleteStatusPage, isDeleting }) => {
+const ControlsHeader = ({ statusPage, isDeleting, isDeleteOpen, setIsDeleteOpen }) => {
 	const theme = useTheme();
 
 	return (
@@ -86,8 +86,9 @@ const ControlsHeader = ({ statusPage, deleteStatusPage, isDeleting }) => {
 				<Typography variant="h2">{statusPage?.companyName}</Typography>
 			</Stack>
 			<Controls
-				deleteStatusPage={deleteStatusPage}
 				isDeleting={isDeleting}
+				isDeleteOpen={isDeleteOpen}
+				setIsDeleteOpen={setIsDeleteOpen}
 			/>
 		</Stack>
 	);
@@ -95,8 +96,9 @@ const ControlsHeader = ({ statusPage, deleteStatusPage, isDeleting }) => {
 
 ControlsHeader.propTypes = {
 	statusPage: PropTypes.object,
-	deleteStatusPage: PropTypes.func,
 	isDeleting: PropTypes.bool,
+	isDeleteOpen: PropTypes.bool.isRequired,
+	setIsDeleteOpen: PropTypes.func.isRequired,
 };
 
 export default ControlsHeader;

Client/src/Pages/StatusPage/Status/index.jsx

@@ -7,16 +7,19 @@ import ControlsHeader from "./Components/ControlsHeader";
 import SkeletonLayout from "./Components/Skeleton";
 import StatusBar from "./Components/StatusBar";
 import MonitorsList from "./Components/MonitorsList";
+import Dialog from "../../../Components/Dialog";
+
 // Utils
 import { useStatusPageFetch } from "./Hooks/useStatusPageFetch";
 import { useTheme } from "@emotion/react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useLocation } from "react-router-dom";
 import { useStatusPageDelete } from "./Hooks/useStatusPageDelete";
+import { useState } from "react";
 
 const PublicStatus = () => {
 	// Local state
-
+	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
@@ -123,17 +126,33 @@ const PublicStatus = () => {
 		<Stack
 			gap={theme.spacing(10)}
 			alignItems="center"
-			sx={sx}
+			sx={{ ...sx, position: "relative" }}
 		>
 			<ControlsHeader
 				statusPage={statusPage}
-				deleteStatusPage={deleteStatusPage}
 				isDeleting={isDeleting}
+				isDeleteOpen={isDeleteOpen}
+				setIsDeleteOpen={setIsDeleteOpen}
 			/>
 			<Typography variant="h2">Service status</Typography>
 			<StatusBar monitors={monitors} />
 			<MonitorsList monitors={monitors} />
 			{link}
+			<Dialog
+				// open={isOpen.deleteStats}
+				title="Do you want to delete this status page?"
+				onConfirm={() => {
+					deleteStatusPage();
+					setIsDeleteOpen(false);
+				}}
+				onCancel={() => {
+					setIsDeleteOpen(false);
+				}}
+				open={isDeleteOpen}
+				confirmationButtonLabel="Yes, delete status page"
+				description="Once deleted, your status page cannot be retrieved."
+				isLoading={isDeleting || isLoading}
+			/>
 		</Stack>
 	);
 };