Build a Fullstack App with Next.js, v2 Creating the Project Page

Transcript from the "Creating the Project Page" Lesson

[00:00:00]
>> So what we're gonna do next is, get this project page working. So when you click on the project, it actually goes to the project page where you can see the task. So, let's do this right now it'll just four, or four or five or whatever that is, it'll do that.

[00:00:13] So let's fix that. So for the project page and this is why I was saying we had to make the task card flexible. Because the project page is gonna be responsible for getting its own project based off the ID of the URL. And if we're already getting a project, we might as well just put include task true.

[00:00:35] So, if we're gonna reuse the task card, the project is already getting its own task, why do we need the task card to get the task again? It's not even getting all those, it's only getting the first five. So that's why I extended the task card to take in task as a prop so it can either give it a list of tasks or it'll go get the first five by default.

[00:00:53] So that's why we did that? So let's go make this so we'll go into, quit, we'll go to dashboard, the project ID page. And we'll just make our stuff in here. So export, default, async. Function, this will be the project page. There we go, we need to get data.

[00:01:37] That's gonna be async, gotta see if this the user first like always, so we're gonna await, Get user from cookie. Well cookies. This is gonna take an ID. It's gonna be a project ID. Then we can say const project = await. db.project.findunique or is it fine first? Yeah, it's findfirst, it's not a unique index.

[00:02:15] Find the first one. Where the ID is gonna be ID and the owner is gonna be user.id or owner id. Sorry, it's user id. And then we just wanna include all of our tasks. From there, we're gonna just return the projects. You can destructure if you want to, you can do whatever, it's not wrong or right there.

[00:02:53] Cool we got that. Now because this page is a dynamic page as in its parent folder has brackets around it, that's what makes this a dynamic page. We'll automatically get past params. Every page that's a page inside of a folder like this is gonna get params So we can say const project = awaits.

[00:03:25] Get data and we can pass an ID, which will be params dot whatever your folder name is. In our case, it's id. And then from there, it's really just some basic JSX. It's gonna bring in my task card. There we go. Task card. Yeah, okay. Yeah, so you're gonna get a tight script type here.

[00:04:21] Because it doesn't know how to handle components that return promises yet, there's a fix for it. There's a comment you can put in here for TypeScript to ignore this, but, it's fine. And these are just tripping because project might be null and we're not handling. Were not just handling everything, we're just fine.

[00:04:41] Okay, any questions on this? Let's try it out, so if we go here, click a little refresh, see our 60 frames per second spinner, click on one of these projects, boom, got a project with all the tasks. You can see there's a delay there though, right? It's not going there instantly.

[00:05:09] And these, they're getting cached now but at first they're not gonna be cached ahead of time cuz we didn't do get static param which you probably couldn't for this. So this is where you would probably show another loading thing or on the page level or just transition to the page.

[00:05:31] You might have some UI up here that isn't part of the task card like this part right here maybe, some other UI, and then put a suspense around the task card or something like that. Or take the data, the project fetching part from the page and move that down to a component and put a suspense around that.

[00:05:53] Now with the page can actually load in immediately, show the non-dynamic stuff, like the title, whatever, maybe even a counter or something of task, and then suspense and the new component that you made for the task. That's probably how you would do it or you would just do this.

[00:06:09] You would just put a spinner right here. It's one of the two. But as is the way we have to do is we have to put a spinner here cuz the page is being blocked, cuz that's what's getting the data