Build a Fullstack App with Next.js, v2 Greetings Component

[00:00:00]
>> Now we should start filling this stuff out. So first thing we wanna do is, let's do this greeting card here. So we're just gonna go top to bottom. Greeting card first. Actually we we have a sidebar, we should put our sidebar on. Let's try that if we didn't already.

[00:00:13] We'll just go ahead and do that, which is gonna be in the layout. So we can just, let's see. It's the best place to put that. We can just do it here next to the children. So let's bring our sidebar into the dashboard layout. You can say, sidebar, like this, and we'll probably have to adjust it, things like that, I gotta put a return on mines, I forgot.

[00:00:49] I would have broke if I didn't do that. There we go. Bring this over here, there we go. So we got a sidebar. Obviously the CSS for the flex needs to be fixed. I think this needs to be like a flex row whatever, but we're not gonna worry about design too much.

[00:01:16] It's in the middle because we don't have anything else on the page, so we'll have to add some more stuff to it. So we got our sidebar there, and here's our children for the page which is basically literally nothing. Okay, so now what we wanna do is start working on this greeting card, which we gonna put here where it says, greetings here.

[00:01:45] In the notes, I have pretty much all of that. So let's go to the next one. And basically the greatest component sits at the top of the homepage. And we gonna create that in the components, greetings TSX. So let's make that file. Opponents will say, greeting GSX. And this is gonna be a server component, cuz, like I said, it's going to need access to the user to get that information here.

[00:02:17] And it's not doing a mutation, it's not doing anything dynamic cuz it doesn't have interactions itself. This button can have interactions but not the entire component. So we don't need it to be a client component. It could be a server component where we just tried to get the user.

[00:02:35] So let's do that. So the strategy for that is gonna be, we just need to make a function. One, in order to get the user, we gotta verify that you're signed in. So we're gonna use that user from cookie function that we created inside of our oath file that returns this cookie function from next.

[00:02:55] And that's gonna give us the user. And then this user is gonna have an email, first name, last name that we can use. So then we'll just call that inside of our greetings component, and we should have access to the user. And we can just async it with that.

[00:03:11] So let's do just that. I was gonna bring in my imports here. In this file. And I'm gonna say cons get data. You don't have to call this, get data. I know I said this before earlier, but it's just the convention that people are making. Good data's gonna be async function.

[00:03:39] And it's gonna get a user from getuser from cookie, and it's gonna take cookies from next header. If you don't remember, get us from cookie as we made this already. It's here, it takes in our cookies. It grabs the cookie with our cookie name, it validates the JSON Web Token, and then it returns that as a user, and then it returns that user.

[00:04:12] Okay, so we got a user, we'll return them, then we can make our component. Or I'm just gonna say constant. Greeting equals async function. And then NS return or exports default greeting. And then the first thing we wanna do on here is, we wanna get the user so we have to await it get data.

[00:04:49] All right, so now that we got our user, we can go ahead and bind this to some of the JSX that we have, which is nothing really special. Actually, I'm gonna put a delay up cuz it is gonna be fast. Let's delay this, I wanna wait this a little bit.

[00:05:06] And let's just super exaggerate this coming back. So I'll say, let's delay this for, I don't know, four seconds, you pick a number. But I wanna just be super exaggerated. Okay, and then for the JSX, nothing special is bringing in here. These are car component that we created.

[00:05:42] Oops, stop doing that. And it's just going to take this user by his first name here, everything else is just hard coded text, it's nothing crazy. Give me suggestions on how to do proper parentheses and quotes. That's fine. Okay, any questions on this? All right, so we got that.

[00:06:20] So we can bring that into our page. Just go to page, right, where it says, greetings here. You can take that out and you can just use the greeting like that and you can save it. And if we go back, this thing is, where is this off? Looks like I might have not did the dot value thing, again, somewhere I'm guessing.

[00:06:59] Let's go fix that. I wanna say it's in auth, and it's probably gonna be here, line 34 for me where I validate JWT. That's gonna be dot value cuz I believe this is an object from the cookie. Yeah, it was. Okay, so we got that. So we get rid of the centering on our Flexbox cuz it's bothering me, which will be this one, Justify Center.

[00:07:44] There we go, okay. So we have it. When I refresh, you see how long it takes to refresh? Did you notice that at the start of refreshing? It's still refreshing, wow. You see that? Page still, I mean, you can't visually see anything on the page changing. But the page took that long to refresh because that delay that I have for four seconds, that's why it took four seconds.

[00:08:09] Now, this is cached. So it's showing me that if this wasn't cached, we wouldn't see anything here, it would take a minute. So what we wanna do is instead is, cuz we wanna show a loading state for when that greeting is loading in. But because the greeting is a component and not a page, we can't use a dot loading file that only works inside the app directory, so we won't get it for free.

[00:08:34] So we have to manually use our own loader. So what we're gonna do is, we're gonna make a component that we wanna show for when a greeting is loading, and then we'll manually tie that into the loader using a suspense.