All right, boys and girls. So now I wanna work on this comment button here. We gotta figure out what exactly should happen when I click on it. And here's what I'm thinking. If I go into our Post view component, you'll remember when we migrated this over from Simon and Jeremy's implementation, they had this reply form commented out. So let's take a look at that right now. And yeah, my guess is it's commented out.

So let's take a look at that right now. And yeah, my guess is it's commented out because it should only be displayed on the condition that you press that button. Alright, so my first step is to convert this reply form into its own view component. So let's do that now within the components directory. Let's add one called ReplyForm. All right? Paste all of that in as we do. And then I'm just gonna search for things

Paste all of that in as we do. And then I'm just gonna search for things that I can quickly clean up or make dynamic. So immediately it looks like I need access to the profile and the post. All right, define props. Give me the profile, give me the post. All right, so let's swap these out. The href is now going to be a route to profiles.show. Just give it the profile.

The H ref is now going to be a route to profiles.show. Just give it the profile. Once again, the binding here can be profile.avatar, URL. The alt is gonna be avatar per profile.displayName. And now again, it's the same process over and over. Magic is screen casting. I'm gonna update all of the remaining uh, references. All right, and now I think that's done. I'll let you take a look at this.

All right, and now I think that's done. I'll let you take a look at this. I don't see any other references and I've updated all of the routes. Next we have this giant SVG. We will extract that once we know what that refers to. Okay, so now if I go back to post view, uh, we can swap this out with our reply form. So we need to give it the post that we are replying to. And then the profile it wanted, uh, is us, right?

So we need to give it the Post that we are replying to. And then the profile it wanted, uh, is us, right? This is a form for us to respond to that Post. So how do we access information about us, the current User? Uh, well right now I don't think we can. So here's what we do in these situations. If I go into handleInertiaRequests, this is the middleware that was created when we ran that php artisan make:middleware, uh, command to many episodes ago in this section. And this is a section where we can share

command to many episodes ago in this section. And this is a section where we can share data across all pages. So as a quick refresher, if I just said $fu is $bar, well now for any page I load, I would have access to, um, excuse me, page props $fu Right? So in our case, let's share information about the authenticated user. So for example, something like this $user would be, and I could say $request->user(),

So for example, something like this User would be, and I could say request User, but just keep in mind this is converting the entire User to json. All of the attributes, and you probably only wanna send through certain pieces of data. So with that in mind, why don't we do this, let's say request User, uh, to resource. But it's possible we don't have a User, right? So let's only do that on the event in in the

But it's possible we don't have a User, right? So let's only do that on the event in in the event that we have a User. Otherwise it will be null. And then I'll send that here. Okay, so now this should throw an error, right? Because we don't have a resource class and we see no resource class, all right? php artisan make:model User --resource or the current user, whatever is needed. So for the current user, yeah,

or the current user, whatever is needed. So for the current user, yeah, just let's return whatever is relevant could be their id, could be their email, could be their profile. And by the way, maybe we should have a ProfileResource as well. And it looks like we already do. Look, I've already forgotten that. All right, so let's wrap that as well. ProfileResource, mink.

All right, so let's wrap that as well. Profile resource, mink. Yeah, so now if we switch back, we can swap this out. This is going to be, uh, the User resource. Okay? So check this out. Let's go into post view. And now the profile would be page props, do off, do user.profile. I think that's right. Let's switch to the browser and open up dev tools just to show you. And we should be able to see for props, we have off user

and open up dev tools just to show you. And we should be able to see for props, we have user, email, ID, profile. And remember, it's okay to show the email 'cause this is your email as the authenticated user. All right, this is what we want. So let's see. Now for any of these, we are showing the reply form. Of course we would toggle that and now we have the ability to fill this out. And when I click post, it would reply to

and now we have the ability to fill this out. And when I click post, it would reply to that specific, uh, post. Perfect. Okay, so let's get back to work. Return to our reply form. I'm gonna swap this out with a view form component and we'll import that. We don't need the CSRF token. Next, while we're here, these SVGs are killing me. So once again, yeah, this looks exactly like the post form.

