useTransition & Non-Blocking Updates

[00:00:00]
>> Scott Moss: First thing we need to do is we need to make a new actions file. We gotta call it events and that's where we got to create a function called CreateNewEvents. So, let's do that. In our actions folder at the top, we're gonna say events,
>> Scott Moss: Like that.

[00:00:23]
>> Scott Moss: Is gonna bring in my imports. There's really nothing here that you haven't seen yet. I think the only one that's a little different is his randomName thing. I didn't feel like making a mode. I was gonna do the whole modal route intercepting thing, but I'm just like, honestly, I just don't use this production.

[00:00:39]
I can't fake it, it's a cool feature, but I just never use it. So I didn't make a modal where you can type in an event name and do all that. Instead, we're just gonna default to some stuff. So all you do is click the button and the event gets created for you with good defaults.

[00:00:50]
But I could talk about the route intercepting, parallel routes combination and make a URL bound model, which is great in theory, but I just don't use it in production, so I just didn't wanna teach it. But yeah, this thing creates a random name. So yeah, let's make this function export cons, CreateNewEvents.

[00:01:14]
>> Scott Moss: It's gonna be async. I'm just going to await this. I'm just gonna delay it cuz it really moves so quick. I'll say at most make this two seconds, you pass a number to delay. That's the upper bound of how long it should wait.
>> Scott Moss: We want to get the user, we need the user, because we need to know who created the event.

[00:01:33]
So we'll say user equals await getCurrentUser.
>> Scott Moss: Like that, don't forget we need to put our use server at the top here.
>> Scott Moss: So we got that. And then we just want to go ahead and insert the new event into the database. So I'm actually just gonna copy this part right here, and I'll say this.

[00:02:05]
There we go, db.insert:events.
>> Scott Moss: Added a new one, set private defaults, gave it a random name, gave it a start date of Now, and we said it's this user ID. So you notice we're not returning anything right now. We'll talk about that. You might be thinking like, don't you wanna get this new event that you created and return it so you can get access to it?

[00:02:29]
Maybe I'll talk about what we're gonna do instead, how you would do this, and why you probably ,can't do it right now. [LAUGH] And even, why you don't really need to. It's kind of crazy.
>> Scott Moss: Okay, so we got that.
>> Scott Moss: The next thing is we have a nav component.

[00:02:50]
That nav component is where we're going to add a button that when you click it, will create a new event for you. It's pretty simple. So let's go do that. Let's go to our nav component up here. I'm gonna import our createNewEvent function, like so. I'm gonna import our use transition hook from React.

[00:03:20]
It's not React, not Next.js it's React like so. And then we need to make our transition. So we're gonna here I'm gonna say this use transition like this. And you get back a tuple. You get back a pending state, this is true if the transition has started, and then start transition is how you started.

[00:03:45]
So it's pending start transition.
>> Scott Moss: Like that, there we go.
>> Scott Moss: The next thing is, I I'm just gonna make a simple function for the onClick handler that just call start transition and then it creates the new event, okay? So I'll say handleClick. It's just going to start the transition, which takes a call back.

[00:04:20]
And then I'm just gonna say, go ahead and createNewEvent. Notice I'm not awaiting it.
>> Scott Moss: This is not an async function. At least not right now, it's not. It will be, we'll talk about that later, but now it's not. And then lastly, we just need to add in this little tool tip thing, and it should be good to go.

[00:04:49]
So I'm gonna add in this tooltip button component. Just make sure that the onClick is mapped to this onClick function we just made, and isLoading is bound to pending, so it'll show a loader when it's actually trying to create.
>> Scott Moss: I think that's it for that part, right there.

[00:05:19]
So now what we wanna do is test this out and let's see where it kind of falls apart. So now, I gotta start this again. I keep forgetting I stopped it. You see I keep typing button. I use button a lot.
>> Scott Moss: It's just faster. It's like way faster.

[00:05:45]
It's crazy.
>> Scott Moss: Okay, so now you have this button up here, it says New Event, okay? Let's add some logs so we can actually see what's going on, otherwise it'd be really hard to know. So I'll just say a log event saved.
>> Scott Moss: Saving of it, I guess you could do a trace here, but she's got time for that.

[00:06:18]
So do that. Click this button, it loaded. Something happened, we can go look. It says saving event, event saved. So it did, it went ahead and did all of that. Before I go and do anything, did anybody expect anything else to happen? If you just look at this dashboard, did anybody expect one of these things to have some new thing on it maybe?

[00:06:43]
>> Student: Yeah.
>> Scott Moss: All right, latest events. Maybe there should be another one here, right? Okay, here's a question. If I do a refresh, not a hard refresh, if I do a regular refresh, assuming the event got saved and assuming the query picks it up, will that show on the latest events?

[00:07:00]
>> Student: I don't believe so during the cache out. No.
>> Scott Moss: Let's see, I'm not doing a hard refresh.
>> Student: Yep.
>> Scott Moss: It's cache.
>> Student: It's cache.
>> Scott Moss: If I do refresh, it's there, right? Caching, it's crazy, but we don't want either one of those behaviors, we want it to show up after click the button that's what want, right?

[00:07:19]
Okay, let's fix that. So to fix that, we need to revalidate some tags, right? So first what tag is this? Let's go figure out what tag this is. So if we go to that slot, that slot is for events. That page uses the getEventsForDashboard function, that uses the dashboard:events tag.

[00:07:50]
So we're gonna revalidate this tag. So I'm gonna go back to our events function. I'm gonna go down here, I'm gonna import something called revalidate tag from next cache. And then I'm gonna say revalidate that dashboard events, okay? This might work or it won't [LAUGH]. Let me just do a heart refresh just in case.

[00:08:18]
And now I'm gonna create one, And it shows up, because we revalidated the cache, which triggered this to run the query again, therefore getting the latest data.