Revalidation & Client State Management

[00:00:00]
>> Basically, what we want to do is, we only get the analysis when it's first pulled down, right? But we instead want to get the analysis and we want to change it every time something new comes in. So what we need to do is basically make the entire analysis thing like a component, right?

[00:00:21]
So if we take, where does it start? I guess it starts kinda everything in here, all this is like the thing that's on the right. We need to make this a new component, so it's a client component. And then inside that client component, we can use state to keep track of analysis and then we can have it change when something comes in or basically it's a form.

[00:00:42]
We need to do that because right now the only way to get this to re-render is to do a revalidate or something like that, which is fine. We can do that too, but I think it'll be as mood. Actually, let's just try it, let's see what happens. So we can go into the API route and we can say revalidatePath, I think the path will just be journal.

[00:01:14]
/Entry.id, we can see what that looks like. I mean, if it works now, we can just do that, I'm fine with that. Let's see, so we'll let that load. I guess that should have made it happy, so we'll see if it changes. Cuz now we can't tell if it changed or not, and it was the same thing.

[00:01:41]
So I'll say, today was so great. Yeah, that's what I thought. It wasn't going to do it, I just refreshed that, by the way, it didn't do that, okay? Yeah, so we're just gonna move that to a client component, so let's do that. So I will go into this page here, we're just gonna pretty much grab all of this.

[00:02:13]
We're gonna create a client component, so I'll make a new component here, and I'll just call it the analysis component. Scholars do that and use client up top, like that. Cool Actually, let me just make sure I'm doing the exact same thing I had on the repo here.

[00:02:56]
I don't wanna do something completely different. What did I do here from that? That's right, I remember what I did there, I guess I'll stick to that. So what I did with the final version actually, I just put it all in editor versus just making another component. Since the editor was already a client component.

[00:03:20]
I guess that makes sense, guess we could just do that. Yeah, let's just do that, that makes sense because it'll actually be easier since the data is in here versus me having to pass it down. So let's do that, I'll just put it into the editor, I like that better.

[00:03:34]
So we're bringing this in the editor. Basically, all we need to do is go to the page and we don't even need. We just wanna take everything that has the border right here, just going to get rid of all that. We're basically gonna do everything we have here.

[00:03:52]
We're the grid and stuff, all this is just gonna happen in the editor now. Whereas the editor was only the editor, now the editor's gonna be the whole page. Does that make sense? Before it was just the text box, now it's gonna be the entire page, that's basically what we're doing.

[00:04:06]
So we're basically going to bring a lot of this stuff over to the editor, so let's do that. Let me copy that again, I'm going to go to the editor. We have this text area here, right? So I'm just going to paste that stuff in right now. Obviously, it's gonna break, that's totally fine.

[00:04:29]
And we're gonna do the same thing we had in the original page, which is just bringing I guess, in this case, just a grid stuff. So let's bring the grid stuff over, like that. Got our grid stuff, and then we'll wrap this text area and a div So it has a class name of cols-pan-2, just like it did in the other one.

[00:05:00]
And then for this one, should be good there other than the analytics data. Obviously, just not gonna work there, it's gonna break, that's fine I'm back on a page, I don't want a grid here. So I go to the grid, go to the call span stuff, It just have an editor.

[00:05:25]
Cool, also don't need to do any of the analysis stuff in here at all, he's get rid of that. I'm gonna use that because we're gonna do all an editor now, I mean you still want to make the call to get the data here are just that we're passing the entire entry to the editor And then I'm just gonna paste that right above my autosave, where now I can get the analysis, like that.

[00:06:03]
So that should get rid of those errors or they should pretty much render the same. It might be some CSS differences, but yeah, I'm asking, it looks pretty much the same. And then now that it's all in a client component, we can grab some state and do some stuff.

[00:06:21]
So I'll just stay right here for a second if you wanna check it out. Really, the only thing I did was take everything we had in this page as far as like the CSS the grid and stuff, and just applied it to the top level of this one.

