Filtering with Computed Properties

[00:00:00]
>> So we have that app select working. We have it reporting to our parent, but we don't have it filtering quite yet. So that's the next step here. So I'm gonna go back, And we're gonna make a computed property. And we're gonna call that filtered restaurants. So we're gonna say, filteredRestaurants().

[00:00:28]
But we don't have the food data brought in from the store yet, we need to have actually bring the food data in order to, cuz right now, this app restaurant info is pretty brittle. It's bringing in the food data from restaurants. But let's say there's another page that has different kinda restaurants, or like you have a different zip code that has different information, or you wanna check multiple things.

[00:00:48]
Right now, it's like hard coded to just that one bit. And I'm not able to filter through it, or use it for different things. So we're gonna change that, we're gonna bring the data in as a prop. And instead, control it from the parent, we sort of how we did with the app, select, so we're gonna say, the map state.

[00:01:10]
And I'm going to bring this property into the computed area, and we're gonna say fooddata, And then, the filtered restaurants. What we're gonna do, is we're gonna say if (this.selectedRestaurant), so if there's something there, then what we wanna do is we wanna return this.fooddata.filter(el. And inside that el, we want to make sure that we're not matching exactly like, we did that a little bit in the last course where we made sure that we weren't matching exactly for capitalization, it could be uppercase, it could be lowercase.

[00:02:02]
We wanna make sure that it's not checking the exact thing, and then, it can be either one. So el.name.toLowerCase. There's a couple different ways of doing this. In the last one, I used a regex, and this one, I'm just making it lowercase, which is fine, cuz we're just really using it here.

[00:02:22]
So we're gonna return name.includes, And then, (this.selectedRestaurant). Otherwise, we're just gonna return this.fooddata. All right, let's see what we got here. We're not using it yet. [LAUGH] So what we need to do, well, actually, I mean, let's use the filtered data, filtered restaurants. So in their app restaurant info, we are going to go in here, and so far, we're just using food data.

[00:03:04]
And I mentioned yesterday, or I mentioned two days ago in the other course, that in terms of this, the way that we build this, because it's not item in items, and it's not static that, I can name this anything, and I don't have to update store, and menu items, and everything.

[00:03:21]
So I can just update that one piece of information. I no longer need this map state, I no longer need this food data, but I do need a prop, and in that prop, so what I need in props, is I need something like a data source. And then, whoops, data source, and the type will either be array or object.

[00:03:54]
And we won't have a default, and this, did I met messed up somehow, let me see, let's back. Okay, I'm not sure what I did, but it's back. And then, here, instead of the food data, we can say data source. So let's try this. We're gonna go in here, and we're gonna say, data source, because that's the prop that we're passing in.

[00:04:27]
And we're gonna say, filtered restaurants. So let's take a look. If we come back here, and we select a cuisine, or real pizza work, all that and dimsum, talk about eating tacos. So now, we're able to filter the grid. That's amazing. You might have seen a catch, I didn't do the same thing for the homepage.

[00:04:52]
Right now, on the homepage, everything's probably broken, because we're not passing anything into that data source that we need to. So let's go back to the homepage, and make sure that we fix that. So in the homepage, we've just got app restaurant info, and we're not passing in the food data.

[00:05:09]
So we need to say, the map state, and we're going to come here, and we should say, food data, cool. Actually, I usually do components first, and then, computed ordering. And so, now, we should be able to come back up. I think I didn't save something. Come back here.

[00:05:39]
I didn't pass it in. That's goofy. So that's what it looks like when it's broken. So we've got the data source, and we're gonna pass in the food data. Let's save that, and then, go back over. And now, it's, we have all of this. We have our restaurants.

[00:06:03]
This is now filtering correctly. So it's actually much more flexible. We have our app slick that we can use anywhere. We have our filtered grid, which we can also use anywhere, and we can reuse that component, all the live long day for multiple tasks, as well. So it's much more flexible.

[00:06:22]
I'm gonna get rid of this goofy pre-tag, [LAUGH]. And here we go. Let's go see if we deployed correctly. Site deploy failed. I didn't do the yarn add node, sass, sass loader piece. So let's go back to our code we can save, and then, we're gonna go over to our terminal.

[00:06:47]
And in the same spot, we have, says, where we are, okay. We got yarn add, node, sass, sass loader. And I have some bash, things to allow me to quickly add things so gi add in sass, loader, and that will both say git add dash a and git commit dash M, and then, GM will push it, and now, we'll wait for that to build, and see if it builds.