00:00 All right, let's delete a lot of code. So starting from our UI right here, we can delete the use hydrated hook because that's handled for us by Conform. We no longer need the form ref, that's also handled by Conform.

00:17 The form ID, also handled by Conform. We can delete everything between here and there, my goodness, all handled by Conform. So the errors, the hydrated state, the error IDs, the use focus invalid, that use effect hook that we did, was packaged up by Kelly and put into a little hook.

00:36 We can delete that as well. All of that is gone. Yeah, Conform does a lot for us, it's awesome. So let's make our Conform config with use form, that's gonna come from Conform to React. And then we've got a couple of options right here. So a couple of things that we need to configure

00:56 as part of this is, first of all, the ID. Now the ID is actually optional, but you do want to specify it. And you can generate it from use ID. We're gonna call this, it actually doesn't matter as long as it's unique. So, and we only render one of these on the page at a time, so no editor is fine.

01:16 And then we also want to configure the constraint. So this is what controls the attributes, the HTML standard attributes on our form field. So because we are gonna provide Conform our schema, it will know, oh, I need required, I need a max length.

01:34 And so, but we need to convert our schema into those attributes. So that is done using this constraint option. And you have this get field set constraint, and you pass your note editor schema. So that turns the schema into those constraints. So then our fields will have those attributes on them.

01:54 Then we also want to specify our last submission. So as we're making submissions, this is how Conform gets our latest submission that has all the errors on it. And so we pass that submission there. Then on validate, so when Conform thinks it's time to validate our stuff,

02:13 we need to tell it what to do. And in our case, we're gonna take that form data object that it gives us, and we'll return a call to parse. This is again, coming from Conform to Zod. And we'll pass our form data, and our schema will be that note editor schema. So what this is gonna do for us

02:32 is it allows us to do client side validation of all of our stuff. So we don't even have to hit the network to do that validation. Now, sometimes, and we will eventually have some validation logic that happens server side only, and we don't want to have happen on the client.

02:50 And there is a nice mechanism to control that. But this comes with the benefit of not only giving a nice user experience for doing validation on the client, but also gives us the protection on the server because we're still parsing on the server. So that validation is gonna happen for us automatically.

03:09 The last thing is the default value. And so default value is just gonna be an object of all the default values we want. And that's gonna come from our note. So the note title and content. So that way, those can be prefilled. Now, with all of that, we are going to get a tuple of values.

03:29 We're gonna get our form and our fields. And the form is going to have the props that we want to have applied to the form. So let's get rid of all this stuff right here, and get rid of all this stuff right here, because all that's gonna be handled for us by Conform. So we just spread form.props,

03:48 and Conform will take care of all of the things that we need applied to our form. Awesome. And then instead of having the hard-coded ID for our note title, we can use fields.title.id. And then we can get rid of all this stuff. Holy smokes.

04:06 And now we're going to use Conform's utility for taking our field config and turning it into props appropriate for an input. So let's bring in Conform to React and bring in the Conform utility there. And so we say, hey, take that config for this title, turn that into props for our input.

04:26 And then we're going to get the error ID from our field config. So fields.title.errorid. And then we get our errors from fields.title.errors. And that all is gonna resemble what we've done so far.

04:45 So we're just using this library that kind of was made to reduce the amount of boilerplate that we have and enhance the experience even further than what we had done already. Okay, so we'll continue with this. Apply the same idea. So this is fields.content.id.

05:05 And then all of this stuff can go away and we can replace it with the Conform utility for our field for content. And then right here as well, whoops, we've got our fields.content.errorid. And then for our errors,

05:24 this is gonna be fields.content.errors. And then we are so close. We're almost there. Now it's our form.id. And this is gonna be our form.errors. That's for our form errors. And then for the button, remember this div is outside of the form.

05:44 And so these buttons need to be associated to that form. And so we had this form.id. We just need to swap that with form.id. And now we have successfully refactored everything that we had before to Conform, removing a lot of custom code

06:00 and getting ourselves just an enormous amount of benefit. So also, yeah, clearly getting rid of a couple of other things. So we could actually also delete this. We're not using that anymore. So let's save that. Let's make sure that things are still working. So I get that required stuff. Yeah, let's do that.

06:22 Boom. And we get our autofocus. So that is all still working. I'm still associating my inputs just like I was before. So it's still nice and accessible. We can still customize the error messages using the Zod schema. All of that will continue to work as it was before. And on top of this,

06:41 if we take a look at our network tab now, and I do my submission right here, you'll notice there was no network request made because the content is required. And all of this parsing and validating was happening on the client side. So that's awesome.

07:00 But we still have the validation happening server-side as well. So we're sharing this validation logic, which is pretty stellar, I must say. And again, all of this, like the default value is showing up and giving us our proper values. We can take a look at our input

07:19 and see that the attributes are all getting set properly. So we have our ID, we have the name, the form required, max length, and all of that. So everything is working the way that it should as far as that is concerned. And then our developer experience is just phenomenal. Check this out. Now, instead of content,

07:37 I want this to be the value. I don't know, that'd be kind of a weird name, but I changed that. And now all of a sudden I get a type error on my server-side code and a type error on my client-side code as well, my UI code. So, so cool.

07:55 So now that we have moved everything into schema validation and then we're using utilities that take advantage of that schema, we are just like the, we are masters of the universe. It's amazing. It's really, really cool that we have this capability using schema validation and tools that take advantage of it like Conform.