The profile has two pages. The first is what we've already implemented, the top level posts. The second page is the same thing, but it includes the replies, but it's not just to any old reply, it's only the replies to other posts by other profiles. It's a little bit involved. So let's just get started. I think the best place to start is the query. So let's take the show method from the ProfileController.

I think the best place to start is the query. So let's take the show method from the ProfileController. Let's copy it, paste it in, and let's rename this copy to replies. And we're gonna start the same way. We need to load the followings and the follower counts, but the query of course is gonna be different. And I'm gonna do this a little bit differently and, and in hindsight, I should have written these just a little bit different using different methods.

and in hindsight, I should have written these just a little bit different using different methods because you know, it's clear in this particular case where we are fetching posts by the profile ID for the given profile, but in this particular query, it's more involved. And I want to use methods that make this as easy to understand as possible. Like for example, the first thing we want to fetch are the top level posts.

Like for example, the first thing we want to fetch are the top level Posts. So we want the Posts where then we will have a closure so that we can select the Posts that belongs to the Profile. That's so much easier to understand, at least in my opinion, than get the Posts where the profile_id is a particular value. And, and in hindsight, this is what I should have done. But hindsight's 2020 I, if it comes to

And, and in hindsight, this is what I should have done. But hindsight's 2020 I, if it comes to where we can rewrite some things here and there, we might do that, but for right now, we're just gonna keep going on. And so we want to select the Post records that belong to this profile, but we only want the top level Posts. We don't want to include any of the replies because then we will end up with essentially duplicates and we will display duplicates.

because then we will end up with essentially duplicates and we will display duplicates. And we don't want that. So we want where the parentId is null in this case, and that's the first set of posts that we want. But then we want a second set of posts. We want posts that belong to another Profile. So we want those posts where the replies belong to this particular profile. So this query is going to look somewhat similar in

this particular profile. So this query is going to look somewhat similar in that we want the posts that have replies that belong to the profile that we are working with. So again, it's a little more involved, it's, it's a little more confusing and complicated. So we want the top level posts for the profile. Then we want the posts that have replies that belong to this profile. And then from there we want to start

that belong to this profile. And then from there we want to start eagerly loading information. Now I know that we have globally set the automatic eager load relationships feature, and it's a fantastic feature, but I'm using it more as a safety net than anything else because especially when it comes to this particular query, I only want to display the posts and the replies that we select here. I don't want to display any other replies,

and the replies that we select here. I don't want to display any other replies, so I'm being very specific with this particular query. So we want to eagerly load the profile for the posts. We also want to eagerly load the repost of, but really what we want are the counts. So let's just copy what we have up here. And ideally we would write a method that, that just makes this a little bit easier to understand what we're doing here because we've done this

that just makes this a little bit easier to understand what we're doing here because we've done this a couple of times already. And we will be doing it again because the last bit is going to be this with count likes and everything like that. So let's just go ahead and put that in. But we need to finish our eagerly loading here because we want the profile of the posts, we want the counts of the repost.

because we want the profile of the Posts, we want the counts of the repost. We also want the profile of the repost, but then we also want to load the replies, but we don't want just any old reply. We want just the replies that belong to this profile. So once again, where belongs to this profile and we want to eagerly load the profile and then we need to decide how we want this ordered.

and we want to eagerly load the profile and then we need to decide how we want this ordered. Do we want it ordered in ascending or descending order? And I think ascending makes the most sense. And I guess it really does matter because we can always change it. So we'll go in ascending order. And so that's our query. It's more involved. Let's go over it again. So first we select the posts or, or we select the top level posts of this profile.

So first we select the posts or, or we select the top level posts of this Profile. Then we select the posts that have replies by this Profile. And then we eagerly load the Profile for the posts. We eagerly load the counts for the repost, the Profile for the repost, the replies. But we only want the replies that belong to this Profile. We eagerly load the Profile and the oldest. And yeah,

