00:00 So to be able to get a Toast message when I delete this, I need to go to the place that is responsible for deleting that. And that happens to be in our note ID route. And in here, what we're going to do is read the current state of our Toast session storage cookie and then set the value there. So here, to read the current state,

00:19 we're going to go grab our cookie header from request.headers.get cookie. And that's all web standard stuff, request headers. That's standard web stuff, which is pretty sick, to be honest. And then we're going to grab our Toast session storage. That is the utility that we made earlier.

00:38 We're going to call this our ToastCookieSession. So it's a session that's in the cookie. And then we can set the Toast. So ToastCookieSession.set, a property called Toast. And we're going to stick these values in there.

00:57 So it's going to be a success Toast. And the title is note deleted. And the description is your note has been deleted. And then we need to turn that object. We need to serialize that object and all the properties in that session into some sort of string that can be set as the set cookie header.

01:16 So we're going to say headers and set cookie. And then we're going to say await ToastToastSessionStorage, which is responsible for the utilities for managing these sessions. And we're going to commit the session that we just modified.

01:32 So ToastCookieSession. And that should get our header set when we do this. So if I delete this note, then boom, there it is right there. And that's right here. That's what it looks like. What's interesting is it's all serialized and stuff. It's also signed with our secret that we set.

01:52 But yeah, we're able to set this object. And then when we want to get that object, we can actually get it. And it will be parsed for us. And so the session storage manages serializing it down into a string, turning that into a set cookie header for us. And then we can deserialize it when we go to get that.

02:11 So if we look at our network also, let's look for the POST request right here. We will see right down here our set cookie header. So EN Toast equals that big long string with the config that we set as well. So path and HTTP only and same site, all that stuff.

02:27 So now the next trick is to, let's go back to our application right here so we can see that cookie. Next trick is to read that cookie so we can display something useful. So let's go to our root. That's where we're gonna read it. So let's get the cookie header. Cookie is request headers, get cookie.

02:45 And then let's get our toast cookie session from await toast session storage, get session. Let's pull that in from our util. And then we're gonna get the toast from the toast cookie session dot get toast.

03:03 And yeah, that's it, we're done. We just need to set that right here and then poof, save that. And we refresh and there it is, there's that note. So we've got a little bit of a problem here because now that every time we refresh, we're gonna get that.

03:21 And that's probably not what we want. But if I delete that, we're gonna handle that later. If I delete that cookie and then come over here, here we'll refresh, now that cookie's gone. But then I click on this, boom, the cookie gets set and the toast shows up. So we'll deal with the fact

03:40 that that toast is not going away later, but let's just review what we've got so far. So here we're reading the cookie to get what the current state of that cookie is. Then take that cookie and turn it into a session object with this toast session storage.

03:56 Then we set the toast value of that session to this object. That's the config for how we're showing these toast messages. And then we set the cookie so that gets put into the browser's cookies. And then in our root, whenever the root loader is called, we're gonna grab that cookie value.

04:16 We're gonna convert that into our session storage object and get the toast value out of that and pass that along to our UI. And that toast object right here is gonna be equal to this toast object. So it seems like magic because we're passing things from one file to another

04:35 and it is kind of magical, but it's pretty cool because it means that for all intents and purposes, at least this portion of things is kind of stateless. It's just like, what is the current state of the thing? I'm not gonna hang on to some global state or anything. The browser is managing all that for us. So yeah, cookies and sessions, pretty cool.