1 00:00:02,000 --> 00:00:03,000 They should instead be called 2 00:00:03,000 --> 00:00:08,000 from inside some of our other components and pages. 3 00:00:08,000 --> 00:00:10,000 So actually what we wanna do here is 4 00:00:10,000 --> 00:00:13,000 we don't just wanna manage values 5 00:00:13,000 --> 00:00:16,000 which are then accessible by different components, 6 00:00:16,000 --> 00:00:20,000 but also functions that will change those values 7 00:00:20,000 --> 00:00:23,000 that are accessible from different components. 8 00:00:23,000 --> 00:00:28,000 And hence we can expose pointers at these functions 9 00:00:28,000 --> 00:00:31,000 to our different components as well. 10 00:00:31,000 --> 00:00:35,000 So in our context here, we don't just have the values 11 00:00:35,000 --> 00:00:39,000 for our favorites, but we also can add function steer. 12 00:00:39,000 --> 00:00:43,000 We can add add favorite key, for example 13 00:00:43,000 --> 00:00:45,000 which stores are pointer at the add 14 00:00:45,000 --> 00:00:48,000 favorite handler as a value. 15 00:00:48,000 --> 00:00:50,000 So we don't execute the function here 16 00:00:50,000 --> 00:00:53,000 we point at it, and that exposes 17 00:00:53,000 --> 00:00:56,000 this function defined in this component 18 00:00:56,000 --> 00:01:01,000 to all components in this application that are interested. 19 00:01:01,000 --> 00:01:03,000 And you will see how to use this context 20 00:01:03,000 --> 00:01:06,000 in our components in just a second. 21 00:01:07,000 --> 00:01:08,000 And we can therefore also add, 22 00:01:08,000 --> 00:01:10,000 remove favorite here and point at 23 00:01:10,000 --> 00:01:12,000 the remove favorite handler 24 00:01:12,000 --> 00:01:15,000 and add the item is favorite key 25 00:01:15,000 --> 00:01:19,000 and point at the item is favorite handler function. 26 00:01:19,000 --> 00:01:22,000 And now we expose these functions 27 00:01:22,000 --> 00:01:24,000 to all interested components as well. 28 00:01:25,000 --> 00:01:29,000 Now that that's the case, I will also go 29 00:01:29,000 --> 00:01:33,000 to my initial context and add those keys here as well 30 00:01:33,000 --> 00:01:36,000 and set that to empty functions 31 00:01:36,000 --> 00:01:40,000 that just gets the correct parameters 32 00:01:40,000 --> 00:01:43,000 and I'm only doing this because that 33 00:01:43,000 --> 00:01:47,000 will actually give us better auto completion later. 34 00:01:47,000 --> 00:01:49,000 It doesn't really do anything here 35 00:01:49,000 --> 00:01:52,000 since these are functions that don't do anything 36 00:01:52,000 --> 00:01:53,000 but it will help us with 37 00:01:53,000 --> 00:01:56,000 auto-completion in the IDE later. 38 00:01:56,000 --> 00:01:59,000 And that's why we'll just add them here 39 00:01:59,000 --> 00:02:01,000 to the initial context as well. 40 00:02:03,000 --> 00:02:05,000 Okay, so now with that, we spent a lot 41 00:02:05,000 --> 00:02:08,000 of time in that file and I could imagine 42 00:02:08,000 --> 00:02:11,000 that it's not all 100% clear yet 43 00:02:11,000 --> 00:02:15,000 but we're now done with working in this file. 44 00:02:15,000 --> 00:02:20,000 Now we need to wrap our context provider around 45 00:02:20,000 --> 00:02:24,000 all the components that want to interact with this context. 46 00:02:24,000 --> 00:02:26,000 And then in the different components 47 00:02:26,000 --> 00:02:31,000 we need to pull out the values we're interested in 48 00:02:31,000 --> 00:02:36,000 or call the methods, the functions here we defined. 49 00:02:37,000 --> 00:02:39,000 And for that we need to export 50 00:02:39,000 --> 00:02:42,000 this favorites context for wider component here 51 00:02:42,000 --> 00:02:45,000 by adding the export keyword in front of this function 52 00:02:46,000 --> 00:02:50,000 and also maybe at the bottom of the file export 53 00:02:50,000 --> 00:02:55,000 the context as itself, the favorites context itself 54 00:02:56,000 --> 00:02:57,000 as a default. 55 00:02:57,000 --> 00:03:00,000 So we have two exports this function here, 56 00:03:00,000 --> 00:03:03,000 which we export by its name, and then 57 00:03:03,000 --> 00:03:05,000 this default export, which is 58 00:03:05,000 --> 00:03:07,000 our favorites context itself. 59 00:03:07,000 --> 00:03:09,000 These two things are exported here 60 00:03:09,000 --> 00:03:13,000 because we need to interact with both objects, 61 00:03:13,000 --> 00:03:17,000 with both things from outside this file. 62 00:03:18,000 --> 00:03:19,000 Now let's start with interacting 63 00:03:19,000 --> 00:03:23,000 with this favorites context provider component. 64 00:03:23,000 --> 00:03:24,000 I mentioned multiple times that 65 00:03:24,000 --> 00:03:27,000 we wanna wrap this component around 66 00:03:27,000 --> 00:03:30,000 all the components that are interested 67 00:03:30,000 --> 00:03:32,000 in our context data. 68 00:03:32,000 --> 00:03:35,000 And in this case, the my favorites page 69 00:03:35,000 --> 00:03:39,000 will be interested, the navigation bar will be interested 70 00:03:39,000 --> 00:03:41,000 since I wanna show a batch here 71 00:03:41,000 --> 00:03:44,000 and the all meetups page will also be interested 72 00:03:44,000 --> 00:03:47,000 or to be precise, the meetup item components 73 00:03:47,000 --> 00:03:49,000 will be interested because there I have 74 00:03:49,000 --> 00:03:52,000 this two favorites button which for example, 75 00:03:52,000 --> 00:03:56,000 should trigger the add favorite handler. 76 00:03:56,000 --> 00:03:58,000 So I have various components from all 77 00:03:58,000 --> 00:04:01,000 over the app that are interested 78 00:04:01,000 --> 00:04:03,000 and hence the easiest way of providing 79 00:04:03,000 --> 00:04:08,000 the context is probably to wrap everything with it. 80 00:04:08,000 --> 00:04:12,000 So here in index JS I will import the favorite 81 00:04:12,000 --> 00:04:14,000 favorites context provider wider from 82 00:04:15,000 --> 00:04:19,000 the store folder and there to favorites context file 83 00:04:19,000 --> 00:04:21,000 and actually I'll wrap it in curly braces because 84 00:04:21,000 --> 00:04:26,000 I don't want the default export the context object here 85 00:04:26,000 --> 00:04:29,000 but I want my component functioning stat. 86 00:04:29,000 --> 00:04:31,000 These favorites context provider function 87 00:04:31,000 --> 00:04:35,000 which I export like this under its name 88 00:04:35,000 --> 00:04:39,000 and we import named exports between curly braces. 89 00:04:39,000 --> 00:04:41,000 That is standard Java script. 90 00:04:43,000 --> 00:04:48,000 Now we can wrap this provider component 91 00:04:50,000 --> 00:04:53,000 around the browser router and the app 92 00:04:54,000 --> 00:04:58,000 and with that everything, all components 93 00:04:58,000 --> 00:05:00,000 in this application are able 94 00:05:00,000 --> 00:05:03,000 to interact with this context. 95 00:05:04,000 --> 00:05:07,000 Now, how do we interact though? 96 00:05:07,000 --> 00:05:10,000 Let's maybe start with the meetup item component. 97 00:05:10,000 --> 00:05:13,000 Here we have this two favorites button. 98 00:05:13,000 --> 00:05:16,000 I wanna make sure that when this button is clicked 99 00:05:16,000 --> 00:05:19,000 we add this item to our context. 100 00:05:19,000 --> 00:05:22,000 And I also wanna update the text on the button 101 00:05:22,000 --> 00:05:24,000 depending on whether this item is 102 00:05:24,000 --> 00:05:27,000 already part of my context or not. 103 00:05:28,000 --> 00:05:31,000 And actually, if it is part of the context already 104 00:05:31,000 --> 00:05:34,000 if we already did favorite and meetup item 105 00:05:34,000 --> 00:05:38,000 this button should no longer add this item to the context 106 00:05:38,000 --> 00:05:42,000 but remove it from my favorites array in the context. 107 00:05:42,000 --> 00:05:45,000 Hence first step is to add a function 108 00:05:45,000 --> 00:05:48,000 in this meetup item component 109 00:05:48,000 --> 00:05:53,000 which we could name toggle favorite status handler. 110 00:05:53,000 --> 00:05:55,000 The name is up to you though, and I'll bind 111 00:05:55,000 --> 00:05:59,000 this function to the on click prop of this button. 112 00:05:59,000 --> 00:06:01,000 so that when we click this button, 113 00:06:01,000 --> 00:06:04,000 this function will be executed. 114 00:06:04,000 --> 00:06:05,000 And now in this function, 115 00:06:05,000 --> 00:06:08,000 we will need data from the context. 116 00:06:08,000 --> 00:06:10,000 We need to find out whether this meetup item 117 00:06:10,000 --> 00:06:13,000 is already part of the context or not 118 00:06:13,000 --> 00:06:16,000 and then do different things depending on that information. 119 00:06:17,000 --> 00:06:19,000 Now for that, we now need to tap 120 00:06:19,000 --> 00:06:22,000 into the context and get values from there. 121 00:06:22,000 --> 00:06:27,000 And we do this with help of another hook provided by react. 122 00:06:28,000 --> 00:06:32,000 And that would be the use context hook. 123 00:06:32,000 --> 00:06:36,000 This hook allows us to establish a connection 124 00:06:36,000 --> 00:06:41,000 between this component and the context 125 00:06:41,000 --> 00:06:43,000 simply by calling use context here, 126 00:06:43,000 --> 00:06:47,000 and then by passing the context object 127 00:06:47,000 --> 00:06:50,000 to which we wanna connect as our argument. 128 00:06:50,000 --> 00:06:52,000 And here, I'm not talking about 129 00:06:52,000 --> 00:06:55,000 our favorites context provider component 130 00:06:55,000 --> 00:06:58,000 but about the context object, which we created 131 00:06:58,000 --> 00:07:02,000 with create context, which is why I'm exporting 132 00:07:02,000 --> 00:07:04,000 that as a default as well. 133 00:07:06,000 --> 00:07:09,000 With this in meetup item we can import 134 00:07:09,000 --> 00:07:13,000 the favorites context, whoops, like this 135 00:07:13,000 --> 00:07:17,000 so that default export from going up 136 00:07:17,000 --> 00:07:20,000 going up store favorites context, 137 00:07:21,000 --> 00:07:23,000 and instead the favorites context, 138 00:07:23,000 --> 00:07:25,000 which we pass to use context. 139 00:07:26,000 --> 00:07:28,000 And that now gives us access to 140 00:07:28,000 --> 00:07:31,000 this favorites context object 141 00:07:31,000 --> 00:07:36,000 so to this object here, which we're distributing 142 00:07:36,000 --> 00:07:39,000 through the value prop to all the components. 143 00:07:39,000 --> 00:07:42,000 So to this object to this object 144 00:07:42,000 --> 00:07:45,000 will have access now instead of meetup item. 145 00:07:45,000 --> 00:07:47,000 That's the object which is stored 146 00:07:47,000 --> 00:07:50,000 in this favorites, CTX constant now. 147 00:07:51,000 --> 00:07:54,000 And now we can, for example, find out 148 00:07:54,000 --> 00:07:56,000 if this item this meetup item here 149 00:07:56,000 --> 00:08:00,000 is a favorite by using this favorites 150 00:08:00,000 --> 00:08:04,000 CTX constant and calling item it's favorite. 151 00:08:04,000 --> 00:08:07,000 So this method, which we defined 152 00:08:07,000 --> 00:08:10,000 on our context there as well, this method 153 00:08:10,000 --> 00:08:15,000 which points at the item, it's favorite handler function. 154 00:08:15,000 --> 00:08:17,000 We execute this function now 155 00:08:18,000 --> 00:08:22,000 by executing it here in the component like this. 156 00:08:22,000 --> 00:08:24,000 And we need to pass in the idea of the meetup 157 00:08:24,000 --> 00:08:27,000 for what you wanna check, whether it's favorite or not. 158 00:08:27,000 --> 00:08:31,000 And we get the idea of this meetup through props. 159 00:08:31,000 --> 00:08:34,000 There is this ID prop, which we pass 160 00:08:34,000 --> 00:08:37,000 into our meetup item here when we render it. 161 00:08:37,000 --> 00:08:40,000 So we can use props that ID to pass the ID 162 00:08:40,000 --> 00:08:44,000 off this specific meetup to item as favorite 163 00:08:44,000 --> 00:08:46,000 and add will return true or false 164 00:08:46,000 --> 00:08:49,000 so here we then have that response. 165 00:08:50,000 --> 00:08:53,000 Now here in the toggle favorite status handler 166 00:08:53,000 --> 00:08:57,000 we can check if the item is a favorite 167 00:08:57,000 --> 00:09:00,000 so if this constant has a true value, 168 00:09:00,000 --> 00:09:02,000 and if that's the case we know that 169 00:09:02,000 --> 00:09:06,000 we wanna remove that item from the context now 170 00:09:06,000 --> 00:09:07,000 when that button was clicked. 171 00:09:07,000 --> 00:09:09,000 Because it is a favorite already 172 00:09:09,000 --> 00:09:12,000 which means now we wanna get rid of it. 173 00:09:12,000 --> 00:09:16,000 So then we use our favorites, CTX, constant 174 00:09:16,000 --> 00:09:20,000 this context object, and call remove favorite 175 00:09:20,000 --> 00:09:23,000 and remove favorite alls that wants to meet up ID 176 00:09:23,000 --> 00:09:25,000 So we pass props.id here. 177 00:09:26,000 --> 00:09:29,000 Else if the item is not a favorite yet 178 00:09:29,000 --> 00:09:33,000 we call favorites, CTX.add favorite. 179 00:09:34,000 --> 00:09:37,000 And here we need to pass in a new meetup item now 180 00:09:37,000 --> 00:09:41,000 so I will construct our object on the fly 181 00:09:41,000 --> 00:09:45,000 and simply set my ID to props.id 182 00:09:45,000 --> 00:09:48,000 the title to props.title 183 00:09:48,000 --> 00:09:52,000 the description to props.description 184 00:09:52,000 --> 00:09:54,000 the image to props.image 185 00:09:54,000 --> 00:09:58,000 and the address to props.address. 186 00:09:59,000 --> 00:10:03,000 And that now recreates this meetup item 187 00:10:03,000 --> 00:10:07,000 and passes it as an argument to the add favorite function 188 00:10:07,000 --> 00:10:12,000 which in the end triggers this add favorite handler function 189 00:10:12,000 --> 00:10:15,000 in this favorites context provider component. 190 00:10:17,000 --> 00:10:20,000 And add will then update the state there 191 00:10:20,000 --> 00:10:23,000 add this item to the user favorites array. 192 00:10:23,000 --> 00:10:25,000 And because the state was updated 193 00:10:25,000 --> 00:10:28,000 it will update all child components 194 00:10:28,000 --> 00:10:30,000 because this component here as a whole 195 00:10:30,000 --> 00:10:33,000 will be updated and hence the JSX code 196 00:10:33,000 --> 00:10:36,000 with all the child components will be updated again. 197 00:10:36,000 --> 00:10:38,000 And hence all components will have access 198 00:10:38,000 --> 00:10:40,000 to that latest state now. 199 00:10:40,000 --> 00:10:42,000 So that's how we can now trigger 200 00:10:42,000 --> 00:10:45,000 a state update to this global state, 201 00:10:45,000 --> 00:10:48,000 this favorite state from insight to 202 00:10:48,000 --> 00:10:49,000 meet up item component. 203 00:10:49,000 --> 00:10:52,000 We changed some state, which is not managed 204 00:10:52,000 --> 00:10:55,000 in this component, but on a global level. 205 00:10:57,000 --> 00:10:58,000 And now going down to this button, 206 00:10:58,000 --> 00:11:01,000 we probably wanna change the caption 207 00:11:01,000 --> 00:11:04,000 depending on whether the item is a favorite or not. 208 00:11:04,000 --> 00:11:07,000 So I'll put something dynamic here as a caption 209 00:11:07,000 --> 00:11:10,000 and check if item is favorite. 210 00:11:10,000 --> 00:11:13,000 So I'm using this constant here again, 211 00:11:13,000 --> 00:11:16,000 which has true or false as a value. 212 00:11:16,000 --> 00:11:19,000 And if it's true, then the button should say, 213 00:11:19,000 --> 00:11:22,000 remove from favorites. 214 00:11:22,000 --> 00:11:26,000 If it's false so if the item is not a favorite yet 215 00:11:26,000 --> 00:11:30,000 the button should say to favorites 216 00:11:30,000 --> 00:11:32,000 because then clicking the button 217 00:11:32,000 --> 00:11:35,000 will add the item to the favorites. 218 00:11:36,000 --> 00:11:39,000 And now that was a lot of work. 219 00:11:39,000 --> 00:11:42,000 But if you did all of that, if you save this, 220 00:11:42,000 --> 00:11:46,000 now you should be able to reload and click to favorites 221 00:11:46,000 --> 00:11:49,000 and it should change to remove from favorites 222 00:11:49,000 --> 00:11:51,000 and back and forth. 223 00:11:51,000 --> 00:11:55,000 We don't see the favorites on the my favorites page yet 224 00:11:55,000 --> 00:11:59,000 but adding favorites does work as we can tell 225 00:11:59,000 --> 00:12:01,000 by this button. 226 00:12:01,000 --> 00:12:03,000 Now let's make sure we also render 227 00:12:03,000 --> 00:12:06,000 the favorites on this my favorites page, 228 00:12:06,000 --> 00:12:08,000 and that we have a little batch here.