1
00:00:01,230 --> 00:00:04,410
‫Next up, let's also allow employees

2
00:00:04,410 --> 00:00:08,193
‫to check out a guest once they leave the hotel.

3
00:00:09,660 --> 00:00:13,110
‫And this one is actually gonna be a lot simpler

4
00:00:13,110 --> 00:00:14,640
‫than checking in.

5
00:00:14,640 --> 00:00:17,340
‫So here we don't even need a separate page.

6
00:00:17,340 --> 00:00:22,340
‫All we need is a checkout button here in this menu,

7
00:00:22,410 --> 00:00:24,723
‫and also on the details page.

8
00:00:25,710 --> 00:00:28,140
‫Now first of all, only the guests

9
00:00:28,140 --> 00:00:32,520
‫that are currently checked in can actually be checked out.

10
00:00:32,520 --> 00:00:35,880
‫And so let's start with that part.

11
00:00:35,880 --> 00:00:37,710
‫So by adding a button here,

12
00:00:37,710 --> 00:00:41,913
‫if the user or if the guest is actually checked in.

13
00:00:43,350 --> 00:00:47,670
‫So let's come to our BookingRow and then here,

14
00:00:49,470 --> 00:00:52,650
‫well, since this is already selected,

15
00:00:52,650 --> 00:00:54,333
‫let's just duplicate it.

16
00:00:55,500 --> 00:01:00,500
‫So basically, adding a new button here to this Menus list.

17
00:01:01,320 --> 00:01:03,810
‫And so here, we want to render this one

18
00:01:03,810 --> 00:01:08,810
‫if the status is currently checked in.

19
00:01:09,870 --> 00:01:11,280
‫Then here the icon,

20
00:01:11,280 --> 00:01:15,690
‫let's make it Arrow

21
00:01:15,690 --> 00:01:18,333
‫and then UpOnSquare.

22
00:01:23,007 --> 00:01:28,007
‫And then here, we will not want, of course, this action.

23
00:01:29,460 --> 00:01:32,313
‫So let's just do something empty here for now,

24
00:01:34,080 --> 00:01:37,860
‫just so we see if the button actually shows up.

25
00:01:37,860 --> 00:01:39,540
‫And so, indeed,

26
00:01:39,540 --> 00:01:42,877
‫here, we can now well actually we want Check out.

27
00:01:45,680 --> 00:01:47,250
‫And there we go.

28
00:01:47,250 --> 00:01:49,680
‫So this one we can check out.

29
00:01:49,680 --> 00:01:52,140
‫And this one we can check in.

30
00:01:52,140 --> 00:01:55,083
‫So the arrow here with the opposite direction.

31
00:01:56,310 --> 00:01:59,280
‫Nice, but now next up,

32
00:01:59,280 --> 00:02:02,910
‫we need to actually implement the functionality itself.

33
00:02:02,910 --> 00:02:05,733
‫So the logic for checking out a guest.

34
00:02:06,990 --> 00:02:10,260
‫And that logic is actually pretty similar

35
00:02:10,260 --> 00:02:13,890
‫to the check in logic, because checking out

36
00:02:13,890 --> 00:02:18,890
‫will also be to basically edit or update a booking.

37
00:02:18,990 --> 00:02:21,513
‫So let's just duplicate this file,

38
00:02:24,150 --> 00:02:25,713
‫use Checkout.

39
00:02:26,850 --> 00:02:31,320
‫And then all we need to do is to change some names here.

40
00:02:31,320 --> 00:02:32,653
‫So useCheckout.

41
00:02:35,160 --> 00:02:36,063
‫Then here,

42
00:02:38,340 --> 00:02:40,410
‫let's call this one checkout.

43
00:02:40,410 --> 00:02:42,343
‫And here is CheckingOut.

44
00:02:44,305 --> 00:02:47,407
‫And then of course, also here as well.

45
00:02:53,880 --> 00:02:58,880
‫So here, successfully checked out and here.

46
00:03:00,750 --> 00:03:04,230
‫And then the most important part is of course, again,

47
00:03:04,230 --> 00:03:06,660
‫this mutation function.

48
00:03:06,660 --> 00:03:09,000
‫Now, here we do not need to receive

49
00:03:09,000 --> 00:03:11,190
‫any data about breakfast,

50
00:03:11,190 --> 00:03:14,280
‫so all we need really is the booking ID.

