Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

25. Adding the topic filter

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

We're going to add some more filters throughout the course as we add more features. But for now, we're going to tackle this topics filter. When we choose this, of course, we want to filter this by the topic we've chosen.

00:10

Now, we've got a topic under Laravel and Vue. We don't have one under Inertia, which is fine. So we can very easily test if these are working. Now, this is slightly different because these aren't links that we can just append the query

00:22

filter onto. What we need to do is when this select changes, when the option within it changes, we want to go ahead and make a manual request to the back end. So let's go ahead and open up the index page here and just find that select.

00:38

We want to add an event listener onto this for when this changes and then go ahead and make that request out. So let's start with this. We don't have a method for this or a function for this at the moment, but the event for

00:48

this is change. So let's call this filter topic and then go ahead and create a function out inside of our script to get this to work. Let's create our filter topic.

00:59

And that's just going to be a function here. And then in here, we want to make a manual request through to the back end, appending on that query string. To do this, we're going to go ahead and put in the router specifically from Inertia, which

01:13

allows us to make specific requests. So let's just go ahead and use this to visit the homepage. So if we were to just do that, that would actually work. We open up our network tab here and filter under fetch XHR.

01:29

What we can do is just click on this and you can see it's just making a request to the back end. It's not doing anything useful at the moment because, of course, it's just refreshing the data we already have on the page.

01:38

But with this, we can go ahead and actually pass that data in. So let's go ahead and do this really roughly. And we're going to very immediately see an issue with this. So the filter is going to be filter and topic.

01:50

And then we're going to pass in from the event we get through to this, the target, which is the select element itself and the value of the element. So this is going to be something like Inertia view. It will basically be the slug that we're passing through.

02:04

So what we're also going to do to this is let's just define this out as specifically data. First of all, that will make it a little bit easier. And then we're going to go ahead and preserve the scroll on this, which will keep the scroll

02:18

position within Inertia. If you've not seen this before, if we were to change this now, it should jump to the top once the request has come back in. But we want to set this to true.

02:30

So it keeps the position on the page that we're currently on. OK, so at the moment, when we select a filter, we can clearly see it's working because we're getting the request back that we have an invalid filter here. So we're going to go ahead and build that filter out.

02:45

And we're going to go ahead and make this work. So let's go over to our query filter section. Let's grab the no replies query filter. And let's create out a topic query filter here.

02:57

Paste this in. Let's go ahead and change the name. Topic query filter. And what do we need to do here?

03:04

There's a couple of ways that we could do this because we know that we can already say where belongs to. But that will involve us looking this up in the database to actually pass the instance of the model through to it, like we've been doing with the currently authenticated user.

03:18

So in this case, we're going to go ahead and say where has topic. And then within the closure here, what we can do is bring in the query builder. We can go ahead and pull the value that gets passed into the query filter into scope. And we can just say, well, within that topic that we have, make sure that the slug matches

03:39

the value that we've given inside of there. So it will then only pull back the discussions which have a topic where this slug matches. So now that we've got this topic query filter in, let's head over to our forum index controller and we'll add this in here.

03:52

Just at the top, I'm kind of separating these by general and authenticated. So we're going to call this topic and that's going to be our topic query filter. OK, so we should now see this not error, which is the first step. When I click on inertia, you can see that that works.

04:08

And when I click on Laravel, you can see we get Laravel topics and view. Sure enough, we get view topics. So it looks like everything is working really nicely. But we've got a couple of issues here.

04:19

The first issue is that it's not showing the topic that we're currently on. So I click on this, the data gets refreshed within inertia or within the back end. It pulls through to the front end and this just sort of loses all state altogether. The second issue is that when we want to go, say, to anything that has no replies and then filter,

04:42

we lose that filter on here. We want this to work alongside of this. So we want to be able to say I want to see anything with no replies within the Laravel topic. It's just not working at the moment.

04:55

Let's first of all, fix up the fact that this does not keep the state or the thing that we're currently looking at. That's the easiest to do. And then we will, of course, go ahead and work on the other thing.

05:04

So let's go over to the select here for each of these options. Let's just pull down the attributes and iteration we have here. And we want to go ahead and conditionally set selected based on, of course, a condition. So here we're going to say page, props, query and filter.

05:25

And we want to say topic because remember, we want to use a null. Save topic might not be in our filters because we're passing down the query. We could also just do query dot filter. That's probably a lot easier.

05:35

And we want to check if this equals the current slug that we're iterating through in this list. So is there a topic in here that matches the thing that we're iterating through? If so, set it as selected. And you can see it's already working here.

05:50

So that is the first step done. And of course, all topics works as well because that's just an empty value. Now, I think for now, what we'll do is we will just leave this until later. So this only selects all discussions with that particular topic.

06:07

We'll change that a little bit later because that gets a little bit more advanced. And we can figure that out, especially once we've implemented the search, which also ties into the query string. So we'll leave that for after we've implemented search.

06:19

But we've got a problem here. If I choose Laravel and then go back to all topics, you can see that the filter up here remains. Let's fix that now, first of all.

06:27

And of course, all discussions isn't highlighted, which it should be. Now, to do this, what we're going to do is come down to where we're making the request just here. And we basically want to omit anything from this object that doesn't have a value or has an empty or null value.

06:46

So to do this, we're going to go ahead and use the Lodash JavaScript library to achieve this. Now, we're not going to pull Lodash in in its entirety. Lodash is just a collection of JavaScript helpers. What we're going to do instead is install two specific helpers.

07:01

The first one is going to be Lodash emit by. And that's separated by a dot. This is going to allow us to remove items from an object under a specific condition. That's the first thing that we want to pull in.

07:15

The second one we want to pull in is Lodash is empty. This will be the condition that we pass into the emit by helper. OK, so we've got them two things in. Let's go ahead and import these at the top.

07:28

We're going to import these with an underscore prefix just so we know they're part of Lodash. So import emit by from Lodash dot emit by. And we also want to pull in is empty as well is empty. And that is from the is empty package under Lodash.

07:47

So now to do this, we want to go ahead and say emit by. Pass in the object and the condition is whether it is empty. That's all we do. So now if this is empty, it's going to get rid of the filter altogether.

08:01

And it's not going to send this down to our API or to our back end. So let's try this out. Let's just start off on a clean page here. Let's go over to inertia.

08:11

Let's go back to all topics. And there we go. Sure enough, that just disappears altogether. And we're back to all discussions.

Episode summary

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!

Episode discussion

No comments, yet. Be the first!