This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
21. Counting replies
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
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.
62 episodes•6 hrs 54 mins•2 years ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!