useWeek Composable Exercise

[00:00:00]
>> Ben Hong: You're gonna create a useWeek composable, just like I did useTasks. And to be honest, I would say, especially when you're first getting used to writing Composables, just move stuff in. Don't think too hard about like, is this utility, like if you have an instinct for it immediately like cool, like do your thing, like move it into a utility.

[00:00:14]
But otherwise, I mean, if it's related functionality, that's a good. That's a step in the right direction. Right. You can always keep refactoring later on. And so I guess I also then give a hint as well. There's a lot of date time stuff in there that like formatting dates that's super repeated in the code base.

[00:00:31]
So you can make some choices about how you might want to do that. So if you want to practice creating some util functions, that is there for you as well. Our goal for this exercise was to create a useweek composable because if you had a chance to take a look, you might have noticed there is a lot of stuff with the week happening in the code base.

[00:00:59]
It's pretty prolific. And so I think for this particular composable, I think this is a good point to demonstrate something that I didn't get to talk about earlier, which is the fact that Composables, we showed the ability with the use tasks that we were basically exporting some methods and we were using them.

[00:01:17]
But the important thing to remember about composables is they can have anything in it. So in other words, they can also have reactive state. And so composer composables are not only a good way to share methods and functionality, but also to share state between components. And it's in a lot of ways one of the more ideal ones, which we'll talk about in a bit.

[00:01:38]
So let's go ahead and I'm just going to look for. Let's see this looks. Let's see. Let me see if I can find like. So let's look at the weak moto maybe is there like we're looking for maybe a const weeks. There we go. Okay, see? So look, this week's ref is being used in a lot of different places.

[00:02:04]
And so what we notice here is that there's essentially pretty duplicated logic as far as like loading weak error. And then more importantly, you'll notice here that the fetch weeks here then up updates the value of weeks. And so to demonstrate actually what I was saying, let's actually make this particular composable real straightforward.

[00:02:24]
And so I'm going to do is I'm going to cut this out, I'm going to drop it inside of my use weeks composable. And then we just need to make sure we import ref from view and then just to keep the type, we just need to import type week.

[00:02:40]
And then there you go, there's my autocomplete from the types. And then we just need to export this and then believe it or not, just like this, you've now created this reusable piece of state that we can now go into each one of these pages and we can actually just straight up remove them.

[00:02:58]
And instead of having them there, we can just import weeks from our composable use week and, and that becomes that. This goes bye bye, this goes here, this goes gone, that goes there, that disappears and then last one. So if you couldn't tell with this particular one, this is one of the reasons why some people have started getting into auto importing.

[00:03:33]
Because my whole screen is full of imports at this point. And that can be a discussion for another time. But here what we just did is we took this thing that we know we want to share between six different components. And what's beautiful about the composables is that it does not care where your components live in relation to one another.

[00:03:54]
All right, props need them to be direct ancestors, or not even that's right, props needs to be direct children. If you do provide inject then you need to be an ancestor. Like there's a bunch of caveats with these, but composables, it just knows where to go and it shares it and it's good.

[00:04:10]
And so this was brought up earlier at the break and so this particular pattern is known, we'll talk a little bit more about this later. But it's called like a singleton because it's this one file that's being used and shared across multiple files. And that's the reason why it is, that's why you're able to share state.

[00:04:28]
And then so again just we're kind of priming you for. We will do some exercises on this in a little bit. But the alternative, right, if you were to do something like generate weeks, right? And then you exported this instead and you had like cons weeks, or let's say just to be clear, newWeeks = refWeek, like this, okay, you return newWeeks.

[00:04:57]
If you run this function in every component, it is going to generate you a new one every single time because it's running that function each time. Again, this is like kind of A sneak peek into what we will be talking about, which is these are probably like the two paradigms you have to consider when writing Composables.

[00:05:17]
Another thing that I do want to mention here as well regarding Composables is that I mentioned they're called composables, that we prefix them with views and then we put them in a folder called Composables. But I think what's important to clarify is that all of that is a chosen convention.

[00:05:32]
Vue isn't doing anything automagically that detects the stuff and then does some magic compilation or anything. Now there are libraries that, because they know Composables are a pattern, they know that the use prefix is a thing. You can basically point it and say, hey, for all my composables, just auto import them so that I don't deal with that.

[00:05:52]
So that's like an example of an auto magic thing that you could have a plugin do for you. But these are all chosen conventions. You could very well put this composable inside of the utils folder and assuming you update the path, it works exactly the same. What makes it a composable is the fact that you're using a ref here from view and that you're returning something reactive that will impact the state.

[00:06:18]
>> Speaker 2: Just so I'm clear.
>> Ben Hong: Yes.
>> Speaker 2: If you import your weeks into several different components, either on screen or in different routes, and let's say it was a counter and you incremented it.
>> Ben Hong: Yep.
>> Speaker 2: That value would be used everywhere.
>> Ben Hong: Correct.
>> Speaker 2: You would increment it on one component, one route, and it would be correct.

[00:06:39]
Reflected on the next page you visit.
>> Ben Hong: Correct, assuming you're using router link, cuz I think if you do a full refresh that then you're dealing with caching things. And there are easy, actually there's actually a pretty easy way around that, which I can demonstrate later. But yes, to your point, as long as you're not dealing with anything being busted cache wise.

[00:06:56]
Yeah. It's essentially like a global store that you can put anywhere as many times as you want. To be clear this, I guess I'll do this real quick, like this one. That's like the fundamental premise between them, yep. And then also for the sake of also being complete about the exercise, we're going to just create a quick util to show what that looks like just so you can see the difference.

[00:07:34]
The last one I mentioned was a date time utils, and we're not gonna go through the whole code base that would take a while. We're just gonna pick something that I fairly certain will be useful. And so I think we have like a format date, for example. So there's a bunch of stuff.

[00:07:50]
There's format date, format date range. I think date range actually was when I was looking to the code base was the simplest. So here, format date range, pretty standard. You get a start date, an end date, and then here you have, let's say here, exactly. Start date, end date, yep, locale, date, string.

[00:08:07]
So all these are identical. So it is ripe for refactoring. So let's grab that and then we'll go to our date time, and then we'll drop that in export. It looks like there's nothing magical about this. No need to import anything else. And so now that we have that, we can close that and we can import it at the top.

[00:08:32]
Once I get there, import it was format date range. There you go, gotta love autocomplete. And then there you go. And your utility has now been refactored. So that's there, that's there. That's good. This does not need to be redefined. So go all the way to the top, drop that in.

[00:08:53]
There you go. This does not need to be defined here as well. Voila. And so just like that, this is a great example of a date time util.