fix: fix agents sort by not triggering backend query

flanksource · Jun 14, 2024 · 5100af9 · 5100af9
1 parent b47d4de
commit 5100af9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 43 deletions.
diff --git a/src/api/query-hooks/useAgentsQuery.tsx b/src/api/query-hooks/useAgentsQuery.tsx
@@ -1,16 +1,28 @@
 import { AgentSummary } from "@flanksource-ui/components/Agents/AgentPage";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router-dom";
 import { getAgentsList, getAgentsSummaryByID } from "../services/agents";
 import { DatabaseResponse } from "./useNotificationsQuery";
 
 export function useAgentsListQuery(
-  params: { sortBy?: string; sortOrder?: string } = {},
   pagingParams: { pageIndex?: number; pageSize?: number } = {},
   options?: UseQueryOptions<DatabaseResponse<AgentSummary>, Error>
 ) {
+  const [searchParams] = useSearchParams();
+
+  const sortBy = searchParams.get("sortBy") ?? "";
+  const sortOrder = searchParams.get("sortOrder") ?? "desc";
+
   return useQuery<DatabaseResponse<AgentSummary>, Error>(
-    ["agents", "list"],
-    () => getAgentsList(params, pagingParams),
+    ["agents", "list", sortBy, sortOrder, pagingParams],
+    () =>
+      getAgentsList(
+        {
+          sortBy,
+          sortOrder
+        },
+        pagingParams
+      ),
     options
   );
 }

diff --git a/src/components/Agents/AgentPage.tsx b/src/components/Agents/AgentPage.tsx
@@ -1,6 +1,5 @@
 import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import { useState } from "react";
-import { useSearchParams } from "react-router-dom";
 import { useAgentsListQuery } from "../../api/query-hooks/useAgentsQuery";
 import { User } from "../../api/types/users";
 import { BreadcrumbNav, BreadcrumbRoot } from "../../ui/BreadcrumbNav";
@@ -40,16 +39,7 @@ export default function AgentsPage() {
     pageSize: 150
   });
 
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const sortBy = searchParams.get("sortBy") ?? "";
-  const sortOrder = searchParams.get("sortOrder") ?? "desc";
-
   const { data, isLoading, refetch, isRefetching } = useAgentsListQuery(
-    {
-      sortBy,
-      sortOrder
-    },
     {
       pageIndex,
       pageSize
@@ -89,19 +79,6 @@ export default function AgentsPage() {
             pageIndex={pageIndex}
             pageSize={pageSize}
             setPageState={setPageState}
-            sortBy={sortBy}
-            sortOrder={sortOrder}
-            onSortByChanged={(sortBy) => {
-              const sort = typeof sortBy === "function" ? sortBy([]) : sortBy;
-              if (sort.length === 0) {
-                searchParams.delete("sortBy");
-                searchParams.delete("sortOrder");
-              } else {
-                searchParams.set("sortBy", sort[0]?.id);
-                searchParams.set("sortOrder", sort[0].desc ? "desc" : "asc");
-              }
-              setSearchParams(searchParams);
-            }}
             refresh={refetch}
           />
         </div>

diff --git a/src/components/Agents/List/AgentsTable.tsx b/src/components/Agents/List/AgentsTable.tsx
@@ -1,5 +1,5 @@
 import { DataTable } from "@flanksource-ui/ui/DataTable";
-import { SortingState, Updater } from "@tanstack/react-table";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import AgentForm from "../Add/AddAgentForm";
@@ -12,35 +12,22 @@ type AgentsTableProps = {
   pageCount: number;
   pageIndex: number;
   pageSize: number;
-  sortBy: string;
-  sortOrder: string;
   setPageState?: (state: { pageIndex: number; pageSize: number }) => void;
   hiddenColumns?: string[];
-  onSortByChanged?: (sortByState: Updater<SortingState>) => void;
   refresh?: () => void;
 };
 
 export default function AgentsTable({
   agents,
   isLoading,
   hiddenColumns = [],
-  sortBy,
-  sortOrder,
-  onSortByChanged = () => {},
   refresh = () => {}
 }: AgentsTableProps) {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const agentId = searchParams.get("id") ?? undefined;
 
-  const tableSortByState = useMemo(() => {
-    return [
-      {
-        id: sortBy,
-        desc: sortOrder === "desc"
-      }
-    ];
-  }, [sortBy, sortOrder]);
+  const [sortState, onSortByChanged] = useReactTableSortState();
 
   const columns = useMemo(() => agentsTableColumns, []);
 
@@ -56,7 +43,7 @@ export default function AgentsTable({
         }}
         stickyHead
         hiddenColumns={hiddenColumns}
-        tableSortByState={tableSortByState}
+        tableSortByState={sortState}
         onTableSortByChanged={onSortByChanged}
         enableServerSideSorting
       />
@@ -70,7 +57,7 @@ export default function AgentsTable({
             searchParams.delete("id");
             setSearchParams(searchParams);
           }}
-          onUpdated={(agent) => {
+          onUpdated={() => {
             searchParams.delete("id");
             setSearchParams(searchParams);
             refresh();