1 00:00:02,000 --> 00:00:04,000 So now that the Context is defined 2 00:00:04,000 --> 00:00:09,000 and we wrap our components here with our Context provider, 3 00:00:09,000 --> 00:00:12,000 it's time to start using that Context. 4 00:00:12,000 --> 00:00:15,000 Now I mentioned that I wanna show the notification here 5 00:00:15,000 --> 00:00:17,000 in this underscore App.js file. 6 00:00:17,000 --> 00:00:20,000 And I would actually have problems with that 7 00:00:20,000 --> 00:00:22,000 because that's also the file 8 00:00:22,000 --> 00:00:26,000 where we wrap with our Notification Context Provider. 9 00:00:26,000 --> 00:00:29,000 So this component itself, 10 00:00:29,000 --> 00:00:32,000 this MyApp component in which I use the notification 11 00:00:32,000 --> 00:00:36,000 is not wrapped by Notification Context Provider 12 00:00:36,000 --> 00:00:38,000 because it's this component's JSX code 13 00:00:38,000 --> 00:00:40,000 where we do the wrapping. 14 00:00:40,000 --> 00:00:43,000 Hence we can't tap into our Context here 15 00:00:43,000 --> 00:00:46,000 inside of this component function. 16 00:00:46,000 --> 00:00:47,000 But that's no problem, 17 00:00:47,000 --> 00:00:49,000 we can get rid of the notification here 18 00:00:49,000 --> 00:00:54,000 and cut it and remove its import, 19 00:00:54,000 --> 00:00:57,000 and instead of just use the layout component 20 00:00:57,000 --> 00:01:01,000 because that also is a wrapper around all our other content. 21 00:01:01,000 --> 00:01:05,000 And it's the perfect component for rendering a notification. 22 00:01:05,000 --> 00:01:08,000 Also, if we have a look at its name, layout, 23 00:01:08,000 --> 00:01:13,000 it is per definition, a wrapper for visual content. 24 00:01:13,000 --> 00:01:16,000 And therefore, if I go to my layout component, 25 00:01:16,000 --> 00:01:18,000 I'll simply add the notification there, 26 00:01:18,000 --> 00:01:21,000 and then of course also add the import 27 00:01:21,000 --> 00:01:25,000 for the notification component from the UI folder like this. 28 00:01:26,000 --> 00:01:28,000 And now in the layout component, 29 00:01:28,000 --> 00:01:31,000 we can tap into our Context. 30 00:01:31,000 --> 00:01:34,000 And for that I'll import the use Context hook 31 00:01:34,000 --> 00:01:36,000 which allows us to do that. 32 00:01:36,000 --> 00:01:40,000 We can call use Context and then pass the Context 33 00:01:40,000 --> 00:01:42,000 to which we want to establish a connection 34 00:01:42,000 --> 00:01:46,000 as a argument to use Context. 35 00:01:46,000 --> 00:01:47,000 So to make that work, 36 00:01:47,000 --> 00:01:51,000 we should import the Context to which we want to connect. 37 00:01:51,000 --> 00:01:53,000 And that's the Notification Context, 38 00:01:53,000 --> 00:01:57,000 not the Notification Context Provider, 39 00:01:57,000 --> 00:02:00,000 but just the Notification Context, 40 00:02:00,000 --> 00:02:05,000 because I just want to connect to this Context object here. 41 00:02:06,000 --> 00:02:10,000 So not the provider component, but this Context object, 42 00:02:10,000 --> 00:02:14,000 this one, which is exported as a default. 43 00:02:14,000 --> 00:02:17,000 That's what I need for use Context. 44 00:02:17,000 --> 00:02:18,000 So in the layout component, 45 00:02:18,000 --> 00:02:23,000 that's what I'll import from my store folder. 46 00:02:23,000 --> 00:02:27,000 So for my store Notification Context file. 47 00:02:27,000 --> 00:02:32,000 So pass Notification Context as a argument to use Context 48 00:02:32,000 --> 00:02:37,000 and that gives us access to that Context value. 49 00:02:38,000 --> 00:02:40,000 Now we can use that Context 50 00:02:40,000 --> 00:02:43,000 to call, show, or a hide notification, 51 00:02:43,000 --> 00:02:46,000 or to get the current notification data. 52 00:02:46,000 --> 00:02:50,000 And that's what we need here in this layout component 53 00:02:50,000 --> 00:02:52,000 to conditionally show the notification. 54 00:02:53,000 --> 00:02:56,000 So here I'll then get access to the notification, 55 00:02:56,000 --> 00:02:58,000 and I'll name this activeNotification. 56 00:03:01,000 --> 00:03:04,000 So I'll store it in notification, managed by my Context 57 00:03:04,000 --> 00:03:07,000 in a constant here in this component. 58 00:03:07,000 --> 00:03:09,000 And if that is not null, 59 00:03:09,000 --> 00:03:13,000 so if we have an activeNotification in our Context, 60 00:03:13,000 --> 00:03:15,000 then I want to render this notification 61 00:03:15,000 --> 00:03:20,000 with the data stored in activeNotification. 62 00:03:20,000 --> 00:03:23,000 So we want to render notification conditionally, 63 00:03:23,000 --> 00:03:26,000 and we can do it as we always do it, 64 00:03:26,000 --> 00:03:31,000 with this syntax here, and then just populate the props here 65 00:03:32,000 --> 00:03:36,000 with the active values from the active notification. 66 00:03:36,000 --> 00:03:39,000 So activeNotification.title, 67 00:03:39,000 --> 00:03:43,000 and also set the message to activeNotification.message, 68 00:03:43,000 --> 00:03:45,000 and for the status, 69 00:03:45,000 --> 00:03:49,000 I'll set this to activeNotification.status. 70 00:03:50,000 --> 00:03:53,000 So now this notification component is rendered 71 00:03:53,000 --> 00:03:57,000 whenever we have an activeNotification in our store, 72 00:03:57,000 --> 00:03:59,000 in our Context. 73 00:04:00,000 --> 00:04:04,000 At the moment though, we never have an activeNotification 74 00:04:04,000 --> 00:04:06,000 because we have no place 75 00:04:06,000 --> 00:04:09,000 that would trigger the show notification handler 76 00:04:09,000 --> 00:04:14,000 by calling show notification on the Context object. 77 00:04:14,000 --> 00:04:16,000 And that's what I want to change now. 78 00:04:16,000 --> 00:04:19,000 Now that all the Context is set up, 79 00:04:19,000 --> 00:04:21,000 I want to dive into the components 80 00:04:21,000 --> 00:04:25,000 where we do send http requests 81 00:04:25,000 --> 00:04:27,000 to then call show notification 82 00:04:27,000 --> 00:04:30,000 from inside those components 83 00:04:30,000 --> 00:04:33,000 to show and update that notification 84 00:04:33,000 --> 00:04:35,000 with the appropriate data.