diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 895bd1493..79789e16b 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -183,7 +183,7 @@ const uptimeMonitorsSlice = createSlice({
extraReducers: (builder) => {
builder
// *****************************************************
- // Monitors by userId
+ // Monitors by teamId
// *****************************************************
.addCase(getUptimeMonitorsByTeamId.pending, (state) => {
diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
new file mode 100644
index 000000000..22406d714
--- /dev/null
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -0,0 +1,78 @@
+import { getLastChecked } from "../../Utils/monitorUtils";
+import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
+import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
+import { StatusLabel } from "../../Components/Label";
+import { Box, Grid, Stack, Typography } from "@mui/material";
+import { useNavigate } from "react-router";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const Card = ({ data }) => {
+ const theme = useTheme();
+ const navigate = useNavigate();
+
+ return (
+ .MuiStack-root": {
+ backgroundColor: theme.palette.background.accent,
+ },
+ }}
+ >
+ navigate(`/pagespeed/${data._id}`)}
+ border={1}
+ borderColor={theme.palette.border.light}
+ borderRadius={theme.shape.borderRadius}
+ backgroundColor={theme.palette.background.main}
+ sx={{
+ cursor: "pointer",
+ "& svg path": { stroke: theme.palette.other.icon, strokeWidth: 0.8 },
+ }}
+ >
+
+
+
+
+ {data.name}
+
+
+
+
+ {data.url.replace(/^https?:\/\//, "")}
+
+
+
+ Last checked:{" "}
+
+ {formatDate(getLastChecked(data.checks, false))}{" "}
+
+ ({formatDurationRounded(getLastChecked(data.checks))} ago)
+
+
+
+
+
+ );
+};
+
+Card.propTypes = {
+ data: PropTypes.object.isRequired,
+};
+
+export default Card;
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index eaaa3bc3e..8d1273b04 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -1,154 +1,23 @@
-import { Box, Button, Grid, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Button, Grid, Stack } from "@mui/material";
import { useEffect } from "react";
import { useTheme } from "@emotion/react";
-import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
-import { StatusLabel } from "../../Components/Label";
import { useDispatch, useSelector } from "react-redux";
import { getPageSpeedByTeamId } from "../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
-import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
import Fallback from "../../Components/Fallback";
import "./index.css";
import { useNavigate } from "react-router";
-import { getLastChecked } from "../../Utils/monitorUtils";
import PropTypes from "prop-types";
import Breadcrumbs from "../../Components/Breadcrumbs";
import Greeting from "../../Utils/greeting";
-
-const Card = ({ data }) => {
- const theme = useTheme();
- const navigate = useNavigate();
-
- return (
- .MuiStack-root": {
- backgroundColor: theme.palette.background.accent,
- },
- }}
- >
- navigate(`/pagespeed/${data._id}`)}
- border={1}
- borderColor={theme.palette.border.light}
- borderRadius={theme.shape.borderRadius}
- backgroundColor={theme.palette.background.main}
- sx={{
- cursor: "pointer",
- "& svg path": { stroke: theme.palette.other.icon, strokeWidth: 0.8 },
- }}
- >
-
-
-
-
- {data.name}
-
-
-
-
- {data.url.replace(/^https?:\/\//, "")}
-
-
-
- Last checked:{" "}
-
- {formatDate(getLastChecked(data.checks, false))}{" "}
-
- ({formatDurationRounded(getLastChecked(data.checks))} ago)
-
-
-
-
-
- );
-};
-
-Card.propTypes = {
- data: PropTypes.object.isRequired,
-};
-
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
- const theme = useTheme();
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+import SkeletonLayout from "./skeleton";
+import Card from "./card";
const PageSpeed = ({ isAdmin }) => {
const theme = useTheme();
const dispatch = useDispatch();
const navigate = useNavigate();
- const { authToken, user } = useSelector((state) => state.auth);
+ const { authToken } = useSelector((state) => state.auth);
const { monitors, isLoading } = useSelector(
(state) => state.pageSpeedMonitors
);
@@ -158,7 +27,7 @@ const PageSpeed = ({ isAdmin }) => {
// will show skeletons only on initial load
// since monitor state is being added to redux persist, there's no reason to display skeletons on every render
- let isActuallyLoading = isLoading && monitors.length === 0;
+ let isActuallyLoading = isLoading && monitors?.monitors.length === 0;
return (
{
>
{isActuallyLoading ? (
- ) : monitors?.length !== 0 ? (
+ ) : monitors?.monitors?.length !== 0 ? (
{
- {monitors?.map((monitor) => (
+ {monitors?.monitors?.map((monitor) => (
))}
diff --git a/Client/src/Pages/PageSpeed/skeleton.jsx b/Client/src/Pages/PageSpeed/skeleton.jsx
new file mode 100644
index 000000000..2338ab636
--- /dev/null
+++ b/Client/src/Pages/PageSpeed/skeleton.jsx
@@ -0,0 +1,65 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SkeletonLayout;