1 00:00:01,140 --> 00:00:03,150 ‫So let's do that. 2 00:00:03,150 --> 00:00:05,400 ‫So let's build that custom hook 3 00:00:05,400 --> 00:00:07,500 ‫to consume the cities context 4 00:00:07,500 --> 00:00:09,543 ‫everywhere in the application. 5 00:00:11,100 --> 00:00:15,797 ‫So let's call this one here use cities, 6 00:00:17,100 --> 00:00:20,013 ‫and again, we don't need any argument. 7 00:00:22,140 --> 00:00:27,007 ‫And then here let's use the use context hook 8 00:00:28,560 --> 00:00:30,090 ‫that React gives us 9 00:00:30,090 --> 00:00:34,170 ‫and then we need to pass in of course our context. 10 00:00:34,170 --> 00:00:35,940 ‫So the context from which 11 00:00:35,940 --> 00:00:38,250 ‫we want to read the data. 12 00:00:38,250 --> 00:00:39,510 ‫And by the way, 13 00:00:39,510 --> 00:00:41,400 ‫this is necessary here 14 00:00:41,400 --> 00:00:44,460 ‫so we need to tell React which context 15 00:00:44,460 --> 00:00:46,110 ‫we actually want to read from 16 00:00:46,110 --> 00:00:48,960 ‫because there can be multiple contexts. 17 00:00:48,960 --> 00:00:50,820 ‫And so then of course, 18 00:00:50,820 --> 00:00:53,550 ‫React needs to know which is the one 19 00:00:53,550 --> 00:00:54,850 ‫that we are interested in. 20 00:00:56,310 --> 00:01:00,390 ‫So we want to then return this context, 21 00:01:00,390 --> 00:01:03,120 ‫which basically is not even a context, 22 00:01:03,120 --> 00:01:05,130 ‫it should be called the value, 23 00:01:05,130 --> 00:01:08,223 ‫but well, that's really not that important. 24 00:01:09,270 --> 00:01:11,040 ‫What matters is that we now 25 00:01:11,040 --> 00:01:13,950 ‫do again the check to see 26 00:01:13,950 --> 00:01:15,510 ‫if we are using the context 27 00:01:15,510 --> 00:01:16,893 ‫in the wrong place. 28 00:01:18,810 --> 00:01:20,700 ‫So if this is undefined, 29 00:01:20,700 --> 00:01:22,710 ‫it means that we are trying to access 30 00:01:22,710 --> 00:01:26,070 ‫the content value in a place where we shouldn't. 31 00:01:26,070 --> 00:01:27,750 ‫So in a place that is actually 32 00:01:27,750 --> 00:01:30,813 ‫not a child component of this provider. 33 00:01:33,480 --> 00:01:36,153 ‫So in this case, let's throw a new error. 34 00:01:39,480 --> 00:01:43,060 ‫So cities context was used 35 00:01:44,070 --> 00:01:49,070 ‫outside the cities provider. 36 00:01:50,220 --> 00:01:52,860 ‫All right and then all we need to do 37 00:01:52,860 --> 00:01:55,050 ‫is to export that here 38 00:01:55,050 --> 00:01:57,933 ‫and import it wherever we need it. 39 00:01:59,070 --> 00:02:03,930 ‫So that was I believe in the city list and country list. 40 00:02:03,930 --> 00:02:07,263 ‫So we can just control or command, click here. 41 00:02:08,130 --> 00:02:12,360 ‫So that will then open up that file. 42 00:02:12,360 --> 00:02:15,180 ‫So the country list and the city list. 43 00:02:15,180 --> 00:02:18,510 ‫And of course you can also open them directly here 44 00:02:18,510 --> 00:02:20,103 ‫from the components folder. 45 00:02:21,330 --> 00:02:25,020 ‫Now, okay, so we see that this component indeed 46 00:02:25,020 --> 00:02:28,170 ‫before relied on these two props. 47 00:02:28,170 --> 00:02:31,440 ‫And so now let's give this component 48 00:02:31,440 --> 00:02:34,770 ‫this data back but through the context. 49 00:02:34,770 --> 00:02:39,770 ‫So cities and is loading will now come from use cities. 50 00:02:43,620 --> 00:02:45,900 ‫Remove that from here. 51 00:02:45,900 --> 00:02:48,633 ‫And with this, it should already work. 52 00:02:50,010 --> 00:02:52,440 ‫So let's make this a bit smaller. 53 00:02:52,440 --> 00:02:55,413 ‫And here we go. 54 00:02:56,460 --> 00:03:01,410 ‫Let's just reload that and it works indeed. Beautiful. 55 00:03:01,410 --> 00:03:05,910 ‫So receiving its data now from the context directly. 56 00:03:05,910 --> 00:03:08,310 ‫And so now all we need to do 57 00:03:08,310 --> 00:03:12,150 ‫is to copy this also into the country list. 58 00:03:12,150 --> 00:03:14,400 ‫So let's come here, click there. 59 00:03:14,400 --> 00:03:16,560 ‫That's sometimes a bit easier than to go 60 00:03:16,560 --> 00:03:21,273 ‫through all the files right there in that folder. 61 00:03:22,440 --> 00:03:25,653 ‫So place that here, remove the props, 62 00:03:27,450 --> 00:03:29,403 ‫and now this will not exist. 63 00:03:30,540 --> 00:03:32,370 ‫So we just import that again 64 00:03:32,370 --> 00:03:34,323 ‫with this nice trick. 65 00:03:36,030 --> 00:03:38,703 ‫Click here and beautiful. 66 00:03:39,930 --> 00:03:43,320 ‫Load that and it works, great. 67 00:03:43,320 --> 00:03:46,260 ‫So with this, we now refactored our application 68 00:03:46,260 --> 00:03:49,500 ‫to using context instead of having 69 00:03:49,500 --> 00:03:51,180 ‫all that logic right here 70 00:03:51,180 --> 00:03:54,240 ‫in the application folder as we had before. 71 00:03:54,240 --> 00:03:58,530 ‫And so now if we want to jump into this application 72 00:03:58,530 --> 00:04:00,450 ‫if we have never seen it before 73 00:04:00,450 --> 00:04:02,430 ‫and open up this component, 74 00:04:02,430 --> 00:04:05,490 ‫then it's really easy to understand what it does. 75 00:04:05,490 --> 00:04:07,230 ‫So there's no clutter here. 76 00:04:07,230 --> 00:04:09,900 ‫All it has is the route definition. 77 00:04:09,900 --> 00:04:12,390 ‫And if we then want to know about the state, 78 00:04:12,390 --> 00:04:15,102 ‫we can just go to the cities provider 79 00:04:15,102 --> 00:04:16,950 ‫and get to this context 80 00:04:16,950 --> 00:04:18,570 ‫and see how it all works. 81 00:04:18,570 --> 00:04:21,150 ‫So where the data actually comes from. 82 00:04:21,150 --> 00:04:23,943 ‫And so this really is a beautiful pattern, I think.