From befdf737061e528f6670e3877fe5ded404afe3b0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 4 Feb 2025 15:26:24 -0800
Subject: [PATCH] refactor out components

---
 .../Components/ControlsHeader/index.jsx       |  73 ++++++++++
 .../Status/Components/MonitorsList/index.jsx  |  58 ++++++++
 .../Status/Components/StatusBar/index.jsx     |  31 +++++
 Client/src/Pages/StatusPage/Status/index.jsx  | 127 +++---------------
 4 files changed, 178 insertions(+), 111 deletions(-)
 create mode 100644 Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx
 create mode 100644 Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx
 create mode 100644 Client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx

diff --git a/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx b/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx
new file mode 100644
index 000000000..f142392ad
--- /dev/null
+++ b/Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx
@@ -0,0 +1,73 @@
+// Components
+import { Box, Stack, Typography, Button } from "@mui/material";
+import Image from "../../../../../Components/Image";
+import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
+
+//Utils
+import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+
+const ControlsHeader = ({ statusPage, deleteStatusPage, isDeleting }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+
+	return (
+		<Stack
+			alignSelf="flex-start"
+			direction="row"
+			width="100%"
+			gap={theme.spacing(2)}
+			justifyContent="space-between"
+			alignItems="flex-end"
+		>
+			<Stack
+				direction="row"
+				gap={theme.spacing(8)}
+				alignItems="flex-end"
+			>
+				<Image
+					shouldRender={statusPage?.logo?.data ? true : false}
+					alt={"Company logo"}
+					maxWidth={"100px"}
+					base64={statusPage?.logo?.data}
+				/>
+				<Typography variant="h2">{statusPage?.companyName}</Typography>
+			</Stack>
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+			>
+				<Box>
+					<Button
+						variant="contained"
+						color="error"
+						onClick={deleteStatusPage}
+						loading={isDeleting}
+					>
+						Delete
+					</Button>
+				</Box>
+				<Box>
+					<Button
+						variant="contained"
+						color="secondary"
+						onClick={() => navigate(`/status/create`)}
+						sx={{
+							px: theme.spacing(5),
+							"& svg": {
+								mr: theme.spacing(3),
+								"& path": {
+									stroke: theme.palette.secondary.contrastText,
+								},
+							},
+						}}
+					>
+						<SettingsIcon /> Configure
+					</Button>
+				</Box>
+			</Stack>
+		</Stack>
+	);
+};
+
+export default ControlsHeader;
diff --git a/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx b/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx
new file mode 100644
index 000000000..65a4a182a
--- /dev/null
+++ b/Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx
@@ -0,0 +1,58 @@
+// Components
+import { Stack, Box } from "@mui/material";
+import Host from "../../../../Uptime/Monitors/Components/Host";
+import StatusPageBarChart from "../../../../../Components/Charts/StatusPageBarChart";
+import { StatusLabel } from "../../../../../Components/Label";
+
+//Utils
+import { useTheme } from "@mui/material/styles";
+import useUtils from "../../../../Uptime/Monitors/Hooks/useUtils";
+import PropTypes from "prop-types";
+const MonitorsList = ({ monitors = [] }) => {
+	const theme = useTheme();
+	const { determineState } = useUtils();
+	return (
+		<>
+			{monitors?.map((monitor) => {
+				const status = determineState(monitor);
+				return (
+					<Stack
+						key={monitor._id}
+						width="100%"
+						gap={theme.spacing(2)}
+					>
+						<Host
+							key={monitor._id}
+							url={monitor.url}
+							title={monitor.title}
+							percentageColor={monitor.percentageColor}
+							percentage={monitor.percentage}
+						/>
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(20)}
+						>
+							<Box flex={9}>
+								<StatusPageBarChart checks={monitor.checks.slice().reverse()} />
+							</Box>
+							<Box flex={1}>
+								<StatusLabel
+									status={status}
+									text={status}
+									customStyles={{ textTransform: "capitalize" }}
+								/>
+							</Box>
+						</Stack>
+					</Stack>
+				);
+			})}
+		</>
+	);
+};
+
+MonitorsList.propTypes = {
+	monitors: PropTypes.array.isRequired,
+};
+
+export default MonitorsList;
diff --git a/Client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx b/Client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx
new file mode 100644
index 000000000..b17e688cf
--- /dev/null
+++ b/Client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx
@@ -0,0 +1,31 @@
+// Components
+import { Stack, Typography } from "@mui/material";
+
+// Utils
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+const StatusBar = ({ status }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			justifyContent="center"
+			gap={theme.spacing(2)}
+			height={theme.spacing(30)}
+			width={"100%"}
+			backgroundColor={status?.color}
+			borderRadius={theme.spacing(2)}
+		>
+			{status?.icon}
+			{/* CAIO_REVIEW */}
+			<Typography variant="h2DarkBg">{status?.msg}</Typography>
+		</Stack>
+	);
+};
+
+export default StatusBar;
+
+StatusBar.propTypes = {
+	status: PropTypes.object.isRequired,
+};
diff --git a/Client/src/Pages/StatusPage/Status/index.jsx b/Client/src/Pages/StatusPage/Status/index.jsx
index d3cdb6047..b26bda1ac 100644
--- a/Client/src/Pages/StatusPage/Status/index.jsx
+++ b/Client/src/Pages/StatusPage/Status/index.jsx
@@ -1,15 +1,12 @@
 // Components
