Add pagination to

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

@@ -19,6 +19,10 @@ import { useState, useEffect } from "react";
 import { logger } from "../../../../Utils/Logger";
 import Host from "../host";
 import { StatusLabel } from "../../../../Components/Label";
+import { jwtDecode } from "jwt-decode";
+import { useSelector } from "react-redux";
+import { networkService } from "../../../../main";
+
 const MonitorTable = ({ teamId }) => {
   const [paginationController, setPaginationController] = useState({
     page: 0,
@@ -26,6 +30,7 @@ const MonitorTable = ({ teamId }) => {
   });
   const [monitors, setMonitors] = useState([]);
   const [monitorCount, setMonitorCount] = useState(0);
+  const authState = useSelector((state) => state.auth);
 
   const handlePageChange = (_, newPage) => {
     setPaginationController({
@@ -36,22 +41,21 @@ const MonitorTable = ({ teamId }) => {
 
   useEffect(() => {
     const fetchPage = async () => {
-      if (!monitors || Object.keys(monitors).length === 0) {
-        return;
-      }
       try {
-        console.log("DO NETWORK");
-
+        const { authToken } = authState;
+        const user = jwtDecode(authToken);
         const res = await networkService.getMonitorsByTeamId(
-          token,
+          authToken,
           user.teamId,
           25,
           ["http", "ping"],
           null,
           "desc",
-          true
+          true,
+          paginationController.page,
+          paginationController.rowsPerPage
         );
-
+        console.log(res.data.data);
         setMonitors([]);
         setMonitorCount(0);
       } catch (error) {
@@ -59,7 +63,7 @@ const MonitorTable = ({ teamId }) => {
       }
     };
     fetchPage();
-  }, [monitors]);
+  }, []);
 
   let paginationComponent = <></>;
   if (monitorCount > paginationController.rowsPerPage) {

Client/src/Utils/NetworkService.js

@@ -80,7 +80,9 @@ class NetworkService {
     types,
     status,
     sortOrder,
-    normalize
+    normalize,
+    page,
+    rowsPerPage
   ) {
     const params = new URLSearchParams();
 
@@ -93,6 +95,8 @@ class NetworkService {
     if (status) params.append("status", status);
     if (sortOrder) params.append("sortOrder", sortOrder);
     if (normalize) params.append("normalize", normalize);
+    if (page) params.append("page", page);
+    if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
 
     return this.axiosInstance.get(
       `/monitors/team/${teamId}?${params.toString()}`,

Server/db/mongo/modules/monitorModule.js

@@ -393,9 +393,16 @@ const getMonitorById = async (monitorId) => {
  */
 const getMonitorsByTeamId = async (req, res) => {
   try {
-    let { limit, type, status, sortOrder, normalize } = req.query || {};
+    let { limit, type, status, sortOrder, normalize, page, rowsPerPage } =
+      req.query || {};
     const monitorQuery = { teamId: req.params.teamId };
 
+    // Pagination
+    let skip = 0;
+    if (page && rowsPerPage) {
+      skip = page * rowsPerPage;
+    }
+
     if (type !== undefined) {
       const types = Array.isArray(type) ? type : [type];
       monitorQuery.type = { $in: types };
@@ -411,7 +418,9 @@ const getMonitorsByTeamId = async (req, res) => {
     // This effectively removes limit, returning all checks
     if (limit === undefined) limit = 0;
 
-    const monitors = await Monitor.find(monitorQuery);
+    const monitors = await Monitor.find(monitorQuery)
+      .skip(skip)
+      .limit(rowsPerPage);
     // Map each monitor to include its associated checks
     const monitorsWithChecks = await Promise.all(
       monitors.map(async (monitor) => {

Server/validation/joi.js

@@ -176,6 +176,8 @@ const getMonitorsByTeamIdQueryValidation = joi.object({
       joi.string().valid("http", "ping", "pagespeed"),
       joi.array().items(joi.string().valid("http", "ping", "pagespeed"))
     ),
+  page: joi.number(),
+  rowsPerPage: joi.number(),
 });
 
 const getMonitorStatsByIdParamValidation = joi.object({