1 00:00:01,140 --> 00:00:03,330 ‫And now to finish this part 2 00:00:03,330 --> 00:00:05,310 ‫about the modal windows, 3 00:00:05,310 --> 00:00:07,950 ‫let's reuse it two more times. 4 00:00:07,950 --> 00:00:12,033 ‫So to edit and to confirm a cabin deletion. 5 00:00:13,500 --> 00:00:18,500 ‫So first off, let's clean up this file a little bit, 6 00:00:19,590 --> 00:00:21,363 ‫and then here as well. 7 00:00:22,770 --> 00:00:27,510 ‫And also we actually don't want this other window here 8 00:00:27,510 --> 00:00:29,103 ‫where we display a table. 9 00:00:30,810 --> 00:00:33,490 ‫Also, let's place this modal into a div 10 00:00:35,790 --> 00:00:39,243 ‫so that the button doesn't occupy all that space. 11 00:00:43,590 --> 00:00:46,440 ‫And so now, as I was saying initially, 12 00:00:46,440 --> 00:00:49,950 ‫let's actually reuse this modal window 13 00:00:49,950 --> 00:00:52,953 ‫both for the deleting and for editing. 14 00:00:54,330 --> 00:00:59,330 ‫So let's come to our CabinRow right here, 15 00:01:00,300 --> 00:01:03,960 ‫and then let's use that modal window. 16 00:01:03,960 --> 00:01:07,023 ‫So basically around these buttons right here. 17 00:01:08,070 --> 00:01:11,490 ‫Now this one doesn't belong into the modal window. 18 00:01:11,490 --> 00:01:16,023 ‫Let's start, or let's open it right here. 19 00:01:18,480 --> 00:01:19,443 ‫Alright. 20 00:01:20,850 --> 00:01:24,240 ‫And for now this will, of course, not do anything. 21 00:01:24,240 --> 00:01:28,920 ‫But now let's then start using our child components. 22 00:01:28,920 --> 00:01:33,060 ‫So Modal.Open, and then here is where 23 00:01:33,060 --> 00:01:35,253 ‫we will place that button. 24 00:01:38,370 --> 00:01:43,370 ‫And then what should happen whenever the window is opened? 25 00:01:44,640 --> 00:01:48,300 ‫Well, inside that window is where actually 26 00:01:48,300 --> 00:01:52,083 ‫we want to now render this create cabin form. 27 00:01:53,010 --> 00:01:57,720 ‫So let's remove this, place that here, 28 00:01:57,720 --> 00:02:01,260 ‫and then we can tremendously clean up this file 29 00:02:01,260 --> 00:02:05,403 ‫so we can get rid of this state, which we no longer need. 30 00:02:06,630 --> 00:02:08,403 ‫The same here for the import. 31 00:02:11,430 --> 00:02:15,600 ‫And we also no longer then need to 32 00:02:15,600 --> 00:02:17,673 ‫return this fragment. 33 00:02:21,720 --> 00:02:23,700 ‫And while here 34 00:02:23,700 --> 00:02:28,533 ‫we also have this onClick handler that we no longer need. 35 00:02:30,240 --> 00:02:31,140 ‫And this. 36 00:02:31,140 --> 00:02:32,463 ‫And, there we go. 37 00:02:33,810 --> 00:02:37,500 ‫Alright, and so now all we need to do, I believe, 38 00:02:37,500 --> 00:02:40,563 ‫is to connect this open with this window. 39 00:02:41,610 --> 00:02:44,460 ‫So let's call this one here Edit. 40 00:02:44,460 --> 00:02:49,413 ‫And so then this button opens Edit. 41 00:02:50,610 --> 00:02:52,113 ‫Now that should be it. 42 00:02:53,370 --> 00:02:54,813 ‫So, let's see. 43 00:02:56,130 --> 00:02:57,063 ‫Nice. 44 00:02:57,990 --> 00:03:01,530 ‫So that's the edit form for Cabin 001. 45 00:03:01,530 --> 00:03:06,120 ‫Let's try with the test, or actually with the 008. 46 00:03:06,120 --> 00:03:07,113 ‫And, there we go. 47 00:03:08,370 --> 00:03:13,370 ‫Great, so see how easy it is to now include 48 00:03:13,530 --> 00:03:16,140 ‫a new modal window like this. 49 00:03:16,140 --> 00:03:19,980 ‫So really, really easy with this really nice API 50 00:03:19,980 --> 00:03:22,470 ‫that we created ourselves earlier. 51 00:03:22,470 --> 00:03:25,350 ‫And, of course, everything works as before. 52 00:03:25,350 --> 00:03:29,070 ‫So this component here basically still gets injected 53 00:03:29,070 --> 00:03:32,220 ‫with that onClose modal function, 54 00:03:32,220 --> 00:03:36,240 ‫which allows this to also 55 00:03:36,240 --> 00:03:38,610 ‫close this here as we edit. 56 00:03:38,610 --> 00:03:40,350 ‫And now let's actually test that. 57 00:03:40,350 --> 00:03:44,883 ‫So 007, let's change the price to $700. 58 00:03:46,260 --> 00:03:47,520 ‫Let's see. 59 00:03:47,520 --> 00:03:52,323 ‫And yeah, as soon as that was done, our modal was closed. 60 00:03:53,430 --> 00:03:56,310 ‫Great, so that was one part. 61 00:03:56,310 --> 00:03:57,990 ‫And now the second part is 62 00:03:57,990 --> 00:04:00,510 ‫that whenever we click here on this button, 63 00:04:00,510 --> 00:04:04,050 ‫we actually don't want the cabin to be deleted immediately. 64 00:04:04,050 --> 00:04:08,940 ‫But instead, as is usual in normal web applications, 65 00:04:08,940 --> 00:04:11,070 ‫first we should get asked 66 00:04:11,070 --> 00:04:14,673 ‫whether we are sure if that cabin should be deleted. 67 00:04:16,710 --> 00:04:21,180 ‫So for that we actually already have a component here 68 00:04:21,180 --> 00:04:22,860 ‫called ConfirmDelete. 69 00:04:24,540 --> 00:04:27,900 ‫So this is a reusable component that can be used 70 00:04:27,900 --> 00:04:30,420 ‫for different resources. 71 00:04:30,420 --> 00:04:34,110 ‫So basically now we're going to use it for the cabins. 72 00:04:34,110 --> 00:04:36,270 ‫So this receives the resource name 73 00:04:36,270 --> 00:04:38,280 ‫then the onConfirm function, 74 00:04:38,280 --> 00:04:42,420 ‫which will eventually get called if we are really sure, 75 00:04:42,420 --> 00:04:43,860 ‫so if we confirm. 76 00:04:43,860 --> 00:04:46,470 ‫And then also the disabled state. 77 00:04:46,470 --> 00:04:51,270 ‫And so let's now use this here inside our modal window. 78 00:04:51,270 --> 00:04:54,870 ‫So this one also should be rendered inside a modal. 79 00:04:54,870 --> 00:04:57,783 ‫So, like you have seen many, many times before. 80 00:04:59,130 --> 00:05:04,020 ‫So let's create ourselves a new Modal.Open, 81 00:05:04,020 --> 00:05:07,023 ‫which is where we will place this button, 82 00:05:07,890 --> 00:05:12,540 ‫and then our Modal.Window. 83 00:05:12,540 --> 00:05:17,193 ‫And so here we now want that ConfirmDelete component. 84 00:05:18,210 --> 00:05:21,450 ‫So that receives the resource name. 85 00:05:21,450 --> 00:05:25,470 ‫And so that's gonna be cabins, 86 00:05:25,470 --> 00:05:27,570 ‫also the disabled state. 87 00:05:27,570 --> 00:05:32,570 ‫And so that's gonna be isDeleting. 88 00:05:32,580 --> 00:05:35,310 ‫And then, finally, onConfirm. 89 00:05:35,310 --> 00:05:37,740 ‫But for now, let's not do that, 90 00:05:37,740 --> 00:05:40,890 ‫and let's just test if this actually works. 91 00:05:40,890 --> 00:05:44,880 ‫Say we want to delete this and, great, 92 00:05:44,880 --> 00:05:47,220 ‫so now we get this nice window here. 93 00:05:47,220 --> 00:05:49,710 ‫But for now, nothing is going to happen. 94 00:05:49,710 --> 00:05:52,680 ‫So we cannot cancel and we cannot delete. 95 00:05:52,680 --> 00:05:54,603 ‫But we can, of course, close it. 96 00:05:55,860 --> 00:05:59,010 ‫Now, okay, and so now we need to pass in the function 97 00:05:59,010 --> 00:06:02,850 ‫that should actually be called when we confirm. 98 00:06:02,850 --> 00:06:06,543 ‫And so that function is actually this one. 99 00:06:08,010 --> 00:06:10,200 ‫So before we just called this function 100 00:06:10,200 --> 00:06:11,700 ‫directly on the click, 101 00:06:11,700 --> 00:06:16,353 ‫but now it should only be called after we confirm. 102 00:06:17,700 --> 00:06:22,653 ‫So onConfirm and, of course, needs to be here. 103 00:06:25,470 --> 00:06:28,380 ‫So here we want that function, 104 00:06:28,380 --> 00:06:33,033 ‫and here we can get rid of this and of all of this as well. 105 00:06:34,080 --> 00:06:36,960 ‫And now let's go back here 106 00:06:36,960 --> 00:06:41,220 ‫and let's then make these buttons actually work. 107 00:06:41,220 --> 00:06:43,740 ‫So, first of all, we have the cancel button, 108 00:06:43,740 --> 00:06:47,040 ‫which should essentially just close the modal. 109 00:06:47,040 --> 00:06:50,040 ‫So, how do we make this one work? 110 00:06:50,040 --> 00:06:53,310 ‫Well, since this is a child component now 111 00:06:53,310 --> 00:06:54,720 ‫of the modal window, 112 00:06:54,720 --> 00:06:59,643 ‫it'll automatically receive the onClose modal prompt, right? 113 00:07:00,690 --> 00:07:03,150 ‫So that's what we have been talking about 114 00:07:03,150 --> 00:07:07,440 ‫all this time where, remember, 115 00:07:07,440 --> 00:07:12,440 ‫we clone this element and inject that function in there. 116 00:07:13,410 --> 00:07:16,440 ‫So, giving it this onClose modal prompt. 117 00:07:16,440 --> 00:07:21,440 ‫And so now that will be created inside confirmDelete. 118 00:07:21,810 --> 00:07:24,030 ‫So here we have now access to that. 119 00:07:24,030 --> 00:07:25,366 ‫And so we can say 120 00:07:25,366 --> 00:07:28,773 ‫onClick onCloseModal. 121 00:07:32,268 --> 00:07:35,130 ‫And then we also already have onconfirm. 122 00:07:35,130 --> 00:07:38,463 ‫And so let's place that here as well. 123 00:07:40,320 --> 00:07:42,270 ‫So, onConfirm. 124 00:07:42,270 --> 00:07:47,270 ‫And with this, this functionality should now be working. 125 00:07:47,370 --> 00:07:48,693 ‫At least most of it. 126 00:07:50,340 --> 00:07:52,290 ‫So, the modal opens. 127 00:07:52,290 --> 00:07:55,410 ‫When we click cancel, then it closes. 128 00:07:55,410 --> 00:07:59,253 ‫Great, but now watch what happens here. 129 00:08:00,120 --> 00:08:05,120 ‫So delete, and, indeed, the cabin gets successfully deleted. 130 00:08:05,700 --> 00:08:09,300 ‫Now, actually, I thought that after this deletion 131 00:08:09,300 --> 00:08:12,420 ‫the modal window would stay open 132 00:08:12,420 --> 00:08:16,920 ‫because nowhere we actually told it to close afterwards. 133 00:08:16,920 --> 00:08:21,330 ‫But thinking about this, it actually makes sense because 134 00:08:21,330 --> 00:08:25,920 ‫after we delete the cabin, the row does no longer exist. 135 00:08:25,920 --> 00:08:29,460 ‫And so, therefore, the modal component inside the row 136 00:08:29,460 --> 00:08:31,380 ‫also no longer exists. 137 00:08:31,380 --> 00:08:32,463 ‫And so, therefore, 138 00:08:32,463 --> 00:08:35,970 ‫then the modal window can no longer be shown. 139 00:08:35,970 --> 00:08:39,033 ‫So that's why it does, indeed, disappear.