When I write software, I tend to focus more on the functionality. I want to get the thing working before I start getting into the details. And there are some details that we need to take care of. Most of the details are view related. Like for example, I want to focus on the social buttons. If we hover over the like and the repost, you know those don't change color and that's my fault because

and the Post, you know those don't change color and that's my fault because whenever we set up the conditional CSS, then I didn't take that into account. So we need to do that. But I also want to break these into individual components because it really doesn't matter if it's a normal Post or if it's a reply, the markup is the same and so therefore it just makes sense to extract those into components.

therefore it just makes sense to extract those into components and then provide the information that they need to display. So let's start with the Like component. We can just take that markup and cut it so that we can use php artisan make:component to make a new component. And let's call this LikeButton. And I don't see any reason to have a class for this. So this will be just a view component that's open it up so

And I don't see an A reason to have a class for this. So this will be just a view component that's open it up so that we can paste in the markup and there we go. Now the first thing, well the first thing I want to do is change this indentation so that it's a little easier to read there. And I want to change the class here because we always want the hover-text-pixel to be applied. Uh, we also need to get rid of the class attribute because the conditional class is going to take over that.

Uh, we also need to get rid of the class attribute because the conditional class is going to take over that. And we will essentially want to do the same thing for the text way down here. Now of course this component doesn't have access to the post and we can pass the post to it, but I think it makes more sense to just pass the information that it needs, such as we could have an active prop that would determine if, you know, we highlight the text. So we could use that there.

that would determine if, you know, we highlight the text. So we could use that there. But then it comes down to the counts. We could have a count prop so that when it comes to outputting the X like button, we would have the active, which is based on post has liked. Then we would have the count equal to the post likes count. And I also think that we need to provide the ID of the post

likes count. And I also think that we need to provide the ID of the Post because when someone clicks on the like button, they need to know what post they are liking or unliking. So now inside of the browser we can see that as we hover over the like button, it highlights and somewhere here we should find a post that we have liked. And maybe it's way, way down here. I thought we had one, but maybe we don't. Oh, well I'm not gonna scroll through all of these,

I thought we had one, but maybe we don't. Oh, well I'm not gonna scroll through all of these, but we do have some for a repost, which we can at least watch for. But next is the comment button. So let's just take that and let's use artisan to make another component called the ReplyButton. Once again, I think all we need is the view. We don't need a class for this.

Once again, I think all we need is the view. We don't need a class for this. So let's open up the reply_button.blade.php view. And this is going to be a little easier because we just have a count. We don't necessarily have a status or an active flag here. So I think that that's gonna work so that then we can say replyButton, and then we want the count to be the post->replies_count, and we should also provide the

and then we want the count to be the post replies count, and we should also provide the post ID as well. And then it comes down to the repost. And the repost is going to be very similar to the like button. So let's create our RepostButton component so that we can paste in that markup. And in this particular case, we need the active prop as well as the counts.

And in this particular case, we need the active prop as well as the counts. So if we look at the, like, let's just grab the CSS there so that we can just paste that in. Let's get rid of the class attribute. Let's also lessen the indentation. Okay, there we go. So let's replace all of the CSS that we need to. Then we are going to have the count and we need the active, and that should be it. So we can save that. And then we can supply the

and that should be it. So we can save that. And then we can supply the information we need. Repost button the count or let, let's start with the active is going to be Post hasReposted. The count will be postRepostsCount. And then once again, the ID for the post is postId. So let's do a sanity check instead of the browser. It looks like that that is working as it should.

So let's do a sanity check instead of the browser. It looks like that that is working as it should. Now I think we should do the same thing for all of the other buttons, the save and the share. And then once we get those completed, we will use those same buttons inside of the Reply component. So let's first of all create the save button and then we will create the share button. And I think for now, all we need to do is supply an ID

and then we will create the share button. And I think for now, all we need to do is supply an ID for these components because once again, if someone is going to save these or share them, they are going to need the IDs. So let's lift out that markup so that we can open up the SaveButton components. We'll paste that in so that then we can use the XSaveButton. The ID will be the post ID, and that's that. So that then we can take the share markup, just

The ID will be the post ID, and that's that. So that then we can take the share markup, just that whole div element. And that is X share button. The ID is the post id. And then we just need to open up share button. Let's paste in that markup. And there we go. So one less sanity check. If we take a look at these posts, we can see that everything looks like they did before.

If we take a look at these posts, we can see that everything looks like they did before. And even though we don't have the functionality for that, that's something that we might add at a later time. So now we just need to open up the reply.blade.php file for our component. And we're just gonna lift out this markup because it is the exact same markup. So we need to find the like button. And here it is. Here's the action buttons,

So we need to find the like button. And here it is. Here's the action buttons, and we will start with the like, let's get rid of that. We can go ahead and get rid of the comments since we know where that's gonna go. The same for the repost. We'll get rid of all of those so that then all we have to do is just, well, let's just lift this whole thing that makes that so much easier to do. And voila. There we go.

that makes that so much easier to do. And voila. There we go. We have our buttons, and then it comes down to the save and share buttons. So once again, we will delete markup so that we can just replace it with what we have, the save and the share components. We'll paste in. Let's line things up. And if we take a look inside of the browser and let's go to a profile.

And if we take a look inside of the browser and let's go to a profile. So we will click on our profile so that we can look at the replies and we don't get any errors. And that's really what I was after. Uh, I think we have a reply somewhere. Maybe we don't. I don't know. I thought we did, but we could also be looking at the wrong profile, in which case we'll just say that's everything works because it looks like everything works and that's great.

in which case we'll just say that's everything works because it looks like everything works and that's great. But there are still some other details that we need to tackle like the nav bar. And I also want to get rid of all of the partials and all of the views that we're just preliminary. If we aren't using them, we don't need them in our project. So we will take care of those in the next episode.