مرور ایجاد کامپوننت هدر0:00
We are almost done with the profile. There's just a couple of things that we need to address. The first thing that I want to look at are the replies inside of the posts page, because remember, the posts are simply supposed to show the top level posts and any reposts, there should not be any replies, especially replies from other profiles. And this is where the automatically eager load relations is coming into play.
And this is where the automatically eager load relations is coming into play. Because whenever we fetched these Posts, we did not include any replies. So whenever we display the replies inside of our Post component, Eloquent is going to go ahead and fetch those replies because we've kind of told it to do that. So in this particular case, we still want to check if we want to show the replies,
Guard Reply Rendering0:50
So in this particular case, we still want to check if we want to show the replies, but we only want to show the replies if the replies are loaded. So we will call relationLoaded passing replies. And this way we won't see any replies inside of the posts page. But if we take a look at the withReplies page, we will still see the replies that we want because we loaded those from our query.
Toggle Engagement Buttons1:13
we will still see the replies that we want because we loaded those from our query. So therefore, everything is going to work as it should. The next thing that I want to address are the engagements. I want to only show them when we want to, and thankfully, you know, whenever we set up these components, we added a property to make that possible so that we have just showEngagement. All we need to do is inside of our Post component and inside of our Reply component,
All we need to do is inside of our Post component and inside of our Reply component, we just need to take that into account. But here's the thing, where do we wanna do this? You know, because I don't think we want to hide everything. You know, over here, the save and the share, we, we kind of want to keep those there, but the likes, the replies and the reposts, we should probably hide those. So inside of the post view, we just need to find
and the reposts, we should probably hide those. So inside of the post view, we just need to find where we want to do that. So let's see. The action buttons start here. So if we collapse some of these things, then that should be a little bit easier to find. So here's the button for the like, and here is the button for the comment. And then finally, here's the button for the repost. So this div matches that div.
And then finally, here's the button for the repost. So this div matches that div. Let's kind of organize these things just so that we can visually see what closing tag matches the opening tag. So this div right here is really what we want. I, I don't necessarily think that we want to hide this div, we just want to hide what's inside of it. So here we can check if showEngagement,
we just want to hide what's inside of it. So here we can check if showEngagement, then we will show the engagement. Otherwise we won't show the engagement, which means that when it comes, comes time to include a repost. Here we have set showEngagement to false. So we should immediately see that when we repost or quotePost, and here it is. Uh, we can see the quotePost, the likes and everything aren't there,
Uh, we can see the quote Post, the likes and everything aren't there, but that kind of threw everything off. So let's do this. Do we really need to be able to save? I mean, because eventually we will be able to navigate, uh, to these individual posts. And then from there, you know, we could save, we could bookmark, we could like, we could do whatever we needed. So ultimately, let's hide it all, hide the whole dgu thing.
like, we could do whatever we needed. So ultimately, let's hide it all, hide the whole dgu thing so that our end, if it's not gonna be here, that is a closing tag for this, which means we can collapse that. So that is the closing tag there. So we want our end if there, and if we take a look, sure enough that gets rid of that entire line and everything else looks okay. So great. We can now hide
that entire line and everything else looks okay. So great. We can now hide or show the engagement buttons and that's perfect. Now the question is, do we want to do that for the replies? And I guess the answer is yes because we do have that property. So let's just essentially copy what we did before. But I'm gonna change this so that our comments for action buttons is there. Okay, so we have that.
for action buttons is there. Okay, so we have that. We're gonna put the if above the action buttons, then we want to scroll all the way down until we find, okay, um, let's take a look here. So if we expand this, we have the save there. So we're gonna have a button, div, div, div in diff button, div, div, div end diff. So that should fix that. And of course, the only way that we can really test that is
So that should fix that. And of course, the only way that we can really test that is with our reply here. So if we set $showEngagement to false, then the reply, there we go. So that looks okay. So I, I think we're happy with that. I'm happy with that. You might not be, but I am. And that's good. So now what I want to do is this header, because we have the show, we have the replies
Extract Profile Header Component5:09
to do is this header, because we have the show, we have the replies and the header is going to be the same between the two. So I think what we should do is extract the header, but, but really not just the header. We also want the, uh, the navigation. So let's open up both the replies and the show and basically where the header starts. Thankfully it is this handy header tag. Then we have the navigation.
Thankfully it is this handy header tag. Then we have the navigation. We want to extract these things into, you know, we've used partials, but I wanna get away from partials and let's just start going with components. So let's make a new component called Header, but let's not call it just Header, let's call it ProfileHeader. And we want this only as a view, because I don't think we need any code behind as far.
And we want this only as a view, because I don't think we need any code behind as far as this is concerned. I just don't see that. So inside of this header component, we can take the profile header and the navigation and just stick it in there. So now we can have the XProfileHeader. We don't need to include, well, we do need
profile header. We don't need to include, well, we do need to include the profile, don't we? So let's do profile and we will provide the profile there. That should just work automatically. Let's open up the replies so that we can, uh, essentially do the same thing. We want to get rid of header and navigation, but we want to change, uh, a lot of these URLs
Replace URLs With Routes6:35
We want to get rid of header and navigation, but we want to change, uh, a lot of these URLs because some of these, you know, i, I just did / and then like the profile name, I would much prefer to use the the routes to do that. But let's make sure everything works okay between these two and it does, okay, so we can move on. So that, I don't think we have any other links here. And no, I don't see anything. So we are okay as far as our show
And no, I don't see anything. So we are okay as far as our show and replies, the header of course is gonna have a lot of links, but uh, let's see, cover URL is fine. Avatar URL is fine. Let's find where we have a link, where is a link, and I guess it's gonna be down here for the navigation. So we have replies and we have posts. So let's do this. We'll have our route profiles.show, and then we want the profile that we are working with.
We'll have our route profiles.show, and then we want the profile that we are working with that is going to be the URL for our posts. Then we need one for the replies. And of course those are the only links that we have thus far, at least as far as the profile is concerned. So we're gonna be fine as that. Let's double check to make sure, see that is going to the profile that is going to with replies.
Let's double check to make sure, see that is going to the profile that is going to with replies. So yeah, that's gonna work fine. Uh, now when it comes to, you know, displaying the links for the profiles inside of the post.blade.php, we'll also need the reply because we have some repetition there. And you know, maybe we need to spend some time looking at how we can kind of make these two things a little more combined or maybe not.
how we can kind of make these two things a little more combined or maybe not. Maybe we would just leave it as is. Probably just leave it as is. So the href for our profile, that is going to be show there. So we are good there. Let's just go to the reply because we're gonna have something right there. There's the profile. So we just need to find where those links are.
There's the profile. So we just need to find where those links are. There's another one right there. So let's go to the Post and here is that right there. And then we have another link there for the profile. So we will use that and there's profile there. And for the most part, that should cover pretty much all of the links, I would think. That way we are dependent upon our routes. We can change our routes,
That way we are dependent upon our routes. We can change our routes, which will automatically update the links for our profiles. And yeah, I'm sure we're gonna run across something that I didn't catch, but while we have an internal error. Alright, so this is inside of post.blade.php and oh yeah, it's because we don't have a profile in this case we have a post and a profile, so that that's kind of important. Um, so we need to change that. We need to change that.
and a profile, so that that's kind of important. Um, so we need to change that. We need to change that. And does that fix, yeah, that fixes that. So the reply is gonna be the same thing so that we get the post profile there, the post profile there, and the post profile there. So let's check and make sure that the withReplies works. It does. And that's all well and good. The last thing that we need to do as far as a profile is concerned is just
Next: Post Detail View9:44
The last thing that we need to do as far as a profile is concerned is just to display an individual Post, well, not just an individual Post, but any of the replies for that Post. Because once we have that, then we can focus on all of the other things that require an authenticated user. So yeah, then the next episode we will display an individual Post with its replies, and then we'll go from there.
post with its replies, and then we'll go from there.
