1
00:00:01,350 --> 00:00:03,210
‫Let's now use all the code

2
00:00:03,210 --> 00:00:07,050
‫that we have already written to quickly implement a feature

3
00:00:07,050 --> 00:00:09,723
‫where we can duplicate a cabin.

4
00:00:11,430 --> 00:00:14,010
‫So right here, in each cabin row,

5
00:00:14,010 --> 00:00:16,953
‫we want to add a third action here.

6
00:00:18,510 --> 00:00:23,510
‫So, let's say a button for duplicating.

7
00:00:25,890 --> 00:00:28,680
‫Now this doesn't really fit here anymore.

8
00:00:28,680 --> 00:00:33,150
‫And so maybe let's actually use some icons here.

9
00:00:33,150 --> 00:00:36,810
‫So instead of using text, let's use, again,

10
00:00:36,810 --> 00:00:40,120
‫from our icon library, the Hi

11
00:00:41,040 --> 00:00:45,753
‫and then Square2Stack icon here,

12
00:00:46,620 --> 00:00:49,380
‫and then the same for Edit.

13
00:00:49,380 --> 00:00:53,733
‫So here, let's say HiPencil.

14
00:00:55,380 --> 00:00:58,023
‫Just make sure that you correctly import them.

15
00:00:58,950 --> 00:01:02,610
‫And then here, HiTrash.

16
00:01:02,610 --> 00:01:03,993
‫So, for deleting.

17
00:01:05,100 --> 00:01:07,200
‫And again, we will style this later,

18
00:01:07,200 --> 00:01:11,430
‫because we will later actually make like a context menu,

19
00:01:11,430 --> 00:01:13,230
‫where we then click on some dots

20
00:01:13,230 --> 00:01:17,220
‫and then a list of these things here will open up.

21
00:01:17,220 --> 00:01:20,940
‫So that's going to look a lot better than what we have here.

22
00:01:20,940 --> 00:01:23,193
‫But for now, this is more than enough.

23
00:01:24,720 --> 00:01:27,480
‫So, whenever we click on this button here,

24
00:01:27,480 --> 00:01:31,080
‫we will now want to duplicate, basically, this cabin.

25
00:01:31,080 --> 00:01:34,500
‫Or in other words, we just want to create a new cabin

26
00:01:34,500 --> 00:01:37,740
‫with identical data than this one.

27
00:01:37,740 --> 00:01:41,970
‫And so using the custom hook that we created earlier,

28
00:01:41,970 --> 00:01:43,773
‫that's going to be very easy.

29
00:01:45,990 --> 00:01:50,010
‫So, we can just use here that hook.

30
00:01:50,010 --> 00:01:54,960
‫So, useCreateCabin.

31
00:01:54,960 --> 00:01:58,877
‫And so from there, we can grab isCreating and createCabin.

32
00:02:05,985 --> 00:02:10,620
‫So here, let's create a function to handle that action.

33
00:02:10,620 --> 00:02:12,490
‫So, handleDuplicate,

34
00:02:17,550 --> 00:02:19,813
‫and then we just do createCabin,

35
00:02:20,760 --> 00:02:24,540
‫and pass in an object with all the things that we want.

36
00:02:24,540 --> 00:02:26,160
‫So, that's the name.

37
00:02:26,160 --> 00:02:28,680
‫And here, let's create a new name,

38
00:02:28,680 --> 00:02:32,613
‫let's say "Copy of" and then the original name,

39
00:02:34,140 --> 00:02:38,460
‫and that actually needs to be after this part.

40
00:02:38,460 --> 00:02:40,350
‫'Cause now we need this here, of course,

41
00:02:40,350 --> 00:02:43,560
‫to create our new cabin object,

42
00:02:43,560 --> 00:02:46,740
‫and then we also want, basically, all the rest.

43
00:02:46,740 --> 00:02:51,740
‫So maxCapacity, regularPrice, the discount, the image,

44
00:02:53,430 --> 00:02:58,350
‫and the description as well.

45
00:02:58,350 --> 00:03:00,153
‫So I guess I didn't get that here.

46
00:03:03,929 --> 00:03:07,620
‫But of course now, here, we are going to need that.

47
00:03:07,620 --> 00:03:11,940
‫And so, then all we need to do is to hook that up

48
00:03:11,940 --> 00:03:13,470
‫to this button.

49
00:03:13,470 --> 00:03:16,907
‫So onClick, and then handleDuplicate.

50
00:03:17,820 --> 00:03:19,980
‫But before we test this out,

51
00:03:19,980 --> 00:03:23,730
‫let's actually go back to our apiCabins,

52
00:03:23,730 --> 00:03:27,390
‫and to this function where we actually create a new cabin.

53
00:03:27,390 --> 00:03:31,470
‫Because here, there's something that we still need to fix.

54
00:03:31,470 --> 00:03:35,250
‫So if the image already has a path,

55
00:03:35,250 --> 00:03:38,850
‫so in the case that an image has already been uploaded

