useSlot Exercise

[00:00:00]
>> Ben Hong: So your challenge, should you choose to accept it, is go ahead and look at either the way the Task card is or the Planner card. And so, those you'll see they're being looped through. So if you look for the V4 inside of the app, they got some pretty complex things going on there.

[00:00:14]
So go ahead and see if you can refactor that out so that you're using slots to basically have some actions, some of the text being rendered, and then play around with it. See if you can go ahead and render the content differently, rearrange it as you see fit through the parent rather than the child.

[00:00:31]
And then if it should make sense, go ahead and try using the Use slots helper function if you think it makes sense to hide certain things and whatnot. Our goal here is to create basically a Planner card. I called it New Planner Card at the time because basically, if we take a look at.

[00:00:52]
Let's see, if we go to V4, I had a weak, let's see, reflection page, settings page. See lots of opportunity for refactoring, lots of ripe opportunities. But anyhow, weak detail page, although. Here's the Planner page. I jumped all the way. Okay, and then we want this one in particular because this here, as we can see, is basically the card that displays.

[00:01:19]
Let's coordinate correspond this with what we're seeing. This corresponds with this particular card right here. So if we're taking a look at this, we can see that it's, I would say, roughly broken out into. Yeah, I'd say, if we're being generous, we could say two sections here because we have the tasks here that are basically showing all this stuff here.

[00:01:44]
And then we have basically stuff about the week here. So, and then I would say, though, this is a little bit, maybe more meta. So arguably you could make a slot here that, like, if you don't want to display this, that could be a choice, I think, for now, I think.

[00:02:00]
So, let's go ahead and do that just to keep it, just give us a little bit more options. And so, what I would do here is. All right, so let me take this and then [SOUND]. All right, let's close this stuff to make it easier to track. All right, so first thing we're going to want to do is going to create a new component and I'll call it New Planner Card, because this one is going to look different from the other one.

[00:02:24]
That's kind of the whole point of this exercise. So I'm going to copy this entire thing actually. Let's just collapse it. That'll probably be faster. Copy this and then drop that in here. Okay, lots of squiggliest. Lots and lots of squigglies. So first thing first, we definitely don't need this if statement at the top and then selected weak tasks.

[00:02:49]
So that's something we're going to need to pass it seems. So we'll define props already. And then so here we have an option by the way, to I think this is probably supposed to be an array. So let's see. Yep, this is a task array. So, for those, if you are new to TypeScript, this is one of the benefits of TypeScript is that you do get kind of cleaner type definitions to understand what you're expecting.

[00:03:12]
So I'm expecting an array. So just do, do, do do. So we'll just call it an array for now. We'll keep it real simple from a type perspective. Type array. And then required. True. Okay. And then basically so you might be thinking, okay then I'm just going to name this task and then we'll call it a day.

[00:03:35]
I would propose something to consider is I find that one off errors by the letter S happen a lot in terms of coding. It's just easy to get that off. So I actually usually like to just make arrays. I just append list instead. It's just a bit cleaner.

[00:03:50]
You just get fewer one off errors. Again, this is not a must do or anything. Just something thought I'd share. And then. Okay, so we have a task at this point. These are type errors. We're not gonna fight with TypeScript. That is not the point of this course.

[00:04:02]
But I think though, if I could let me see if I can cheat this a little bit prop type. So there is a way. I believe this. Let's see if this will work though. I'm totally wrong. Whoops, not here. That did work. Okay, so a little typescript snippet for you all to see is that again, if you're defining your props normally via Composition API, this is what you're using.

[00:04:38]
And then there is this ability in TypeScript called to basically to typecast, if I remember that correctly. And so the ads basically tells it like, hey, I know what it's supposed to be. And then so you need to use this prop type helper from view that then you pass in the type it's supposed to be.

[00:04:52]
That's all that's happening here. So I'll leave that snippet in here just because I think it's a nice one. To know. Again, just a little bit of typescript and we didn't go over this earlier, but there is like all of the types that are being used in this code base should be managed mostly in here.

[00:05:06]
So you can see here that all our tasks are defined right here. And so again, if you need a TypeScript interface, it's basically just an, rather than a type that's just a bunch of strings or kind of standard object. Standard values interface usually represents an object. And there's a whole debate between types and interface when it comes to objects.

[00:05:25]
But generally speaking, people use interfaces when it comes to objects from what I've seen. All right, so anyways, that little detour explained. Okay, so we got that in. Cool, cool, cool. And so all right, so now we mentioned that we want to break this up into, like I said, had three parts.

[00:05:40]
But let's see, this part's being looped. This is a button to expand stuff. Why do I feel like, okay, icon is expanded. Three more tasks show less v-if. Why do I feel like I missed something? V-if selected weak tasks border top. This looks like it's related. Yep, toggle task list.

