1 00:00:01,080 --> 00:00:04,140 ‫In this lecture, let's use our context 2 00:00:04,140 --> 00:00:07,203 ‫to finish implementing the city component. 3 00:00:08,640 --> 00:00:12,120 ‫So right now when we click on one of these cities 4 00:00:12,120 --> 00:00:14,910 ‫it takes us to the city component 5 00:00:14,910 --> 00:00:16,950 ‫but it doesn't have any data 6 00:00:16,950 --> 00:00:20,040 ‫about the city yet except for the ID. 7 00:00:20,040 --> 00:00:21,900 ‫And so let's now change that 8 00:00:21,900 --> 00:00:25,050 ‫and basically fetch the data for this city 9 00:00:25,050 --> 00:00:27,900 ‫and then show it in this component. 10 00:00:27,900 --> 00:00:30,993 ‫So basically what we want is this. 11 00:00:32,040 --> 00:00:35,613 ‫So it loads the data about the city and shows it here. 12 00:00:36,510 --> 00:00:41,050 ‫So what that means is that we do an HTTP request 13 00:00:42,660 --> 00:00:46,830 ‫to this URL /cities, 14 00:00:46,830 --> 00:00:49,170 ‫which remember gets all the cities, 15 00:00:49,170 --> 00:00:53,520 ‫but then if we take one of these IDs 16 00:00:53,520 --> 00:00:55,240 ‫that is automatically generated 17 00:00:56,670 --> 00:00:58,680 ‫and then paste that here, 18 00:00:58,680 --> 00:01:00,660 ‫then we get only the information 19 00:01:00,660 --> 00:01:03,930 ‫about this exact object right here. 20 00:01:03,930 --> 00:01:06,600 ‫Now, you might be wondering why we actually need 21 00:01:06,600 --> 00:01:09,630 ‫to do that if we could simply get this object 22 00:01:09,630 --> 00:01:13,350 ‫out of the array that we already have, right? 23 00:01:13,350 --> 00:01:17,280 ‫And that's actually true in this small application. 24 00:01:17,280 --> 00:01:21,420 ‫So technically we wouldn't have to create a new HTTP request 25 00:01:21,420 --> 00:01:24,450 ‫and fetch this data from the server again 26 00:01:24,450 --> 00:01:29,450 ‫because we do actually already have it in the cities array. 27 00:01:29,580 --> 00:01:33,510 ‫However, in real world web applications, it's quite common 28 00:01:33,510 --> 00:01:36,870 ‫that the single objects have a lot more data 29 00:01:36,870 --> 00:01:38,820 ‫than the entire collection. 30 00:01:38,820 --> 00:01:40,500 ‫So basically this array here 31 00:01:40,500 --> 00:01:44,190 ‫would only have a small amount of data in each object 32 00:01:44,190 --> 00:01:47,130 ‫while then the objects that we get individually 33 00:01:47,130 --> 00:01:50,610 ‫from the API have really all the data. 34 00:01:50,610 --> 00:01:53,943 ‫And so let's pretend that we really need to do this. 35 00:01:54,870 --> 00:01:59,870 ‫So making a request to this URL and then slash the ID. 36 00:02:02,460 --> 00:02:07,460 ‫So let's go to our cities or actually our city component. 37 00:02:08,700 --> 00:02:11,350 ‫And so let's fetch the data here 38 00:02:12,300 --> 00:02:15,630 ‫because this is where we need the data. 39 00:02:15,630 --> 00:02:17,790 ‫So let's remove this. 40 00:02:17,790 --> 00:02:22,790 ‫And what we could do is now to create that HTTP request 41 00:02:22,800 --> 00:02:25,030 ‫and then create some local state here 42 00:02:26,460 --> 00:02:29,730 ‫and call it for example, current city 43 00:02:29,730 --> 00:02:34,203 ‫and set current city and then use state 44 00:02:38,280 --> 00:02:41,790 ‫and then store whatever the object is here 45 00:02:41,790 --> 00:02:43,980 ‫into this state, right? 46 00:02:43,980 --> 00:02:47,310 ‫So that would be a perfectly valid way of doing it. 47 00:02:47,310 --> 00:02:51,390 ‫However, that state would then of course be local state. 48 00:02:51,390 --> 00:02:52,800 ‫So it would be local 49 00:02:52,800 --> 00:02:56,070 ‫to only this component right here. 50 00:02:56,070 --> 00:03:00,570 ‫However, we do actually need the state in another place. 51 00:03:00,570 --> 00:03:05,250 ‫So to implement another feature that I'm gonna show you now. 52 00:03:05,250 --> 00:03:08,313 ‫So watch what happens when I go back from Lisbon. 53 00:03:09,630 --> 00:03:12,150 ‫So you see that then Lisbon here 54 00:03:12,150 --> 00:03:14,430 ‫is marked with this green border, 55 00:03:14,430 --> 00:03:18,450 ‫which means that this is now the current city still. 56 00:03:18,450 --> 00:03:21,910 ‫So basically after we visited one of these cities 57 00:03:23,100 --> 00:03:24,720 ‫when we then go back 58 00:03:24,720 --> 00:03:28,800 ‫it marks the last visited city with this border, 59 00:03:28,800 --> 00:03:33,030 ‫which means that this city item component here 60 00:03:33,030 --> 00:03:35,643 ‫also uses this same piece of state. 61 00:03:36,630 --> 00:03:38,220 ‫So what this means is 62 00:03:38,220 --> 00:03:41,220 ‫that this state is actually global state 63 00:03:41,220 --> 00:03:45,480 ‫because multiple components in the tree need this state 64 00:03:45,480 --> 00:03:47,490 ‫and therefore it is a good idea 65 00:03:47,490 --> 00:03:50,490 ‫to actually place this not here, 66 00:03:50,490 --> 00:03:53,700 ‫but inside our context. 67 00:03:53,700 --> 00:03:57,450 ‫So next close to these ones. 68 00:03:57,450 --> 00:03:59,970 ‫Now, okay, now again 69 00:03:59,970 --> 00:04:04,080 ‫if we only needed this state here in one single component 70 00:04:04,080 --> 00:04:08,010 ‫it would be best to use local state in that case. 71 00:04:08,010 --> 00:04:10,620 ‫However, we do need the state variable 72 00:04:10,620 --> 00:04:12,090 ‫in multiple places. 73 00:04:12,090 --> 00:04:14,940 ‫And so therefore we will place it here 74 00:04:14,940 --> 00:04:19,590 ‫into the city's provider and then paste it into the context. 75 00:04:19,590 --> 00:04:21,873 ‫And let's do that right now immediately. 76 00:04:23,100 --> 00:04:25,080 ‫So current city. 77 00:04:25,080 --> 00:04:29,220 ‫And so now all we need to do is to create a function here 78 00:04:29,220 --> 00:04:34,200 ‫that loads this city, which we can then call right here 79 00:04:34,200 --> 00:04:35,703 ‫as the component mounts. 80 00:04:36,570 --> 00:04:38,520 ‫So that sounds a bit confusing. 81 00:04:38,520 --> 00:04:39,933 ‫So let's just do that. 82 00:04:41,370 --> 00:04:45,730 ‫So let's just create a function called get city 83 00:04:46,800 --> 00:04:50,130 ‫which will just receive the city ID. 84 00:04:50,130 --> 00:04:53,640 ‫And then the logic itself is actually pretty similar 85 00:04:53,640 --> 00:04:55,890 ‫to this function that we already have here. 86 00:04:55,890 --> 00:05:00,890 ‫So I'll just copy this and place this here. 87 00:05:01,410 --> 00:05:04,560 ‫And then here, remember that we now need to attach 88 00:05:04,560 --> 00:05:06,810 ‫the ID to this URL. 89 00:05:06,810 --> 00:05:09,260 ‫And so that's why we paste it into this function. 90 00:05:10,470 --> 00:05:14,490 ‫So ID here and then of course the data that we receive 91 00:05:14,490 --> 00:05:17,463 ‫is placed into current city. 92 00:05:18,300 --> 00:05:22,950 ‫So set current city and that's actually it. 93 00:05:22,950 --> 00:05:25,983 ‫Well, actually this should not be here. 94 00:05:28,230 --> 00:05:32,343 ‫And then yeah, this of course is also an async function. 95 00:05:33,390 --> 00:05:34,830 ‫Now right, 96 00:05:34,830 --> 00:05:39,690 ‫now we could also have placed this function right here, 97 00:05:39,690 --> 00:05:41,100 ‫so into this component 98 00:05:41,100 --> 00:05:43,920 ‫and then call it here as the component mounts. 99 00:05:43,920 --> 00:05:45,540 ‫But I think it's a bit cleaner 100 00:05:45,540 --> 00:05:47,010 ‫to have all these functions 101 00:05:47,010 --> 00:05:50,490 ‫in the central place inside the context. 102 00:05:50,490 --> 00:05:53,343 ‫So here inside this city's provider. 103 00:05:54,390 --> 00:05:57,030 ‫So later on we will also have more functions 104 00:05:57,030 --> 00:06:00,030 ‫to create a new city and to delete a city. 105 00:06:00,030 --> 00:06:02,580 ‫And so we will then have all these functions here 106 00:06:02,580 --> 00:06:04,110 ‫in the central place. 107 00:06:04,110 --> 00:06:07,120 ‫Then all we have to do is to paste that here 108 00:06:08,190 --> 00:06:10,953 ‫also down into the context. 109 00:06:12,210 --> 00:06:14,010 ‫So get city 110 00:06:14,010 --> 00:06:18,780 ‫and now inside this component we can get the city 111 00:06:18,780 --> 00:06:20,613 ‫and then display it. 112 00:06:22,530 --> 00:06:25,080 ‫So this ID of course we still need 113 00:06:25,080 --> 00:06:28,713 ‫because now we need that to actually fetch the data. 114 00:06:30,660 --> 00:06:35,660 ‫But anyway, let's now then get the get city function 115 00:06:35,730 --> 00:06:39,860 ‫from use cities now, right? 116 00:06:41,430 --> 00:06:45,750 ‫And of course we will then also need the current city 117 00:06:45,750 --> 00:06:49,173 ‫and no longer this temporary one. 118 00:06:51,390 --> 00:06:55,803 ‫And so then we can very easily do an effect like this 119 00:06:59,100 --> 00:07:03,210 ‫where we simply call the get city function 120 00:07:03,210 --> 00:07:06,810 ‫that we just got access to with the current ID 121 00:07:06,810 --> 00:07:09,960 ‫which is coming remember from the URL. 122 00:07:09,960 --> 00:07:12,690 ‫And so we want to run this function 123 00:07:12,690 --> 00:07:16,140 ‫or this effect as the component mounts. 124 00:07:16,140 --> 00:07:18,270 ‫Now here React is complaining about 125 00:07:18,270 --> 00:07:22,200 ‫some missing dependencies in the dependency array. 126 00:07:22,200 --> 00:07:27,180 ‫So that's get city and ID, so let's add ID here. 127 00:07:27,180 --> 00:07:28,900 ‫But the get city function 128 00:07:30,180 --> 00:07:34,680 ‫that React also wants we will actually not add for now. 129 00:07:34,680 --> 00:07:37,200 ‫So even though we are required to add 130 00:07:37,200 --> 00:07:40,200 ‫all the dependencies to the dependency array, 131 00:07:40,200 --> 00:07:42,240 ‫now we will just remove this here 132 00:07:42,240 --> 00:07:45,000 ‫and we'll come back to this in the next section. 133 00:07:45,000 --> 00:07:46,770 ‫So by then I will explain you 134 00:07:46,770 --> 00:07:48,480 ‫why we couldn't add this 135 00:07:48,480 --> 00:07:51,360 ‫to the dependency array at this point. 136 00:07:51,360 --> 00:07:53,370 ‫So we just add the ID, 137 00:07:53,370 --> 00:07:57,690 ‫which is actually important because the ID might change. 138 00:07:57,690 --> 00:07:59,040 ‫And so then in that case, 139 00:07:59,040 --> 00:08:03,450 ‫the city corresponding to that new ID would be loaded. 140 00:08:03,450 --> 00:08:08,450 ‫Now, okay, now let's get rid of this code here also of this. 141 00:08:10,980 --> 00:08:14,520 ‫And so now we want our actual JSX 142 00:08:14,520 --> 00:08:16,713 ‫that will nicely render the city. 143 00:08:17,610 --> 00:08:22,380 ‫So let's give it a save, then we have no more errors 144 00:08:22,380 --> 00:08:24,330 ‫and everything's looking good. 145 00:08:24,330 --> 00:08:25,803 ‫So let's try this out. 146 00:08:26,700 --> 00:08:31,020 ‫And we actually already see Lisbon there, 147 00:08:31,020 --> 00:08:34,170 ‫but let's give ourselves a bit more space. 148 00:08:34,170 --> 00:08:36,630 ‫Let's come back here and reload. 149 00:08:36,630 --> 00:08:39,750 ‫And then I will again click on Lisbon. 150 00:08:39,750 --> 00:08:41,910 ‫And there it is. 151 00:08:41,910 --> 00:08:43,110 ‫Beautiful. 152 00:08:43,110 --> 00:08:46,020 ‫So all logic here worked. 153 00:08:46,020 --> 00:08:49,200 ‫Let's try another one, Madrid. 154 00:08:49,200 --> 00:08:53,700 ‫And you saw that first it shortly displayed Lisbon 155 00:08:53,700 --> 00:08:56,940 ‫and only then as soon as the the Madrid data arrived 156 00:08:56,940 --> 00:09:00,480 ‫it then switched to this new state. 157 00:09:00,480 --> 00:09:01,950 ‫So let's fix that soon. 158 00:09:01,950 --> 00:09:05,433 ‫But for now, let's really understand what happens here. 159 00:09:06,660 --> 00:09:08,790 ‫So let's start from the beginning. 160 00:09:08,790 --> 00:09:13,790 ‫So when we click here on this link here the URL will change. 161 00:09:13,800 --> 00:09:15,330 ‫So we get a new ID 162 00:09:15,330 --> 00:09:19,110 ‫which we then read here into the city component. 163 00:09:19,110 --> 00:09:21,120 ‫So then we have this ID 164 00:09:21,120 --> 00:09:24,900 ‫and we use it to call the get city function 165 00:09:24,900 --> 00:09:27,030 ‫as the component mounts. 166 00:09:27,030 --> 00:09:29,070 ‫So immediately after mounting, 167 00:09:29,070 --> 00:09:31,080 ‫we start calling this function 168 00:09:31,080 --> 00:09:35,250 ‫which is coming from our context, remember? 169 00:09:35,250 --> 00:09:37,980 ‫So here we have the get city function, 170 00:09:37,980 --> 00:09:40,380 ‫which will then immediately start fetching 171 00:09:40,380 --> 00:09:43,620 ‫the city data for that ID. 172 00:09:43,620 --> 00:09:45,000 ‫Then when that arrives 173 00:09:45,000 --> 00:09:48,813 ‫it gets stored here into the set current city state. 174 00:09:49,920 --> 00:09:52,230 ‫So this state variable right here, 175 00:09:52,230 --> 00:09:57,230 ‫which we also paste into the context value. 176 00:09:57,240 --> 00:09:59,910 ‫And so then immediately here 177 00:09:59,910 --> 00:10:04,560 ‫this city component receives that value as it updates. 178 00:10:04,560 --> 00:10:07,440 ‫And then well here we de-structure it 179 00:10:07,440 --> 00:10:09,783 ‫and then display everything in the UI. 180 00:10:10,710 --> 00:10:14,640 ‫So basically here we do child to parent communication. 181 00:10:14,640 --> 00:10:16,890 ‫So we call this function here 182 00:10:16,890 --> 00:10:19,530 ‫which will then update the current city 183 00:10:19,530 --> 00:10:22,710 ‫and then the current city will come back down here 184 00:10:22,710 --> 00:10:25,980 ‫into this component where we can then use it. 185 00:10:25,980 --> 00:10:29,940 ‫But now about this issue that we saw earlier. 186 00:10:29,940 --> 00:10:31,140 ‫So if I click here now 187 00:10:31,140 --> 00:10:35,550 ‫then it will shortly still show Lisbon, right? 188 00:10:35,550 --> 00:10:37,800 ‫So saw that for half a second 189 00:10:37,800 --> 00:10:40,140 ‫it still showed us the current city. 190 00:10:40,140 --> 00:10:42,180 ‫And the reason for that is very simple. 191 00:10:42,180 --> 00:10:45,690 ‫It's because that was the earlier current city, 192 00:10:45,690 --> 00:10:47,400 ‫so the one from before. 193 00:10:47,400 --> 00:10:49,950 ‫And so know where we are resetting that 194 00:10:49,950 --> 00:10:52,380 ‫and actually we don't want to reset. 195 00:10:52,380 --> 00:10:55,080 ‫So because remember we want to then 196 00:10:55,080 --> 00:10:58,980 ‫use the current city to display this green border. 197 00:10:58,980 --> 00:11:01,170 ‫But what we want to do instead is to 198 00:11:01,170 --> 00:11:04,020 ‫show a loading spinner here. 199 00:11:04,020 --> 00:11:08,760 ‫So let's also get the is loading state 200 00:11:08,760 --> 00:11:12,303 ‫and then depending on that we want to display the spinner. 201 00:11:13,230 --> 00:11:15,660 ‫So where do you think we should do that? 202 00:11:15,660 --> 00:11:17,460 ‫Right here, maybe. 203 00:11:17,460 --> 00:11:21,990 ‫Well, let's try and then you will see what happens. 204 00:11:21,990 --> 00:11:25,500 ‫So if it's loading, then return the spinner. 205 00:11:25,500 --> 00:11:28,320 ‫Let's see if we already have it included. 206 00:11:28,320 --> 00:11:29,193 ‫No, we don't. 207 00:11:31,410 --> 00:11:32,910 ‫But now it is. 208 00:11:32,910 --> 00:11:37,050 ‫But as I save this here, we get this ES linked error. 209 00:11:37,050 --> 00:11:40,080 ‫And so the reason for that is because we violated 210 00:11:40,080 --> 00:11:42,090 ‫the very important rule of hooks, 211 00:11:42,090 --> 00:11:45,630 ‫which says that hooks always need to be called 212 00:11:45,630 --> 00:11:47,010 ‫in the same order. 213 00:11:47,010 --> 00:11:51,213 ‫So by having this return here before this hook, 214 00:11:52,620 --> 00:11:55,890 ‫this one here might never actually be created. 215 00:11:55,890 --> 00:11:57,900 ‫And so that's a problem. 216 00:11:57,900 --> 00:11:59,560 ‫So let's do that maybe here 217 00:12:00,570 --> 00:12:04,950 ‫or well, let's do it really close to the other return. 218 00:12:04,950 --> 00:12:07,503 ‫And so now watch what happens. 219 00:12:08,400 --> 00:12:09,690 ‫Yeah, nice. 220 00:12:09,690 --> 00:12:12,723 ‫Then we get the loading spinner and then our city. 221 00:12:13,650 --> 00:12:16,230 ‫And now let's implement that feature, 222 00:12:16,230 --> 00:12:20,430 ‫which shows us which is the current city. 223 00:12:20,430 --> 00:12:24,903 ‫So again, that's just this green border right here. 224 00:12:25,770 --> 00:12:29,460 ‫So that is right in the city item. 225 00:12:29,460 --> 00:12:30,720 ‫So right here 226 00:12:30,720 --> 00:12:35,580 ‫and basically we have a special class for the active city. 227 00:12:35,580 --> 00:12:38,490 ‫So that's this class right here. 228 00:12:38,490 --> 00:12:40,320 ‫So let's just copy that. 229 00:12:40,320 --> 00:12:43,623 ‫And so here we want to now conditionally apply that. 230 00:12:45,720 --> 00:12:49,860 ‫So, remember that if we want to add multiple class names 231 00:12:49,860 --> 00:12:54,510 ‫with CSS modules, we need to do so in a string. 232 00:12:54,510 --> 00:12:56,553 ‫So let's create a template literal. 233 00:12:58,620 --> 00:13:00,570 ‫So this one we want for sure, 234 00:13:00,570 --> 00:13:04,980 ‫but now we need to conditionally add that class. 235 00:13:04,980 --> 00:13:09,690 ‫So in which situation do we actually want to add that class? 236 00:13:09,690 --> 00:13:12,300 ‫So when is a city active? 237 00:13:12,300 --> 00:13:16,200 ‫Well, it is the active or actually the current city 238 00:13:16,200 --> 00:13:21,200 ‫when the city ID is equal to the current city ID. 239 00:13:21,420 --> 00:13:24,000 ‫So to this one here, right? 240 00:13:24,000 --> 00:13:28,170 ‫And so we now need to read that current city 241 00:13:28,170 --> 00:13:30,003 ‫here into this component. 242 00:13:32,970 --> 00:13:35,223 ‫So current city, 243 00:13:36,420 --> 00:13:41,133 ‫which we get from use cities, that's right. 244 00:13:42,210 --> 00:13:43,290 ‫Now, okay. 245 00:13:43,290 --> 00:13:46,260 ‫And now here we can do our conditional. 246 00:13:46,260 --> 00:13:50,220 ‫So if the ID is equal to currentCity.id 247 00:13:54,210 --> 00:13:56,490 ‫then here we want styles. 248 00:13:56,490 --> 00:13:59,160 ‫And now we cannot do this. 249 00:13:59,160 --> 00:14:02,370 ‫So this doesn't work because of the dashes in the name. 250 00:14:02,370 --> 00:14:07,080 ‫And so instead, we need to do this, alright? 251 00:14:07,080 --> 00:14:11,403 ‫And otherwise don't place any other class there. 252 00:14:12,750 --> 00:14:15,723 ‫And we see immediately that it works. 253 00:14:16,770 --> 00:14:18,930 ‫So let's try that with Lisbon. 254 00:14:18,930 --> 00:14:21,810 ‫Go back and nice. 255 00:14:21,810 --> 00:14:23,673 ‫So now that is the current city. 256 00:14:24,690 --> 00:14:25,983 ‫Here we have some errors. 257 00:14:28,260 --> 00:14:30,033 ‫Yeah, so that's nothing meaningful. 258 00:14:30,990 --> 00:14:33,843 ‫What matters is that the feature now works. 259 00:14:34,860 --> 00:14:37,830 ‫And now finally, notice how we always have to 260 00:14:37,830 --> 00:14:41,190 ‫click here on cities in order to go back. 261 00:14:41,190 --> 00:14:44,160 ‫So actually what we want here is a button 262 00:14:44,160 --> 00:14:46,020 ‫that allows us to go back. 263 00:14:46,020 --> 00:14:48,270 ‫So similar to the button that we have 264 00:14:48,270 --> 00:14:52,350 ‫when we click here to show the form, remember that. 265 00:14:52,350 --> 00:14:55,140 ‫So as I click here, it opens this form. 266 00:14:55,140 --> 00:14:57,870 ‫And so here we have this back button. 267 00:14:57,870 --> 00:15:02,400 ‫And so now we want exactly the same in the city component. 268 00:15:02,400 --> 00:15:04,353 ‫So let's come to the form. 269 00:15:07,140 --> 00:15:10,170 ‫And so what we want is this button 270 00:15:10,170 --> 00:15:12,840 ‫plus this functionality here. 271 00:15:12,840 --> 00:15:17,130 ‫So should we now just copy and paste this button? 272 00:15:17,130 --> 00:15:18,750 ‫Well, actually no. 273 00:15:18,750 --> 00:15:22,560 ‫I think it would be a good idea to now make a component 274 00:15:22,560 --> 00:15:26,640 ‫for this button because we clearly need to reuse this. 275 00:15:26,640 --> 00:15:30,120 ‫And so this is a great candidate to extract 276 00:15:30,120 --> 00:15:31,413 ‫into a new component. 277 00:15:32,370 --> 00:15:34,380 ‫So let me just copy it actually. 278 00:15:34,380 --> 00:15:36,033 ‫So I will remove it later. 279 00:15:37,860 --> 00:15:42,363 ‫And then let's call this one the back button. 280 00:15:45,360 --> 00:15:48,300 ‫So then our snippet here as always. 281 00:15:48,300 --> 00:15:52,830 ‫And now what we want to return from here is this button, 282 00:15:52,830 --> 00:15:55,893 ‫but this button actually depends on a few things. 283 00:15:59,490 --> 00:16:02,493 ‫So for example, this navigate function right here. 284 00:16:03,900 --> 00:16:08,520 ‫So let's cut that, place that here. 285 00:16:08,520 --> 00:16:12,240 ‫But then of course we are missing the import. 286 00:16:12,240 --> 00:16:14,163 ‫So let's also grab that from here. 287 00:16:15,270 --> 00:16:20,267 ‫And maybe we can actually remove this from here for now 288 00:16:21,750 --> 00:16:24,903 ‫because then we will want to import it, of course. 289 00:16:28,050 --> 00:16:31,500 ‫Now okay, and now we just need to import the button. 290 00:16:31,500 --> 00:16:36,500 ‫So let me just remove a piece of this here and nice. 291 00:16:36,810 --> 00:16:38,310 ‫There it is. 292 00:16:38,310 --> 00:16:41,760 ‫So I think this should be complete. 293 00:16:41,760 --> 00:16:45,543 ‫Let's close this and then let's import that here. 294 00:16:46,590 --> 00:16:51,590 ‫So the back button, which somehow doesn't work. 295 00:16:52,080 --> 00:16:55,593 ‫So the import, so let's just do that manually here. 296 00:16:59,400 --> 00:17:04,400 ‫So back button and nice, there is our button back. 297 00:17:05,370 --> 00:17:07,620 ‫And now if we go to the city 298 00:17:07,620 --> 00:17:12,363 ‫and then one of these cities here, let's go there. 299 00:17:13,650 --> 00:17:15,900 ‫We can close all of this. 300 00:17:15,900 --> 00:17:20,900 ‫And so let's inside this diff here, add that back button. 301 00:17:25,530 --> 00:17:27,720 ‫And there it is. 302 00:17:27,720 --> 00:17:28,710 ‫Let's see. 303 00:17:28,710 --> 00:17:30,693 ‫And indeed it does go back. 304 00:17:32,070 --> 00:17:32,940 ‫Great. 305 00:17:32,940 --> 00:17:35,130 ‫So this was a long lecture 306 00:17:35,130 --> 00:17:37,530 ‫where we did a lot of different things. 307 00:17:37,530 --> 00:17:39,930 ‫And so please make sure to review 308 00:17:39,930 --> 00:17:42,000 ‫everything that we did here. 309 00:17:42,000 --> 00:17:43,920 ‫Just clean up this. 310 00:17:43,920 --> 00:17:47,490 ‫And so then with this, we are actually finished 311 00:17:47,490 --> 00:17:50,070 ‫and can move on to the next topic, 312 00:17:50,070 --> 00:17:53,790 ‫which will be to finally add the actual map 313 00:17:53,790 --> 00:17:55,293 ‫here to this container.