51
00:03:14,280 --> 00:03:18,720
‫And then what we want to update, really, is only the status.

52
00:03:18,720 --> 00:03:21,960
‫So let's get rid of this part here.

53
00:03:21,960 --> 00:03:25,860
‫And then we want to set this to checked-out.

54
00:03:25,860 --> 00:03:29,073
‫And this should actually be it.

55
00:03:29,970 --> 00:03:33,513
‫So in here, let's then grab that function.

56
00:03:38,880 --> 00:03:40,620
‫So checkout

57
00:03:40,620 --> 00:03:42,157
‫and isCheckingOut

58
00:03:45,690 --> 00:03:48,483
‫from useCheckout.

59
00:03:51,930 --> 00:03:56,930
‫All right, and yeah, right here.

60
00:03:57,930 --> 00:04:02,530
‫So here, all we need to do now is to call checkout

61
00:04:03,600 --> 00:04:05,667
‫with the current bookingId.

62
00:04:07,841 --> 00:04:09,520
‫Then let's make this disabled

63
00:04:13,161 --> 00:04:14,828
‫while isCheckingOut.

64
00:04:16,860 --> 00:04:19,860
‫Now, okay, that should be it.

65
00:04:19,860 --> 00:04:24,000
‫So let's only select or Checked In guests here.

66
00:04:24,000 --> 00:04:26,283
‫So let's check out myself here.

67
00:04:27,510 --> 00:04:31,650
‫But now I cannot see the bottom part, but now we can.

68
00:04:31,650 --> 00:04:33,660
‫So let's Check out.

69
00:04:33,660 --> 00:04:37,380
‫And then this should disappear here from this row.

70
00:04:37,380 --> 00:04:41,163
‫And indeed, the booking has successfully checked out.

71
00:04:42,330 --> 00:04:45,963
‫And since that always brings us back to the dashboard,

72
00:04:47,370 --> 00:04:50,010
‫let's then again check.

73
00:04:50,010 --> 00:04:53,760
‫And indeed, now my name here is gone from the list

74
00:04:53,760 --> 00:04:57,330
‫and it should be in the Checked out list.

75
00:04:57,330 --> 00:05:01,683
‫And indeed, here is that booking that we just checked out.

76
00:05:03,750 --> 00:05:06,480
‫Now maybe in this case, it doesn't even make sense

77
00:05:06,480 --> 00:05:09,963
‫to then redirect the user to the dashboard.

78
00:05:10,920 --> 00:05:12,903
‫So let's remove that part here.

79
00:05:15,270 --> 00:05:18,153
‫And then also all of this.

80
00:05:22,620 --> 00:05:26,523
‫Now, well there's some problem here, but not really.

81
00:05:27,540 --> 00:05:31,350
‫Now, okay, so we have this part here working.

82
00:05:31,350 --> 00:05:35,640
‫Let me actually just copy, well, all of this.

83
00:05:35,640 --> 00:05:38,490
‫And so then we can place the exact same thing

84
00:05:38,490 --> 00:05:40,890
‫also on the BookingDetail.

85
00:05:41,760 --> 00:05:45,453
‫So here, we already had this button here to check in.

86
00:05:46,890 --> 00:05:49,923
‫And so let's also add one to check out.

87
00:05:51,360 --> 00:05:54,390
‫So getting rid, of course, of the menu's part

88
00:05:54,390 --> 00:05:57,363
‫because this is here just a regular button.

89
00:06:00,630 --> 00:06:04,293
‫But then, of course, we need to import all of this here.

90
00:06:06,540 --> 00:06:07,803
‫So just like this.

91
00:06:11,640 --> 00:06:16,640
‫And let's see if this actually imported correctly.

92
00:06:17,700 --> 00:06:19,770
‫And it looks like it did.

93
00:06:19,770 --> 00:06:22,353
‫So let's just grab those values.

94
00:06:25,890 --> 00:06:28,510
‫So checkout and isCheckingOut

95
00:06:32,152 --> 00:06:37,053
‫from useCheckout like this.

96
00:06:38,220 --> 00:06:41,460
‫Well, here, for some reason, we are not using,

97
00:06:41,460 --> 00:06:46,460
‫ah, here, it needs to be checkout like this again.

98
00:06:47,040 --> 00:06:51,510
‫And well, I think this should work now.

99
00:06:51,510 --> 00:06:55,470
‫So let's go again to all our Checked in bookings.