We eagerly load the profile and the oldest. And yeah, although we need to also include parent profile, we want the profile of the parent. Okay, that should be to everything. So now we just need a new view. We could probably use the show view that we have, but um, we also want to display replies. So I think it makes sense to have just a view for the replies in which case we pass in the

So I think it makes sense to have just a view for the replies in which case we pass in the profile and the posts. So that's good there. Let's open up the routes file so that we can essentially add a new route. I'll call this withReplies. The method will be replies, and then the name of this route will be profiles.replies. Okay, so we have the route set up. So now we just need that view,

Okay, so we have the route set up. So now we just need that view, in which case we can take the show view. Let's copy that and paste it. Let's rename the copy to replies.blade.php. And yeah, that should get us started at least so that we could go to the browser. And here is just the top level posts for this particular profile.

And here is just the top level posts for this particular profile. I know that we used, uh, what was it, Tamara 45 or something in the previous episode. But it turns out Tamara doesn't have any replies. So, uh, this user, Tanner Monaghan, they have one reply. And if we look at this default page here, you know, that's all the top level posts, that works fine. But if we go to with replies, then we are going to see the same thing here.

But if we go to with replies, then we are going to see the same thing here. We have a repost, we have another repost, we have another repost. But then we get to this one here by Precious Stanton, Jr.. Uh, we can see that there is a reply. So this is where the reply is going to appear. But of course we need to display the replies. And I think one of the ways that we could do that is with a component.

And I think one of the ways that we could do that is with a component. But by doing that, I think what we need to do is kind of undo some of the things that we did in the previous episode, such as, let's find where we have our feed, and here it is right here. So we have this partial post view, and you know, that works fine, but I think we would be better served if we could do something like this so

but I think we would be better served if we could do something like this so that we would have a component called Post, and then we could have the post that we wanted to supply to that component. But then we could do something like this to where we could show engagement so that if we wanted to show or hide the likes, the comments and things like that, then we could control that there. But most importantly, in the case of the replies,

and things like that, then we could control that there. But most importantly, in the case of the replies, we could also show the replies in which case, yes, we want to show those replies. And I think this is going to be a better solution for us in the long term as opposed to using these partial views. I, I've gone with the partial views because they were easy to, to get up and running, but I think now we're to a point to where we need

because they were easy to, to get up and running, but I think now we're to a point to where we need to start shifting to components. So it's not really that big of a deal because we have most everything already in place. We just need to create this component. So this is what we are aiming for. So let's go ahead and create that. We'll use php artisan make:component Post. And let's open up the class file first.

We'll use artisan to make the components called post. And let's open up the class file first because we want those properties. We want the post, we want showEngagement and showReplies. So let's open up components and then post.php. And here we will add the public, oh, we can't call it post, let's call it postModel. And let's go ahead and let's include that in our use statement. So app\Models

in our used statement. So app models and then Post as Post model. So we have our post, then we'll have public $rule, what do we call it? showEngagement. And we'll set a default value to true. Let's say that we always want to showEngagement, unless if we don't. And then we'll have the showReplies, which we will initialize as false.

And then we'll have the showReplies, which we will initialize as false. And that will give us our component's properties. So that's now inside of our replies. Everything should work. I say that we didn't do anything with the markup. So we have this very simple markup for that. And let's open up the partials/profile/post.blade.php. Let's just take all of that and we will paste it inside of the markup for our Post component.

and we will paste it inside of the markup for our Post component. Now, we used item I believe in here, and all we really need to do is change $item to $post. That should get that working so that if we take a look at replies, attempt to re property avatar of null, why is that? No, um, let's see. Oh, it's because right here,

No, um, let's see. Oh, it's because right here, because we are also including the partials there. So, uh, we need to do this, we need to use our XPost here, and we want our post to be the post repost of, because this is where we nest the repost so that we could see that. And in this particular case, you know, we could say that showEngagement will be false because we don't necessarily want to show the engagement.

