So now that we're here, we can actually look at improving the placement and it's as simple as playing
around with the top and the right position, because this will position it evenly both on iOS and Android
in terms of positioning on the card.
That's a good thing.
We know that it's going to be positioned on the right spot on both cards.
So twenty five.
Twenty five looks pretty good to me.
That's a good position in terms of being able to add and remove the favorite from the fever button.
But there's one tiny little thing here that we need to improve, and that is, well, right now we don't
know anything that comes into this component.
What this favorite component should take it every time is the current restaurant.
So we should pass the restaurant to the favorite and then it can determine whether or not it has been
favorite.
It once we get in the restaurant, what we can see here is that we can determine const.
Is favorite is equal to the favorites dot find of the restaurant in the list that place Placide.
Being equal to restaurant.
Police ID, and this will tell us whether or not it exists in the array of favorites.
And so what we'll know then is that, well, we can do more complex interactions.
For instance, if it is the favorite, what we can say here is do a heart, otherwise do a heart outline
heart.
Oh, heart outline.
That is one of the basic functionalities.
And then for color, what we want to do is if it's favorite ID do red, otherwise do white.
And so right now, we can see that nothing at all is favored it so now we need to add an arm press handler
in order to make sure that we can actually add things.
So this is going to expose a function where if it is not a favorite.
We're going to add to favorites the current restaurant.
Otherwise, we're going to remove from favourite's the restaurant that was Pastan.
And so with this, we have the full fledged functionality of the favorite button and we can see that
because when we click here now, it's added to the favorites, it's being added to the favorites in
every given circumstance.
That's amazing.
So right here, we can see, all right, this is looking good, this is looking good.
And we have all of our favorites selected now and we can select favorites.
And if we canceled all of our favorites or what we'll see here, console the log.
Favorites will do that length so that we can see the length of the array, what we can see here is if
we scroll to the bottom, it's going to be zero.
It's so it's five, and if we scroll to the top for three.
Too, and so what you can see here is that it's rendering the amount of times that the list is rendering.
So the favorite button, of course, has to render for every single restaurant.
And so it needs to determine for each individual restaurant if it's in the list or not.
And so if this were a list of one hundred thousand restaurants at any given point, this would be a
performance bottleneck.
We wouldn't want to run the is favorite function in this way with a dot find.
That being said, we're only finding against a small subset, right?
If we had a favorite story that was one hundred thousand items large, we're having a bigger problem.
But for now, this logic works just fine in terms of being able to verify the current instance against
the favorites array, because our favorites are a is going to remain small.
Now, as we gain a larger and larger list, there may be optimizations that we can make to this is favorite
logic, but that would be a premature optimization.
OK, so with that in mind, right now, we have a fully fledged feature we're able to add to the favorite
story.
So next up, what I would like to do is I would like to be able to view all my favorites in a list right
above the list for you when I click the icon over here.
So let's go and take a look at how that would look.