1 00:00:01,170 --> 00:00:04,230 ‫Deleting a city is the next feature 2 00:00:04,230 --> 00:00:05,643 ‫that we're gonna implement. 3 00:00:07,080 --> 00:00:10,140 ‫And I promise it's gonna be a lot faster 4 00:00:10,140 --> 00:00:11,880 ‫than the previous ones. 5 00:00:11,880 --> 00:00:15,210 ‫So, all that we need to do is to create a function 6 00:00:15,210 --> 00:00:18,870 ‫that will delete a city from the API 7 00:00:18,870 --> 00:00:22,410 ‫and here from the state, and then just call that function 8 00:00:22,410 --> 00:00:24,900 ‫when we click on this button. 9 00:00:24,900 --> 00:00:26,550 ‫All right. 10 00:00:26,550 --> 00:00:30,660 ‫So, let's first set up the event handler on that button. 11 00:00:30,660 --> 00:00:35,660 ‫And so, that button is located inside of each city item. 12 00:00:36,150 --> 00:00:38,103 ‫So, we already have that right here. 13 00:00:41,220 --> 00:00:46,220 ‫So, here, we're going to need the onClick event handler. 14 00:00:46,530 --> 00:00:48,840 ‫And for now, the only thing that I want to do 15 00:00:48,840 --> 00:00:51,210 ‫is to log something to the console 16 00:00:51,210 --> 00:00:54,033 ‫just so we can see something. 17 00:00:55,350 --> 00:00:58,380 ‫So, because what I want to demonstrate is 18 00:00:58,380 --> 00:01:01,983 ‫watch what happens when I click now here on this button. 19 00:01:04,080 --> 00:01:06,120 ‫So, it logs to the console 20 00:01:06,120 --> 00:01:10,967 ‫but also it goes here to this city's page, right? 21 00:01:11,850 --> 00:01:16,170 ‫And the reason for that is that by clicking on this button, 22 00:01:16,170 --> 00:01:20,460 ‫we are at the same time also clicking on the link. 23 00:01:20,460 --> 00:01:24,003 ‫And so, we need to prevent that from happening first. 24 00:01:24,960 --> 00:01:29,020 ‫So, let's create a handleClick function 25 00:01:32,580 --> 00:01:35,013 ‫and then just create that here. 26 00:01:38,670 --> 00:01:42,540 ‫And so, here, this needs to receive the current event, 27 00:01:42,540 --> 00:01:46,690 ‫so that then we can do e.preventDefault, like this. 28 00:01:53,280 --> 00:01:56,700 ‫All right, and if we now log something 29 00:01:56,700 --> 00:02:00,543 ‫to the console again, let's quickly reload. 30 00:02:01,440 --> 00:02:03,690 ‫So, if we click here now again, 31 00:02:03,690 --> 00:02:06,150 ‫then that should only log that to the console 32 00:02:06,150 --> 00:02:07,770 ‫but not go there. 33 00:02:07,770 --> 00:02:10,470 ‫And indeed, that's how it works. 34 00:02:10,470 --> 00:02:13,110 ‫So, now, the link is no longer clicked 35 00:02:13,110 --> 00:02:15,480 ‫but really only the button. 36 00:02:15,480 --> 00:02:18,420 ‫And so, now, here we want to call that function 37 00:02:18,420 --> 00:02:21,540 ‫in this place where we delete the item. 38 00:02:21,540 --> 00:02:26,520 ‫And so, since this is again about our city's data, 39 00:02:26,520 --> 00:02:28,770 ‫we go back to our city's context 40 00:02:28,770 --> 00:02:33,243 ‫and then let's just copy paste this function once more. 41 00:02:34,500 --> 00:02:36,290 ‫Let's call it deleteCity. 42 00:02:38,490 --> 00:02:41,070 ‫And here, all we need is an ID 43 00:02:41,070 --> 00:02:46,070 ‫and then we submit a request to the URL with that ID. 44 00:02:48,090 --> 00:02:52,470 ‫And here, the method is going to be delete. 45 00:02:52,470 --> 00:02:57,303 ‫So, we don't need any of this and we also don't need this. 46 00:02:58,500 --> 00:03:01,440 ‫And here, let's change the message. 47 00:03:01,440 --> 00:03:05,250 ‫There's an error deleting city. 48 00:03:09,450 --> 00:03:13,210 ‫And here, let's also say that there was an error 49 00:03:15,060 --> 00:03:16,743 ‫creating the city. 50 00:03:17,700 --> 00:03:21,570 ‫All right, so, here we are deleting the city 51 00:03:21,570 --> 00:03:23,910 ‫with the ID from the API. 52 00:03:23,910 --> 00:03:27,810 ‫And then here, also, we need to again, delete it 53 00:03:27,810 --> 00:03:29,643 ‫from the city's state. 54 00:03:31,200 --> 00:03:33,180 ‫So, just like many times before, 55 00:03:33,180 --> 00:03:35,940 ‫deleting is basically to filter 56 00:03:35,940 --> 00:03:38,550 ‫because we want the new array to be shorter 57 00:03:38,550 --> 00:03:39,663 ‫than the current one. 58 00:03:40,740 --> 00:03:43,713 ‫So, we say cities.filter. 59 00:03:46,470 --> 00:03:51,240 ‫And then we want all the cities where the city.id 60 00:03:51,240 --> 00:03:54,753 ‫is different from the one that was passed in. 61 00:03:56,100 --> 00:03:58,560 ‫So, just like this and then here, we don't even need 62 00:03:58,560 --> 00:04:02,043 ‫to store the results of this, 63 00:04:02,910 --> 00:04:05,640 ‫and I think that should be good. 64 00:04:05,640 --> 00:04:08,833 ‫So, let's pass that into our context, deleteCity. 65 00:04:11,640 --> 00:04:15,660 ‫And then of course, here, we need to get that. 66 00:04:15,660 --> 00:04:17,970 ‫So, we already have currentCity. 67 00:04:17,970 --> 00:04:20,900 ‫And so, then let's also get deleteCity. 68 00:04:24,408 --> 00:04:28,110 ‫And then all we need to do is to call deleteCity here 69 00:04:28,110 --> 00:04:31,533 ‫with the current ID, and that's gonna be it. 70 00:04:32,580 --> 00:04:35,710 ‫Now, what's gonna happen is that this will then 71 00:04:36,930 --> 00:04:39,420 ‫of course, update here, the loading state, 72 00:04:39,420 --> 00:04:41,430 ‫and therefore, our entire list here 73 00:04:41,430 --> 00:04:42,963 ‫will then appear as loading. 74 00:04:43,920 --> 00:04:45,333 ‫So, let's see if that works. 75 00:04:46,500 --> 00:04:49,740 ‫And yeah, that city is gone. 76 00:04:49,740 --> 00:04:53,520 ‫Try that again and again and again. 77 00:04:53,520 --> 00:04:56,760 ‫And so, now, we are back at our initial state 78 00:04:56,760 --> 00:05:00,030 ‫and let's just reload to make sure that it also was deleted 79 00:05:00,030 --> 00:05:04,290 ‫from the API and it looks like it was. 80 00:05:04,290 --> 00:05:07,440 ‫Nice. So, a very important feature. 81 00:05:07,440 --> 00:05:09,930 ‫And now, that is also completed. 82 00:05:09,930 --> 00:05:12,870 ‫So, we're almost done now with this project. 83 00:05:12,870 --> 00:05:15,180 ‫It's already working really nicely. 84 00:05:15,180 --> 00:05:18,570 ‫So, I'm really, really enjoying working on this. 85 00:05:18,570 --> 00:05:21,480 ‫And what I want to do next is to convert 86 00:05:21,480 --> 00:05:24,900 ‫this state management that we have going on here 87 00:05:24,900 --> 00:05:27,300 ‫to a reducer. 88 00:05:27,300 --> 00:05:30,030 ‫So, that's a common pattern that you will see together 89 00:05:30,030 --> 00:05:31,710 ‫with the context API. 90 00:05:31,710 --> 00:05:33,540 ‫And so, I want to show you how to do that 91 00:05:33,540 --> 00:05:34,773 ‫in the next lecture.