Refactored check function and added docs

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

@@ -9,7 +9,7 @@ import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-
+import { getLastChecked } from "../../../Utils/monitorUtils";
 import "./index.css";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
@@ -36,18 +36,6 @@ const parseUrl = (url) => {
   }
 };
 
-/**
- * Helper function to get duration since last check
- * @param {Array} checks Array of check objects.
- * @returns {number} Timestamp of the most recent check.
- */
-const getLastChecked = (checks) => {
-  if (!checks || checks.length === 0) {
-    return 0; // Handle case when no checks are available
-  }
-  return new Date() - new Date(checks[0].createdAt);
-};
-
 /**
  * Configure page displays monitor configurations and allows for editing actions.
  * @component

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -6,6 +6,7 @@ import { useTheme } from "@emotion/react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { formatDate, formatDurationRounded } from "../../../Utils/timeUtils";
+import { getLastChecked } from "../../../Utils/monitorUtils";
 import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
@@ -18,6 +19,15 @@ import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 
 import "./index.css";
 
+/**
+ * Displays a box with an icon, title, and value.
+ *
+ * @param {Object} props
+ * @param {ReactNode} props.icon - The icon to display in the box.
+ * @param {string} props.title - The title text to display above the value.
+ * @param {string | number} props.value - The value text to display in the box.
+ * @returns {JSX.Element}
+ */
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
 
@@ -40,6 +50,14 @@ const StatBox = ({ icon, title, value }) => {
   );
 };
 
+/**
+ * Renders a centered label within a pie chart.
+ *
+ * @param {Object} props
+ * @param {string | number} props.value - The value to display in the label.
+ * @param {string} props.color - The color of the text.
+ * @returns {JSX.Element}
+ */
 const PieCenterLabel = ({ value, color }) => {
   const { width, height, left, top } = useDrawingArea();
   return (
@@ -59,24 +77,6 @@ const PieCenterLabel = ({ value, color }) => {
   );
 };
 
-/**
- * Helper function to get duration since last check or the last date checked
- * @param {Array} checks Array of check objects.
- * @param {boolean} duration Whether the function should return the duration since last checked or the date itself
- * @returns {number} Timestamp of the most recent check.
- */
-const getLastChecked = (checks, duration = true) => {
-  if (!checks || checks.length === 0) {
-    return 0; // Handle case when no checks are available
-  }
-
-  // Data is sorted newest -> oldest, so newest check is the most recent
-  if (!duration) {
-    return new Date(checks[0].createdAt);
-  }
-  return new Date() - new Date(checks[0].createdAt);
-};
-
 const PageSpeedDetails = () => {
   const theme = useTheme();
   const navigate = useNavigate();

Client/src/Pages/PageSpeed/index.jsx

@@ -10,29 +10,12 @@ import Fallback from "../../Components/Fallback";
 import "./index.css";
 import Button from "../../Components/Button";
 import { useNavigate } from "react-router";
+import { getLastChecked } from "../../Utils/monitorUtils";
 
 const Card = ({ data }) => {
   const theme = useTheme();
   const navigate = useNavigate();
 
-  /**
-   * Helper function to get duration since last check or the last date checked
-   * @param {Array} checks Array of check objects.
-   * @param {boolean} duration Whether the function should return the duration since last checked or the date itself
-   * @returns {number} Timestamp of the most recent check.
-   */
-  const getLastChecked = (checks, duration = true) => {
-    if (!checks || checks.length === 0) {
-      return 0; // Handle case when no checks are available
-    }
-
-    // Data is sorted newest -> oldest, so newest check is the most recent
-    if (!duration) {
-      return new Date(checks[0].createdAt);
-    }
-    return new Date() - new Date(checks[0].createdAt);
-  };
-
   return (
     <Grid
       item

Client/src/Utils/monitorUtils.js

@@ -0,0 +1,17 @@
+/**
+ * Helper function to get duration since last check or the last date checked
+ * @param {Array} checks Array of check objects.
+ * @param {boolean} duration Whether the function should return the duration since last checked or the date itself
+ * @returns {number} Timestamp of the most recent check.
+ */
+export const getLastChecked = (checks, duration = true) => {
+  if (!checks || checks.length === 0) {
+    return 0; // Handle case when no checks are available
+  }
+
+  // Data is sorted newest -> oldest, so newest check is the most recent
+  if (!duration) {
+    return new Date(checks[0].createdAt);
+  }
+  return new Date() - new Date(checks[0].createdAt);
+};