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

We saw that from the introduction where we just have the avatars of each of the users. The functionality we're going to build means that what we can do is display a list of all of the participants pretty much wherever we want. So let's go and just look at our discussion model, because we know that we have lots of posts. We can potentially have lots of different people posting lots of different posts.

But we need to be really careful because each of the posts could belong to more than one user, because we could have many posts from the same user. So what we don't want to do is set up a relationship where every single post gives us back a user and then we show that in the participation list. Basically, we want a distinct or unique list of users that are participating. Now, before we set the relationship up, we don't really have any other users in our app.

So I'm going to do is just duplicate this user down and create out a couple of extra users in here just manually. So we'll create Mabel in here and set the username properly. And we will also create out Fred in here as well. And set the username here.

There we go. So what we can do is over on the posts, let's just say first post for the second post for that discussion. Let's set that to a user Mabel and then let's create a third post in here. With a parent ID of two, no one, it will be the same parent ID, but the user will be different. So let's save the changes out and let's just check this out in here to make sure that looks good.

OK, so we've got three participants technically, although we could exclude the first user if we wanted to. So let's go over and look at dumping out a list of all of the participants in here. So for the relationship, let's go ahead and create out a participants relationship. And for this, we have to work this out via the posts.

So we need a has many through relationship here. So this has many through and let's look at how we define this. It has many users which are technically participants through the post relationship that we have set up here. So through posts, it won't actually directly touch this relationship.

Of course, it will do this at a database level, but it's going to find all users who have posts within this particular discussion. Now, for this, we need to define some keys out. So here for the first key, we need the discussion ID just to identify that. Then we need the ID for the second and local key and the second local key.

We need the user ID. So that's unique to the users table or the post table. OK, so now that we've done this, we're going to leave that as it as it is. Come back to it in a second. We'll just dump out a list of the participants. So we'll do this over on the discussion resource.

So we'll create a new relationship in here called participants. This is going to be the public user resource, which is convenient because we can reuse that. But this is going to be a collection of participants this time. OK, so over on the discussion itself, let's go ahead and just dump out the discussion participant in here.

And let's have a look at what we get. OK, so these are not loaded. So over on the forum index controller. Participants. And there we go. Great.

So let's focus on this first post. We've got Alex, Mabel and Fred. Now let's look at what happens when, let's say, a third post or a fourth post is posted by the same user. So who's this? Fred.

So Fred has posted two posts within this discussion. If we give this a refresh, that means that Fred now appears twice in this list, which is not right. We want this to be unique. So how do we solve this?

Over in the participants relationship, what we can do here is simply say distinct. That's going to grab only the distinct participants, or in this case, users for each of them. And you can see now we just get a list of people who are participating. OK, now we've got this data.

It's going to be simple because we just need to iterate through it and style it up over on the discussion component just here. So we want these to be a list of avatars within a kind of list. So for this, let's create out a another component with inside of here and we'll say flex. And let's say item center because we want these to be next to each other.

We'll set the justify here to start or. Yeah, let's let's go with that for now and we'll figure out in a minute. And let's just iterate through these and dump out an image. So for this, we're going to say V4 participant in.

Discussion participants, and we'll key this by the participant or the user ID. Let's have a look. And we need the source here to be the participant avatar. URL, let's have a look.

Great, so we're actually getting them out now. I know these two are the same because we don't have an email associated with that, but that's absolutely fine. We know who it is. OK, so let's just add some styling to these.

Let's set the height and the width to six. We'll set the rounded to full like we're using everywhere else. And let's have a look. Great. And for each of these, we kind of want them to overlap like we saw from the introduction.

So what we're going to do here is set a minus space X of one. So space X separates things on the X or Y axis. But if we set this to minus, what it's going to do is it's going to overlap them slightly. You can see that more if you just bump it up.

You can see they're being overlapped here and you can even keep it at two if you want. I'm going to keep it at one here. This looks a bit weird. So what we want to do is for each of these images, set a ring on each of these, which sets basically a ring around it.

And we can set the ring color to white. And you can see now that you've got that slight gap in there now. So it just looks a little bit cleaner and offers a little bit more separation between each of these. Now, what we also want to do is the first person we want to be bigger because we're going to assume that's the first post of the discussion.

So, again, we can do all of this within Tailwind. So we can use the first of type here to set the width to seven and we can say first of type to set the height to seven. So just slightly larger. That just means that the first type in here, e.g. the image, gets set to a larger size.

Completely optional, but it just makes sense to sort of highlight who started this discussion. And of course, you can add this data pretty much anywhere you want. Now, to make this a little bit easier to work out who's who, let's bind in a title here and say participant username. That just means that we can easily hover over this and see who it is so we can easily see who posted or who is within this particular discussion.

Now, one thing we need to be careful about of this entire container on here is if we have a lot of text here, we might see this pushed over. Let's just try that out again by copying and pasting the first post over and over again just to see how this looks. Let's save this out and come back over and give that a refresh. And you can see it sort of pushed over a little bit.

That's really easy to fix by just setting the container here to flex shrink zero. So flex shrink zero. And that will stop that from being pushed over by any of this content. Subsequently, our line clamp will get smaller and it will be truncated with these ellipses.