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

18. Limiting participants in the UI

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

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.

Episode summary

In this episode, we tackle the problem of having too many participant avatars showing up in our UI. Imagine if you had 100 users in a discussion—showing all of their avatars at once would totally break the layout!

We start by beefing up our mock data with a bunch of new users and replies, just to see what it looks like with a crowded participant list. Sure enough, it's a mess. So, to fix this, we update our component with a computed property that controls how many avatars to show. We use JavaScript's slice instead of splice (to avoid mutating the original array) and decide to only display a set number of participants, with a handy "+X more" message if there are extras.

There's a bit of trial and error as we tweak the design and the logic, but by the end, our UI is tidy and only ever shows a fixed number of user avatars, plus a note for any hidden participants. Now, even if 100 people join, things stay neat and readable. No more overflowing avatars!

Episode discussion

No comments, yet. Be the first!