100
00:06:55,470 --> 00:06:57,720
‫This time, let's see the details

101
00:06:57,720 --> 00:07:00,420
‫and there is our button to check out.

102
00:07:00,420 --> 00:07:02,940
‫So let's click, and indeed,

103
00:07:02,940 --> 00:07:07,320
‫now the status here has also been updated to checked out,

104
00:07:07,320 --> 00:07:09,180
‫because with React Query,

105
00:07:09,180 --> 00:07:12,240
‫as soon as the mutation has been successful,

106
00:07:12,240 --> 00:07:14,310
‫we invalidated the query.

107
00:07:14,310 --> 00:07:17,700
‫And so then this data was re fetched.

108
00:07:17,700 --> 00:07:20,250
‫Nice, so we are almost done

109
00:07:20,250 --> 00:07:23,430
‫with working here on these individual bookings.

110
00:07:23,430 --> 00:07:26,160
‫All we have left to do is to add a feature

111
00:07:26,160 --> 00:07:30,483
‫for also deleting a booking by adding a button down here.

112
00:07:31,440 --> 00:07:35,400
‫But actually before we go do that, in the next lecture,

113
00:07:35,400 --> 00:07:39,450
‫there is one very important bug that we need to fix.

114
00:07:39,450 --> 00:07:41,850
‫So let me show you what I mean by that.

115
00:07:41,850 --> 00:07:44,550
‫So let's come here to the Bookings table.

116
00:07:44,550 --> 00:07:48,003
‫And then let's go here to the last page.

117
00:07:49,020 --> 00:07:50,640
‫So we're at the last page.

118
00:07:50,640 --> 00:07:54,603
‫And now, let's say that I want to filter by Unconfirmed.

119
00:07:55,920 --> 00:07:58,440
‫So let's see what's gonna happen.

120
00:07:58,440 --> 00:08:03,440
‫And what does happen is some kind of problem here.

121
00:08:03,750 --> 00:08:06,390
‫So let's see what we have here.

122
00:08:06,390 --> 00:08:11,390
‫And so here, indeed, an offset of 20 was requested,

123
00:08:11,730 --> 00:08:13,830
‫but there are only 10 rows.

124
00:08:13,830 --> 00:08:17,430
‫And so the problem is that we are here still

125
00:08:17,430 --> 00:08:20,910
‫trying to request data for page number three.

126
00:08:20,910 --> 00:08:23,730
‫Even though with the status of unconfirmed,

127
00:08:23,730 --> 00:08:27,000
‫there are no three pages of data.

128
00:08:27,000 --> 00:08:29,160
‫So basically what we need to do,

129
00:08:29,160 --> 00:08:31,770
‫is whenever we set a new filter,

130
00:08:31,770 --> 00:08:34,893
‫we also need to reset the page to one.

131
00:08:35,760 --> 00:08:40,150
‫And so let's just quickly come here to our filter component

132
00:08:41,340 --> 00:08:42,843
‫and do that right here.

133
00:08:46,020 --> 00:08:49,953
‫So let's check if the page has actually been set.

134
00:08:51,300 --> 00:08:55,110
‫So if searchParams.get page,

135
00:08:58,948 --> 00:09:01,553
‫then let's do searchParam.set

136
00:09:03,960 --> 00:09:07,710
‫the page to one again.

137
00:09:07,710 --> 00:09:10,773
‫And so this will then solve this problem.

138
00:09:12,090 --> 00:09:15,063
‫So let's just do a hard reload here.

139
00:09:17,070 --> 00:09:20,370
‫Then coming back to some other page.

140
00:09:20,370 --> 00:09:22,590
‫So again, page number three.

141
00:09:22,590 --> 00:09:25,890
‫And then now, see how this actually changed back

142
00:09:25,890 --> 00:09:27,810
‫to page number one?

143
00:09:27,810 --> 00:09:29,220
‫And so now this works

144
00:09:29,220 --> 00:09:33,240
‫because indeed we have less than even 10 results.

145
00:09:33,240 --> 00:09:35,520
‫So we really only have this one page.

146
00:09:35,520 --> 00:09:38,613
‫And so the pagination doesn't even show up.

147
00:09:39,510 --> 00:09:41,160
‫So very important bug,

148
00:09:41,160 --> 00:09:43,830
‫but this kind of things can always happen.

149
00:09:43,830 --> 00:09:47,253
‫And so I detected it and now we fixed it.