In this episode, we focus on adding the topic filter to our forum index page. The goal here is pretty straightforward: we want users to be able to select a topic (like Laravel or Vue), and have the list of discussions update to only show threads within that chosen topic.
We kick things off by handling the UI — hooking up a select dropdown, listening for changes, and then making a manual request to the backend when the selected topic changes. This isn't a simple link-based filter, so we need to do a little more work in JavaScript, using Inertia's router to fire off the request and refresh the data on the page.
On the backend, we implement a new topic
query filter. This filter uses Eloquent to only pull back discussions matching the selected topic's slug. With this in, we wire it up in the controller and confirm it's all working — choosing different topics gives us the right results!
Along the way, we hit a couple of minor UX issues. First, the selected topic in the dropdown wasn't persisting, so we fix that by making sure the correct option gets set based on the current filter. Second, switching between "All topics" and specific topics was leaving old filters hanging around, so we solve this using a couple of Lodash helpers to clean up empty filters from the request object before sending it to the backend.
By the end of this video, our topic filter is both functional and feels pretty snappy to use. Next up, we'll tackle more advanced filter combinations and add search functionality!