1
00:00:02,510 --> 00:00:05,000
Let's start by changing that star

2
00:00:05,020 --> 00:00:08,580
icon based on whether this currently is a favorite or not,

3
00:00:08,600 --> 00:00:14,390
I want to have that filled star only if it is a favorite and an empty star if it's not.

4
00:00:14,390 --> 00:00:19,040
So in the end in the meal detail screen, we need to swap that icon which we're rendering here based

5
00:00:19,040 --> 00:00:25,270
on the favorite status of this meal we loaded here. Now again, the

6
00:00:25,350 --> 00:00:32,040
problem here is we can find out whether that meal is a favorite or not in a very easy way in the component

7
00:00:32,040 --> 00:00:34,910
function but not really in the navigation options.

8
00:00:34,920 --> 00:00:42,010
So again, we'll need params to communicate between these two but overall, that's not too difficult.

9
00:00:43,620 --> 00:00:49,830
What I want to do here is I want to get my favorite meals with the help of use selector in the meal

10
00:00:49,830 --> 00:00:56,260
detail screen component function with the help of state and then state.meals.favorite meals,

11
00:00:56,270 --> 00:01:01,020
so I want to get all my favorite meals and now I simply want to check if that meal is part of the favorite

12
00:01:01,020 --> 00:01:01,380
meals

13
00:01:04,190 --> 00:01:12,410
and actually we can therefore refine this and even name this current meal is favorite and in the selector not just

14
00:01:12,410 --> 00:01:18,830
return the favorite meals but add a bit more logic in there and simply add a check where we call some

15
00:01:18,950 --> 00:01:23,300
which is also a built-in method which returns true if the condition which we're about to specify is

16
00:01:23,300 --> 00:01:30,170
true for at least one item in that array and there, I check for every meal that's in there, if the meal

17
00:01:30,320 --> 00:01:41,090
ID is equal to the meal ID I retrieve here and hence I have to swap lines.

18
00:01:41,260 --> 00:01:46,570
So here, I get the mealId of the meal where we're loading on the detail screen and then I check my

19
00:01:46,570 --> 00:01:54,290
favorite meals, if that meal ID is part of them which would mean that this meal is part of our favorites.

20
00:01:54,320 --> 00:01:59,600
So with that, we have this current meal is favorite information, now we need to pass it to the navigation

21
00:01:59,630 --> 00:02:07,010
options and again, we can do this with use effect, maybe down there. Just as before, provide a function

22
00:02:07,010 --> 00:02:15,020
here in an array of dependencies, in the function here I'll set props navigation set params to merge

23
00:02:15,050 --> 00:02:21,620
more data into my params and that is maybe the is fav param, name is up to you, which holds the current

24
00:02:21,620 --> 00:02:27,740
meal is favorite value so that value which we just derived and now a dependency of that function, of

25
00:02:27,740 --> 00:02:33,710
that use effect call I mean is of course current meal is favorite, when that changes, I want to forward

26
00:02:33,710 --> 00:02:41,170
the new information to the params and therefore to the header, otherwise this effect shouldn't rerun.

27
00:02:41,240 --> 00:02:48,740
So now back in the navigation options, we can retrieve that information here, is favorite can be retrieved

28
00:02:48,740 --> 00:02:54,960
from navigationData.navigation with the help of get param and there I name

29
00:02:54,980 --> 00:02:58,640
this is fav, here it is,

30
00:02:59,460 --> 00:03:01,360
so that's the name by which we can retrieve it.

31
00:03:01,370 --> 00:03:06,080
Now we have the is favorite information in the header and we can now use this to render a different icon

32
00:03:06,080 --> 00:03:06,610
here.

33
00:03:06,620 --> 00:03:12,260
So instead of always rendering iOS star, I'll have a dynamic expression here and I'll check if is

34
00:03:12,260 --> 00:03:13,610
favorite is true,

35
00:03:13,610 --> 00:03:17,440
if it is, then I want to use iOS star which is this field star,

36
00:03:17,810 --> 00:03:18,500
if it's not,

37
00:03:18,620 --> 00:03:22,220
I'll render iOS star outline and

38
00:03:22,220 --> 00:03:23,570
that will be an empty star.

39
00:03:24,730 --> 00:03:28,960
With that, we hopefully have a set up that works as expected.

40
00:03:29,020 --> 00:03:30,400
If I go to the spaghetti,

41
00:03:30,400 --> 00:03:32,760
now this is an empty star and if I click this,

42
00:03:32,770 --> 00:03:35,640
it's a filled star and it's part of the favorites.

43
00:03:35,650 --> 00:03:41,020
If I then go to the detail screen here, you see it takes a bit until the star is filled out here as well, we'll

