feat: Sync jobs filter with query string

superstreamerapp · Sep 16, 2024 · 82d6be4 · 82d6be4
1 parent 824b3f7
commit 82d6be4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/packages/dashboard/src/components/JobsStats.tsx b/packages/dashboard/src/components/JobsStats.tsx
@@ -35,6 +35,13 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
     }
   }
 
+  const filterJobState = (state?: JobDto["state"]) => {
+    if (state === filter.state) {
+      state = undefined;
+    }
+    onChange({ state });
+  };
+
   return (
     <TooltipProvider delayDuration={0}>
       <ul className="flex bg-white border border-border rounded-md overflow-hidden">
@@ -44,7 +51,7 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
               value={completed}
               className="bg-emerald-400"
               outerClassName="border-r border-border"
-              onClick={() => onChange({ state: "completed" })}
+              onClick={() => filterJobState("completed")}
               active={filter.state === "completed"}
             />
           </TooltipTrigger>
@@ -58,7 +65,7 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
               value={failed}
               className="bg-red-400"
               outerClassName="border-r border-border"
-              onClick={() => onChange({ state: "failed" })}
+              onClick={() => filterJobState("failed")}
               active={filter.state === "failed"}
             />
           </TooltipTrigger>
@@ -72,7 +79,7 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
               value={running}
               className="bg-blue-400"
               outerClassName="border-r border-border"
-              onClick={() => onChange({ state: "running" })}
+              onClick={() => filterJobState("running")}
               active={filter.state === "running"}
             />
           </TooltipTrigger>
@@ -85,7 +92,7 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
             <Tile
               value={waiting}
               className="bg-violet-400"
-              onClick={() => onChange({ state: "waiting" })}
+              onClick={() => filterJobState("waiting")}
               active={filter.state === "waiting"}
             />
           </TooltipTrigger>

diff --git a/packages/dashboard/src/hooks/useJobsFilter.ts b/packages/dashboard/src/hooks/useJobsFilter.ts
@@ -5,14 +5,22 @@ export function useJobsFilter() {
   const [searchParams, setSearchParams] = useSearchParams({});
 
   const updateParams = (newParams: Partial<JobsFilterData>) => {
-    setSearchParams(newParams);
+    // JSON parse & stringify will remove all undefined fields.
+    setSearchParams(
+      JSON.parse(
+        JSON.stringify({
+          ...Object.fromEntries(searchParams),
+          ...newParams,
+        }),
+      ),
+    );
   };
 
   return [
     {
-      tag: searchParams.get("tag"),
-      name: searchParams.get("name"),
-      state: searchParams.get("state"),
+      tag: searchParams.get("tag") ?? undefined,
+      name: searchParams.get("name") ?? undefined,
+      state: searchParams.get("state") ?? undefined,
     } as JobsFilterData,
     updateParams,
   ] as const;