Fixed monitor state error and added row click back

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -16,6 +16,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router";
 import { logger } from "../../../../Utils/Logger";
 import Host from "../host";
 import { StatusLabel } from "../../../../Components/Label";
@@ -28,6 +29,7 @@ import ActionsMenu from "../actionsMenu";
 
 const MonitorTable = ({ isAdmin }) => {
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const [paginationController, setPaginationController] = useState({
     page: 0,
@@ -157,7 +159,18 @@ const MonitorTable = ({ isAdmin }) => {
               };
 
               return (
-                <TableRow key={monitor._id}>
+                <TableRow
+                  key={monitor._id}
+                  sx={{
+                    cursor: "pointer",
+                    "&:hover": {
+                      backgroundColor: theme.palette.background.accent,
+                    },
+                  }}
+                  onClick={() => {
+                    navigate(`/monitors/${monitor._id}`);
+                  }}
+                >
                   <TableCell>
                     <Host key={monitor._id} params={params} />
                   </TableCell>

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

@@ -24,7 +24,7 @@ const Monitors = ({ isAdmin }) => {
     dispatch(getUptimeMonitorsByTeamId(authState.authToken));
   }, [authState.authToken, dispatch]);
 
-  const monitorStats = monitorState.monitors.monitors.reduce(
+  const monitorStats = monitorState?.monitors?.monitors?.reduce(
     (acc, monitor) => {
       if (monitor.isActive === false) {
         acc["paused"] += 1;
@@ -111,7 +111,7 @@ const Monitors = ({ isAdmin }) => {
                     borderColor={theme.palette.border.light}
                     backgroundColor={theme.palette.background.accent}
                   >
-                    {monitorState.monitors.length}
+                    {monitorState.monitors.monitors.length}
                   </Box>
                   {/* TODO - add search bar */}
                 </Stack>