1 00:00:01,140 --> 00:00:03,120 ‫Now it's time to move back 2 00:00:03,120 --> 00:00:05,790 ‫to the WorldWise application that we have been 3 00:00:05,790 --> 00:00:08,850 ‫building to now use the Context API 4 00:00:08,850 --> 00:00:12,420 ‫in exactly the way that I showed you earlier. 5 00:00:12,420 --> 00:00:15,570 ‫So in this video we're gonna create a similar 6 00:00:15,570 --> 00:00:18,360 ‫custom context provider component 7 00:00:18,360 --> 00:00:21,243 ‫but this time for the cities data. 8 00:00:22,980 --> 00:00:26,760 ‫So here we are back in the WorldWise application 9 00:00:26,760 --> 00:00:29,310 ‫and I hope that you didn't close your editor 10 00:00:29,310 --> 00:00:30,570 ‫in the meantime, 11 00:00:30,570 --> 00:00:33,000 ‫but if you did then just make sure, 12 00:00:33,000 --> 00:00:35,460 ‫to start the application again 13 00:00:35,460 --> 00:00:38,553 ‫And also our fake API server. 14 00:00:39,600 --> 00:00:43,740 ‫So to know which commands those are, you can just open up 15 00:00:43,740 --> 00:00:47,070 ‫your package JSON file and then you will see 16 00:00:47,070 --> 00:00:51,240 ‫that you need to do NPM run dev to start the application 17 00:00:51,240 --> 00:00:55,443 ‫and then NPM run server for our fake API. 18 00:00:56,610 --> 00:01:00,900 ‫Okay, now as you learned in the previous lecture 19 00:01:00,900 --> 00:01:05,130 ‫just because you now know how to use the context API 20 00:01:05,130 --> 00:01:08,610 ‫that doesn't mean that it's always the right tool 21 00:01:08,610 --> 00:01:10,350 ‫or the right solution 22 00:01:10,350 --> 00:01:14,070 ‫for managing the state in your applications. 23 00:01:14,070 --> 00:01:16,740 ‫But when you have a small sized application 24 00:01:16,740 --> 00:01:20,400 ‫like this one that we are building right now and where 25 00:01:20,400 --> 00:01:23,910 ‫performance is never going to be an issue, then 26 00:01:23,910 --> 00:01:27,960 ‫the context API is a great tool indeed. 27 00:01:27,960 --> 00:01:31,290 ‫Now here we actually don't even have much prop 28 00:01:31,290 --> 00:01:34,890 ‫drilling going on, but I think that it's still nice to 29 00:01:34,890 --> 00:01:38,250 ‫get rid of some of the props and make the code 30 00:01:38,250 --> 00:01:40,290 ‫look a little bit cleaner. 31 00:01:40,290 --> 00:01:43,770 ‫Also, by doing this, we're gonna be able to move all 32 00:01:43,770 --> 00:01:48,770 ‫of this state here and the state logic into its own place. 33 00:01:49,140 --> 00:01:52,200 ‫And so let's now start doing that. 34 00:01:52,200 --> 00:01:56,670 ‫So just like before, we are going to create our own custom 35 00:01:56,670 --> 00:01:58,560 ‫context provider. 36 00:01:58,560 --> 00:02:03,300 ‫And so let's actually create a new folder. 37 00:02:03,300 --> 00:02:06,750 ‫So that's a common practice to create a new folder 38 00:02:06,750 --> 00:02:11,280 ‫called context or could also be contexts, 39 00:02:11,280 --> 00:02:14,160 ‫even though that's a bit hard to say. 40 00:02:14,160 --> 00:02:16,660 ‫Now okay, and now here, let's create 41 00:02:17,640 --> 00:02:18,670 ‫our cities 42 00:02:20,010 --> 00:02:21,540 ‫context 43 00:02:21,540 --> 00:02:22,780 ‫dot JSX 44 00:02:23,970 --> 00:02:28,860 ‫which again is because we are now using Vite. 45 00:02:28,860 --> 00:02:29,693 ‫Now okay 46 00:02:29,693 --> 00:02:33,210 ‫And so now let's follow the exact same recipe that we 47 00:02:33,210 --> 00:02:35,730 ‫created ourselves earlier. 48 00:02:35,730 --> 00:02:39,393 ‫So we're going to start by creating that new context. 49 00:02:40,590 --> 00:02:44,500 ‫So cities context by calling the create 50 00:02:45,390 --> 00:02:48,513 ‫context function coming from React. 51 00:02:49,350 --> 00:02:54,330 ‫Next up, it's then time to create that provider component. 52 00:02:54,330 --> 00:02:57,400 ‫And so this one is gonna be called Cities 53 00:02:58,350 --> 00:03:01,020 ‫Provider. And remember 54 00:03:01,020 --> 00:03:04,600 ‫it will need to accept the children prop 55 00:03:05,670 --> 00:03:08,550 ‫so that we can then use this provider component 56 00:03:08,550 --> 00:03:12,540 ‫as the top level component in the app component. 57 00:03:12,540 --> 00:03:16,980 ‫So again, just like we did before, and now next 58 00:03:16,980 --> 00:03:21,980 ‫up let's grab all this code here that was already selected. 59 00:03:22,410 --> 00:03:26,250 ‫So all the state code and the state updating logic 60 00:03:26,250 --> 00:03:29,670 ‫which in this case includes this use effect. 61 00:03:29,670 --> 00:03:34,670 ‫Let's cut that from here and place that here. 62 00:03:34,800 --> 00:03:37,140 ‫And so then we just need to import 63 00:03:37,140 --> 00:03:40,893 ‫use state and use effect. 64 00:03:42,510 --> 00:03:43,343 ‫Write this 65 00:03:44,640 --> 00:03:48,543 ‫and we are also missing here our base URL. 66 00:03:49,800 --> 00:03:54,450 ‫Let's place that here at the very top and nice. 67 00:03:54,450 --> 00:03:56,550 ‫So no more big errors except 68 00:03:56,550 --> 00:03:59,370 ‫of course right here in the application where 69 00:03:59,370 --> 00:04:02,763 ‫we are now missing all of our variables. 70 00:04:03,930 --> 00:04:07,200 ‫So we no longer have the cities and the is loading state 71 00:04:07,200 --> 00:04:11,613 ‫here because we will pass them later using the context. 72 00:04:13,020 --> 00:04:16,230 ‫Right? So you could even, why not? 73 00:04:16,230 --> 00:04:19,950 ‫We could just immediately remove all of this from here. 74 00:04:19,950 --> 00:04:23,490 ‫So then we can right away see how clean this 75 00:04:23,490 --> 00:04:25,503 ‫component is going to look like. 76 00:04:27,180 --> 00:04:28,200 ‫All right? 77 00:04:28,200 --> 00:04:30,990 ‫And so the homepage actually now works 78 00:04:30,990 --> 00:04:34,983 ‫because it wasn't relying on any of those state variables. 79 00:04:36,930 --> 00:04:40,200 ‫So if we reload this, then everything looks fine. 80 00:04:40,200 --> 00:04:43,920 ‫The only thing we can't do is to open up our application. 81 00:04:43,920 --> 00:04:48,030 ‫So that won't work because for now it doesn't have access 82 00:04:48,030 --> 00:04:51,900 ‫to the cities and the is loading state, but what 83 00:04:51,900 --> 00:04:55,920 ‫how clean our application component now has become. 84 00:04:55,920 --> 00:05:00,030 ‫So all it does really for now is to define these routes 85 00:05:00,030 --> 00:05:03,150 ‫and match them simply to the components. 86 00:05:03,150 --> 00:05:04,713 ‫So without any props. 87 00:05:06,450 --> 00:05:10,173 ‫Now, okay, we can even remove this line of code here. 88 00:05:11,160 --> 00:05:12,690 ‫And so with this 89 00:05:12,690 --> 00:05:16,593 ‫let's go back to our context provider here. 90 00:05:17,520 --> 00:05:20,740 ‫So now it's actually time to use 91 00:05:21,960 --> 00:05:23,523 ‫that cities context. 92 00:05:24,540 --> 00:05:25,830 ‫And so that is of course 93 00:05:25,830 --> 00:05:29,610 ‫in the return block of this component. 94 00:05:29,610 --> 00:05:34,320 ‫So here we will return cities context 95 00:05:34,320 --> 00:05:36,850 ‫dot provider remember 96 00:05:38,250 --> 00:05:39,300 ‫so just like this. 97 00:05:39,300 --> 00:05:43,570 ‫And then here we can immediately place the children 98 00:05:45,000 --> 00:05:48,453 ‫and then of course our value. 99 00:05:49,470 --> 00:05:51,780 ‫And then we need another curly braces 100 00:05:51,780 --> 00:05:54,360 ‫which is for our object. 101 00:05:54,360 --> 00:05:56,733 ‫And so now let's see what we want to do. 102 00:05:57,810 --> 00:06:00,460 ‫Well, for now we only need to pass in the cities 103 00:06:02,010 --> 00:06:05,250 ‫and the is loading state. 104 00:06:05,250 --> 00:06:07,653 ‫So this is all we need for now. 105 00:06:08,815 --> 00:06:11,733 ‫Now, okay. And so let's now, 106 00:06:12,690 --> 00:06:15,330 ‫export this component 107 00:06:15,330 --> 00:06:20,310 ‫from here and remember how we used named exports before. 108 00:06:20,310 --> 00:06:22,440 ‫So this time in this component 109 00:06:22,440 --> 00:06:24,600 ‫we don't use the default export 110 00:06:24,600 --> 00:06:28,470 ‫because we will later on also export that custom hook. 111 00:06:28,470 --> 00:06:33,470 ‫But for now let's just export the cities provider. 112 00:06:33,930 --> 00:06:37,503 ‫And so then in here we will be able to import that. 113 00:06:39,420 --> 00:06:42,600 ‫So let's just try to use that here. 114 00:06:42,600 --> 00:06:44,760 ‫So cities provider 115 00:06:44,760 --> 00:06:48,003 ‫and you see it automatically imported that from here. 116 00:06:49,800 --> 00:06:53,460 ‫And now all we need to do is to grab that from here 117 00:06:53,460 --> 00:06:58,460 ‫go all the way to the end, and beautiful, there we go. 118 00:06:58,860 --> 00:07:02,130 ‫And with this, we provided both the is loading 119 00:07:02,130 --> 00:07:06,030 ‫and the cities state to our entire application tree 120 00:07:06,030 --> 00:07:08,493 ‫and we can see that also right here. 121 00:07:10,500 --> 00:07:12,030 ‫So we have the app component 122 00:07:12,030 --> 00:07:15,330 ‫and then in there we have the cities provider 123 00:07:15,330 --> 00:07:18,990 ‫which indeed returns context dot provider. 124 00:07:18,990 --> 00:07:21,150 ‫Then in there is all this other stuff 125 00:07:21,150 --> 00:07:24,390 ‫which clogs up our tree here a little bit. 126 00:07:24,390 --> 00:07:28,050 ‫So it makes everything a bit harder to see, but well 127 00:07:28,050 --> 00:07:29,910 ‫that's just how it works. 128 00:07:29,910 --> 00:07:32,070 ‫As you start using all these libraries 129 00:07:32,070 --> 00:07:34,380 ‫then the component tree isn't as clean 130 00:07:34,380 --> 00:07:37,050 ‫as we were used to from before. 131 00:07:37,050 --> 00:07:41,130 ‫Now remember that this works because we are passing in all 132 00:07:41,130 --> 00:07:45,660 ‫of this here into the cities provider as children. 133 00:07:45,660 --> 00:07:46,560 ‫Right? 134 00:07:46,560 --> 00:07:49,680 ‫And again, that's because we provided this content here 135 00:07:49,680 --> 00:07:52,680 ‫between the opening and the closings tag. 136 00:07:52,680 --> 00:07:55,440 ‫So that's the reason why here we really need to 137 00:07:55,440 --> 00:07:57,453 ‫accept the children prop, 138 00:07:58,800 --> 00:08:00,060 ‫right here 139 00:08:00,060 --> 00:08:03,570 ‫and then place basically all those elements 140 00:08:03,570 --> 00:08:05,400 ‫that are just selected here. 141 00:08:05,400 --> 00:08:09,090 ‫So all of this will then be placed here. 142 00:08:09,090 --> 00:08:12,570 ‫So between the actual provider component 143 00:08:12,570 --> 00:08:16,050 ‫so the one that really provides this value here 144 00:08:16,050 --> 00:08:17,583 ‫to the component tree. 145 00:08:18,780 --> 00:08:22,080 ‫Now okay? So this is the first part of the recipe. 146 00:08:22,080 --> 00:08:25,230 ‫Next up, we need to create that custom hook 147 00:08:25,230 --> 00:08:29,373 ‫so that we can then consume this value wherever we need it.