From 9382a9cbb1cb354720817f869d7599426e75438d Mon Sep 17 00:00:00 2001
From: ramith-kulal <ramithnr1234@gmail.com>
Date: Wed, 12 Nov 2025 11:43:49 +0530
Subject: [PATCH] fix: competition filter not updating correctly (#148)

---
 apps/web/src/components/ui/Filter.tsx     | 24 +++++++++++------------
 apps/web/src/store/useFilterInputStore.ts |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/ui/Filter.tsx b/apps/web/src/components/ui/Filter.tsx
index b091b813..3f61d387 100644
--- a/apps/web/src/components/ui/Filter.tsx
+++ b/apps/web/src/components/ui/Filter.tsx
@@ -15,17 +15,14 @@ export default function Filter({
   filters: string[];
   onClick?: () => void;
 }) {
-  const { updateFilters } = useFilterInputStore();
-  const inputData: { [key: string]: string } = {};
+  const { filters: selectedFilters, updateFilters } = useFilterInputStore();
+
   const recordFilterInput = (filter: string) => {
-    inputData[filterName] = filter;
-    updateFilters(inputData);
+    updateFilters({ [filterName]: filter });
   };
 
   const triggerClasses = clsx("text-sm font-medium", {
-    "text-slate-300": ["Hire contributors", "Funding", "Trending"].includes(
-      filterName
-    ),
+    "text-slate-300": ["Hire contributors", "Funding", "Trending"].includes(filterName),
   });
 
   return (
@@ -35,18 +32,21 @@ export default function Filter({
           <span className="text-sm font-medium text-white">{filterName}</span>
         </AccordionTrigger>
         <AccordionContent className="pt-1 pb-3">
-          <RadioGroup className="space-y-3">
+          <RadioGroup
+            className="space-y-3"
+            // ✅ Controlled selection: reads from Zustand state
+            value={selectedFilters[filterName] || ""}
+            onValueChange={(val) => recordFilterInput(val)}
+          >
             {filters.map((filter) => (
               <div key={filter} className="flex items-center space-x-3">
                 <RadioGroupItem
                   value={filter}
-                  id={filter}
-                  onClick={() => recordFilterInput(filter)}
+                  id={`${filterName}-${filter}`}
                   className="border-[#28282c] bg-[#141418] text-ox-purple transition data-[state=checked]:border-ox-purple data-[state=checked]:bg-ox-purple/20 data-[state=checked]:ring-2 data-[state=checked]:ring-ox-purple/50"
                 />
                 <Label
-                  htmlFor={filter}
-                  onClick={() => recordFilterInput(filter)}
+                  htmlFor={`${filterName}-${filter}`}
                   className="text-sm text-zinc-300 cursor-pointer transition-colors"
                 >
                   {filter}
diff --git a/apps/web/src/store/useFilterInputStore.ts b/apps/web/src/store/useFilterInputStore.ts
index 927eb80e..1dbc9f11 100644
--- a/apps/web/src/store/useFilterInputStore.ts
+++ b/apps/web/src/store/useFilterInputStore.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 
 interface FilterInputState {
-  filters: object;
+  filters: Record<string, string>;
   updateFilters: (newFilter: Record<string, string>) => void;
   resetFilters: () => void;
 }