1
00:00:02,640 --> 00:00:06,640
This concludes the favorite recipes part,

2
00:00:06,690 --> 00:00:12,270
now it's time to make sure that we actually filter our recipes because keep in mind in category meals

3
00:00:12,330 --> 00:00:17,260
screen, we're actually retrieving our filtered meals from our state

4
00:00:17,370 --> 00:00:24,870
and right now of course in our state, that filtered meals property always holds all meals and never changes

5
00:00:24,870 --> 00:00:26,880
and that's something I want to change as a next step.

6
00:00:29,310 --> 00:00:35,910
Again, let's start by adding an appropriate action that starts by adding an identifier which I export

7
00:00:35,910 --> 00:00:43,830
here and I'll name this set filters and set filters here as a text as well and create a fitting action

8
00:00:43,830 --> 00:00:47,150
creator function set filters

9
00:00:47,190 --> 00:00:53,550
and here I expect to get an argument with my filter settings, that should be an object in the end with

10
00:00:53,580 --> 00:00:57,730
the isGlutenFree, isLactoseFree, isVegan and isVegetarian

11
00:00:57,730 --> 00:01:05,040
data in it and I will return an action object where the type of course is set filters, so this identifier

12
00:01:05,520 --> 00:01:12,000
and then the filters, that's my filter settings object, so this object with all the true or

13
00:01:12,000 --> 00:01:15,030
false values for the four different filter criterias

14
00:01:15,030 --> 00:01:17,880
we have. That's the action creator,

15
00:01:17,880 --> 00:01:24,900
now what shall we do in the reducer? In the reducer, we now need to handle that new case,

16
00:01:24,900 --> 00:01:30,950
so here before default, I'll add the case where I handle set filters

17
00:01:30,950 --> 00:01:38,900
and for that you need to import the set filters identifier from the meals actions and in set filters,

18
00:01:38,900 --> 00:01:47,580
the goal now of course is to update our filtered meals to reflect the filters set up.

19
00:01:47,590 --> 00:01:53,350
Now keep in mind that this actually contained a filters key which in the end will be a Javascript object

20
00:01:53,350 --> 00:02:04,630
which has something like glutenFree: true, lactoseFree: false and we want to reflect these settings in

21
00:02:04,630 --> 00:02:15,090
our filtered meals array. So here, I'll have my applied filters let's say where I simply extract the

22
00:02:15,090 --> 00:02:16,770
filters from the actions,

23
00:02:16,830 --> 00:02:18,320
that's of course a step you could leave out,

24
00:02:18,320 --> 00:02:22,730
I'm just trying to write understandable code which speaks for itself.

25
00:02:22,890 --> 00:02:27,990
So I'm just extracting the filters set up by the user and we'll take care about dispatching this action

26
00:02:27,990 --> 00:02:29,190
later

27
00:02:29,190 --> 00:02:40,740
and then here, I'll set my filtered meals, create a new filtered meals constant based on my total meals, so

28
00:02:40,740 --> 00:02:46,470
not the filtered meals but all the meals available and there, I want to filter them with the built-in

29
00:02:46,470 --> 00:02:47,280
filter method

30
00:02:47,280 --> 00:02:53,670
Javascript offers. Filter always returns a brand new array which is good because I don't want to edit

31
00:02:53,880 --> 00:02:55,470
any existing array just yet,

32
00:02:55,470 --> 00:03:02,370
I want to get a new array instead and that will be an array where it keeps all items for which this function

33
00:03:02,370 --> 00:03:08,850
we pass to filter returns true and drops all items where we return false. This function will run for every

34
00:03:08,850 --> 00:03:14,250
meal and then now in this function, we can go through all the filters the user set and check whether

35
00:03:14,250 --> 00:03:20,100
that meal matches any of the filters and therefore should be dropped or if it passes all filters so

36
00:03:20,100 --> 00:03:21,240
to say and should be kept.

37
00:03:22,170 --> 00:03:29,460
So here we can check if filters.glutenFree and I simply expect that my filters, excuse me apply

38
00:03:29,460 --> 00:03:33,920
filters, that this object I get has a gluten free key.

39
00:03:34,290 --> 00:03:44,200
If that is true and my meal is not gluten free and hence I need to add an exclamation mark here, then I

40
00:03:44,200 --> 00:03:51,220
know that this meal should be dropped, right? Because it is not gluten free but I have a filter that it

41
00:03:51,220 --> 00:03:57,250
should be gluten free. So I will return false and I don't care about any other filters because it already

42
00:03:57,250 --> 00:03:58,540
doesn't match this filter,

43
00:03:58,540 --> 00:04:06,220
I can drop it. If we make it past this if check, we can check the next filter, applied filters lactose

44
00:04:06,310 --> 00:04:07,150
free.

45
00:04:07,150 --> 00:04:11,820
If that's true and my meal is not lactose free,

46
00:04:11,830 --> 00:04:17,260
same logic as before with the glutens, I can return false and drop it.

47
00:04:18,810 --> 00:04:29,370
Next if check, if applied filters vegetarian is set and my meal is not vegetarian,

48
00:04:30,070 --> 00:04:34,930
so same logic as before again, I can drop it because I might have passed the other filters but if the

49
00:04:34,930 --> 00:04:40,990
meal is not vegetarian but I am looking for vegetarian meals, then I should get rid of it. And last but

50
00:04:40,990 --> 00:04:43,840
not least, applied filters.vegan.

51
00:04:43,930 --> 00:04:51,980
If I'm looking for vegan meals but my meal is not vegan here and by the way, here I'm just leveraging

52
00:04:52,220 --> 00:04:55,290
all these properties that are part of my meals,

53
00:04:55,340 --> 00:05:01,550
if we have a look at our models, at the meal, there we do have isGlutenFree, isVegan and so on as properties

54
00:05:01,640 --> 00:05:07,070
on every single meal, so every single meal has the information for which filters that should be included

55
00:05:07,070 --> 00:05:07,690
or excluded,

56
00:05:07,700 --> 00:05:10,940
so every meal has that and I'm just using this here in the reducer.

57
00:05:11,000 --> 00:05:18,170
So therefore here in the vegan case, I also want to return false and only if I make it past

58
00:05:18,230 --> 00:05:26,420
all these if checks I know I have a meal that matches all filters I set and there for now, I can return true.

59
00:05:26,540 --> 00:05:30,830
I'm still inside of that filter method and I return true which means I want to keep that meal in my

60
00:05:30,830 --> 00:05:38,390
filtered meals constant, which is my new array and now overall after deriving this filtered meals array,

61
00:05:38,810 --> 00:05:45,140
I have to return a new state by copying the old state and then I want to override my filtered meals

62
00:05:45,140 --> 00:05:51,740
here with the filtered meals I derived here. So filtered meals on the left of the colon is the property

63
00:05:51,740 --> 00:05:53,010
in the state object,

64
00:05:53,060 --> 00:05:59,540
so essentially this property and filtered meals on the right side of the colon refers to

65
00:05:59,540 --> 00:06:00,830
this constant,

66
00:06:01,110 --> 00:06:06,890
I can also name this updated filtered meals to be clearer about this.

67
00:06:06,940 --> 00:06:10,390
This is how my state gets updated when filters get set.

68
00:06:10,390 --> 00:06:13,570
Now of course, we need to make sure we also dispatch this action eventually.