fix: competition filter not updating correctly (#148)

[ramith-kulal]

Description

This pull request fixes the issue where changing the Competition filter affected the Popularity filter instead of updating its own state.
The bug occurred because a new local object was being created on each render, overwriting previous filter selections.

Changes Made

Removed unnecessary local inputData object inside the Filter component

Used updateFilters({ [filterName]: filter }) to correctly merge filter states

Made the RadioGroup controlled via Zustand state (value + onValueChange)

Ensured each filter (Popularity, Competition, Tech Stack, etc.) updates independently

🧪 Tested Behavior

Selecting different filters now correctly updates their respective categories

No interference between Competition and Popularity filters

Verified persistent selection state across multiple filter groups

🖥️ Issue Reference

Fixes: #148

Summary by CodeRabbit

• Refactor
  • Improved filter state management and component architecture for better code maintainability and consistency.

[vercel]

@ramith-kulal is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The changes convert the Filter component from uncontrolled to controlled using Zustand state management, improving state synchronization. Filter element identifiers are scoped with filterName to prevent conflicts. The FilterInputState type is clarified from generic object to Record<string, string>, aligning with updateFilters parameter expectations.

Changes

Cohort / File(s)	Change Summary
Filter Component State Refactoring apps/web/src/components/ui/Filter.tsx	Converts Filter to controlled component using Zustand-derived selectedFilters. Updates RadioGroup value binding and onValueChange handler. Scopes child element identifiers with filterName prefix to prevent ID collisions. Simplifies inline styling checks.
Type Definition Alignment apps/web/src/store/useFilterInputStore.ts	Updates FilterInputState.filters type from generic object to explicit Record<string, string> for consistency with updateFilters method signature.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Filter.tsx: Verify controlled component conversion logic and ID scoping prevents collisions across multiple filter instances.
• useFilterInputStore.ts: Confirm type change doesn't break existing filter state implementations or cause runtime issues.

Poem

🐰 The filters now sing in perfect harmony,
Each one scoped with its own identity,
No more mix-ups when selections appear,
Zustand controls them loud and clear!
bounce bounce ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main bug fix addressing the Competition filter update issue.
Linked Issues check	✅ Passed	All coding requirements from issue #148 are met: controlled RadioGroup component, independent filter state updates, and proper filter merging via updateFilters.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the Competition filter bug; no unrelated modifications are present in the two modified files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5445fd9 and 9382a9c.

📒 Files selected for processing (2)

• apps/web/src/components/ui/Filter.tsx (2 hunks)
• apps/web/src/store/useFilterInputStore.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/src/components/ui/Filter.tsx (1)

apps/web/src/store/useFilterInputStore.ts (1)

• useFilterInputStore (9-16)

🔇 Additional comments (5)

apps/web/src/store/useFilterInputStore.ts (1)

4-4: LGTM! Type refinement improves clarity and safety.

The change from object to Record<string, string> better reflects the actual structure where each filter name maps to its selected value. This aligns with the updateFilters parameter type and provides stronger type checking.

apps/web/src/components/ui/Filter.tsx (4)

18-18: Excellent fix for the filter state bug!

Replacing the local inputData object with Zustand store integration eliminates the bug where filter selections were being overwritten on each render. The rename to selectedFilters clearly distinguishes store state from the filters prop.

---

20-22: Core fix: filter-scoped updates preserve independent state.

The updateFilters({ [filterName]: filter }) call ensures each filter category (Competition, Popularity, Tech Stack) updates its own key in the store, preventing the interference described in issue #148.

---

35-40: Proper controlled component implementation.

The RadioGroup is correctly wired as a controlled component with value from Zustand state and onValueChange updating the store. The empty string fallback gracefully handles the initial unselected state.

---

45-49: Scoped identifiers prevent ID conflicts and ensure accessibility.

Prefixing IDs with ${filterName}- prevents collisions when the same filter value (e.g., "Low") appears in multiple filter categories. The matching htmlFor attribute maintains proper label-input associations for accessibility.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cla-assistant]

All committers have signed the CLA.