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

[00:00:00]
>> So we worked on the project cards, we talked about data fetching and different ways and all the trade offs of that and I keep stopping my server, turn that back on. Now, the thing underneath that is going to be this task lists. We'll get to the new project afterwards.

[00:00:19] But for the task list, it's just going to list all the tasks regardless of what project you're on. So that's what we want to do. So we need to first create the component. Then we've got to figure out what's going to get the data. Is it going to be the task list component or the task card component?

[00:00:35] Or is it gonna be the page that contains it? Anybody want to guess before we make it?
>> Page.
>> Why the page? No good reason. You just felt like same page [LAUGH]. Okay, I like it. We'll see. We'll find out. But think about it as we're, what would be

[00:00:54]
>> The component, it will be the task component.
>> It would be the task component. Why you say that?
>> Because you're gonna pass the project ID into the task component. And you're gonna go and get the task for that particular project unless you wanna bring the tasks down automatically with the projects.

[00:01:14]
>> No, I think what you're saying is accurate. So we should entertain that. Let's see what happens. So let's go to here. So go to your components folder, make a task card component and let's get that going. So, components, task, card and. We definitely want to get the data for the task card inside the task card component and that's because it's mostly self contained.

[00:01:52] They're all in the same UI elements. The page which renders the task card only renders one task card, it doesn't render each individual task independently like it did the project cards. The project cards were rendered individually from the page. So therefore the page was the one that was responsible for fetching the data, because it needed to know how many projects to render.

[00:02:13] In the case of the task card, all the tasks are self contained in the card itself. So it doesn't really It makes sense. It's not the page's responsibility to have to get that data, although it could, and it probably wouldn't change anything as far as like how fast it loaded up, but it will change what control you have over when it comes to, showing a loading UI and what order it loads.

[00:02:41] So let's just get started with that. So bringing our imports here, we're going to-- I'm just going to copy them over. There's so many imports. Getting our user from cookie, because you know we have to do that for our database queries, our cookies, we're using a button and a card, our task status Edom, and our database so let's work on that get data.

[00:03:01] So if we need to get data for all the tasks regardless of the project what does that query gonna look like? Well, first we got to get the user and that's always just going to be from get user from cookie passing and cookies. And then we need to use Prisma to be able to get all the tasks that are basically not deleted and excuse me, I wanna get all the completed ones.

[00:03:34] So, this is just, I'm sorry, I want to get the ones that aren't completed because if they're completed they should even show up. It should just be open tasks basically. So we're gonna say const tasks equals await DB dot tasks dot find mini Where owner ID is user.id.

[00:04:03] Without this owner ID field I think I mentioned this earlier, we'd have to query all the projects for the owner, for the user, and they get all the tasks for those projects. And we have to do all that in JavaScript. Or I guess we could do that in the database too, but it would be we'd have to query the projects for that.

[00:04:21] So by just putting that one field on the task, who does this task belong to? We can not have to query the project's table. Because otherwise the TAs wouldn't know which owner they belong to. They only belong to projects they don't know who the person is. But now they do, they do know who that person is, is the owner.

[00:04:41] So we got that, but not all right. So how that works? Yeah, so went down to much, silverware. So not status task status dot completed. So we don't want the completed ones and we don't want the ones that are deleted. All right, delete false, sorry. No, I think I will delete it true when it.

[00:05:18] No, it's delete false. I think we'll find out I forgot how I set it up in the schema. We'll either get it or we won't get it. And then I'm gonna limit how many I get, so I'm gonna put take and then a number, which is basically like limit.

[00:05:36] So take the first five. That's what that's saying. Only want five. And then I want to sort them and I can use order by for that. So I can say order by and then they have a due property. So when they're due and I want that to ascend.

[00:05:59] So the date gets older as the list goes down. So the one that's due the soonest will be at the top of the list.
>> So we're not specifying which project yet this belongs to when we make the query.
>> Yeah, so we just want to get all the open tasks for this user regardless of project.

[00:06:17]
>> We're limiting it to five.
>> Yeah, we only want to get the first five projects for this user that is not completed regardless of project.
>> All the first five tasks regardless of the project.
>> Yep.
>> And so the deleted we want is that like a double negative?

[00:06:40]
>> Yeah, I think this needs to be true, but we're gonna find out. I had it false for a reason and I don't remember why. So I'm gonna leave it false until it doesn't return something and then we'll put true cuz it makes sense to be true. But I think I had it false for a reason.

[00:06:53] I don't remember. Yes.
>> So is there a reason why we won't do find all the tasks or is this for just the initial load?
>> Yeah, this is just the initial load. This is not all the tasks for a project. That's when you click on a project.

[00:07:13] When you click on one of these, then we'll get all the tasks for that project. Yeah, this is one that's gonna be at the bottom. That's just like here are your next five do task that's it. Regardless of project that they're on these are the five that are due based off the due date that they have.

[00:07:37] Cool. Any other questions? No? Okay, so we got that. We can return the task, and that's what we'll do. We'll return the task here, we're going to make our task card component Like this. Async and then we're going to say task equals await get data. So typically we'd probably stop right here as far as like the data goes.

[00:08:17] But I know we're going to reuse this task cart in the project page when you click on these projects and it shows you all the tasks will just reuse that card. And that is going to have a different scenario on which it fetches data because that page as you will see, is gonna be able to fetch a project which can already get tasks.

[00:08:38] So, it's already gonna have tests. So I won't need the task card to also get tasks. When the project page itself will already have the task for that project. So, I wouldn't want to get the data here. So, I'm gonna to make this task card take in tasks as well.

[00:08:53] As a prop, if you already have tasks, then you can take them in. I'm going to rename this to data. And then if you already have tasks, then I don't wanna run this I'll say tasks or that. So either you give us some tasks or we'll just go get the tasks Does that make sense?

[00:09:33] Yeah. Like I said, you can pretty much use await anywhere you do synchronous code, and it just kind of works. If you wrap a parentheses around it, you can even do like what comes after it. It's kind of like if get data returned an object, you can put parentheses around it and start accessing the properties on it.

[00:09:50] It's kind of nuts. Okay, all right. We got our data. Everything after this is pretty much. Just standard JSX there's not much going on here. So I'm just gonna put this in here and then we can talk about the interpolated parts, but they're not really that interesting so.

[00:10:22] Keep going. Okay, so interpolated parts here Here we have this thing called title. So we're gonna have task card take a title as well. We have a button that doesn't really do anything. There's no unclick here, and interpolated values. All we're doing here is looping over the data, which is an array of tasks.

[00:10:47] And we're just making a new task here with the name and description. That's it. If there are no tasks, we just show a div that says no tasks.