56
00:03:38,850 --> 00:03:42,690
‫for this cabin, then that means that,

57
00:03:42,690 --> 00:03:45,750
‫actually, we shouldn't upload anything else here,

58
00:03:45,750 --> 00:03:48,870
‫and so we should fix that right here.

59
00:03:48,870 --> 00:03:53,090
‫So in case, again, the hasImagePath exists,

60
00:03:55,560 --> 00:03:58,503
‫then let's immediately return the data here.

61
00:03:59,430 --> 00:04:01,530
‫So, exactly what we have here,

62
00:04:01,530 --> 00:04:03,150
‫but then we do it early

63
00:04:03,150 --> 00:04:06,033
‫so that the image is then never uploaded.

64
00:04:07,890 --> 00:04:12,123
‫All right. So, let's check this.

65
00:04:13,110 --> 00:04:14,400
‫And so...

66
00:04:14,400 --> 00:04:16,560
‫Well, we get an error.

67
00:04:16,560 --> 00:04:19,503
‫So, createCabin is not a function.

68
00:04:22,680 --> 00:04:26,433
‫So, let's come here to row 65.

69
00:04:30,090 --> 00:04:33,033
‫Ah, because here, we didn't actually call the hook.

70
00:04:35,910 --> 00:04:37,353
‫So, let's try that again,

71
00:04:38,310 --> 00:04:40,923
‫and let's wait for it.

72
00:04:42,210 --> 00:04:44,610
‫So, yeah.

73
00:04:44,610 --> 00:04:46,110
‫Beautiful.

74
00:04:46,110 --> 00:04:48,000
‫So we have copy of one,

75
00:04:48,000 --> 00:04:50,820
‫and it looks exactly the same as this one.

76
00:04:50,820 --> 00:04:52,350
‫And notice how, of course,

77
00:04:52,350 --> 00:04:55,320
‫we got that nice notification up there.

78
00:04:55,320 --> 00:04:57,330
‫And so that's the great thing

79
00:04:57,330 --> 00:05:00,270
‫about centralizing all the success logic

80
00:05:00,270 --> 00:05:02,073
‫in this one place here.

81
00:05:03,210 --> 00:05:05,250
‫So wherever in our application,

82
00:05:05,250 --> 00:05:08,670
‫we use this createCabin function now.

83
00:05:08,670 --> 00:05:10,560
‫Whenever there is a success,

84
00:05:10,560 --> 00:05:13,140
‫all this code here will be executed.

85
00:05:13,140 --> 00:05:16,590
‫We have that all in one nice central place.

86
00:05:16,590 --> 00:05:19,230
‫And so maybe with this, you can start to see

87
00:05:19,230 --> 00:05:23,403
‫why this useMutation hook is also very useful.

88
00:05:25,770 --> 00:05:26,940
‫Right.

89
00:05:26,940 --> 00:05:30,660
‫Now here, let's just disable the button

90
00:05:30,660 --> 00:05:32,730
‫while that is happening.

91
00:05:32,730 --> 00:05:37,260
‫So, disable and then isCreating,

92
00:05:37,260 --> 00:05:40,323
‫so that the user actually has some feedback.

93
00:05:41,310 --> 00:05:44,073
‫So, let's maybe duplicate this one as well.

94
00:05:45,450 --> 00:05:46,593
‫And, nice.

95
00:05:50,160 --> 00:05:51,990
‫Here, maybe let's delete this one.

96
00:05:51,990 --> 00:05:54,270
‫But here, now that we have a duplicate,

97
00:05:54,270 --> 00:05:56,973
‫that then makes it very easy to just edit this.

98
00:05:59,220 --> 00:06:01,770
‫For example, to create a 007,

99
00:06:01,770 --> 00:06:03,330
‫where everything is the same

100
00:06:03,330 --> 00:06:05,643
‫except for the name and the image.

101
00:06:06,630 --> 00:06:08,493
‫So, let's upload this one.

102
00:06:10,710 --> 00:06:12,003
‫And there we go.

103
00:06:12,960 --> 00:06:15,120
‫And again, the form here is not closing

104
00:06:15,120 --> 00:06:18,303
‫because, later on, this will be a pop-up.

105
00:06:20,340 --> 00:06:21,173
‫Great.

106
00:06:22,320 --> 00:06:25,140
‫So for now, I think that we are finally ready

107
00:06:25,140 --> 00:06:28,710
‫to leave this domain of cabins behind.

108
00:06:28,710 --> 00:06:32,040
‫So, we really did all the CRUD operations.

109
00:06:32,040 --> 00:06:35,010
‫So create, read, update, and delete

110
00:06:35,010 --> 00:06:38,190
‫using React Query on the cabins.

111
00:06:38,190 --> 00:06:41,550
‫And so next up, it is time to finally move on

112
00:06:41,550 --> 00:06:42,780
‫to something else,

113
00:06:42,780 --> 00:06:46,323
‫which is going to be working with these settings here.