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
18. Limiting participants in the UI
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
Having a list of participants here is great, but what if we have 100 participants?
00:05
We've got nothing to control how many avatars are displayed here and we could end up just completely breaking the UI. To fix this, what we're going to do is within here, within these participants, we're going to limit these by splicing them within JavaScript.
00:19
Now, we'll do this with a computed property, but first of all, let's just add a bit more data in here. So we need some more users. So let's add, let's say, three more users.
00:29
So we'll say Tabby in here. And let's change the username. And we'll add another user in here, Shiva. And let's add Tom in here as well.
00:50
So we've got plenty of data to play around with. And let's have three more replies to this. So fourth post. And we'll just say, Hey, in here,
01:02
not going to keep typing out different things. Hello and Shiva. And then let's do one more. Tom. Hey, again.
01:15
OK, so let's save these out. We won't worry about the created at date yet. If we give that a refresh. Yeah, sure enough, we've got a huge amount in here.
01:23
So we're going to limit this to a certain amount and then show plus X more. So we might want to show the first four or five participants and then say that there are 10 more or 15 more,
01:35
however many it is. So the first thing we want to do is move these participants here to a computed property. And we can do that down here.
01:43
So we're going to go ahead and import computed from view. And we'll create this out here. So participants, we'll set that as a computed property, which we can extract from our props.
01:56
So these actually need to go at the top here. We'll go ahead and set that as a props variable so we can extract this. And we will say props discussion participants.
02:08
So we now have that as participants in here, which we can replace out here with just participants. And that's not going to change anything about how this is rendered
02:17
because we're just getting the same data. But now we have the ability to control how many we display here. So we can just say splice on here
02:26
and we can do that inside of here. And we can say, do that for five people or four people in this case. So we're only showing the first four here, which is great.
02:36
We can even bump that down if we want to just for the purpose of demoing out what we're doing. So we've got three participants in here. Now we want to show how many more participants
02:46
there are after that. So we'll do this in our template first. We might want to create a computed property for this afterwards,
02:54
but let's go ahead and create our span down here. And we want this to say something like plus X more. And let's just check how that looks next to that. And yeah, not great at the moment.
03:05
So let's put this outside of here actually. So we'll wrap this in an outer div and re-indent that. We'll make this flex with items of center
03:21
and we'll set a space X on this of three. That means that we can now have this next to it a little bit more spaced out. Okay, so let's bump that down a bit to one.
03:33
And yeah, I think that's okay. So for this text, let's make this a little bit smaller. Text small. And we only want to show this if from the discussion,
03:43
we're not going to grab it from that computed prop because we're splicing that to only get the first ones. The discussion participants length is greater than, and what did we set this to?
03:54
Three. So if it's greater than three, then we show it. And we're not actually seeing that. So I think, yeah, let's slice this, not splice it.
04:03
So splice is going to modify this original array, whereas slice is going to return us a new array. So that will work hopefully. And there we go.
04:12
So we see plus X more. So now what we can do is we can actually grab the count in addition to the three. So we can say discussion participants length,
04:25
which is obviously going to give us all of them plus six more minus three. So it's just going to be plus three more. So we have six overall here, I believe. Yeah, all of them are participating in that.
04:38
But of course, we are only showing three more, which is great. So I'm just going to space this out. In fact, we could get rid of this outer wrapper and have this all within the same component.
04:49
So let's get rid of this. And let's put this inside of here. And we can then just set a margin on the left to three. And yeah, let's do that a little bit bigger.
05:05
And we'll just make that important. Yeah, it's too big. Let's go ahead and bum that down. And we'll bump it down even more.
05:15
And yeah, that's OK. We don't really care too much. So let's just set the text on this to a slightly more muted color. And we should be good.
05:24
So plus three more. And of course, you can make this look a little bit better if you want to. But now as we get participants roll in, we're not showing all of them. So if we just delete these two posts here,
05:37
of course, that's showing plus one more. If we delete this one, it's not going to show at all because we've only got three participants. We're doing a little bit of calculation within the template here,
05:48
which we could extract out. But perhaps we'll come back to that later. For now, though, we're not showing a huge list of participants, which will potentially break our UI.
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!