Refactor Pagination component to accept a label to improve reusability. Use Pagination component with Incident table

Client/src/Components/HttpStatusLabel/index.jsx

@@ -16,7 +16,7 @@ import { BaseLabel } from "../Label";
 const DEFAULT_CODE = 9999; // Default code for unknown status
 
 const handleStatusCode = (status) => {
-	if (status >= 100 && status < 600) {
+	if (status) {
 		return status;
 	}
 	return DEFAULT_CODE;

Client/src/Components/Table/TablePagination/index.jsx

@@ -5,11 +5,11 @@ import { TablePaginationActions } from "./Actions";
 import SelectorVertical from "../../../assets/icons/selector-vertical.svg?react";
 
 Pagination.propTypes = {
-	monitorCount: PropTypes.number.isRequired, // Total number of items for pagination.
+	itemCount: PropTypes.number.isRequired, // Total number of items for pagination.
 	page: PropTypes.number.isRequired, // Current page index.
 	rowsPerPage: PropTypes.number.isRequired, // Number of rows displayed per page.
 	handleChangePage: PropTypes.func.isRequired, // Function to handle page changes.
-	handleChangeRowsPerPage: PropTypes.func.isRequired, // Function to handle changes in rows per page.
+	handleChangeRowsPerPage: PropTypes.func, // Function to handle changes in rows per page.
 };
 
 const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
@@ -18,6 +18,7 @@ const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
  * Pagination component for table navigation with customized styling and behavior.
  *
  * @param {object} props - Component properties.
+ * @param {string} props.paginationLabel - Label for the pagination.
  * @param {number} props.monitorCount - Total number of monitors to paginate.
  * @param {number} props.page - Current page index (0-based).
  * @param {number} props.rowsPerPage - Number of rows to display per page.
@@ -26,7 +27,8 @@ const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
  * @returns {JSX.Element} The Pagination component.
  */
 function Pagination({
-	monitorCount,
+	paginationLabel,
+	itemCount,
 	page,
 	rowsPerPage,
 	handleChangePage,
@@ -35,7 +37,7 @@ function Pagination({
 	const theme = useTheme();
 
 	const start = page * rowsPerPage + 1;
-	const end = Math.min(page * rowsPerPage + rowsPerPage, monitorCount);
+	const end = Math.min(page * rowsPerPage + rowsPerPage, itemCount);
 	const range = `${start} - ${end}`;
 
 	return (
@@ -51,11 +53,11 @@ function Pagination({
 				variant="body2"
 				sx={{ opacity: 0.7 }}
 			>
-				Showing {range} of {monitorCount} monitor(s)
+				Showing {range} of {itemCount} {paginationLabel}
 			</Typography>
 			<TablePagination
 				component="div"
-				count={monitorCount}
+				count={itemCount}
 				page={page}
 				onPageChange={handleChangePage}
 				rowsPerPage={rowsPerPage}
@@ -121,4 +123,4 @@ function Pagination({
 	);
 }
 
-export { Pagination };
+export default Pagination;

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -1,8 +1,6 @@
 import PropTypes from "prop-types";
-import { Pagination, PaginationItem, Typography, Box } from "@mui/material";
+import { Typography, Box } from "@mui/material";
 
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
@@ -16,6 +14,7 @@ import { HttpStatusLabel } from "../../../Components/HttpStatusLabel";
 import { Empty } from "./Empty/Empty";
 import { IncidentSkeleton } from "./Skeleton/Skeleton";
 import DataTable from "../../../Components/Table";
+import Pagination from "../../../Components/Table/TablePagination";
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
@@ -24,18 +23,10 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 	const mode = useSelector((state) => state.ui.mode);
 	const [checks, setChecks] = useState([]);
 	const [checksCount, setChecksCount] = useState(0);
-	const [paginationController, setPaginationController] = useState({
-		page: 0,
-		rowsPerPage: 14,
-	});
-	const [isLoading, setIsLoading] = useState(false);
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 
-	useEffect(() => {
-		setPaginationController((prevPaginationController) => ({
-			...prevPaginationController,
-			page: 0,
-		}));
-	}, [filter, selectedMonitor]);
+	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
 		const fetchPage = async () => {
@@ -53,8 +44,8 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						limit: null,
 						dateRange: null,
 						filter: filter,
-						page: paginationController.page,
-						rowsPerPage: paginationController.rowsPerPage,
+						page: page,
+						rowsPerPage: rowsPerPage,
 					});
 				} else {
 					res = await networkService.getChecksByMonitor({
@@ -64,8 +55,8 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						limit: null,
 						dateRange: null,
 						filter: filter,
-						page: paginationController.page,
-						rowsPerPage: paginationController.rowsPerPage,
+						page,
+						rowsPerPage,
 					});
 				}
 				setChecks(res.data.data.checks);
@@ -77,21 +68,14 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 			}
 		};
 		fetchPage();
-	}, [
-		authToken,
-		user,
-		monitors,
-		selectedMonitor,
-		filter,
-		paginationController.page,
-		paginationController.rowsPerPage,
-	]);
+	}, [authToken, user, monitors, selectedMonitor, filter, page, rowsPerPage]);
 
 	const handlePageChange = (_, newPage) => {
-		setPaginationController({
-			...paginationController,
-			page: newPage - 1, // 0-indexed
-		});
+		setPage(newPage);
+	};
+
+	const handleChangeRowsPerPage = (event) => {
+		setRowsPerPage(event.target.value);
 	};
 
 	const headers = [
@@ -134,28 +118,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 		{ id: "message", content: "Message", render: (row) => row.message },
 	];
 
-	let paginationComponent = <></>;
-	if (checksCount > paginationController.rowsPerPage) {
-		paginationComponent = (
-			<Pagination
-				count={Math.ceil(checksCount / paginationController.rowsPerPage)}
-				page={paginationController.page + 1} //0-indexed
-				onChange={handlePageChange}
-				shape="rounded"
-				renderItem={(item) => (
-					<PaginationItem
-						slots={{
-							previous: ArrowBackRoundedIcon,
-							next: ArrowForwardRoundedIcon,
-						}}
-						{...item}
-					/>
-				)}
-				sx={{ mt: "auto" }}
-			/>
-		);
-	}
-
 	let sharedStyles = {
 		border: 1,
 		borderColor: theme.palette.primary.lowContrast,
@@ -198,8 +160,14 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						headers={headers}
 						data={checks}
 					/>
-
-					{paginationComponent}
+					<Pagination
+						paginationLabel="incidents"
+						itemCount={checksCount}
+						page={page}
+						rowsPerPage={rowsPerPage}
+						handleChangePage={handlePageChange}
+						handleChangeRowsPerPage={handleChangeRowsPerPage}
+					/>
 				</>
 			)}
 		</>

