Photo Gallery Exercise

[00:00:00]
>> Go ahead play around with the photo gallery this time and I want you to go ahead and just maybe play around and say like, fetch only the albums that have that are even. If they pass that inside of the query params and then have that filter that list accordingly.

[00:00:16]
So again, just have a play with it for the next five minutes. I know it's a little bit short on time, but I do wanna make sure we get to some of the other critical topics that I want you all to learn about, so we'll see you all then.

[00:00:30]
So, first thing first, let's go ahead and open up our photos page and let's actually make sure it just loads up correctly. Fresh photos, okay, it is loading correctly, great. So we wanna do, as I said, the exercise was to basically filter on a param where basically if even is true, for example, then we'll only return the filtered photo gallery that only contains albums that are even.

[00:00:59]
So what we're gonna do here is we're gonna start by actually creating that computer property. I think that's always the most straightforward way of the doing this. So, I say filtered Photo Gallery, is a computed property that's gonna watch our photo gallery. But, we gonna do photoGallery.filter, and we gonna filter by let's see photo.

[00:01:20]
And so, we gonna say photo.albumId. And if the modulo 2, check it if it's equal to 0. This will make sure it's equal. And then what we wanna do then is we only wanna do this however if the route that, oops, that automatically imported something that it wasn't supposed to, route.query.even, yes, that should do the trick.

[00:01:47]
Just like that. And then if even it's true, great, otherwise we're just gonna return the entire photoGallery. We're not gonna filter any of it at all. So that's actually it, I need to also do .value here before that blows up in my face and then the other thing we need to do is we actually need to bring in our route.

[00:02:03]
So use route will be brought in here, just like that, boom boom boom and then now we can replace our filtered Photo Gallery just like that. And if we save that and then go back we should see, okay, everything's loading just fine and actually we should do to actually see if it's gonna work.

[00:02:21]
Cuz right now it's just a bunch of placeholder images, we actually can't tell. Let's just log real quick inside of the header. We're gonna have a p element, we're gonna say, filtered Photo gallery.length, and then photos, just like that. So, as we can see here, great, we have 5000 photos.

[00:02:41]
Now, if we go ahead and come in here and we say even = true, and hit Enter, not save. And we hit Enter, there we go. You'll see now, it loaded straight 2,500 photos, which makes sense cuz they evenly distributed it. So yeah, question?
>> Yeah, it's not a practice question, in terms of set up just like setting the query params manually, is it common practice to just use that two attribute of like next link or are there other practices for when you wanna set query params from inside the UI?

[00:03:14]
>> Yeah, so the question here is around how typically query params are set. And so, basically, I would say for the most part, I would expect that the two pass so, let me go back to navbar, that's the easiest way to show this. So let me actually update this nav item to say Completed Todos.

[00:03:30]
So this here is probably the simplest way to do it, I think it's what the user expects. And so, in case you're programmatically putting it together, this is where you would do like a computed property. And I would basically generate the string to be like if all these conditions occur, generate the params or like the query, and then just append it on to the Todo.

[00:03:47]
So basically just as to scaffold that real quick. Basically, we would be saying const completed, or let's call this todoQuery. And it would be like a bunch of things where basically we could be, completed = true. But of course, this might be contingent on the fact that we have a completedCheck = ref, check whether this is a Boolean or not.

[00:04:16]
And then from here, you could then say, this is a computer property that returns the string and will optionally then fill in this completed check for example, just like that. And so once you have this todoQuery, now that's like composed of this lot and normally will be a longer string right because we know that when you're filtering a form that can be a lot going on.

[00:04:37]
So then this todoQuery now has contained everything, it's reactive and because of that, you cannot pass it here basically, as like either way, but I usually like to do it es 6 ways. So basically, I would probably just, in this particular case, I might actually just + todoQuery like that.

[00:04:59]
It's probably what I would do. So we don't need the es 6. And that way, you basically get your dynamically generated query params, based on whatever reactive things you've tracked throughout your form.