This concludes the favorite recipes part,
now it's time to make sure that we actually filter our recipes because keep in mind in category meals
screen, we're actually retrieving our filtered meals from our state
and right now of course in our state, that filtered meals property always holds all meals and never changes
and that's something I want to change as a next step.
Again, let's start by adding an appropriate action that starts by adding an identifier which I export
here and I'll name this set filters and set filters here as a text as well and create a fitting action
creator function set filters
and here I expect to get an argument with my filter settings, that should be an object in the end with
the isGlutenFree, isLactoseFree, isVegan and isVegetarian
data in it and I will return an action object where the type of course is set filters, so this identifier
and then the filters, that's my filter settings object, so this object with all the true or
false values for the four different filter criterias
we have. That's the action creator,
now what shall we do in the reducer? In the reducer, we now need to handle that new case,
so here before default, I'll add the case where I handle set filters
and for that you need to import the set filters identifier from the meals actions and in set filters,
the goal now of course is to update our filtered meals to reflect the filters set up.
Now keep in mind that this actually contained a filters key which in the end will be a Javascript object
which has something like glutenFree: true, lactoseFree: false and we want to reflect these settings in
our filtered meals array. So here, I'll have my applied filters let's say where I simply extract the
filters from the actions,
that's of course a step you could leave out,
I'm just trying to write understandable code which speaks for itself.
So I'm just extracting the filters set up by the user and we'll take care about dispatching this action
later
and then here, I'll set my filtered meals, create a new filtered meals constant based on my total meals, so
not the filtered meals but all the meals available and there, I want to filter them with the built-in
filter method
Javascript offers. Filter always returns a brand new array which is good because I don't want to edit
any existing array just yet,
I want to get a new array instead and that will be an array where it keeps all items for which this function
we pass to filter returns true and drops all items where we return false. This function will run for every
meal and then now in this function, we can go through all the filters the user set and check whether
that meal matches any of the filters and therefore should be dropped or if it passes all filters so
to say and should be kept.
So here we can check if filters.glutenFree and I simply expect that my filters, excuse me apply
filters, that this object I get has a gluten free key.
If that is true and my meal is not gluten free and hence I need to add an exclamation mark here, then I
know that this meal should be dropped, right? Because it is not gluten free but I have a filter that it
should be gluten free. So I will return false and I don't care about any other filters because it already
doesn't match this filter,
I can drop it. If we make it past this if check, we can check the next filter, applied filters lactose
free.
If that's true and my meal is not lactose free,
same logic as before with the glutens, I can return false and drop it.
Next if check, if applied filters vegetarian is set and my meal is not vegetarian,
so same logic as before again, I can drop it because I might have passed the other filters but if the
meal is not vegetarian but I am looking for vegetarian meals, then I should get rid of it. And last but
not least, applied filters.vegan.
If I'm looking for vegan meals but my meal is not vegan here and by the way, here I'm just leveraging
all these properties that are part of my meals,
if we have a look at our models, at the meal, there we do have isGlutenFree, isVegan and so on as properties
on every single meal, so every single meal has the information for which filters that should be included
or excluded,
so every meal has that and I'm just using this here in the reducer.
So therefore here in the vegan case, I also want to return false and only if I make it past
all these if checks I know I have a meal that matches all filters I set and there for now, I can return true.
I'm still inside of that filter method and I return true which means I want to keep that meal in my
filtered meals constant, which is my new array and now overall after deriving this filtered meals array,
I have to return a new state by copying the old state and then I want to override my filtered meals
here with the filtered meals I derived here. So filtered meals on the left of the colon is the property
in the state object,
so essentially this property and filtered meals on the right side of the colon refers to
this constant,
I can also name this updated filtered meals to be clearer about this.
This is how my state gets updated when filters get set.
Now of course, we need to make sure we also dispatch this action eventually.