Use getMonitorsByTeamId endpoint

Client/src/Pages/PageSpeed/index.jsx

@@ -1,5 +1,5 @@
 import { Box, Button, Grid, Stack } from "@mui/material";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { getPageSpeedByTeamId } from "../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
@@ -11,24 +11,52 @@ import Breadcrumbs from "../../Components/Breadcrumbs";
 import Greeting from "../../Utils/greeting";
 import SkeletonLayout from "./skeleton";
 import Card from "./card";
+import { networkService } from "../../main";
 
 const PageSpeed = ({ isAdmin }) => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const { authToken } = useSelector((state) => state.auth);
-  const { monitorsSummary, isLoading } = useSelector(
-    (state) => state.pageSpeedMonitors
-  );
+  const { user, authToken } = useSelector((state) => state.auth);
+  const [isLoading, setIsLoading] = useState(false);
+  const [monitors, setMonitors] = useState([]);
   useEffect(() => {
     dispatch(getPageSpeedByTeamId(authToken));
   }, [authToken, dispatch]);
 
+  useEffect(() => {
+    const fetchMonitors = async () => {
+      try {
+        setIsLoading(true);
+        const res = await networkService.getMonitorsByTeamId(
+          authToken,
+          user.teamId,
+          10,
+          ["pagespeed"],
+          null,
+          "desc",
+          true,
+          null,
+          null
+        );
+        if (res?.data?.data?.monitors) {
+          setMonitors(res.data.data.monitors);
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchMonitors();
+  }, []);
+
   // 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 && monitorsSummary?.monitors?.length === 0;
-
+  let isActuallyLoading = isLoading && monitors?.length === 0;
+  console.log(monitors);
   return (
     <Box
       className="page-speed"
@@ -46,7 +74,7 @@ const PageSpeed = ({ isAdmin }) => {
     >
       {isActuallyLoading ? (
         <SkeletonLayout />
-      ) : monitorsSummary?.monitors?.length !== 0 ? (
+      ) : monitors?.length !== 0 ? (
         <Box
           sx={{
             "& p": {
@@ -73,7 +101,7 @@ const PageSpeed = ({ isAdmin }) => {
             </Stack>
           </Box>
           <Grid container spacing={theme.spacing(12)}>
-            {monitorsSummary?.monitors?.map((monitor) => (
+            {monitors?.map((monitor) => (
               <Card monitor={monitor} key={monitor._id} />
             ))}
           </Grid>