44
00:03:41,020 --> 00:03:47,590
have to fix this. If I now click it here and we go back to meals, there it also updated and that's the

45
00:03:47,590 --> 00:03:53,660
magic of Redux, it updates one part of the application if something related changes in another part,

46
00:03:53,740 --> 00:03:58,570
that's exactly how it should behave here. So that generally works,

47
00:03:58,570 --> 00:04:05,890
the only thing that wasn't too beautiful is that this star here initially is empty and only gets filled

48
00:04:05,890 --> 00:04:08,640
out after this is loaded, so we can fix that

49
00:04:08,650 --> 00:04:15,760
but other than that, this is working as it should. Now to fix this initially empty star, again

50
00:04:15,880 --> 00:04:16,950
we can use a workaround

51
00:04:16,990 --> 00:04:21,400
I explained earlier for that initial header data.

52
00:04:21,550 --> 00:04:24,040
We don't want to wait for the first render to finish,

53
00:04:24,040 --> 00:04:29,140
instead we should pass this initial data into this component when we navigate to it.

54
00:04:30,090 --> 00:04:35,910
Hence it's time for the meal list again where we have this navigation action to also forward

55
00:04:35,910 --> 00:04:43,170
this is fav key already, so this key which I tried to extract here in the meal detail screen down there,

56
00:04:44,040 --> 00:04:50,580
get param is fav. I want to pass the current value when we load this component, when we load this screen

57
00:04:50,790 --> 00:04:55,680
here from inside the meal list which is the component which triggers that navigation to meal detail

58
00:04:56,390 --> 00:04:57,540
and of course there,

59
00:04:57,690 --> 00:05:03,390
itemData.item is a single meal but that doesn't hold information about whether that's part of our favorites

60
00:05:03,390 --> 00:05:04,070
or not

61
00:05:04,180 --> 00:05:08,460
but of course we can find out whether that's the case or not. In the meal list,

62
00:05:08,460 --> 00:05:14,360
we can also tap into the Redux store, not just from the screen components.

63
00:05:14,370 --> 00:05:22,260
So here I can also use use selector from React Redux like this and then in my component here, I can get

64
00:05:22,260 --> 00:05:31,560
my favorite meals with the help of use selector where I get my state and then return state.meals

65
00:05:31,560 --> 00:05:34,150
dot favorite meals to get all my favorite meals

66
00:05:34,260 --> 00:05:39,240
and now when we render a single meal item, we can use that to find out whether that meal item is part

67
00:05:39,240 --> 00:05:41,070
of our favorites. By the way,

68
00:05:41,100 --> 00:05:43,710
you can't use use selector in there,

69
00:05:43,770 --> 00:05:49,680
that would not be a valid usage because you must use React hooks only on the root level of your component

70
00:05:49,680 --> 00:05:53,950
function, not in nested functions or nested if blocks or anything like that,

71
00:05:53,970 --> 00:05:56,370
so using use selector in here is not allowed

72
00:05:57,430 --> 00:06:03,500
but we can use our favorite meals in there of course and therefore here, we can find out whether this

73
00:06:03,830 --> 00:06:12,890
is a favorite by simply checking the favorite meals and looking for the meal where its ID matches

74
00:06:12,890 --> 00:06:14,020
the 

75
00:06:14,090 --> 00:06:14,840
itemData.item.id,

76
00:06:14,870 --> 00:06:20,990
so the ID of the meal we're currently rendering. Therefore is favorite will hold the item we found

77
00:06:20,990 --> 00:06:21,320
there,

78
00:06:21,350 --> 00:06:27,290
alternatively we use some here which is a built-in Javascript method that will return true if any item

79
00:06:27,290 --> 00:06:29,930
in favorite meals matches this condition.

80
00:06:29,930 --> 00:06:35,570
So if is favorite is true, we know this item is a favorite and therefore we can use is favorite as a value

81
00:06:35,570 --> 00:06:40,300
for is fav which we pass as an initial param to the meal detail screen

82
00:06:40,460 --> 00:06:44,930
and now this flickering star which initially is empty should be gone.

83
00:06:44,930 --> 00:06:50,630
Now if I mark this as a favorite here and I leave this and I come back, it's filled out right from the

84
00:06:50,630 --> 00:06:51,550
start,

85
00:06:51,590 --> 00:06:56,660
also on the favorite screen of course. So that's that,

86
00:06:56,730 --> 00:06:58,830
this is how we can work with favorites,

87
00:06:58,830 --> 00:07:03,660
let's now make sure we show some dummy text here on the favorite screen in case we got no data to display

88
00:07:03,680 --> 00:07:05,400
otherwise and thereafter,

89
00:07:05,400 --> 00:07:06,960
let's take care about our filters.