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

21. Counting replies

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

So we're now going to show the amount of replies in two places. First of all, just under each of the participants here. And second of all, just over here.

00:09

Now, this on the surface might seem pretty straightforward. But actually, the way we want to do this is, first of all, the most efficient way. So we're not using up too much memory. And second of all, we want to pluralize this.

00:20

So we'll look at doing that as well. So the first thing that we want to do is over on the forum index controller, rather than counting on the posts relationship, which would mean for every discussion, we would have to add in a posts eager load.

00:37

We want to include a count. So we can use with count here. And we can basically just count on the posts relationship. So that will give us back the amount of posts.

00:48

Remember, not replies. So replies are always minus one. So let's go over to the discussion resource. And let's just output replies count.

01:02

And what this will do, if you've not come across aggregates before counts, is it will basically just give you a column back called posts count. And that will just tell you how many posts are within that. And that count will be done at the database level rather than within your code.

01:21

So with this, we can just say this posts count. And let's just dump this out on the page somewhere. So over on the discussion, just underneath all of our participants, let's just output discussion replies count.

01:36

And we see two here and four here. So we've got four posts here, not four replies. So what we're going to do, because we don't really need this functionality anywhere else, we're just going to write minus one.

01:50

In reality, you might want to set up a separate relationship, which only gives you back the replies, not the posts. You could do that by over in the discussion model. If we look at our posts relationship here,

02:05

we could take this and say replies and say has many, but where not null parent ID. Because remember, the first post is going to be a null parent ID. And then all of the other posts come underneath that. So you could set up a relationship like this.

02:25

And then of course, you could change that over to replies count. In which case, over on the discussion component, this should just display the right value. So let's just have a look at this and make sure we are pulling in replies here with the count.

02:45

And there we go. So we've got one reply and this. Now let's look at our debug bar actually. I don't think that's made too much difference,

02:51

although we are creating a new relationship that might be handy. So we don't have any duplicate requests. We don't really have any slow queries in here. So I think actually we'll leave it like that.

03:00

So we've got the reply count now by counting on that relationship, rather than pulling that data in as a collection and then having to count on that collection, which is a lot faster. So now we've got the replies count.

03:12

Let's head back over to the discussion here and actually add this in underneath. So we'll go ahead and wrap this out in a div here. And let's just add some styles to this real quick. So we'll set the text to small here and we'll set the margin top three.

03:29

There we go. And for this, we will say replies. We'll pluralize that in a second. That looks a little bit odd at the moment.

03:37

So what we can do for this outer container here, we can say flex and we can say items end. In fact, justify end because we're working on horizontal axis there. And there we go.

03:50

But we need to set this to a flex call type to have these underneath each other. Now, because of that, this now changes from justify to items end. And there we go. So now that's nicely all put over to the right hand side.

04:04

OK, so we want to pluralize this. There's a couple of ways that we could do this. So we could do this all within our discussion resource. So we could take this and then go ahead and say string from eliminate support string,

04:19

plural, reply, paste that in. And then what we would actually get out here now is the actual plural. And we could add on to that the actual count. So we could say this replies count and then append on this like so.

04:39

Then we have one reply and three replies, in which case what we could do is get rid of the text down here. And that's now all driven via the back end. The other way to do this is to do this on the client side,

04:53

which I prefer because the data we get back from the API, in this case it is an API really, we want to keep as just the number. We don't really want to be outputting labels via the API. So we're going to go ahead and change that back over.

05:08

But that is one option if you want to keep that. Let's actually grab that line and comment that out just so we have it as a reference if we ever need to change that over. And for this, we're just going to grab the reply count.

05:21

So we'll put this back to how it was before, like so. And we're going to go ahead and put in the Pluralize package with NPM, which means we can easily Pluralize this within JavaScript. So let's go ahead and pull in Pluralize with NPM.

05:37

And to use this, we're going to go and import Pluralize from, you guessed it, Pluralize. And with this, we just need to wrap this. So Pluralize reply, so it works similar to Laravel. And discussion replies count.

05:56

And if we head back over, there we go. We get no change whatsoever. A little tip with the Pluralize package, you can also pass in true, which will give you the number first as well,

06:07

which means you can get rid of this and just call Pluralize. And you can see we get exactly the same result. It's entirely up to you how you want to configure the UI. OK, so now that we've done that, let's just add the reply count to up here as well.

06:20

So we can pretty much take this, go over to the discussion show page at the top where we've got our discussion title and whether it's pinned or not. Let's have a look at where we can add this. So we want to put this in here and we'll just create out a separate div for that.

06:42

And then over here, we want this to be flex item center. And we want to justify these between so they separate out at the end. Now, the only problem we have here is what we're going to have to do if we go to the forum index is also grab the count back on the discussion show controller.

07:02

Now, the reason that this isn't working on the client, first of all, is that we don't have Pluralize pulled in here. So let's go up to the top and import Pluralize from Pluralize. And if we come over, it works, but we get a null because we just don't have that value.

07:21

So anywhere we want to show these counts, we have to load them in. There is a way to do this globally. But since we're doing it only in two places, it makes sense to just do this on this basis.

07:31

Now, the difference here is we've already got the discussion through into this discussion show controller. So what we need to do is say discussion load count rather than with count, like we did over on the forum index controller,

07:43

because the resource is already loaded in. So we're going to say replies. And if we head over, there we go. Three replies.

07:51

So we're now showing the amount of replies on here and here. And the last thing to do is just style this up quick. So let's go over here and do what we did before. Text small.

08:03

And what did we do over on the discussion page? Margin top three, which we don't need. There we go. We're now showing how many replies we have to each of our discussions.

Episode summary

In this episode, we're working on displaying the number of replies for forum discussions in two places: just under each participant in the discussion, and at the top of the discussion show page. While it might sound simple, there are a few tricky details to get this working efficiently and cleanly.

First, instead of just counting the number of posts (which includes the original post), we want to show the number of replies—so we need to subtract one or even better, set up a relationship that grabs only the replies. We go through how to do this the efficient way using Laravel's withCount and even create a specific replies relationship to make our code cleaner and faster by letting the database handle the counting.

We also handle pluralizing the word "reply" based on the count, both on the back-end (with Laravel's string helpers) and more flexibly on the client side using the pluralize package in JavaScript. We talk about the pros and cons of each method, and set up the client side so the API just returns numbers, and the frontend handles the label ("1 reply" vs "3 replies").

Finally, we make sure the reply counts show up in both needed locations and style things up so it all fits nicely into the UI. Along the way, there are tips about loading data efficiently, handling potential null values, and keeping your codebase flexible for future changes.

By the end, you'll have a performant way to show and pluralize reply counts across your forum!

Episode discussion

No comments, yet. Be the first!