[00:06:07]
Okay, what we can do is to start though, let's just do this. We have the select task. Then we have tasks here task list. And then is task list expanded? Let's just replace all these first. Is task list expanded? Okay, so then what we're clear here is we have something defining the visibility of something via here.

[00:06:32]
So we can go ahead and then say is expanded is probably what I would go with is a boolean. And then we'll default that to false just like that. And then this way it'll be easier. Now the only tricky part is what is this toggle task list doing?

[00:06:53]
So, we're gonna go back toggle task list. And so it looks like it's literally toggling whether it's visible or not. So honestly, that's not something we need to pass down. That is something theoretically we can just click on our own. So in that regard I just going to make a toggle expanded and then we're just going to say this is where it gets a little bit tricky because you should not be mutating your props.

[00:07:23]
So if I want to just. I'll follow that, I'll follow that for now. And so we can say we'll import computed from view. And then I'll say, this feels, that's fine. How do I want to do this? Okay, isvisible = ref(false), bring that in. Then again if we're doing this like the proper, like life cycle way, you're basically saying that, hey, when the component is mounted, you're going to take is visible that value and set it to the props.

[00:08:11]
Is visible. That's how you would like. Wait, is expanded. Thank you. Yep. And so then you have that. So then we could basically say is visible. Is visible like that. And then I usually like to put my mounted lifecycle hooks at the bottom. So then we can toggle expanded and.

[00:08:42]
Yeah, that'll do it. Okay, so then to see that that works, we can go down to the V4. When I find it. There it is. Okay, so we're gonna do is we're just gonna do new Planner card here. And this time we are going to say the task list we know that is selected weak tasks.

[00:09:13]
And then I think that's the only thing that I required is expanded. Yep. Default false. And let's see, are we doing anything interesting with that here? Hidden is task list expanded. Okay, so that means we do in this regard, we can say is expanded. It is equal to is task list expanded like that.

[00:09:39]
Okay, then we can refresh and then you can see failed to resolve component. Yeah, that'll do the trick. It looks like I dropped it in, but it did not import because. And the import type bites me again. Okay, now we have some other things we're dealing with. New Planner card, format time is not a function.

[00:10:07]
Where is that? Okay, got it. This will be relevant later. So we're just going to copy this. I am acknowledging that this is not dry code. This is just to also demonstrate some stuff we're going to be doing later. In fact, let me just verify there aren't any other errors.

[00:10:27]
No, okay, we're good. Is expanded by ISIS defined on the instance. But we see here. Here we go. There it is right here. So it looks like I took just a small segment of it. And so again, for the sake of just demonstrating what we what we did as far as in order to practice what we did.

[00:10:49]
So really this is the new Planner card. Honestly, I'm just going to call it body because that's really what we just did. So what are we changing? Yes, please apply that. And then new card. New Planner card body. New Planner card body. Great. Okay, now that we have that, then this is where we can practice exactly what we talked about.

[00:11:17]
So in this regard, so we could say here in this slot, this here we are clearly rendering like a bunch of save. I did too much. I want the slot to wrap around this Stuff. Yes, There we go. All right, excellent. And this slot, let's see, we are basically displaying the list of tasks.

[00:11:56]
So I can just call this name task list, to be honest. And then what we can do then is basically say, hey, look, on this slot we're going to provide, we're going to provide the task list. And so in this case, again, this is more for the practice and not because you technically have access to it already, but that's what we would do.

[00:12:19]
We would basically give the slot access to this thing and then that way when you're inside using it. Again, to be clear, this is a little redundant because of the fact that you have task list already accessed. This then gives you access to basically. And I'll just do it like this just so that we can just show that something's different.

[00:12:46]
So two things I did here that I didn't explicitly explain before in case you're new to it. One, this here, the pound symbol is a shorthand for V slot. The reason, and to be clear, it is only applicable on the template. You cannot use this shorthand anywhere else because it's only for v-slot.

[00:13:06]
Then pre here is a nice little shortcut for basically displaying data in a nice JSON way. If you did it without the pre and you just did it as P, you'll see it's very, very unreadable. So the pre is a nice little legibility thing that theoretically can you console log?

[00:13:23]
Yes, but I sometimes like to see my data on my ui. So this is something I use a lot just to make it a little bit more visible. So yeah, so you can see here we've exposed it. And then, yeah, that's basically that. And then if you really wanted to then practice the use slots, the way you would do that is you would say const slots equals use slots.

[00:13:43]
And then we could basically double check it and be like, hey, look, if slots taskless is being used, then render this, otherwise do not. And that kind of combines the two techniques and that way you don't have this random spacer. So, I guess also worth mentioning for those, if you're new to Tailwind CSS, sort of these sort of utility CSS classes, these things basically apply CSS like as little.

[00:14:10]
So this one says space vertically. I think this is going to be just two units of whatever that is. So that's what that is.