[00:06:37]
And treat it text area like the editor and everything else was the same. Also, don't forget, I have the code on GitHub, you can copy that if you wanna take a look at it. So now I'm going to set up that state to get our analysis, so what we can do is make a useState.

[00:06:57]
So we can say, this is our analysis, we can set an analysis. UseState, it's default is going to be entry.analysis, like so, and then instead of, where is it that? Instead of using entry.analysis for the destructuring, we'll just use analysis. We'll pull from that, right? And then all we have to do is after this update, we could just say, yeah, set analysis to be.

[00:07:34]
This updated thing which I believe this will be a distructured data, actually. So this will just be data.analysis. And then now this array is bound to the analysis, which gets changed every single time we call update. Which should cause a re-render, which should change these values, and we should see some changes there.

[00:08:15]
First, as before, it was bound to the entry.analysis, which never changed because that came in as a prop from a server component that never re-renders, so that would never change. Now, it will change because this is where we call update. And we get back to update, which is on data.

[00:08:32]
Data is an entry, entry has a .analysis. So we change it, and calling this re-renders everything. So let's see what we broke. Today was so great. Okay, today was math, I had an just okay day, had better seeing worse. And let's see if something crashes here. Okay, so what do we have?

[00:09:10]
This thing says, cannot read properties of undefined reading analysis, line 25, let's see. It's probably something to do with this update here. So I already returned data.data, I was smart about it. I already knew I was gonna use it, apparently, so I don't need to destructure in this case.

[00:09:36]
It's like one of those times where you're like, all right, I'm going to put my keys up. And the house summer, so I don't lose them, and you forget where I put them up.
>> And where was TypeScript?
>> Yeah, where was TypeScript in all of this? [LAUGH] So we'll do that, see what happens.

[00:09:59]
Okay, so let's see here. This thing says, I think I know why this might be, but can I remove analysis as it's undefined? Yeah, so I think this just means we need to go to our API on the update, which is here, and we just need to make sure that.

[00:10:25]
It's now we're returning the updated entry which is fine we don't need to await this or actually that we do, so basically the updated entry won't have the new analysis on it, right? We just updated the analysis here. So you might think like, alright, well, I'll just do that really cool includes thing here and include analysis and then now it will have analysis on it.

[00:10:52]
That's true, but I think it will have the old one on it because we updated the analysis after this entry got created. So it'll be whatever the analysis was before, so we won't do that. So instead we need to send back this updated analysis here. So I'll just say data and then this will be, best way to do this is probably just spread over updated entry, and then you can say analysis, And then that's the updated thing like that.

[00:11:30]
That way, we still get back an object that is literally an entry plus an analysis property on it. That is the updated analysis, so it remains that entry shape and I'll have to change my code. If I were to sit back, I'll just send back an entry here.

[00:11:49]
And then also I'll make an object that says entry and it's the entry and I'll put another property says analysis that would break my code on the front end. Because it's not looking for a property called entry. It expects the whole object to be the entry, I don't wanna change that.

[00:12:05]
So I'm just making a whole new object that is the same thing as this. Plus this one field which my front end is expecting to be here. Did I spell that right? Now I feel like that's not spelled right. I guess that is right, I just can't spell it right like here.

[00:12:30]
[LAUGH] My what is bothering, there's a word just fixed that
>> You look at any word too long, it looks very weird.
>> I've been looking at this word way too long. I'm like that does not seem right. Analysis, I had to say it to myself, analysis, analysis.

[00:12:46]
Now that seems so weird. It was a couple years ago, I think I was doing that with rice. I was like, rice.-
>> Yeah, because you- [CROSSTALK]
>> So weird.
>> Almost normal word that you'd never question otherwise.
>> Yeah.
>> If you just look at it too long and you're like, what's going on here?

[00:12:58]
>> What is that? Yeah, that's happens, I don't know, Maybe it's a condition, I don't know.
>> It's so weird.
>> [LAUGH] you're cool. So it seems like it's working there, so then I'd like, you know, actually I lied. Today was so amazing, and let's see, it says I'm happy now.

[00:13:27]
Hey, it does. Today was amazing, my day, happy, so cool. That works, got the update going, everything's cool there.