In the last video, we saw how to implement add to favorites feature, we have created a favorites component
and then we have like, as you can see over the years, we have created this division where the text
add to favorites and with our heart logo that we got from the bootstrap icons, and then we would add
that favorite component.
And as you can see in the death of here, instead of movies, we are sending the favorites.
So what does this favorite content?
This period, basically this period is a state reactor you set up, and it contains the date of the
movie that are added to favorites.
So how to get that data like we'll be using this favorite function whenever the like, whenever a new
movie is added will be creating a new favorite list.
This is a new idea with all the previous favorites and also new favorite added.
So with that new, I will be setting the favorites array to this new idea and then we can zoom in that
maybe you can update the favorites list.
So know how to implement remove some filter similar to atmospheric we have to like, create a new component
for remove, remove from cabinet and then we have to create or do you know what areas are removed from
cabinets basically like remove from heritage, we have created a favorites component, but far removed
from favorites.
It is a kind of, you know, of like added function or a propertied operating.
So basically to the movie list we are sending movies is a coastal favorite, but the heading favorites
and then we'll send handle favorite click.
So whenever like remove from favorites is clicked, then we'll be sending a function as input and then
we have to write the code for that what the function should look like.
It should remove the the the particular movie that we are removing from the favorites from the favorite
list.
So how to implement that, we see.
So first things first, we now start creating that this remote favorite component.
They move.
Favorites.
Not Jan. six.
Insert this, I can create constant.
Constrained to move evidence.
So here I am using the bootstrap class.
So first, let me.
Create a remove from them in a text.
And Martin, minus initial margin, right, too.
This is a bootstrapped class.
They move.
Some.
Favorites.
So once this is done now, we can, like use the Bush up by going over it.
We'll see how to use that bootstrap icon.
Go to the bootstrap icon official documentation here.
Inside the search, you can search for remove.
So like basically, you can search for or you can search for cross symbol.
Are multiply.
So like, we need basically a remove kind of symbol like X.
So ever do such a thing or the other can say that on many things.
So, yeah, this is good, right?
Excess quit, this is what we usually hear the same thing, ActionScript.
So now we can use this.
I'm copying that gentleman and then I'm passing it over here.
So as you can see.
No, I'll just do that indentation pack so that it looks clean and neat.
So you.
Let me mentor here.
So that's just one more step.
So if you want, you can add this extra property by adding the build room.
So Phil really is a nice prop, you can check the documentation online below, consider even on.
The same thing I'll be using for this battle also.
So everything is perfect.
Oh, just let me do a small rendition audio.
Then.
Oh, yeah.
So now everything looks so clean and neat.
The remove from favorite component is done in the last step is we have to export.
Emile favorites.
So as one, as we like exploded and I will import this in that gorgeous.
What?
Remove favorites from companies directly won't hurt, so this is the good thing about which one should
have guts.
Sometimes the snippets available here, snippets available will help us further out of a locked reactor
code that we are using.
So now once we get this now, we can use it on it.
And then what this list?
Handle favorites, click whenever, like here, whenever a favorite is like whenever the movie list
is, click the division, then we are calling Add Favorite Movie, but here we want to remove in this
favorites.
But thing right here, as you can see here and we are clicking on it, we have to add it to the favorite,
but we in the heading his favorites.
The below movie list should contain remove some favorites, so now would be sending.
They move.
So I think that it's more of an ad to favorite ad favorite movie.
Yeah.
Remove.
Favorite.
Well, we.
So once that is done now, the favorite component.
Will be the same thing, remote favorite.
Remote parts.
And I'll be happy to advocate for this remove favorite movie.
And go ahead, create a new constraint for.
Remove.
Favorite movie.
It will take the movie.
And then now we'll be creating the process that Bill uses will use the filter function.
So what this filter does is that it will it will like it will follow certain condition that we write
inside the filter function and it will remove all the items that are present inside the array that we
are using filter upon and then returns the new array without doing the calibration that we want.
So let me show you.
Conch basically will be creating a new idea, construct new cognitive favorite list and then favorites.
So it will be the favorites that you can see such data that restored favorites upon and then now we
knew the printer function upon it.
Filter.
And then what we want to do.
So basically, we want to remove all the functions that have the IMDb I.D. that we clicked on remove
from private.
So I'll do that, try to take the favorite.
So this is the barometer favorite means the single item, like whenever the favorite like it, it is
basically like a far loop.
So when you start the filter function, it loops on each and every item of that.
So that item you are representing us favorite.
So if favorite, not I am debating.
Not a constant movie that I am doing.
I am deeply.
I.
That means.
The movie that we are taking, if it is not equal to the idea that we are clicking on that we have not
deleted from the party scene, there was an article.
The thing that we are clicking on and our favorite that I am, the item that is present at each stage
of the look.
Then we have the not deleted, but if it is present, then it will filter that thing.
Did you understand like when once you apply the filter option, if this condition is true, then it
will not filter that if this condition is false, then it will filter.
So when this condition will be false, whenever the movie that we are getting over here, I am leaving
it.
And then the item present inside the favorite movie list.
I bought that same.
Then it got a filter that so that is what we had basically doing anyway, filtering the.
Were at least based on the idea that we're getting from handed favorite looks.
So with this, we complete the remote favorite movie logic, the business logic.
But then we are basically now left out with the final step that is saving the favorites list and the
movies list where local storage, as you can see here, inspect.
Go to application here and the local storage.
I'm having my movies listed, the Star Wars The Favourite.
This is my favorite list president of the country Star Wars Star Wars Avengers.
Avengers Avengers and Barbara Lee.
So these are the favorites instead that I'm starting, so when I refresh, I still have my favorites.
Now I can search for movies and I know a new favorite.
And let me add this now you can see you can scroll down and you can see new movie and the local story
is getting updated.
So in the next video, we'll see how to implement the code part for this local storage and see the final
version of the page.