1
00:00:02,000 --> 00:00:04,000
So, to output the favorites

2
00:00:04,000 --> 00:00:06,000
on the my favorites page,

3
00:00:06,000 --> 00:00:11,000
we can go to this favorites page here, in the pages folder.

4
00:00:11,000 --> 00:00:14,000
And again, tap into our context here

5
00:00:14,000 --> 00:00:17,000
because on this page we now in the end wanna get

6
00:00:17,000 --> 00:00:20,000
all the favorites from the context.

7
00:00:20,000 --> 00:00:25,000
Now for this we can of course import useContext again

8
00:00:26,000 --> 00:00:27,000
from

9
00:00:27,000 --> 00:00:28,000
react

10
00:00:28,000 --> 00:00:33,000
and also import the FavoritesContext object from

11
00:00:33,000 --> 00:00:36,000
the store folder and there favorites context.

12
00:00:37,000 --> 00:00:40,000
And then we connect to the context

13
00:00:40,000 --> 00:00:42,000
just as we did it before

14
00:00:42,000 --> 00:00:46,000
we create a constant which then stores this context object

15
00:00:46,000 --> 00:00:50,000
and we call use context and past as context object

16
00:00:50,000 --> 00:00:54,000
we created in that context file to use context.

17
00:00:54,000 --> 00:00:58,000
And that gives us the current context snapshot then.

18
00:00:58,000 --> 00:01:01,000
Now we got our context here and that means that now

19
00:01:01,000 --> 00:01:04,000
from that favorites context

20
00:01:04,000 --> 00:01:06,000
we can get our favorites array.

21
00:01:07,000 --> 00:01:12,000
So (indistinct) here, we can now return let's say a section

22
00:01:12,000 --> 00:01:15,000
where we say in h1 tag

23
00:01:15,000 --> 00:01:16,000
my favorites

24
00:01:16,000 --> 00:01:19,000
and below that I wanna output a list of meetups.

25
00:01:19,000 --> 00:01:22,000
A list of my favorite meetups.

26
00:01:22,000 --> 00:01:25,000
For this we can recycle the meetup list component

27
00:01:25,000 --> 00:01:27,000
because this component does not care

28
00:01:27,000 --> 00:01:31,000
whether it's all meetups or a subset of the meetups.

29
00:01:31,000 --> 00:01:33,000
All it cares about

30
00:01:33,000 --> 00:01:37,000
is that we output items that have these properties.

31
00:01:37,000 --> 00:01:39,000
So we can import

32
00:01:41,000 --> 00:01:42,000
meetup list from

33
00:01:43,000 --> 00:01:46,000
the components folder meetups

34
00:01:46,000 --> 00:01:47,000
meetup list

35
00:01:48,000 --> 00:01:51,000
and then output that below the h1 tag.

36
00:01:51,000 --> 00:01:53,000
Meetup list like this.

37
00:01:55,000 --> 00:01:59,000
And set the meetups prop here

38
00:01:59,000 --> 00:02:03,000
equal to favoritesCtx.favorites

39
00:02:03,000 --> 00:02:06,000
because that is our array of favorites.

40
00:02:07,000 --> 00:02:10,000
Now if we do that, on that favorites page we see

41
00:02:10,000 --> 00:02:12,000
all the favorites we have.

42
00:02:12,000 --> 00:02:16,000
The problem just is that if I remove a favorite

43
00:02:16,000 --> 00:02:17,000
we don't see anything here

44
00:02:17,000 --> 00:02:21,000
which makes sense because I currently have no favorites.

45
00:02:21,000 --> 00:02:24,000
But we might wanna render some fallback message

46
00:02:24,000 --> 00:02:25,000
for this case

47
00:02:25,000 --> 00:02:27,000
And one way of doing this is

48
00:02:27,000 --> 00:02:32,000
that we define a little helper variable here content

49
00:02:32,000 --> 00:02:36,000
and we then check if favorites context total favorites

50
00:02:36,000 --> 00:02:37,000
is equal to zero.

51
00:02:38,000 --> 00:02:41,000
TotalFavorites is a never property

52
00:02:41,000 --> 00:02:43,000
we're managing in our context.

53
00:02:45,000 --> 00:02:49,000
And if that is zero, we know we have no favorites.

54
00:02:49,000 --> 00:02:54,000
Then all set content equal to let's say a paragraph

55
00:02:55,000 --> 00:02:59,000
where I simply say you got no favorites

56
00:02:59,000 --> 00:03:00,000
yet.

57
00:03:00,000 --> 00:03:01,000
Start adding some ?

58
00:03:04,000 --> 00:03:06,000
Else if we do have favorites

59
00:03:06,000 --> 00:03:08,000
I set content equal to

60
00:03:09,000 --> 00:03:10,000
my meetup list here.

61
00:03:10,000 --> 00:03:14,000
So in the end to, this line of code.

62
00:03:14,000 --> 00:03:16,000
And this might look strange

63
00:03:16,000 --> 00:03:20,000
storing HTML elements in variables

64
00:03:20,000 --> 00:03:25,000
but it's actually not strange than returning HTML elements.

65
00:03:25,000 --> 00:03:29,000
You can use JSX code anywhere, where a value is needed.

