Skip to content

feat: add category filter chips to search page#908

Open
muffti123 wants to merge 1 commit into
crackedstudio:masterfrom
muffti123:Implement-category
Open

feat: add category filter chips to search page#908
muffti123 wants to merge 1 commit into
crackedstudio:masterfrom
muffti123:Implement-category

Conversation

@muffti123

Copy link
Copy Markdown

Summary

Adds a horizontal scrollable row of category filter chips to the Search page, allowing users to narrow raffle results by category without a full page reload.

Changes

client/src/services/raffleService.ts

  • searchRaffles now accepts an optional categories?: string[] parameter
  • When categories are provided, fires parallel GET /search?q=...&category=... requests (one per selected category) and deduplicates results by raffle ID via a Set<number>

client/src/hooks/useSearch.ts

  • Accepts a second categories: string[] argument (defaults to [])
  • Uses categories.sort().join(',') as a stable dependency key so the search re-fires when categories change
  • Passes categories through to searchRaffles

client/src/pages/Search.tsx

  • Reads a comma-separated ?category= from the URL and parses it into selectedCategories via useMemo
  • Renders a horizontally scrollable row of rounded filter chips above the results grid
  • Active chips are filled pink (#FE3796), inactive chips use an outlined border style
  • toggleCategory toggles a category in/out and updates the URL via setSearchParams with replace: true
  • useSearch receives both query and selectedCategories

Acceptance Criteria

  • Clicking a category chip narrows search results to that category
  • Multi-select: multiple category chips can be active simultaneously
  • Active categories are reflected in the URL query string (?category=gaming,art)
  • Category filters survive page refresh

Categories

Gaming, Electronics, Art, Music, Sports, Collectibles, Other


Closes #832

Implements a horizontal scrollable row of category filter chips (Gaming, Electronics, Art, Music, Sports, Collectibles, Other) on the Search page. Clicking a chip filters search results to that category via the backend's GET /search?category= endpoint. Supports multi-select with parallel requests and client-side deduplication. Active categories are reflected in the URL query string (?category=gaming,art) and survive page refresh.

Closes crackedstudio#832
@vercel

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

@muffti123 is attempting to deploy a commit to the otaiki1's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[client] Implement category filter chips on the Search page

1 participant