Imperative Mutations Exercise

[00:00:00]
>> Let's close this down so we can work on or get introduced to exercise 6, Which we will do now. So open up the readme in exercise 6 and stop the server for exercise 5, run node dev 6. Then we'll come over here, go to 4006, log in with kody@remix.run, kodylovesyou, and boom, we're back in the app, back in action.

[00:00:31]
And instantly, poof, we get the logout modal. So this is actually what we're gonna be working on. You may not have noticed, but there was a logout modal that pops up after I think an hour or something. In this exercise, we've reduced that to five seconds, and then you get another two seconds before this modal goes away and you get logged out.

[00:00:52]
So your job is to implement the auto logout functionality. We're doing a mutation that is imperative. The user didn't do anything, and so we're going to log them out automatically. All of the modal stuff, the timers, all of that is implemented for you. This is not a React workshop.

[00:01:11]
So your job is just to trigger the fetch that will make them be logged out. So I give an example of what actually how I've done something like this on my own blog. And my blog, I actually use a fetcher for this. In our case, we're actually doing a navigation, and so we're not gonna use a fetcher cuz a fetcher has no navigation.

[00:01:34]
We're actually gonna navigate them to the login screen. So we're going to be using useSubmit, which is the exact same as useFetcher, or it's the exact same as useFetcher.submit, except it actually triggers a navigation. So that's what we're gonna be using. And yeah, you're gonna be working in the app root.

[00:01:52]
So have an excellent experience on your exercise 6, and we'll see you on the other side.