66
00:03:29,000 --> 00:03:31,000
We saw it in arrays

67
00:03:31,000 --> 00:03:35,000
in return statements you can also store JSX in variables.

68
00:03:35,000 --> 00:03:37,000
That is totally fine.

69
00:03:37,000 --> 00:03:40,000
And now we can simply output the value

70
00:03:40,000 --> 00:03:44,000
of that content variable in our returned JSX code

71
00:03:44,000 --> 00:03:47,000
to then have different values here

72
00:03:47,000 --> 00:03:49,000
depending on whether we have favorites or not.

73
00:03:51,000 --> 00:03:53,000
We now save this.

74
00:03:53,000 --> 00:03:55,000
I got no favorites yet here

75
00:03:55,000 --> 00:04:00,000
but if I add an item as a favorite, I see that instead.

76
00:04:00,000 --> 00:04:03,000
And if I remove it, we're back to this (indistinct) text.

77
00:04:03,000 --> 00:04:05,000
So this works.

78
00:04:05,000 --> 00:04:06,000
One important note though,

79
00:04:06,000 --> 00:04:10,000
if I add an item to my favorites and I then reload the page

80
00:04:10,000 --> 00:04:12,000
it will be lost.

81
00:04:12,000 --> 00:04:15,000
The reason for this is that our context

82
00:04:15,000 --> 00:04:17,000
is only stored in memory.

83
00:04:17,000 --> 00:04:19,000
Because we're only working with state

84
00:04:19,000 --> 00:04:23,000
and with constants here, it's not stored permanently.

85
00:04:23,000 --> 00:04:25,000
If you would want to store it permanently

86
00:04:25,000 --> 00:04:29,000
you would need to use some browsers storage here

87
00:04:29,000 --> 00:04:31,000
in the favorites context provider

88
00:04:31,000 --> 00:04:34,000
like local storage, for example,

89
00:04:34,000 --> 00:04:37,000
or store it on a server as well.

90
00:04:37,000 --> 00:04:40,000
I'm not doing that here because I wanna focus on this

91
00:04:40,000 --> 00:04:43,000
core feature of react context

92
00:04:43,000 --> 00:04:45,000
but that is something you could add

93
00:04:45,000 --> 00:04:48,000
if you wanna enhance this application.

94
00:04:48,000 --> 00:04:51,000
For the moment it's simply some temporary storage

95
00:04:51,000 --> 00:04:55,000
which survives as long as we are on this page

96
00:04:55,000 --> 00:04:57,000
but if we ever reload or leave the page

97
00:04:57,000 --> 00:05:00,000
our favorites will be lost.

98
00:05:00,000 --> 00:05:04,000
Our meetups won't because those are stored on a server.

99
00:05:04,000 --> 00:05:06,000
It's just something that is worth knowing.

100
00:05:08,000 --> 00:05:10,000
And now with that, that's almost it.

101
00:05:10,000 --> 00:05:13,000
As a last step I now just wanna make sure that

102
00:05:13,000 --> 00:05:18,000
in the main navigation we also see a batch

103
00:05:18,000 --> 00:05:20,000
next to the my favorites text

104
00:05:20,000 --> 00:05:24,000
that indicates how many favorites we currently have.

105
00:05:24,000 --> 00:05:28,000
And that simply means that in the main navigation JS file

106
00:05:28,000 --> 00:05:33,000
we also wanna connect to context and get values from there.

107
00:05:33,000 --> 00:05:38,000
So I'll again import use context here, from react

108
00:05:38,000 --> 00:05:41,000
and import my context object

109
00:05:41,000 --> 00:05:44,000
the favorites context from going up

110
00:05:44,000 --> 00:05:48,000
going up store favorites context

111
00:05:48,000 --> 00:05:53,000
and in main navigation we then get the favorites context

112
00:05:54,000 --> 00:05:58,000
by using, use context, and connecting that to

113
00:05:58,000 --> 00:06:00,000
the favorites context.

114
00:06:01,000 --> 00:06:04,000
And then here on the favorites link

115
00:06:04,000 --> 00:06:08,000
we can simply add a little extra span

116
00:06:08,000 --> 00:06:11,000
next to this my favorites text

117
00:06:11,000 --> 00:06:13,000
in which we output

118
00:06:13,000 --> 00:06:15,000
favoritesCtx.totalFavorites

119
00:06:16,000 --> 00:06:18,000
because that is a number

120
00:06:18,000 --> 00:06:21,000
managed in our context

121
00:06:21,000 --> 00:06:25,000
with the total number of meetup items in our array.

122
00:06:27,000 --> 00:06:32,000
And I'll give this span a class of classes.badge.

123
00:06:32,000 --> 00:06:37,000
Which is one of the classes prepared in this CSS file

124
00:06:37,000 --> 00:06:39,000
I gave to you earlier.

125
00:06:41,000 --> 00:06:43,000
And with this, we now have this badge here.

126
00:06:43,000 --> 00:06:47,000
And if we add items to the context

127
00:06:47,000 --> 00:06:49,000
that badge does update.

128
00:06:49,000 --> 00:06:52,000
And also if we remove items of course.