1 00:00:01,600 --> 00:00:04,140 ‫[Jonas} So the last feature that we need to implement 2 00:00:04,140 --> 00:00:08,613 ‫about a single booking is the ability to delete it. 3 00:00:09,737 --> 00:00:12,750 ‫So basically here to this list. 4 00:00:12,750 --> 00:00:14,070 ‫So to this menu 5 00:00:14,070 --> 00:00:17,700 ‫we want to add a button to delete the booking 6 00:00:17,700 --> 00:00:20,610 ‫and also here onto the details page. 7 00:00:20,610 --> 00:00:22,140 ‫We want basically 8 00:00:22,140 --> 00:00:27,140 ‫like a red button here to also delete a booking from here. 9 00:00:27,180 --> 00:00:31,200 ‫And we actually already did something pretty similar earlier 10 00:00:31,200 --> 00:00:32,790 ‫with the cabins. 11 00:00:32,790 --> 00:00:33,840 ‫And so I think 12 00:00:33,840 --> 00:00:38,250 ‫that it's a good idea to leave this for you as a challenge. 13 00:00:38,250 --> 00:00:40,350 ‫So I want you to pause the video now 14 00:00:40,350 --> 00:00:43,710 ‫and then implement this feature on your own. 15 00:00:43,710 --> 00:00:46,860 ‫So take maybe 15 or 30 minutes 16 00:00:46,860 --> 00:00:49,623 ‫and then I see you back here once you are done. 17 00:00:51,570 --> 00:00:53,730 ‫Now so okay, so hopefully 18 00:00:53,730 --> 00:00:56,190 ‫you had some success with that. 19 00:00:56,190 --> 00:00:59,640 ‫And so let's now get started building this feature. 20 00:00:59,640 --> 00:01:02,730 ‫And first here in these menus. 21 00:01:02,730 --> 00:01:05,640 ‫So in the booking row itself. 22 00:01:05,640 --> 00:01:09,630 ‫Now remember how we do not immediately delete a booking 23 00:01:09,630 --> 00:01:12,000 ‫as we click on the delete button 24 00:01:12,000 --> 00:01:15,450 ‫but instead we first want to show a model window 25 00:01:15,450 --> 00:01:19,080 ‫with the confirm delete component inside of it. 26 00:01:19,080 --> 00:01:21,690 ‫And so to start, we need to bring back 27 00:01:21,690 --> 00:01:25,743 ‫or model window component that we built earlier. 28 00:01:26,990 --> 00:01:28,390 ‫So model 29 00:01:30,633 --> 00:01:35,633 ‫and then let's wrap the entire thing into that model. 30 00:01:36,210 --> 00:01:38,740 ‫So basically all the way down here 31 00:01:39,740 --> 00:01:43,233 ‫then we need to of course bring that in. 32 00:01:48,240 --> 00:01:49,710 ‫There we go. 33 00:01:49,710 --> 00:01:54,240 ‫And now remember that a model has an open child component 34 00:01:54,240 --> 00:01:56,673 ‫and a window child component. 35 00:01:57,583 --> 00:02:02,283 ‫So let's add that open button here to the list. 36 00:02:04,530 --> 00:02:09,530 ‫And so here we will have model.open 37 00:02:10,170 --> 00:02:13,200 ‫and this then needs the opens prop 38 00:02:13,200 --> 00:02:16,800 ‫for the name of the model that it will actually open. 39 00:02:16,800 --> 00:02:18,960 ‫So let's call this one delete. 40 00:02:18,960 --> 00:02:21,840 ‫And then here is where we need to pass in the button. 41 00:02:21,840 --> 00:02:26,297 ‫And so in this case, that button will be menus.button. 42 00:02:27,750 --> 00:02:31,470 ‫And so this is again quite confusing here, but 43 00:02:31,470 --> 00:02:34,830 ‫while this is just the structure that we have built 44 00:02:34,830 --> 00:02:36,900 ‫or the API that we have built 45 00:02:36,900 --> 00:02:39,810 ‫in these two compound components that are now 46 00:02:39,810 --> 00:02:41,193 ‫playing together here. 47 00:02:42,690 --> 00:02:46,410 ‫So here delete booking 48 00:02:46,410 --> 00:02:50,553 ‫and then we also need to pass in the icon prop. 49 00:02:52,800 --> 00:02:56,250 ‫So here we use that one again. 50 00:02:56,250 --> 00:03:00,840 ‫And then next up we also need the model.window. 51 00:03:00,840 --> 00:03:02,370 ‫And this should be outside here 52 00:03:02,370 --> 00:03:05,673 ‫off the list or maybe even off the menu itself. 53 00:03:06,510 --> 00:03:08,433 ‫So really let's just place this here. 54 00:03:09,540 --> 00:03:12,180 ‫So model.window 55 00:03:12,180 --> 00:03:14,760 ‫and then this needs to have the name corresponding 56 00:03:14,760 --> 00:03:19,760 ‫to the opens prop up there like this. 57 00:03:21,360 --> 00:03:24,420 ‫And then in here we pass the component that we 58 00:03:24,420 --> 00:03:27,183 ‫actually want to render inside the model. 59 00:03:28,080 --> 00:03:33,080 ‫So that's gonna be confirm delete, like this. 60 00:03:35,700 --> 00:03:40,113 ‫And again we need to manually bring this in sometimes. 61 00:03:46,358 --> 00:03:49,890 ‫All right, and then we need to specify a few props here. 62 00:03:49,890 --> 00:03:52,290 ‫So first of all, the resource name 63 00:03:52,290 --> 00:03:57,290 ‫which is bookings or just booking. 64 00:03:59,700 --> 00:04:03,579 ‫And then the unconfirm prop, which is basically 65 00:04:03,579 --> 00:04:07,380 ‫the callback function that will be called whenever we click 66 00:04:07,380 --> 00:04:09,631 ‫on the confirm button. 67 00:04:09,631 --> 00:04:12,120 ‫So here is where we will want to 68 00:04:12,120 --> 00:04:15,270 ‫call some delete booking function. 69 00:04:15,270 --> 00:04:16,980 ‫Now we don't have that yet 70 00:04:16,980 --> 00:04:21,360 ‫so let's just place this here so we don't create an error. 71 00:04:21,360 --> 00:04:23,040 ‫And then let's go ahead 72 00:04:23,040 --> 00:04:26,894 ‫and create ourselves yet another custom hook. 73 00:04:26,894 --> 00:04:30,090 ‫So we have used booking used bookings 74 00:04:30,090 --> 00:04:33,240 ‫and now we will create use delete bookings. 75 00:04:33,240 --> 00:04:36,257 ‫But since we already have something very similar here 76 00:04:36,257 --> 00:04:41,070 ‫let's just copy and paste that to save some time. 77 00:04:41,070 --> 00:04:45,690 ‫But please feel totally free to also write this code here 78 00:04:45,690 --> 00:04:46,523 ‫on your own. 79 00:04:48,510 --> 00:04:50,410 ‫So use delete booking 80 00:04:53,760 --> 00:04:56,013 ‫and then here changing all of the names. 81 00:05:03,300 --> 00:05:08,233 ‫Then here, let's change this to delete booking everywhere. 82 00:05:16,740 --> 00:05:20,160 ‫So we actually already have that delete booking 83 00:05:20,160 --> 00:05:23,820 ‫function here in our API bookings file. 84 00:05:23,820 --> 00:05:26,403 ‫So here we even need to only change this. 85 00:05:30,090 --> 00:05:32,220 ‫And then finally here the Query key 86 00:05:32,220 --> 00:05:36,630 ‫that we want to invalidate is bookings. 87 00:05:36,630 --> 00:05:40,050 ‫And so this will then invalidate all the queries 88 00:05:40,050 --> 00:05:44,820 ‫that have bookings in the array itself. 89 00:05:44,820 --> 00:05:48,480 ‫So for example, it will also invalidate this Query 90 00:05:48,480 --> 00:05:51,423 ‫even though it has a lot of other stuff here. 91 00:05:52,346 --> 00:05:53,790 ‫Now, right? 92 00:05:53,790 --> 00:05:56,613 ‫So this I think should be done. 93 00:05:57,580 --> 00:06:02,580 ‫And so coming back here, let's then bring all of that in. 94 00:06:06,225 --> 00:06:11,225 ‫So delete booking and is deleting, I believe. 95 00:06:20,220 --> 00:06:23,550 ‫And once again, we need to somehow 96 00:06:23,550 --> 00:06:25,923 ‫for some reason bring that in manually. 97 00:06:28,830 --> 00:06:33,820 ‫Let's do use delete booking 98 00:06:34,860 --> 00:06:39,423 ‫from use delete booking. 99 00:06:40,950 --> 00:06:43,590 ‫Now, okay, let's just clean up our imports 100 00:06:43,590 --> 00:06:44,583 ‫here a little bit. 101 00:06:52,410 --> 00:06:54,393 ‫And there we go. 102 00:06:57,556 --> 00:06:59,703 ‫Okay, so where were we? 103 00:07:01,466 --> 00:07:03,540 ‫Yeah, right here. 104 00:07:03,540 --> 00:07:05,950 ‫So now all we need to do is to pass 105 00:07:06,994 --> 00:07:09,570 ‫in delete booking with the current booking ID. 106 00:07:09,570 --> 00:07:13,290 ‫And this should already be enough to make this work. 107 00:07:13,290 --> 00:07:14,790 ‫So let's reload. 108 00:07:14,790 --> 00:07:16,203 ‫No bugs here. 109 00:07:17,190 --> 00:07:20,733 ‫And then let's try to delete this booking here. 110 00:07:22,039 --> 00:07:26,370 ‫So indeed, we get our model window just like we wanted. 111 00:07:26,370 --> 00:07:30,360 ‫Let's click delete and beautiful. 112 00:07:30,360 --> 00:07:33,360 ‫So that booking is gone and our Query has 113 00:07:33,360 --> 00:07:37,290 ‫successfully reevaluated and fetched this data again. 114 00:07:37,290 --> 00:07:41,550 ‫And so this time without that booking that we just deleted 115 00:07:41,550 --> 00:07:44,550 ‫let's try another one just to be sure. 116 00:07:44,550 --> 00:07:47,430 ‫So the one with Emma Watson and now 117 00:07:47,430 --> 00:07:49,020 ‫that one is gone as well. 118 00:07:49,020 --> 00:07:53,010 ‫And down here we also get now the new number 119 00:07:53,010 --> 00:07:55,297 ‫of just 22 results. 120 00:07:55,297 --> 00:07:56,820 ‫And of course 121 00:07:56,820 --> 00:07:59,850 ‫don't worry about deleting these bookings because 122 00:07:59,850 --> 00:08:03,715 ‫we can always get them back simply by clicking here. 123 00:08:03,715 --> 00:08:08,400 ‫Alright, and so now all that we have to do is 124 00:08:08,400 --> 00:08:12,063 ‫to implement the same functionality with a button here. 125 00:08:13,531 --> 00:08:17,310 ‫So we will still want a model window. 126 00:08:17,310 --> 00:08:20,940 ‫And so let's actually grab this part here 127 00:08:20,940 --> 00:08:22,454 ‫with the confirm delete 128 00:08:22,454 --> 00:08:27,454 ‫and place that right here close to this final button. 129 00:08:31,800 --> 00:08:36,183 ‫So first of all, let's bring in the model window again. 130 00:08:37,805 --> 00:08:41,113 ‫And so then here we will have model window 131 00:08:41,113 --> 00:08:43,120 ‫and then we just need 132 00:08:43,992 --> 00:08:48,453 ‫The model.open here as well. 133 00:08:51,210 --> 00:08:55,860 ‫So then again, the opens prop set to delete. 134 00:08:55,860 --> 00:08:59,140 ‫And here we're just going to use a regular button 135 00:09:00,390 --> 00:09:03,723 ‫but with the variation set to danger. 136 00:09:05,310 --> 00:09:09,120 ‫And so this will then make the button red 137 00:09:09,120 --> 00:09:13,437 ‫and then here, delete booking. 138 00:09:13,437 --> 00:09:18,240 ‫Alright, then we need to bring in this component. 139 00:09:18,240 --> 00:09:23,170 ‫And let's also grab then this part right here 140 00:09:29,160 --> 00:09:32,283 ‫place that somewhere like here. 141 00:09:38,500 --> 00:09:40,050 ‫And nice, there is the button 142 00:09:40,050 --> 00:09:43,800 ‫and it should actually already be working. 143 00:09:43,800 --> 00:09:44,793 ‫So let's click. 144 00:09:45,840 --> 00:09:47,940 ‫And it was successfully deleted 145 00:09:47,940 --> 00:09:51,540 ‫but now this isn't really what we want. 146 00:09:51,540 --> 00:09:55,020 ‫So basically this should now close and we kind 147 00:09:55,020 --> 00:10:00,020 ‫of want to go back to the table where we were before, right? 148 00:10:00,120 --> 00:10:02,550 ‫So this doesn't really make a lot of sense 149 00:10:02,550 --> 00:10:06,000 ‫also because this page actually no longer exists. 150 00:10:06,000 --> 00:10:08,852 ‫So if we were trying to load this now, then 151 00:10:08,852 --> 00:10:13,852 ‫it wouldn't work again because this doesn't exist anymore. 152 00:10:15,960 --> 00:10:18,212 ‫And so here in this case 153 00:10:18,212 --> 00:10:22,290 ‫right after the booking has been deleted 154 00:10:22,290 --> 00:10:25,457 ‫we actually want to go back to the previous page. 155 00:10:25,457 --> 00:10:28,950 ‫Now, before we do that, let's actually also pass 156 00:10:28,950 --> 00:10:33,950 ‫in the disabled prop with the is deleting state. 157 00:10:34,949 --> 00:10:38,130 ‫And the same thing here. 158 00:10:38,130 --> 00:10:41,190 ‫So we are still not using that variable 159 00:10:41,190 --> 00:10:43,173 ‫and so let's do that here indeed. 160 00:10:47,580 --> 00:10:48,990 ‫All right. 161 00:10:48,990 --> 00:10:53,520 ‫But anyway, now here we want that functionality that as soon 162 00:10:53,520 --> 00:10:56,823 ‫as the booking has been deleted, we want to move back. 163 00:11:00,291 --> 00:11:02,231 ‫So how can we do that? 164 00:11:02,231 --> 00:11:03,600 ‫Well, remember how we learned in an earlier lecture 165 00:11:03,600 --> 00:11:08,520 ‫that we can also add these, for example, on success 166 00:11:08,520 --> 00:11:13,520 ‫or on error handlers, not only into the on mutation hook 167 00:11:13,710 --> 00:11:18,480 ‫but only right into the individual mutate function. 168 00:11:18,480 --> 00:11:22,680 ‫So again, we do not need to specify these handlers 169 00:11:22,680 --> 00:11:26,310 ‫for all of the mutations, but we can also do it 170 00:11:26,310 --> 00:11:30,840 ‫for individual mutations, which is what we want to do now. 171 00:11:30,840 --> 00:11:33,352 ‫So we want to have a different behavior 172 00:11:33,352 --> 00:11:35,850 ‫in this mutation here. 173 00:11:35,850 --> 00:11:38,880 ‫So in this deletion, then we want here. 174 00:11:38,880 --> 00:11:43,080 ‫So here we want nothing to happen once it was successful 175 00:11:43,080 --> 00:11:45,900 ‫but here in this one, we want to move back. 176 00:11:45,900 --> 00:11:50,430 ‫And so we do not add that handler right here 177 00:11:50,430 --> 00:11:54,423 ‫into the unsuccess, but really only in this one. 178 00:11:55,530 --> 00:11:59,160 ‫So as a second part here, we pass 179 00:11:59,160 --> 00:12:04,160 ‫in an object with all the options that we want to specify. 180 00:12:04,680 --> 00:12:07,200 ‫And so here we could now do unsuccess 181 00:12:07,200 --> 00:12:10,500 ‫or we could also do really unsettled. 182 00:12:10,500 --> 00:12:14,280 ‫So unsettled means that this will always happen no matter 183 00:12:14,280 --> 00:12:16,773 ‫if it's an error or a success. 184 00:12:16,773 --> 00:12:19,143 ‫So let's use that one. 185 00:12:20,220 --> 00:12:24,250 ‫And then here, all we will want to do is to navigate 186 00:12:25,411 --> 00:12:30,411 ‫back by one step, give this a safe. 187 00:12:31,710 --> 00:12:36,510 ‫And so now if we delete this, then nothing will happen. 188 00:12:36,510 --> 00:12:38,910 ‫So just the deletion itself. 189 00:12:38,910 --> 00:12:42,210 ‫But if we now come here to this details page 190 00:12:42,210 --> 00:12:46,470 ‫of Jonathan Williams and delete this, then as soon 191 00:12:46,470 --> 00:12:50,288 ‫as that happens, we move back to the bookings page. 192 00:12:50,288 --> 00:12:52,620 ‫Great. And with this 193 00:12:52,620 --> 00:12:56,880 ‫we finished working on the individual booking level. 194 00:12:56,880 --> 00:12:59,790 ‫Now one thing that we could also do would be to 195 00:12:59,790 --> 00:13:03,150 ‫edit a booking, but that would really be a lot 196 00:13:03,150 --> 00:13:06,030 ‫of work because we have all these moving parts 197 00:13:06,030 --> 00:13:08,970 ‫with the different guests, and the different cabins. 198 00:13:08,970 --> 00:13:12,060 ‫And so that would become kind of a mess. 199 00:13:12,060 --> 00:13:15,240 ‫So of course it would be doable, but it would take a lot 200 00:13:15,240 --> 00:13:17,910 ‫of time to do that here in this video. 201 00:13:17,910 --> 00:13:19,920 ‫And so instead, let's now move 202 00:13:19,920 --> 00:13:22,470 ‫on to one of the most important 203 00:13:22,470 --> 00:13:25,052 ‫and most exciting parts of this project 204 00:13:25,052 --> 00:13:30,052 ‫which is to finally implement a real authentication system.