Client/src/Pages/Incidents/index.css

@@ -1,11 +0,0 @@
-.incidents h1.MuiTypography-root {
-	font-size: var(--env-var-font-size-large);
-	font-weight: 600;
-}
-.incidents button.MuiButtonBase-root,
-.incidents p.MuiTypography-root {
-	font-size: var(--env-var-font-size-medium);
-}
-.incidents button.MuiButtonBase-root {
-	min-height: 34px;
-}

Client/src/Pages/Incidents/index.jsx

@@ -8,7 +8,6 @@ import { useTheme } from "@emotion/react";
 import Select from "../../Components/Inputs/Select";
 import IncidentTable from "./IncidentTable";
 import SkeletonLayout from "./skeleton";
-import "./index.css";
 
 const Incidents = () => {
 	const theme = useTheme();

Client/src/Pages/Infrastructure/index.jsx

@@ -13,7 +13,7 @@ import { Box, Button, IconButton, Stack } from "@mui/material";
 import Breadcrumbs from "../../Components/Breadcrumbs";
 import { StatusLabel } from "../../Components/Label";
 import { Heading } from "../../Components/Heading";
-import { Pagination } from "../../Components/Table/TablePagination/index.jsx";
+import Pagination from "../../Components/Table/TablePagination/index.jsx";
 // import { getInfrastructureMonitorsByTeamId } from "../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { networkService } from "../../Utils/NetworkService.js";
 import CustomGauge from "../../Components/Charts/CustomGauge/index.jsx";
@@ -269,7 +269,8 @@ function Infrastructure() {
 						/>
 
 						<Pagination
-							monitorCount={summary?.totalMonitors ?? 0}
+							itemCount={summary?.totalMonitors ?? 0}
+							paginationLabel="monitors"
 							page={page}
 							rowsPerPage={rowsPerPage}
 							handleChangePage={handleChangePage}

Client/src/Pages/Uptime/CreateUptime/index.jsx

@@ -108,16 +108,16 @@ const CreateMonitor = () => {
 		}
 
 		if (monitor.type === "http") {
-			const checkEndpointAction = await dispatch(
-				checkEndpointResolution({ authToken, monitorURL: form.url })
-			);
-			if (checkEndpointAction.meta.requestStatus === "rejected") {
-				createToast({
-					body: "The endpoint you entered doesn't resolve. Check the URL again.",
-				});
-				setErrors({ url: "The entered URL is not reachable." });
-				return;
-			}
+			// const checkEndpointAction = await dispatch(
+			// 	checkEndpointResolution({ authToken, monitorURL: form.url })
+			// );
+			// if (checkEndpointAction.meta.requestStatus === "rejected") {
+			// 	createToast({
+			// 		body: "The endpoint you entered doesn't resolve. Check the URL again.",
+			// 	});
+			// 	setErrors({ url: "The entered URL is not reachable." });
+			// 	return;
+			// }
 		}
 
 		form = {

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

@@ -5,7 +5,7 @@ import SkeletonLayout from "./skeleton";
 import Fallback from "./fallback";
 import StatusBox from "./StatusBox";
 import UptimeDataTable from "./UptimeDataTable";
-import { Pagination } from "../../../Components/Table/TablePagination";
+import Pagination from "../../../Components/Table/TablePagination";
 
 // Utils
 import { useTheme } from "@emotion/react";
@@ -225,7 +225,8 @@ const UptimeMonitors = () => {
 									triggerUpdate={triggerUpdate}
 								/>
 								<Pagination
-									monitorCount={totalMonitors}
+									itemCount={totalMonitors}
+									paginationLabel="monitors"
 									page={page}
 									rowsPerPage={rowsPerPage}
 									handleChangePage={handleChangePage}