Next, while we're here, these SVGs are killing me. So once again, yeah, this looks exactly like the post form. So what I'm wondering is, can we not just reuse the post form here? Is there a reason why this is different? I'm not sure yet, but these are things to be thinking about. So nonetheless, I can swap these out pretty easily with uh, image icon. And then this one was the video icon, right? Icon? Yeah. And I don't know if, if that's, if

And then this one was the video icon, right? Icon? Yeah. And I don't know if, if that's, if that's gonna be implemented in this series, that might be homework for you. Nonetheless, we get the exact same thing, but now we have a forum. Okay? So let's say hello world and we're gonna say hello world to you and let's see, will this work? And I think it does, but it's not overly clear.

and let's see, will this work? And I think it does, but it's not overly clear. But sure enough you can see that this incremented by one. Okay, so just a couple things. When we fill out the form, we should reset it on success. Uh, we should handle validation errors and of course we should hide that after you submit it. Um, so that we can continue on further though, should we redirect entirely upon completion? So for example, form is gonna go to postReply, post

should we redirect entirely upon completion? So for example, form is gonna go to postReply, PostController reply, and that's just redirecting us back to postIndex. I wonder if it would be helpful to go to like postShow at that point. And maybe Jeremy did that and I accidentally removed it. I'm not sure, but that's something we should think about and we can take a look at that once we implement the show page.

and we can take a look at that once we implement the show page. Okay, fine. So let's do this once again. Let's reset on success. That will clear out the form. So if we do another one here, maybe scroll down here. Absolutely right? We submit it and now, yeah, you can see, uh, that we have one reply there. We've cleared out the form.

that we have one reply there. We've cleared out the form and yeah, I really do think we should redirect to view the Post that includes all of the replies to it and we can take care of that as well. Next, just like we did with Post form, let's display some errors. So Reply form for the content. Yeah, I guess it could go right here. And then let's make sure that we accept the errors.

Yeah, I guess it could go right here. And then let's make sure that we accept the errors. So scope slots. I want the errors from the parent component. Okay, so next, let's just handle the toggling. So replyForm should by default not display. All right, so I could say show is false, and now if I come back, we don't see that at all. But when I click on this right here, again, presumably I assume that means we should open up that, uh, replyForm.

presumably I assume that means we should open up that, uh, reply form. So why don't we say on the reply button when you click on it, maybe we can do it on the outside showReplyForm should be set to true. And then down here we can simply bind to this. This is an easy way to handle this showReplyForm. All right, so now at the very top, let's define it. showReplyForm will be a view ref that initializes to false.

Show replyForm will be a view ref that initializes to false. Okay, give it a shot. So I don't see it, but if I click on this showReplyForm gets set to true, this reevaluates it, re-renders, and now we, uh, can see it. Let's try another one. How about this one right here? Or how about this one? Amazing. We submit it and now we do have one reply. Okay? And also maybe after we submitted,

We submit it and now we do have one reply. Okay? And also maybe after we submitted, we should toggle the form again. Uh, uh, I'm just not entirely sure if that's what they intended, but maybe that's what we're gonna do. So here's what we could do on reply form. Let's listen for an event like success. And then once again, we should say just showReplyForm equals false. Okay, so now I just need to make sure that we dispatch, uh,

form equals false. Okay, so now I just need to make sure that we dispatch, uh, or we fire this event called success. So here's what we could do once again on the form tag itself. And let's reformat even if only temporarily. So let's listen for when the form has completed or submitted successfully. And yeah, let's just, uh, emit our own event. Like let's just do emit success on our end.

And yeah, let's just, uh, emit our own event. Like let's just do emit success on our end. Let emit equals defineEmits. So this represents the, uh, events that this component might fire and that might be it, uh, reformatted, that's okay. Uh, but I think that might be it. So if we come back one more time, let's respond. How about to this one? Good. We submit it. Now we have two comments.

How about to this one? Good. We submit it. Now we have two comments. Now we toggle the form again, and I think this is actually pretty good. Alright, so now in the next episode, let's implement the page that actually shows the Post itself. And that way we can actually display all of the replies to that Post and then redirect to that page after, uh, you submit a reply here.

that post and then redirect to that page after, uh, you submit a reply here. I'll see you in the next episode.