fix default job limit handling, queues page link

riverqueue · May 14, 2024 · fadcbe2 · fadcbe2
1 parent 89927d9
commit fadcbe2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,5 +1,7 @@
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { QueryClient } from "@tanstack/react-query";
+import { ReactElement } from "react";
+import { Providers } from "@providers";
 
 import "./global-type-overrides";
 
@@ -11,7 +13,7 @@ import { routeTree } from "./routeTree.gen";
 const queryClient = new QueryClient();
 
 // Create a new router instance
-const router = createRouter({ routeTree, context: { queryClient } });
+const router = createRouter({ context: { queryClient }, routeTree });
 
 // Register your router for maximum type safety
 declare module "@tanstack/react-router" {
@@ -20,9 +22,6 @@ declare module "@tanstack/react-router" {
   }
 }
 
-import { ReactElement } from "react";
-import { Providers } from "@providers";
-
 export const App = (): ReactElement => {
   return (
     <Providers>

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
@@ -37,7 +37,7 @@ const navigation = [
     icon: QueueListIcon,
     search: { state: JobState.Running },
   },
-  { name: "Queues", href: "queues", icon: InboxStackIcon },
+  { name: "Queues", href: "/queues", icon: InboxStackIcon },
   { name: "Workflows", href: "#", icon: RectangleGroupIcon },
 ];
 

diff --git a/ui/src/routes/jobs/index.tsx b/ui/src/routes/jobs/index.tsx
@@ -14,6 +14,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { countsByState, countsByStateKey } from "@services/states";
 
 const minimumLimit = 20;
+const defaultLimit = 20;
 const maximumLimit = 200;
 
 const jobSearchSchema = z.object({
@@ -22,15 +23,17 @@ const jobSearchSchema = z.object({
     .int()
     .min(minimumLimit)
     .max(maximumLimit)
-    .default(minimumLimit)
-    .catch(minimumLimit)
+    .default(defaultLimit)
+    .catch(defaultLimit)
     .optional(),
   state: z.nativeEnum(JobState).catch(JobState.Running).optional(),
 });
 
 export const Route = createFileRoute("/jobs/")({
   validateSearch: jobSearchSchema,
-  loaderDeps: ({ search: { limit, state } }) => ({ limit, state }),
+  loaderDeps: ({ search: { limit, state } }) => {
+    return { limit: limit || minimumLimit, state };
+  },
   loader: async ({ context: { queryClient }, deps: { limit, state } }) => {
     // TODO: how to pass abortController.signal into ensureQueryData or queryOptions?
     // signal: abortController.signal,
@@ -45,8 +48,7 @@ export const Route = createFileRoute("/jobs/")({
 
 function JobsIndexComponent() {
   const navigate = Route.useNavigate();
-  const { limit: limitParam } = Route.useSearch();
-  const limit = limitParam || minimumLimit;
+  const { limit } = Route.useLoaderDeps();
   const refreshSettings = useRefreshSetting();
   const refetchInterval = !refreshSettings.disabled
     ? refreshSettings.intervalMs
@@ -61,9 +63,12 @@ function JobsIndexComponent() {
   const canShowMore = limit < maximumLimit;
 
   const showFewer = () => {
+    const newLimitCalculated = Math.max(limit - 20, minimumLimit);
+    const newLimit =
+      newLimitCalculated === defaultLimit ? undefined : newLimitCalculated;
     navigate({
       replace: true,
-      search: (old) => ({ ...old, limit: Math.max(limit - 20, minimumLimit) }),
+      search: (old) => ({ ...old, limit: newLimit }),
     });
   };
   const showMore = () => {