1 00:00:02,140 --> 00:00:04,440 So, to output the favorites 2 00:00:04,440 --> 00:00:06,480 on the my favorites page, 3 00:00:06,480 --> 00:00:11,480 we can go to this favorites page here, in the pages folder. 4 00:00:11,750 --> 00:00:14,890 And again, tap into our context here 5 00:00:14,890 --> 00:00:17,610 because on this page we now in the end wanna get 6 00:00:17,610 --> 00:00:20,800 all the favorites from the context. 7 00:00:20,800 --> 00:00:25,800 Now for this we can of course import useContext again 8 00:00:26,030 --> 00:00:27,530 from 9 00:00:27,530 --> 00:00:28,520 react 10 00:00:28,520 --> 00:00:33,360 and also import the FavoritesContext object from 11 00:00:33,360 --> 00:00:36,743 the store folder and there favorites context. 12 00:00:37,800 --> 00:00:40,540 And then we connect to the context 13 00:00:40,540 --> 00:00:42,600 just as we did it before 14 00:00:42,600 --> 00:00:46,260 we create a constant which then stores this context object 15 00:00:46,260 --> 00:00:50,420 and we call use context and past as context object 16 00:00:50,420 --> 00:00:54,520 we created in that context file to use context. 17 00:00:54,520 --> 00:00:58,530 And that gives us the current context snapshot then. 18 00:00:58,530 --> 00:01:01,980 Now we got our context here and that means that now 19 00:01:01,980 --> 00:01:04,300 from that favorites context 20 00:01:04,300 --> 00:01:06,453 we can get our favorites array. 21 00:01:07,730 --> 00:01:12,480 So (indistinct) here, we can now return let's say a section 22 00:01:12,480 --> 00:01:15,070 where we say in h1 tag 23 00:01:15,070 --> 00:01:16,970 my favorites 24 00:01:16,970 --> 00:01:19,930 and below that I wanna output a list of meetups. 25 00:01:19,930 --> 00:01:22,300 A list of my favorite meetups. 26 00:01:22,300 --> 00:01:25,240 For this we can recycle the meetup list component 27 00:01:25,240 --> 00:01:27,610 because this component does not care 28 00:01:27,610 --> 00:01:31,636 whether it's all meetups or a subset of the meetups. 29 00:01:31,636 --> 00:01:33,380 All it cares about 30 00:01:33,380 --> 00:01:37,023 is that we output items that have these properties. 31 00:01:37,920 --> 00:01:39,700 So we can import 32 00:01:41,010 --> 00:01:42,680 meetup list from 33 00:01:43,720 --> 00:01:46,210 the components folder meetups 34 00:01:46,210 --> 00:01:47,270 meetup list 35 00:01:48,130 --> 00:01:51,420 and then output that below the h1 tag. 36 00:01:51,420 --> 00:01:53,653 Meetup list like this. 37 00:01:55,630 --> 00:01:59,090 And set the meetups prop here 38 00:01:59,090 --> 00:02:03,010 equal to favoritesCtx.favorites 39 00:02:03,010 --> 00:02:06,173 because that is our array of favorites. 40 00:02:07,460 --> 00:02:10,830 Now if we do that, on that favorites page we see 41 00:02:10,830 --> 00:02:12,930 all the favorites we have. 42 00:02:12,930 --> 00:02:16,480 The problem just is that if I remove a favorite 43 00:02:16,480 --> 00:02:17,820 we don't see anything here 44 00:02:17,820 --> 00:02:21,620 which makes sense because I currently have no favorites. 45 00:02:21,620 --> 00:02:24,720 But we might wanna render some fallback message 46 00:02:24,720 --> 00:02:25,780 for this case 47 00:02:25,780 --> 00:02:27,740 And one way of doing this is 48 00:02:27,740 --> 00:02:32,070 that we define a little helper variable here content 49 00:02:32,070 --> 00:02:36,430 and we then check if favorites context total favorites 50 00:02:36,430 --> 00:02:37,733 is equal to zero. 51 00:02:38,760 --> 00:02:41,360 TotalFavorites is a never property 52 00:02:41,360 --> 00:02:43,453 we're managing in our context. 53 00:02:45,630 --> 00:02:49,470 And if that is zero, we know we have no favorites. 54 00:02:49,470 --> 00:02:54,450 Then all set content equal to let's say a paragraph 55 00:02:55,570 --> 00:02:59,190 where I simply say you got no favorites 56 00:02:59,190 --> 00:03:00,023 yet. 57 00:03:00,023 --> 00:03:01,737 Start adding some ? 58 00:03:04,620 --> 00:03:06,510 Else if we do have favorites 59 00:03:06,510 --> 00:03:08,500 I set content equal to 60 00:03:09,570 --> 00:03:10,830 my meetup list here. 61 00:03:10,830 --> 00:03:14,960 So in the end to, this line of code. 62 00:03:14,960 --> 00:03:16,760 And this might look strange 63 00:03:16,760 --> 00:03:20,040 storing HTML elements in variables 64 00:03:20,040 --> 00:03:25,010 but it's actually not strange than returning HTML elements. 65 00:03:25,010 --> 00:03:29,880 You can use JSX code anywhere, where a value is needed. 66 00:03:29,880 --> 00:03:31,600 We saw it in arrays 67 00:03:31,600 --> 00:03:35,730 in return statements you can also store JSX in variables. 68 00:03:35,730 --> 00:03:37,380 That is totally fine. 69 00:03:37,380 --> 00:03:40,410 And now we can simply output the value 70 00:03:40,410 --> 00:03:44,570 of that content variable in our returned JSX code 71 00:03:44,570 --> 00:03:47,280 to then have different values here 72 00:03:47,280 --> 00:03:49,833 depending on whether we have favorites or not. 73 00:03:51,660 --> 00:03:53,010 We now save this. 74 00:03:53,010 --> 00:03:55,330 I got no favorites yet here 75 00:03:55,330 --> 00:04:00,120 but if I add an item as a favorite, I see that instead. 76 00:04:00,120 --> 00:04:03,260 And if I remove it, we're back to this (indistinct) text. 77 00:04:03,260 --> 00:04:05,270 So this works. 78 00:04:05,270 --> 00:04:06,920 One important note though, 79 00:04:06,920 --> 00:04:10,790 if I add an item to my favorites and I then reload the page 80 00:04:10,790 --> 00:04:12,500 it will be lost. 81 00:04:12,500 --> 00:04:15,290 The reason for this is that our context 82 00:04:15,290 --> 00:04:17,690 is only stored in memory. 83 00:04:17,690 --> 00:04:19,430 Because we're only working with state 84 00:04:19,430 --> 00:04:23,270 and with constants here, it's not stored permanently. 85 00:04:23,270 --> 00:04:25,930 If you would want to store it permanently 86 00:04:25,930 --> 00:04:29,560 you would need to use some browsers storage here 87 00:04:29,560 --> 00:04:31,900 in the favorites context provider 88 00:04:31,900 --> 00:04:34,460 like local storage, for example, 89 00:04:34,460 --> 00:04:37,840 or store it on a server as well. 90 00:04:37,840 --> 00:04:40,740 I'm not doing that here because I wanna focus on this 91 00:04:40,740 --> 00:04:43,580 core feature of react context 92 00:04:43,580 --> 00:04:45,750 but that is something you could add 93 00:04:45,750 --> 00:04:48,360 if you wanna enhance this application. 94 00:04:48,360 --> 00:04:51,170 For the moment it's simply some temporary storage 95 00:04:51,170 --> 00:04:55,130 which survives as long as we are on this page 96 00:04:55,130 --> 00:04:57,580 but if we ever reload or leave the page 97 00:04:57,580 --> 00:05:00,070 our favorites will be lost. 98 00:05:00,070 --> 00:05:04,300 Our meetups won't because those are stored on a server. 99 00:05:04,300 --> 00:05:06,400 It's just something that is worth knowing. 100 00:05:08,080 --> 00:05:10,690 And now with that, that's almost it. 101 00:05:10,690 --> 00:05:13,960 As a last step I now just wanna make sure that 102 00:05:13,960 --> 00:05:18,170 in the main navigation we also see a batch 103 00:05:18,170 --> 00:05:20,670 next to the my favorites text 104 00:05:20,670 --> 00:05:24,880 that indicates how many favorites we currently have. 105 00:05:24,880 --> 00:05:28,640 And that simply means that in the main navigation JS file 106 00:05:28,640 --> 00:05:33,590 we also wanna connect to context and get values from there. 107 00:05:33,590 --> 00:05:38,590 So I'll again import use context here, from react 108 00:05:38,680 --> 00:05:41,400 and import my context object 109 00:05:41,400 --> 00:05:44,540 the favorites context from going up 110 00:05:44,540 --> 00:05:48,610 going up store favorites context 111 00:05:48,610 --> 00:05:53,117 and in main navigation we then get the favorites context 112 00:05:54,000 --> 00:05:58,440 by using, use context, and connecting that to 113 00:05:58,440 --> 00:06:00,093 the favorites context. 114 00:06:01,670 --> 00:06:04,970 And then here on the favorites link 115 00:06:04,970 --> 00:06:08,460 we can simply add a little extra span 116 00:06:08,460 --> 00:06:11,410 next to this my favorites text 117 00:06:11,410 --> 00:06:13,560 in which we output 118 00:06:13,560 --> 00:06:15,810 favoritesCtx.totalFavorites 119 00:06:16,880 --> 00:06:18,780 because that is a number 120 00:06:18,780 --> 00:06:21,310 managed in our context 121 00:06:21,310 --> 00:06:25,203 with the total number of meetup items in our array. 122 00:06:27,560 --> 00:06:32,560 And I'll give this span a class of classes.badge. 123 00:06:32,960 --> 00:06:37,830 Which is one of the classes prepared in this CSS file 124 00:06:37,830 --> 00:06:39,343 I gave to you earlier. 125 00:06:41,150 --> 00:06:43,740 And with this, we now have this badge here. 126 00:06:43,740 --> 00:06:47,320 And if we add items to the context 127 00:06:47,320 --> 00:06:49,860 that badge does update. 128 00:06:49,860 --> 00:06:52,233 And also if we remove items of course.