Filter and Query Catalog Events (Frontend)

[michellelin1]

Instructions

• Currently, users are able to view all events in the catalog table in arbitrary order. However, we want to make catalog use more robust and user friendly by allowing them to search by title and filter by subject, event type, year, and season.
• Add an input field for a search bar and 3 dropdowns for subject, event_type, year, and season (work with Vy from the design team or look to Lofi Figma for rough sketch)
• Based on query filters, modify the current catalog table to only show data that matches requested search
• related to backend #35

Notes

• Default for subject and event_type dropdown should be ‘All’ and ‘both’ for year
• When the user types into the search bar, allow for a 2 pause of no key pressing before sending a request to the backend. (filters should still be automatic)
  • This is prevent lots of unnecessary intermediate requests to the backend
• If there aren't any filters or queries, show all results.

Acceptance Criteria

• When the user, changes the filters and queries, the catalog table changes to show only events that reflect the search/filter parameters.

Resources

• Lo-Fi Figma for search bar + dropdowns
• Charka UI Dropdown
• Charka UI Input
• React useEffect
• React useState
• Example of Sending API request when state changes - scroll to “API Call Whenever Some Prop/State Changes”

As always, feel free to message Michael and Michelle if you have any questions!