All right, welcome back everybody. So now why don't we move our focus to the post form itself. So you'll remember in section two, Jeremy implemented this as a basic form, but since then it's been moved to a view component. We removed the CSRF directive, which means this just ain't gonna work. If we give it a shot, we get a 419. And again, that's gonna be related to the CSRF token validation.

And again, that's gonna be related to the CSRF token validation. Okay, let's get to work on this. Now, we already know that we have a PostForm component. We extracted that and sure enough, Jeremy created a form that makes a POST request to the post store endpoint. And it looks like currently that's just sending through the content itself. Alright, so that's gonna hit post

through the content itself. Alright, so that's gonna hit PostController and the store action. And yeah, why don't we just, uh, yep, this is what we want. Why don't we dd the request validated data? But of course, like I said, we're not currently performing CSRF validation, or at least we don't have a valid token, which means if we try this again, of course we will still get a 419.

which means if we try this again, of course we will still get a four 19. Alright, so here's a cool thing. If I switch back to Post form, the easiest way to get set up with forms using Inertia is to reference Inertia's Form component like this. At the very top, we're going to import Form from inertiajs/inertia v3. And now check this out. It's pretty cool. I just swap it out with the capital Form.

And now check this out. It's pretty cool. I just swap it out with the capital form. And of course this is referring now to an HTML form tag, but instead Inertia's form component, which you see right here. Now, as part of this, there's a, there's a big variety of, uh, properties that we can pass to it or props, but nonetheless, it will automatically now handle the CSRF token and validation. Come back, refresh. Hello world, give it a run.

CSRF token and validation. Come back, refresh. Hello world, give it a run. And there we go. We do dump that data. Alright, so we're sending through the content. All right, so let's switch back return to PostController and let's see what he's doing here. Jeremy is accessing the User's profile and then we are calling postPublish, and that sends through the profile and then the content for that.

and that sends through the profile and then the content for that. Real quick, what is that doing? So that's just, uh, a wrapper around post create, where it sets the profile. Okay. Looks fine. So once that's done, it redirects to a route called postIndex. So I'll show you a little tip by the way. Um, this is fine of course,

So I'll show you a little tip by the way. Um, this is fine of course, but there's also a helper toRoute function, uh, that makes this just a little easier to work with. I can say return toRoute('post.index'). So these are functionally equivalent, but I think this one just reads a little bit better. So we could do the exact same thing here and here and here. Anywhere else? Yep. Let's keep going. Anywhere else?

and here. Anywhere else? Yep. Let's keep going. Anywhere else? No, I think that's okay for now. Great. Next, um, is this okay? We return? Yeah. So I, I wanna give this a shot and with any luck it's just gonna work. Come back, refresh Once again, hello world. And with any luck, we will see our status below and we do. Awesome. Okay, so here's just a couple things to be aware of.

Awesome. Okay, so here's just a couple things to be aware of. Notice that I made a Post, but now because, uh, it's effectively being submitted as an Ajax request, uh, we receive the response, we update the page. We'll notice we are no longer resetting the form state. So Inertia has some helpers here, uh, that we can reach for. Let's switch back, return to post form. And now right up here I can say, well, what do I wanna do?

Let's switch back, return to post form. And now right up here I can say, well, what do I wanna do? Well, when I successfully, um, submit the form, then I want to reset the form state. And as it turns out, there is a resetOnSuccess prop that we can reach for. We can call it like that. Or you might even see something like reset on success. Either of those we'll do fine. So now, yeah, check this out.

Uh, either of those we'll do fine. So now, yeah, check this out. If we give it another try, it's still gonna work, but the form will be reset. So give it a run. And now, yeah, once again, it resets to its default state. Perfect. Just what we want. Now what about validation? Do we have any validation in place here? Hmm, I'm not seeing anything. If I go to PostController, we do have a Request.

Hmm, I'm not seeing anything. If I go to PostController, we do have a request and he's validating that the content is required. It can be any length, but no more than 280. So for example, what if we just say, well, at minimum you gotta give us 3 characters and let's just see what happens if we fail validation, we'll do 2 characters, cement. And yeah, right now there's no feedback in place. So that is something, um, they should have implemented.

And yeah, right now there's no feedback in place. So that is something, um, they should have implemented. Now we have a couple ways that we can handle this, but probably the easiest option is to access the errors directly off of the form component like this. Let's go to PostForm. And yeah, right here on the form we can say default. And these are, we're basically accessing, um, any props that are passed to this form component. And in this case, we just want the errors.

that are passed to this form component. And in this case, we just want the errors. Okay, so now, yeah, right below it, uh, I'm not sure if they have any system in place, but yeah, if we were just to say right here, uh, if errors for content, then we could say red alert. Uh, just to quickly show you, if I come back, we fail validation. Oh, it's still not working. That's interesting. So let's debug together really quick.

Oh, it's still not working. That's interesting. So let's debug together really quick. 'cause I, that should work. Let's come back. Let's give it a run. All right? Mm-hmm. Validation is failing. It does a redirect here, but the errors are not provided. That means on the server side the errors are not being passed. Hmm. Here's my guess. Let's come back.

being passed. Hmm. Here's my guess. Let's come back. Let's go into handleInertiaRequests. Do we have an issue with an import? Um, or extends the middleware. This should be responsible for sharing the errors and it does. Okay, so if that's set up properly, let's then go into bootstrap/app.php where we register the middleware, middleware app.

let's then go into bootstrap/app where we register the middleware, middleware app. Middleware we want. Okay, this is it. I think we want the web middleware group. Um, this, of course, Inertia should work, uh, exclusively with the web specific, um, group rather than the global stack. I think, honestly, I would've thought that would work for either one, but web is more appropriate here. So let's cross our fingers. Does this work? Yes it does.

for either one, but web is more appropriate here. So let's cross our fingers. Does this work? Yes it does. Okay, good. Whew. Um, okay, we got this. So now if we come back to our post form, yeah, now we can see the actual error. I could say if we want v-text is errors.content, just keep this as a one-liner. And yet, now if we try it again, we should see the content field must be at least three characters and maybe Simon can style that.

we should see the content field must be at least three characters and maybe Simon can style that for us a bit more nicely. We could, um, maybe red, uh, whatever they have in place there, maybe a little bit of margin, maybe make it smaller, I dunno. Whatever they wanna figure out there. Okay, so this is working. I feel good. Hello to all my Laravel buddies.

I feel good. Hello to all my Laravel buddies. We submit it and we are now making our first, uh, status post, which is great. Alright, so now in the next episode, I'd like to return our attention to the Post itself. For example, I can see right here, well, we're using that long timestamp. Of course, that's not appropriate. And it looks like currently all of these, the likes,

Of course, that's not appropriate. And it looks like currently all of these, the likes, the comments, the reposts, they're all zeroed out. So I would like to fix that and then start making them dynamic.