pagination and empty state fix

client/src/Components/v2/design-elements/BasePage.tsx

@@ -100,7 +100,7 @@ export const BasePage = ({
 interface BasePageWithStatesProps extends StackProps {
 	loading: boolean;
 	error: any;
-	items: any[];
+	totalCount: number;
 	bullets: string[] | unknown;
 	page: string;
 	actionButtonText: string;
@@ -111,7 +111,7 @@ interface BasePageWithStatesProps extends StackProps {
 export const BasePageWithStates = ({
 	loading,
 	error,
-	items,
+	totalCount,
 	page,
 	bullets,
 	actionButtonText,
@@ -119,9 +119,9 @@ export const BasePageWithStates = ({
 	children,
 	...props
 }: BasePageWithStatesProps) => {
-	const showLoading = loading && (!items || items.length === 0);
+	const showLoading = loading && totalCount === 0;
 
-	if (!loading && isEmpty(items)) {
+	if (!loading && totalCount === 0) {
 		return (
 			<EmptyFallback
 				bullets={bullets}
@@ -146,23 +146,17 @@ export const BasePageWithStates = ({
 interface MonitorBasePageWithStatesProps extends StackProps {
 	loading: boolean;
 	error: any;
-	items: any[];
+	totalCount: number;
 	page: string;
 	actionLink?: string;
 	children: React.ReactNode;
 	priorityFallback?: React.ReactNode;
 }
 
-const isEmpty = (items: any[]) => {
-	if (!items) return true;
-	if (Array.isArray(items) && items.length === 0) return true;
-	return false;
-};
-
 export const MonitorBasePageWithStates = ({
 	loading,
 	error,
-	items,
+	totalCount,
 	page,
 	actionLink,
 	children,
@@ -171,7 +165,7 @@ export const MonitorBasePageWithStates = ({
 }: MonitorBasePageWithStatesProps) => {
 	const { t } = useTranslation();
 
-	const showLoading = loading && (!items || items.length === 0);
+	const showLoading = loading && totalCount === 0;
 
 	if (priorityFallback) {
 		return (
@@ -185,7 +179,7 @@ export const MonitorBasePageWithStates = ({
 		);
 	}
 
-	if (!loading && isEmpty(items)) {
+	if (!loading && totalCount === 0) {
 		return (
 			<EmptyMonitorFallback
 				page={page}

client/src/Components/v2/design-elements/Table.tsx

@@ -27,7 +27,7 @@ import TablePagination from "@mui/material/TablePagination";
 import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
 
 import { useTranslation } from "react-i18next";
-import { useState, Fragment } from "react";
+import { useState, Fragment, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
@@ -454,12 +454,26 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 interface PaginationProps extends TablePaginationOwnProps {
 	component?: React.ElementType;
 	hasMore?: boolean;
+	itemsOnPage?: number;
 }
 
 export const Pagination = ({ ...props }: PaginationProps) => {
-	const { hasMore, ...rest } = props;
+	const { hasMore, itemsOnPage, ...rest } = props;
 	const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
 	const theme = useTheme();
+
+	useEffect(() => {
+		if (
+			typeof itemsOnPage === "number" &&
+			itemsOnPage === 0 &&
+			rest.count > 0 &&
+			rest.page > 0 &&
+			rest.onPageChange
+		) {
+			rest.onPageChange(null, rest.page - 1);
+		}
+	}, [itemsOnPage, rest.count, rest.page, rest.onPageChange]);
+
 	const labelDisplayedRows = ({
 		from,
 		to,

client/src/Pages/Incidents/Components/IncidentTable.tsx

@@ -215,6 +215,7 @@ export const IncidentsTable = ({
 				rowsPerPage={rowsPerPage}
 				onPageChange={handlePageChange}
 				onRowsPerPageChange={handleRowsPerPageChange}
+				itemsOnPage={incidents.length}
 			/>
 		</Box>
 	);

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx

@@ -269,6 +269,7 @@ export const InfraMonitorsTable = ({
 				rowsPerPage={rowsPerPage}
 				onPageChange={handlePageChange}
 				onRowsPerPageChange={handleRowsPerPageChange}
+				itemsOnPage={monitors.length}
 			/>
 		</Box>
 	);

client/src/Pages/Infrastructure/Monitors/index.tsx

@@ -85,13 +85,6 @@ const InfrastructureMonitors = () => {
 		return `/monitors/team/with-checks?${params.toString()}`;
 	}, [page, rowsPerPage, filter, field, sortOrder]);
 
-	const {
-		data: monitors,
-		isLoading: monitorsLoading,
-		error,
-		refetch: refetchMonitors,
-	} = useGet<Monitor[]>("/monitors/team?type=hardware", {}, { keepPreviousData: true });
-
 	const {
 		data: monitorsWithChecksData,
 		isLoading: monitorsWithChecksLoading,
@@ -104,7 +97,7 @@ const InfrastructureMonitors = () => {
 	);
 
 	const { summary, count } = monitorsWithChecksData ?? {};
-	const isLoading = monitorsLoading || monitorsWithChecksLoading;
+	const isLoading = monitorsWithChecksLoading;
 
 	// Delete hook
 	const { deleteFn, loading: isDeleting } = useDelete();
@@ -114,7 +107,6 @@ const InfrastructureMonitors = () => {
 		await deleteFn(`/monitors/${selectedMonitor.id}`);
 		setSelectedMonitor(null);
 		refetch();
-		refetchMonitors();
 	};
 
 	const handleCancel = () => {
@@ -124,8 +116,8 @@ const InfrastructureMonitors = () => {
 	return (
 		<MonitorBasePageWithStates
 			loading={isLoading}
-			error={error ?? monitorsWithChecksError}
-			items={monitors || []}
+			error={monitorsWithChecksError}
+			totalCount={summary?.totalMonitors ?? 0}
 			page="infrastructure"
 			actionLink="/infrastructure/create"
 		>

client/src/Pages/Maintenance/MaintenanceWindowTable.tsx

@@ -185,6 +185,7 @@ export const MaintenanceWindowTable = ({
 				emptyViewText={t("common.table.empty")}
 			/>
 			<Pagination
+				itemsOnPage={maintenanceWindows.length}
 				component="div"
 				count={maintenanceWindowCount}
 				page={page}

client/src/Pages/Maintenance/index.tsx

@@ -33,12 +33,12 @@ const MaintenanceWindowPage = () => {
 	return (
 		<BasePageWithStates
 			page={t("pages.maintenanceWindow.fallback.title")}
+			totalCount={maintenanceWindowCount}
 			bullets={
 				t("pages.maintenanceWindow.fallback.checks", { returnObjects: true }) as string[]
 			}
 			loading={isLoading}
 			error={!!error}
-			items={maintenanceWindows}
 			actionButtonText={t("pages.maintenanceWindow.fallback.actionButton")}
 			actionLink="/maintenance/create"
 		>

client/src/Pages/Notifications/index.tsx

@@ -45,7 +45,7 @@ const NotificationsPage = () => {
 			}
 			loading={isLoading || isValidating}
 			error={!!error}
-			items={notifications ?? []}
+			totalCount={notifications?.length ?? 0}
 			actionButtonText={t("pages.notifications.fallback.actionButton")}
 			actionLink="/notifications/create"
 		>

client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx

@@ -248,6 +248,7 @@ export const PageSpeedMonitorsTable = ({
 				rowsPerPage={rowsPerPage}
 				onPageChange={handlePageChange}
 				onRowsPerPageChange={handleRowsPerPageChange}
+				itemsOnPage={monitors.length}
 			/>
 		</Box>
 	);

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -70,7 +70,7 @@ const PageSpeedMonitorsPage = () => {
 		<MonitorBasePageWithStates
 			loading={isLoading}
 			error={monitorsError || settingsError}
-			items={monitors || []}
+			totalCount={summary?.totalMonitors ?? 0}
 			page="pageSpeed"
 			actionLink="/pagespeed/create"
 			priorityFallback={showApiKeyWarning ? <PageSpeedKeyPriorityFallback /> : undefined}

client/src/Pages/StatusPage/StatusPages/index.tsx

@@ -43,7 +43,7 @@ const StatusPages = () => {
 				t("pages.statusPages.fallback.checks", { returnObjects: true }) as string[]
 			}
 			error={!!error}
-			items={statusPages ?? []}
+			totalCount={statusPages?.length ?? 0}
 			actionButtonText={t("pages.statusPages.fallback.actionButton")}
 			actionLink="/status/create"
 		>

client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx

@@ -253,6 +253,7 @@ export const MonitorTable = ({
 				rowsPerPage={rowsPerPage}
 				onPageChange={(_e, newPage) => setPage(newPage)}
 				onRowsPerPageChange={(e) => setRowsPerPage(Number(e.target.value))}
+				itemsOnPage={monitors.length}
 			/>
 		</Box>
 	);

client/src/Pages/Uptime/Monitors/index.tsx

@@ -85,18 +85,6 @@ const UptimeMonitorsPage = () => {
 		return `/monitors/team/with-checks?${params.toString()}`;
 	}, [effectiveTypes, page, rowsPerPage, filter, field, sortOrder]);
 
-	// Data fetching
-	const {
-		data: monitors,
-		isLoading: monitorsLoading,
-		error,
-		refetch: refetchMonitorsAndSummary,
-	} = useGet<Monitor[]>(
-		"/monitors/team?type=http&type=ping&type=port&type=docker",
-		{},
-		{ keepPreviousData: true }
-	);
-
 	const {
 		data: monitorsWithChecksData,
 		isLoading: monitorsWithChecksLoading,
@@ -126,20 +114,19 @@ const UptimeMonitorsPage = () => {
 		await deleteFn(`/monitors/${selectedMonitor.id}`);
 		setSelectedMonitor(null);
 		refetch();
-		refetchMonitorsAndSummary();
 	};
 
 	const handleCancel = () => {
 		setSelectedMonitor(null);
 	};
 
-	const isLoading = monitorsLoading || monitorsWithChecksLoading;
+	const isLoading = monitorsWithChecksLoading;
 
 	return (
 		<MonitorBasePageWithStates
 			loading={isLoading}
-			error={error || monitorsWithChecksError}
-			items={monitors || []}
+			error={monitorsWithChecksError}
+			totalCount={summary?.totalMonitors ?? 0}
 			page="uptime"
 			actionLink="/uptime/create"
 		>