-import { Typography, Stack, Box, Button } from "@mui/material";
+import { Typography, Stack, Box } from "@mui/material";
 import GenericFallback from "../../../Components/GenericFallback";
 import Fallback from "../../../Components/Fallback";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import StatusPageBarChart from "../../../Components/Charts/StatusPageBarChart";
-import Host from "../../Uptime/Monitors/Components/Host";
-import { StatusLabel } from "../../../Components/Label";
-import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
-import Image from "../../../Components/Image";
+import ControlsHeader from "./Components/ControlsHeader";
 import SkeletonLayout from "./Components/Skeleton";
-
+import StatusBar from "./Components/StatusBar";
+import MonitorsList from "./Components/MonitorsList";
 // Utils
 import { useState, useEffect } from "react";
 import { useStatusPageFetch } from "./Hooks/useStatusPageFetch";
@@ -75,7 +72,11 @@ const PublicStatus = () => {
 		if (monitors.every((monitor) => monitor.status === true)) {
 			monitorsStatus.msg = "All systems operational";
 			monitorsStatus.color = theme.palette.success.lowContrast;
-			monitorsStatus.icon = <CheckCircleIcon />;
+			monitorsStatus.icon = (
+				<CheckCircleIcon
+					sx={{ color: theme.palette.primary.contrastTextSecondaryDarkBg }}
+				/>
+			);
 		}
 
 		if (monitors.every((monitor) => monitor.status === false)) {
@@ -169,110 +170,14 @@ const PublicStatus = () => {
 			alignItems="center"
 			sx={sx}
 		>
-			<Stack
-				alignSelf="flex-start"
-				direction="row"
-				width="100%"
-				gap={theme.spacing(2)}
-				justifyContent="space-between"
-				alignItems="flex-end"
-			>
-				<Stack
-					direction="row"
-					gap={theme.spacing(8)}
-					alignItems="flex-end"
-				>
-					<Image
-						src={
-							statusPage?.logo?.data
-								? `data:image/png;base64,${statusPage?.logo?.data}`
-								: undefined
-						}
-						alt={"Company logo"}
-						maxWidth={"100px"}
-					/>
-					<Typography variant="h2">{statusPage?.companyName}</Typography>
-				</Stack>
-				<Stack
-					direction="row"
-					gap={theme.spacing(2)}
-				>
-					<Box>
-						<Button
-							variant="contained"
-							color="error"
-							onClick={deleteStatusPage}
-							loading={isDeleting}
-						>
-							Delete
-						</Button>
-					</Box>
-					<Box>
-						<Button
-							variant="contained"
-							color="secondary"
-							onClick={() => navigate(`/status/create`)}
-							sx={{
-								px: theme.spacing(5),
-								"& svg": {
-									mr: theme.spacing(3),
-									"& path": {
-										stroke: theme.palette.secondary.contrastText,
-									},
-								},
-							}}
-						>
-							<SettingsIcon /> Configure
-						</Button>
-					</Box>
-				</Stack>
-			</Stack>
+			<ControlsHeader
+				statusPage={statusPage}
+				deleteStatusPage={deleteStatusPage}
+				isDeleting={isDeleting}
+			/>
 			<Typography variant="h2">Service status</Typography>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="center"
-				gap={theme.spacing(2)}
-				height={theme.spacing(30)}
-				width={"100%"}
-				backgroundColor={status?.color}
-				borderRadius={theme.spacing(2)}
-			>
-				{status?.icon}
-				<Typography>{status?.msg}</Typography>
-			</Stack>
-			{monitors?.map((monitor) => {
-				const status = determineState(monitor);
-				return (
-					<Stack
-						key={monitor._id}
-						width="100%"
-						gap={theme.spacing(2)}
-					>
-						<Host
-							key={monitor._id}
-							url={monitor.url}
-							title={monitor.title}
-							percentageColor={monitor.percentageColor}
-							percentage={monitor.percentage}
-						/>
-						<Stack
-							direction="row"
-							alignItems="center"
-							gap={theme.spacing(20)}
-						>
-							<StatusPageBarChart checks={monitor.checks.slice().reverse()} />
-							<Box>
-								<StatusLabel
-									status={status}
-									text={status}
-									customStyles={{ textTransform: "capitalize" }}
-								/>
-							</Box>
-						</Stack>
-					</Stack>
-				);
-			})}
+			<StatusBar status={status} />
+			<MonitorsList monitors={monitors} />
 			{AdminLink}
 		</Stack>
 	);