1 00:00:02,000 --> 00:00:04,000 Now for this course section, 2 00:00:04,000 --> 00:00:08,000 you should of course know what React Context is. 3 00:00:08,000 --> 00:00:10,000 That's a prerequisite and therefore 4 00:00:10,000 --> 00:00:11,000 I strongly recommend 5 00:00:11,000 --> 00:00:15,000 that you go through dedicated React resources 6 00:00:15,000 --> 00:00:17,000 diving into React Context 7 00:00:17,000 --> 00:00:20,000 before you continue with this section. 8 00:00:20,000 --> 00:00:22,000 And with that out of the way attached 9 00:00:22,000 --> 00:00:25,000 you'll find a notification component file 10 00:00:25,000 --> 00:00:29,000 a sip file containing this notification JS 11 00:00:29,000 --> 00:00:33,000 and this notification.module.css file. 12 00:00:33,000 --> 00:00:36,000 These two files are attached in this sip file 13 00:00:36,000 --> 00:00:39,000 and you should add them to your project 14 00:00:39,000 --> 00:00:43,000 into the UI folder in the components folder. 15 00:00:43,000 --> 00:00:46,000 That's a simple presentational component 16 00:00:46,000 --> 00:00:48,000 which will just output a title and a message 17 00:00:48,000 --> 00:00:52,000 as a notification shown at the bottom of the screen 18 00:00:52,000 --> 00:00:53,000 once we do show it. 19 00:00:53,000 --> 00:00:56,000 At the moment we have no code for showing it 20 00:00:56,000 --> 00:01:00,000 but that's about to change throughout this course section. 21 00:01:00,000 --> 00:01:02,000 Now one important note first, 22 00:01:02,000 --> 00:01:05,000 you don't have to use React Context 23 00:01:05,000 --> 00:01:07,000 for this course section. 24 00:01:07,000 --> 00:01:09,000 For giving the user some feedback 25 00:01:09,000 --> 00:01:13,000 about the current status of the ongoing HTTP request, 26 00:01:13,000 --> 00:01:16,000 you could also just use Local State 27 00:01:16,000 --> 00:01:20,000 and provide any feedback of your choice. 28 00:01:20,000 --> 00:01:23,000 My goal just is to show an overlay 29 00:01:23,000 --> 00:01:25,000 a little notification at the bottom of the screen. 30 00:01:25,000 --> 00:01:30,000 And I wanna control that globally with the context API 31 00:01:30,000 --> 00:01:33,000 so that we can trigger this notification 32 00:01:33,000 --> 00:01:35,000 and control this notification 33 00:01:35,000 --> 00:01:39,000 from anywhere in our application. 34 00:01:39,000 --> 00:01:41,000 That's my only goal here. 35 00:01:41,000 --> 00:01:44,000 Now, therefore, before we add react context 36 00:01:44,000 --> 00:01:48,000 let's see how the end result is should look like. 37 00:01:48,000 --> 00:01:52,000 Let's go to the underscore app JS file in the pages folder. 38 00:01:52,000 --> 00:01:55,000 And there we have our layout. 39 00:01:55,000 --> 00:01:59,000 We have the head section with the general head data 40 00:01:59,000 --> 00:02:01,000 and we got this component prop 41 00:02:01,000 --> 00:02:04,000 which renders the actual page content. 42 00:02:04,000 --> 00:02:05,000 Now in here, 43 00:02:05,000 --> 00:02:09,000 I also wanna output the notification component. 44 00:02:09,000 --> 00:02:12,000 And for this, we need to import notification 45 00:02:12,000 --> 00:02:15,000 from the components folder there 46 00:02:15,000 --> 00:02:20,000 from UI and the notification JS file we just added. 47 00:02:20,000 --> 00:02:21,000 I'm just adding it here so 48 00:02:21,000 --> 00:02:25,000 that you see what we will add from this section. 49 00:02:26,000 --> 00:02:30,000 This notification component takes three props 50 00:02:30,000 --> 00:02:33,000 a title, a message, and a status. 51 00:02:33,000 --> 00:02:36,000 And therefore I'll set these three props here now. 52 00:02:36,000 --> 00:02:39,000 I'll set the title to test, the message 53 00:02:39,000 --> 00:02:43,000 to this is a test, like this 54 00:02:43,000 --> 00:02:46,000 and the status to pending, for a start. 55 00:02:46,000 --> 00:02:50,000 If we now save, we have this notification element 56 00:02:50,000 --> 00:02:53,000 at the bottom, and the goal is to show this 57 00:02:53,000 --> 00:02:56,000 once we did click the register button 58 00:02:56,000 --> 00:02:58,000 and then once the request succeeded or failed 59 00:02:58,000 --> 00:03:03,000 we wanna replace it with a proper error or success variant. 60 00:03:05,000 --> 00:03:07,000 Let me show you these variants here. 61 00:03:07,000 --> 00:03:09,000 If we changed as to success 62 00:03:09,000 --> 00:03:13,000 if we change the status to success, this switches 63 00:03:13,000 --> 00:03:17,000 to this success notification with a green background 64 00:03:17,000 --> 00:03:20,000 and if on the other hand, we change it to error 65 00:03:20,000 --> 00:03:23,000 this switches to this red notification. 66 00:03:24,000 --> 00:03:26,000 So that's the notification, but 67 00:03:26,000 --> 00:03:29,000 of course it shouldn't be hard coded here. 68 00:03:29,000 --> 00:03:31,000 It shouldn't always show up. 69 00:03:31,000 --> 00:03:34,000 Instead it should only be shown when we want it 70 00:03:34,000 --> 00:03:37,000 to show up when we have an ongoing request 71 00:03:37,000 --> 00:03:41,000 or when we have a response from our request. 72 00:03:41,000 --> 00:03:45,000 And I wanna control it with the context API 73 00:03:45,000 --> 00:03:48,000 because I want to render the notification component here 74 00:03:48,000 --> 00:03:51,000 in underscore app JS, 75 00:03:51,000 --> 00:03:55,000 but I wanna trigger it from inside other components. 76 00:03:55,000 --> 00:03:56,000 For example, from 77 00:03:56,000 --> 00:04:00,000 inside that newsletter registration component, 78 00:04:00,000 --> 00:04:04,000 where we also send this HTTP request. 79 00:04:04,000 --> 00:04:06,000 And because that's the case, 80 00:04:06,000 --> 00:04:08,000 because it is components should be triggered 81 00:04:08,000 --> 00:04:11,000 from totally different components than the component 82 00:04:11,000 --> 00:04:13,000 it's being rendered in, 83 00:04:13,000 --> 00:04:16,000 I wanna use app wide state management. 84 00:04:16,000 --> 00:04:18,000 I wanna use the context API 85 00:04:18,000 --> 00:04:21,000 to a wide pointless prop drilling 86 00:04:21,000 --> 00:04:26,000 and long prop chains across multiple components. 87 00:04:26,000 --> 00:04:30,000 And therefore let's now start using the context API.