apply monitor sorting feedback

client/src/Features/UI/uiSlice.ts

@@ -1,4 +1,5 @@
 import { dashboardCardKeys, type DashboardCardKey } from "@/Types/Dashboard";
+import type { SortOrder } from "@/Types/Query";
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 type ThemeMode = "light" | "dark";
@@ -16,7 +17,7 @@ type TableName =
 interface TableState {
 	rowsPerPage: number;
 	sortField?: string;
-	sortOrder?: "asc" | "desc";
+	sortOrder?: SortOrder;
 }
 
 interface SidebarState {
@@ -96,19 +97,13 @@ const uiSlice = createSlice({
 			const { table, value } = action.payload;
 			state[table].rowsPerPage = value;
 		},
-		setTableSortField: (
+		setTableSort: (
 			state,
-			action: PayloadAction<{ table: TableName; value: string }>
+			action: PayloadAction<{ table: TableName; field: string; order: SortOrder }>
 		) => {
-			const { table, value } = action.payload;
-			state[table].sortField = value;
-		},
-		setTableSortOrder: (
-			state,
-			action: PayloadAction<{ table: TableName; value: "asc" | "desc" }>
-		) => {
-			const { table, value } = action.payload;
-			state[table].sortOrder = value;
+			const { table, field, order } = action.payload;
+			state[table].sortField = field;
+			state[table].sortOrder = order;
 		},
 		toggleSidebar: (state) => {
 			state.sidebar.collapsed = !state.sidebar.collapsed;
@@ -147,8 +142,7 @@ export type { UIState, ThemeMode, ChartType, TableName };
 export default uiSlice.reducer;
 export const {
 	setRowsPerPage,
-	setTableSortField,
-	setTableSortOrder,
+	setTableSort,
 	toggleSidebar,
 	setCollapsed,
 	setMode,

client/src/Hooks/useMonitorListController.ts

@@ -1,9 +1,4 @@
-import {
-	setRowsPerPage,
-	setTableSortField,
-	setTableSortOrder,
-	type TableName,
-} from "@/Features/UI/uiSlice";
+import { setRowsPerPage, setTableSort, type TableName } from "@/Features/UI/uiSlice";
 import { useDelete, useGet } from "@/Hooks/UseApi";
 import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
 import useDebounce from "@/Hooks/useDebounce";
@@ -15,6 +10,7 @@ import {
 	type MonitorType,
 } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import { useCallback, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -140,13 +136,8 @@ export const useMonitorListController = (config: MonitorListConfig) => {
 		setPage(0);
 	};
 
-	const setSortField = (value: string) => {
-		dispatch(setTableSortField({ value, table: config.rowsPerPageTable }));
-		setPage(0);
-	};
-
-	const setSortOrder = (value: "asc" | "desc") => {
-		dispatch(setTableSortOrder({ value, table: config.rowsPerPageTable }));
+	const setSort = (field: string, order: SortOrder) => {
+		dispatch(setTableSort({ field, order, table: config.rowsPerPageTable }));
 		setPage(0);
 	};
 
@@ -204,9 +195,8 @@ export const useMonitorListController = (config: MonitorListConfig) => {
 		rowsPerPage,
 		handleSetRowsPerPage,
 		sortField,
-		setSortField,
 		sortOrder,
-		setSortOrder,
+		setSort,
 
 		// Delete
 		selectedMonitor,

client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx

@@ -21,6 +21,7 @@ import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import type { DockerContainerSummary } from "@/Types/Check";
 import { Checkbox } from "@/Components/inputs";
 
@@ -35,9 +36,8 @@ interface DockerMonitorsTableProps {
 	refetch: () => void;
 	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
+	sortOrder: SortOrder;
+	setSort: (field: string, order: SortOrder) => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -53,9 +53,8 @@ export const DockerMonitorsTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -107,9 +106,7 @@ export const DockerMonitorsTable = ({
 		e.preventDefault();
 		e.stopPropagation();
 		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-		setSortField(nextSort.field);
-		setSortOrder(nextSort.order);
-		refetch();
+		setSort(nextSort.field, nextSort.order);
 	};
 
 	const getActions = (monitor: Monitor): ActionMenuItem[] => {

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

@@ -30,9 +30,8 @@ const DockerMonitorsPage = () => {
 				setPage={c.setPage}
 				rowsPerPage={c.rowsPerPage}
 				sortField={c.sortField}
-				setSortField={c.setSortField}
 				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
+				setSort={c.setSort}
 				setRowsPerPage={c.handleSetRowsPerPage}
 				selectedRows={c.selectedRows}
 				onSelectionChange={c.setSelectedRows}

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

@@ -22,6 +22,7 @@ import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import { Checkbox } from "@/Components/inputs";
 
 interface InfraMonitorsTableProps {
@@ -30,9 +31,8 @@ interface InfraMonitorsTableProps {
 	refetch: () => void;
 	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
+	sortOrder: SortOrder;
+	setSort: (field: string, order: SortOrder) => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -48,9 +48,8 @@ export const InfraMonitorsTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -102,9 +101,7 @@ export const InfraMonitorsTable = ({
 		e.preventDefault();
 		e.stopPropagation();
 		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-		setSortField(nextSort.field);
-		setSortOrder(nextSort.order);
-		refetch();
+		setSort(nextSort.field, nextSort.order);
 	};
 
 	const getActions = (monitor: Monitor): ActionMenuItem[] => {

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

@@ -31,9 +31,8 @@ const InfrastructureMonitors = () => {
 				setPage={c.setPage}
 				rowsPerPage={c.rowsPerPage}
 				sortField={c.sortField}
-				setSortField={c.setSortField}
 				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
+				setSort={c.setSort}
 				setRowsPerPage={c.handleSetRowsPerPage}
 				selectedRows={c.selectedRows}
 				onSelectionChange={c.setSelectedRows}

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

@@ -23,6 +23,7 @@ import { usePatch } from "@/Hooks/UseApi";
 
 import type { Monitor, MonitorWithChecks } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import type { ActionMenuItem } from "@/Components/actions-menu";
 
 export const PageSpeedMonitorsTable = ({
@@ -31,9 +32,8 @@ export const PageSpeedMonitorsTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -45,9 +45,8 @@ export const PageSpeedMonitorsTable = ({
 	refetch: Function;
 	setSelectedMonitor: Function;
 	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
+	sortOrder: SortOrder;
+	setSort: (field: string, order: SortOrder) => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -83,9 +82,7 @@ export const PageSpeedMonitorsTable = ({
 		e.preventDefault();
 		e.stopPropagation();
 		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-		setSortField(nextSort.field);
-		setSortOrder(nextSort.order);
-		refetch();
+		setSort(nextSort.field, nextSort.order);
 	};
 
 	const getActions = (monitor: Monitor): ActionMenuItem[] => {

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

@@ -46,9 +46,8 @@ const PageSpeedMonitorsPage = () => {
 				setPage={c.setPage}
 				rowsPerPage={c.rowsPerPage}
 				sortField={c.sortField}
-				setSortField={c.setSortField}
 				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
+				setSort={c.setSort}
 				setRowsPerPage={c.handleSetRowsPerPage}
 			/>
 		</MonitorListPage>

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

@@ -24,6 +24,7 @@ import type { ActionMenuItem } from "@/Components/actions-menu";
 import type { RootState } from "@/Types/state";
 import { Checkbox } from "@/Components/inputs";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import { SPACING } from "@/Utils/Theme/constants";
 import { getNextMonitorSort, getUptimePercentageColor } from "@/Utils/MonitorUtils";
 import { formatPercentage } from "@/Utils/FormatUtils";
@@ -34,9 +35,8 @@ interface MonitorTableProps {
 	refetch: () => void;
 	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
+	sortOrder: SortOrder;
+	setSort: (field: string, order: SortOrder) => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -52,9 +52,8 @@ export const MonitorTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -92,9 +91,7 @@ export const MonitorTable = ({
 		e.preventDefault();
 		e.stopPropagation();
 		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-		setSortField(nextSort.field);
-		setSortOrder(nextSort.order);
-		refetch();
+		setSort(nextSort.field, nextSort.order);
 	};
 
 	const isBrowserOpenable = (monitor: Monitor): boolean => {

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

@@ -30,9 +30,8 @@ const UptimeMonitorsPage = () => {
 				setPage={monitorListController.setPage}
 				rowsPerPage={monitorListController.rowsPerPage}
 				sortField={monitorListController.sortField}
-				setSortField={monitorListController.setSortField}
 				sortOrder={monitorListController.sortOrder}
-				setSortOrder={monitorListController.setSortOrder}
+				setSort={monitorListController.setSort}
 				setRowsPerPage={monitorListController.handleSetRowsPerPage}
 				selectedRows={monitorListController.selectedRows}
 				onSelectionChange={monitorListController.setSelectedRows}

client/src/Types/Query.ts

@@ -1,2 +1,5 @@
 export const DateRanges = ["recent", "hour", "day", "week", "month", "all"] as const;
 export type DateRange = (typeof DateRanges)[number];
+
+export const SortOrders = ["asc", "desc"] as const;
+export type SortOrder = (typeof SortOrders)[number];

client/src/Utils/MonitorUtils.ts

@@ -1,4 +1,5 @@
 import type { MonitorStatus, MonitorType } from "@/Types/Monitor";
+import type { SortOrder } from "@/Types/Query";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import type { ValueType } from "@/Components/design-elements/StatusLabel";
 import {
@@ -13,8 +14,8 @@ import {
 export const getNextMonitorSort = (
 	field: string,
 	sortField: string,
-	sortOrder: "asc" | "desc"
-): { field: string; order: "asc" | "desc" } => {
+	sortOrder: SortOrder
+): { field: string; order: SortOrder } => {
 	if (field !== sortField) return { field, order: "asc" };
 	if (sortOrder === "asc") return { field, order: "desc" };
 	return { field: "", order: "asc" };