Fetch data from endpoint instead of redux store

Client/src/Pages/Details/index.jsx

@@ -1,20 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import CustomizedTables from "../../Components/CustomizedTables";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import axiosInstance from "../../Utils/axiosConfig";
 
 /**
  * Details page component displaying monitor details and related information.
  * @component
  */
 const DetailsPage = () => {
-  const monitorState = useSelector((state) => state.monitors);
+  const [monitor, setMonitor] = useState({});
   const { monitorId } = useParams();
-
-  const monitor = monitorState.monitors.find(
-    (monitor) => monitor._id === monitorId
-  );
+  const { authToken } = useSelector((state) => state.auth);
+  useEffect(() => {
+    const fetchMonitor = async () => {
+      const res = await axiosInstance.get(`/monitors/${monitorId}`, {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      });
+      setMonitor(res.data.data);
+    };
+    fetchMonitor();
+  }, [monitorId, authToken]);
 
   const theme = useTheme();
 

Server/db/MongoDB.js

@@ -272,7 +272,9 @@ const getAllMonitors = async (req, res) => {
 const getMonitorById = async (req, res) => {
   try {
     const monitor = await Monitor.findById(req.params.monitorId);
-    const checks = await Check.find({ monitorId: monitor._id });
+    const checks = await Check.find({ monitorId: monitor._id }).sort({
+      createdAt: -1,
+    });
     const monitorWithChecks = { ...monitor.toObject(), checks };
     return monitorWithChecks;
   } catch (error) {