00:00 Our first step here is going to be making it so that we actually render the theme that the user wants to have set in our form. So we're going to render a hidden input. So input type is hidden, and the name is going to be theme, and the value will actually be the next mode. So the value will be the value the user

00:19 wants to set their theme to. That next mode is going to come from right here. So our next mode will be the opposite of the current mode. So here, we're actually going to leave that comment in, and we'll let Copilot fix that for us. There we go. So the next mode is going to be the, if the mode is equal to light, then it'll be dark.

00:38 Otherwise, it'll be light. Awesome. Thank you, Copilot. And so now we're setting that in our form. And then also, let's add the name to be intent, and the value should be update theme. So that way, our action can differentiate

00:57 between multiple actions if we have multiple actions on this particular route. And with that, actually, we should be making a real call now, because it will be valid as far as conform is concerned. So let's go up to our action. We'll uncomment this and save that. And when I click on this, something interesting

01:16 is going to happen. We're going to get a full page refresh. We do not want that. But we can take a look at our request here. Let's scooch this over just a bit. And that request right there, that's a get request. So that is interesting. We had our string parameters.

01:34 We have the query parameters in the URL. That's definitely not something that we want. So your training should tell you exactly what we're missing. And the thing that we're missing is method post. So let's try this again, and we'll have another interesting thing happen. Let's take those off. We'll clear this out, and then I'll click on this.

01:53 We're still getting a full page refresh. But this time, we're getting a payload in our request, because it's a POST request, with a theme dark, and intent is update theme. And if I come over here, we're going to see there's our theme dark. That's the thing that was parsed. So interesting things all around. It's actually now halfway working,

02:13 but we don't want that full page refresh. And so we're going to use a fetcher. And that is going to be our fetcher, is useFetcher, coming from a Remix Run React. And yes, the generic will be type of action, very similar to the way that we do our useActionData and useLoaderData.

02:32 So with that now, we can provide the last submission for Conform to keep track of those things and set that to FetcherDataSubmission. And then we can update this form to be a Fetcher.CapitalForm. And that will prevent our full page refreshes.

02:52 So from here, let's clear this out, click on this. We're not getting the full page refresh anymore, but we are still getting this request. We're sending the theme and the intent, and we're getting that right here on the server as well. So let's review really quick, and then we can get on to actually doing something on the server.

03:12 So the first thing that we did was we added this hidden input that has the next value that we want to supply. And we also set the name and the value of the button so that the back end can differentiate between different actions or different intents in our action. And then we also had to determine

03:31 what the next mode would be. And then we also added this useFetcher to prevent the full page refresh and used the useFetcher for the form, as well as use the Fetcher to get the data back from the request. So the request will go out, the response will come back,

03:49 and that's what will go into the Fetcher.data property. And so we are getting close to being able to make this theme switcher thing work.