that show engagement will be false because we don't necessarily want to show the engagement for a quoted repost, but then we don't want replies. So we don't have to set that because we have a default value of false there. Now, I know we haven't implemented really the show engagement, but we can do that later. But that should fix that, I think, so that whenever we take a look at the with replies page, everything still works the same.

whenever we take a look at the withReplies page, everything still works the same. But of course we're not displaying any of the replies yet because our PostComponent that we just created doesn't take the replies into account. So if we go back to several episodes ago where we created the FeedItem and the FeedItemReply, you know, inside a FeedItem, we have the threaded replies here. So if we just copy that

we have the threaded replies here. So if we just copy that and we can go to our new Post component, we need to go all the way to the bottom. And right before the last div element or the last closing div tag, that's where the threaded replies go. Because if we look at the FeedItem, that that's where they go right there. Okay? So with that in place, now that we have the ability

that's where they go right there. Okay? So with that in place, now that we have the ability to control this, we can do if showReplies and then of course we need an endIf, but if that's the case, then we want to include everything. But you know, once again, while we have this partial view, I think it makes sense to extract that into a component. So let's create a new component called Reply. And this is going to work practically the same as a Post. So let's first of all, take the feed item reply markup,

And this is going to work practically the same as a Post. So let's first of all, take the feed item reply markup, let's copy that and let's paste that into the reply component. Now, there are several things that we will need to change here. The first of which is item, I want to use the term post. So we can do a search for item, replace it with post, and then that's gonna work. But two, you know, these are using all of the old properties.

and then that's gonna work. But two, you know, these are using all of the old properties before we actually had, you know, the models to work with. So avatar becomes avatar, URL displayName becomes displayName, and then the postedDateTime becomes createdAt. But then we have the handle and everything else is gonna work until we get to the counts. So we will have likesCount, then we will have the repliesCount,

So we will have likesCount, then we will have the repliesCount, and then finally we will have the repostsCount. So let's find that, and we will want to change that. But then of course we need to go to the class for our Reply components. Let's open that up. And for the most part, we want exactly the same thing that we have for the Post components. So let's take the constructor

for the Post components. So let's take the constructor and we will have the public post, but in this case, we just need post, we don't need post model because we can use app\Models\Post for the reply, and then everything else will be the same. And that should work. So if we go back to the Post component, instead of including this feedItemReply,

So if we go back to the Post component, instead of including this feed item reply, we will just include X reply to where the post is the reply. So that's all that we need to do. We don't want to show any other replies here. And yeah, that, that should work. So if we take a look at this, uh, we have an undefined variable item. item replies, and yes,

we have an undefined variable item. Item replies, and yes, because that should be host replies. So now if we take a look at this, this is the withReplies page. We have, you know, our top level posts, the reposts, then we have PreciousStantonJr. We can see that we have the reply by TannerMonaghan, but everything else is a top level. So now the last thing that I want to do in this episode, we,

but everything else is a top level. So now the last thing that I want to do in this episode, we, we set up the replies. I want to change the show view. I want to change it so that instead of using these partials, we use our new Host component. So we can practically just copy and paste. And that should be the only place that we do it. So we should be able to delete the profiles.post partial view.

So we should be able to delete the profiles post partial view. And if we take a look in the browser, everything should work as it did before our replies page works, our post page works. So that's in the next episode. Oh, hold on, there, we are displaying the replies to a post inside of our post page, and we don't necessarily want to do that. So in the next episode, we're gonna do several things.

and we don't necessarily want to do that. So in the next episode, we're gonna do several things. For one, we are going to set up more of the functionality for our new Post and Reply components so that we can show and hide the engagements, show and hide replies, which I think we've, we've pretty much already done that. But two, I also want to do something with the header because now we have two different views that essentially has the same thing.

because now we have two different views that essentially has the same thing. The header isn't going to change between the show and the replies, so we need to extract that as well. But we will do all of that in the next episode.