refactor common components out

Client/src/Components/ActionsMenu/index.jsx

@@ -2,16 +2,16 @@ import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { createToast } from "../../../../../Utils/toastUtils";
-import { logger } from "../../../../../Utils/Logger";
+import { createToast } from "../../Utils/toastUtils";
+import { logger } from "../../Utils/Logger";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import {
 	deleteUptimeMonitor,
 	pauseUptimeMonitor,
-} from "../../../../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import Settings from "../../../../../assets/icons/settings-bold.svg?react";
+} from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-import Dialog from "../../../../../Components/Dialog";
+import Dialog from "../../Components/Dialog";
 
 const ActionsMenu = ({
 	monitor,

Client/src/Components/Host/index.jsx

@@ -1,7 +1,7 @@
 import { Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import Dot from "../../../../../Components/Dot";
+import Dot from "../Dot";
 /**
  * Host component.
  * This subcomponent receives a params object and displays the host details.

Client/src/Pages/DistributedUptime/Monitors/Components/MonitorTable/index.jsx

@@ -1,14 +1,17 @@
+// Components
 import DataTable from "../../../../../Components/Table";
 import BarChart from "../../../../../Components/Charts/BarChart";
 import { Box } from "@mui/material";
 import { StatusLabel } from "../../../../../Components/Label";
+import Host from "../../../../../Components/Host";
 
-//REFACTOR
-import Host from "../../../../Uptime/Monitors/Components/Host";
-import ActionsMenu from "../../../../Uptime/Monitors/Components/ActionsMenu";
+// Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils";
+import PropTypes from "prop-types";
+
+// Constants
 const TYPE_MAP = {
 	distributed_http: "Distributed HTTP",
 };
@@ -59,12 +62,7 @@ const MonitorTable = ({ isLoading, monitors }) => {
 		{
 			id: "actions",
 			content: "Actions",
-			render: (row) => (
-				<ActionsMenu
-					monitor={row.monitor}
-					isAdmin={true}
-				/>
-			),
+			render: (row) => <span>{"TODO"}</span>,
 		},
 	];
 
@@ -88,4 +86,9 @@ const MonitorTable = ({ isLoading, monitors }) => {
 	);
 };
 
+MonitorTable.propTypes = {
+	isLoading: PropTypes.bool,
+	monitors: PropTypes.array,
+};
+
 export default MonitorTable;

Client/src/Pages/DistributedUptime/Monitors/index.jsx

@@ -8,15 +8,12 @@ import GenericFallback from "../../../Components/GenericFallback";
 
 // Utils
 import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors";
 // Constants
 const BREADCRUMBS = [{ name: `Distributed Uptime`, path: "/distributed-uptime" }];
 
 const DistributedUptimeMonitors = () => {
-	// Redux state
-	const { authToken, user } = useSelector((state) => state.auth);
 	// Local state
 	// Utils
 	const theme = useTheme();

Client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -1,6 +1,6 @@
 // Components
 import DataTable from "../../../../../Components/Table";
-import Host from "../../../../Uptime/Monitors/Components/Host";
+import Host from "../../../../../Components/Host";
 import { StatusLabel } from "../../../../../Components/Label";
 import { Stack } from "@mui/material";
 import { InfrastructureMenu } from "../MonitorsTableMenu";
@@ -12,6 +12,7 @@ import CustomGauge from "../../../../../Components/Charts/CustomGauge";
 import { useTheme } from "@emotion/react";
 import useUtils from "../../../../Uptime/Monitors/Hooks/useUtils";
 import { useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
 
 const MonitorsTable = ({ shouldRender, monitors, isAdmin, handleActionMenuDelete }) => {
 	// Utils
@@ -131,4 +132,11 @@ const MonitorsTable = ({ shouldRender, monitors, isAdmin, handleActionMenuDelete
 	);
 };
 
+MonitorsTable.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitors: PropTypes.array,
+	isAdmin: PropTypes.bool,
+	handleActionMenuDelete: PropTypes.func,
+};
+
 export default MonitorsTable;

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

@@ -1,6 +1,6 @@
 // Components
 import { Stack, Box } from "@mui/material";
-import Host from "../../../../Uptime/Monitors/Components/Host";
+import Host from "../../../../../Components/Host";
 import StatusPageBarChart from "../../../../../Components/Charts/StatusPageBarChart";
 import { StatusLabel } from "../../../../../Components/Label";
 

Client/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx

@@ -3,10 +3,10 @@ import { Box, Stack } from "@mui/material";
 import DataTable from "../../../../../Components/Table";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
-import Host from "../Host";
+import Host from "../../../../../Components/Host";
 import { StatusLabel } from "../../../../../Components/Label";
 import BarChart from "../../../../../Components/Charts/BarChart";
-import ActionsMenu from "../ActionsMenu";
+import ActionsMenu from "../../../../../Components/ActionsMenu";
 
 import LoadingSpinner from "../LoadingSpinner";
 import TableSkeleton from "../../../../../Components/Table/skeleton";