1 00:00:01,380 --> 00:00:03,660 ‫Next up, let's now abstract 2 00:00:03,660 --> 00:00:06,390 ‫all the React query logic that we have written 3 00:00:06,390 --> 00:00:11,250 ‫so far into a few custom hooks which is the best practice 4 00:00:11,250 --> 00:00:14,073 ‫in a large application like this one. 5 00:00:15,750 --> 00:00:19,620 ‫Now first I noticed that here we have this line 6 00:00:19,620 --> 00:00:24,360 ‫of code in this text area which doesn't do anything 7 00:00:24,360 --> 00:00:27,000 ‫so let's delete it and then also here 8 00:00:27,000 --> 00:00:30,240 ‫in the cabin row, whenever there's no discount, 9 00:00:30,240 --> 00:00:34,563 ‫then let's actually not display this discount component. 10 00:00:37,140 --> 00:00:41,130 ‫So if there is a discount, then display this 11 00:00:41,130 --> 00:00:46,027 ‫and otherwise just a span with a medium dash 12 00:00:48,630 --> 00:00:53,070 ‫so that looks a bit nicer, but now let's actually do 13 00:00:53,070 --> 00:00:57,390 ‫what I said which is to extract these functions here 14 00:00:57,390 --> 00:01:01,953 ‫so basically this logic here into its own custom hook. 15 00:01:03,150 --> 00:01:06,960 ‫So this right here is for the leading a cabin 16 00:01:06,960 --> 00:01:11,430 ‫and so let's copy all of this and refactor it 17 00:01:11,430 --> 00:01:16,430 ‫into a use delete cabin hook and let's actually create it 18 00:01:17,610 --> 00:01:20,883 ‫right here in this cabin's feature folder. 19 00:01:22,200 --> 00:01:27,200 ‫So use delete cabin and now this is a JS file 20 00:01:28,860 --> 00:01:33,860 ‫and not JSX which actually makes it quite easy 21 00:01:34,080 --> 00:01:35,910 ‫for us to then distinguish visually, 22 00:01:35,910 --> 00:01:39,120 ‫the components from the hooks and we didn't place 23 00:01:39,120 --> 00:01:42,450 ‫this hook into this hooks folder because this one 24 00:01:42,450 --> 00:01:45,480 ‫is really only for hooks that are reusable 25 00:01:45,480 --> 00:01:48,330 ‫across multiple features, but this one here 26 00:01:48,330 --> 00:01:51,030 ‫really is related to the cabin's feature 27 00:01:51,030 --> 00:01:54,873 ‫and therefore we keep it right here in this folder. 28 00:01:55,980 --> 00:01:58,570 ‫But anyway, now let's create that function 29 00:01:59,820 --> 00:02:04,643 ‫so export function use delete cabin, 30 00:02:08,280 --> 00:02:11,230 ‫and then let's place all of that in there 31 00:02:12,390 --> 00:02:16,470 ‫so here that's function like this and then of course 32 00:02:16,470 --> 00:02:20,223 ‫we need to bring in all of these hooks right here, 33 00:02:21,300 --> 00:02:26,300 ‫the same with use mutation and of course 34 00:02:27,000 --> 00:02:32,000 ‫with the toast library and also this delete cabin function, 35 00:02:33,960 --> 00:02:38,960 ‫so just like this, all right and then maybe let's also 36 00:02:41,430 --> 00:02:45,660 ‫rename this mutate function around here so just like we did 37 00:02:45,660 --> 00:02:49,530 ‫in the form earlier so delete cabin 38 00:02:52,680 --> 00:02:57,150 ‫but down here we create a conflict because this function 39 00:02:57,150 --> 00:03:00,333 ‫name then is exactly the same as this one. 40 00:03:01,200 --> 00:03:05,550 ‫So let's just rename this one so let's import it 41 00:03:05,550 --> 00:03:10,550 ‫as delete cabin API and so down here we use exactly that one 42 00:03:16,259 --> 00:03:20,610 ‫and so in the end all we do is to return an object 43 00:03:20,610 --> 00:03:25,610 ‫with is deleting and delete cabin. 44 00:03:27,840 --> 00:03:30,840 ‫So here we did exactly what we learned earlier 45 00:03:30,840 --> 00:03:34,830 ‫about how to extract some logic that contains hook 46 00:03:34,830 --> 00:03:37,320 ‫into a custom hook and so this clearly 47 00:03:37,320 --> 00:03:41,760 ‫was a good use case of that because we have two hooks here 48 00:03:41,760 --> 00:03:46,470 ‫and so then it's a great idea to create our custom hook 49 00:03:46,470 --> 00:03:49,443 ‫and so let's now actually use it here. 50 00:03:50,550 --> 00:03:53,223 ‫So let's get rid of all of this. 51 00:03:56,400 --> 00:04:01,400 ‫Now let's bring it is deleting and delete cabin 52 00:04:01,740 --> 00:04:06,693 ‫from use delete cabin like this 53 00:04:08,340 --> 00:04:11,850 ‫and here now it's no longer called mutate 54 00:04:11,850 --> 00:04:15,480 ‫but delete cabin and so with this 55 00:04:15,480 --> 00:04:20,190 ‫everything should work exactly the same way as before. 56 00:04:20,190 --> 00:04:22,990 ‫Let's just place this here close to the other hooks 57 00:04:24,060 --> 00:04:28,950 ‫and there we go so then we can get rid of all of this 58 00:04:28,950 --> 00:04:32,673 ‫and so this really makes our component so much cleaner. 59 00:04:39,990 --> 00:04:44,070 ‫Let's of course test this, let's just reload here 60 00:04:44,070 --> 00:04:48,210 ‫and wait for the data to arrive and then let's just delete 61 00:04:48,210 --> 00:04:51,780 ‫this test one but here for some reason 62 00:04:51,780 --> 00:04:56,780 ‫we still get some problem so maybe let's just try again 63 00:05:00,870 --> 00:05:03,940 ‫but I believe that this one is actually not going to work 64 00:05:05,040 --> 00:05:08,433 ‫so maybe this is actually the one, 65 00:05:09,630 --> 00:05:14,630 ‫well let's see here and so this is the one 66 00:05:16,050 --> 00:05:18,360 ‫and now I see what the problem is 67 00:05:18,360 --> 00:05:21,930 ‫so this one is the one that has the ID of one 68 00:05:21,930 --> 00:05:25,860 ‫which means that it's the one that's being referenced here 69 00:05:25,860 --> 00:05:28,680 ‫in a foreign key in the bookings 70 00:05:28,680 --> 00:05:32,547 ‫so remember how here we have the cabin ID somewhere, 71 00:05:36,630 --> 00:05:38,970 ‫yeah, right here we have a cabin ID 72 00:05:38,970 --> 00:05:41,400 ‫which has the number one and so therefore 73 00:05:41,400 --> 00:05:44,460 ‫we are now not allowed to delete this one 74 00:05:44,460 --> 00:05:47,940 ‫which has the ID of number one so this one we can 75 00:05:47,940 --> 00:05:50,550 ‫no longer safely delete right now 76 00:05:50,550 --> 00:05:54,120 ‫so that's why we keep getting that error for some reason 77 00:05:54,120 --> 00:05:57,540 ‫but only on that one so if I delete this one 78 00:05:57,540 --> 00:05:59,613 ‫then that's going to work just fine. 79 00:06:01,830 --> 00:06:04,320 ‫All right, so that was interesting 80 00:06:04,320 --> 00:06:09,063 ‫and I'm glad we found out why that didn't work as expected. 81 00:06:10,890 --> 00:06:13,710 ‫But anyway, now here we have some more 82 00:06:13,710 --> 00:06:17,010 ‫React query logic that we can extract 83 00:06:17,010 --> 00:06:21,030 ‫so let's grab this piece right here 84 00:06:21,030 --> 00:06:26,030 ‫and then let's just do use create cabin.js, 85 00:06:31,500 --> 00:06:36,500 ‫paste all of that here and then again export 86 00:06:36,900 --> 00:06:41,900 ‫function use create cabin and of course later on 87 00:06:43,440 --> 00:06:46,470 ‫we will not have to go through all this work 88 00:06:46,470 --> 00:06:51,470 ‫of refactoring our code and extracting all of this 89 00:06:51,600 --> 00:06:54,790 ‫because we will do that of course immediately 90 00:06:56,280 --> 00:07:00,030 ‫so we will just right away create our custom hook 91 00:07:00,030 --> 00:07:03,040 ‫without even writing it ever in the component 92 00:07:04,170 --> 00:07:08,313 ‫so then here we also need to import this function, 93 00:07:09,510 --> 00:07:13,020 ‫there we go, then we have a problem there 94 00:07:13,020 --> 00:07:17,460 ‫with the reset function but for now let's return 95 00:07:17,460 --> 00:07:22,460 ‫is creating and to create cabin function, 96 00:07:23,160 --> 00:07:25,350 ‫and here we didn't have to change the import 97 00:07:25,350 --> 00:07:28,500 ‫because the name this time is already different 98 00:07:28,500 --> 00:07:33,120 ‫from the create cabin, so as I was saying 99 00:07:33,120 --> 00:07:36,180 ‫here we have a problem because we do not have 100 00:07:36,180 --> 00:07:39,780 ‫this reset function available right here 101 00:07:39,780 --> 00:07:42,030 ‫so remember that this is actually coming 102 00:07:42,030 --> 00:07:45,660 ‫from the React hook form library 103 00:07:45,660 --> 00:07:48,870 ‫so it's coming right from here 104 00:07:48,870 --> 00:07:51,180 ‫and so of course we will not be able 105 00:07:51,180 --> 00:07:54,280 ‫to have that inside our custom hook 106 00:07:55,620 --> 00:07:58,560 ‫so let's remove that from here 107 00:07:58,560 --> 00:08:01,710 ‫but that doesn't mean that we cannot still call that 108 00:08:01,710 --> 00:08:05,703 ‫reset function on success so let me show you how. 109 00:08:06,570 --> 00:08:10,650 ‫So let's delete that then we can remove this code 110 00:08:10,650 --> 00:08:15,570 ‫as well and then I just need to of course import 111 00:08:15,570 --> 00:08:20,260 ‫that hook, so let's do that here 112 00:08:22,950 --> 00:08:27,950 ‫so is creating and create cabin 113 00:08:29,760 --> 00:08:33,867 ‫from use create cabin and this time 114 00:08:36,210 --> 00:08:39,930 ‫for some reason we have to import this manually, 115 00:08:39,930 --> 00:08:43,450 ‫let's do that here but first move that up 116 00:08:45,870 --> 00:08:50,870 ‫so use create cabin from use create cabin of course 117 00:08:58,200 --> 00:09:01,440 ‫and so now creating a cabin should work the same 118 00:09:01,440 --> 00:09:06,440 ‫except again that as soon as we are finished here 119 00:09:06,570 --> 00:09:09,330 ‫it will then not reset the form 120 00:09:09,330 --> 00:09:13,530 ‫but luckily for us React query has thought of situations 121 00:09:13,530 --> 00:09:18,530 ‫like this so we can not only use the on success handler 122 00:09:19,650 --> 00:09:24,600 ‫here on use mutation but also right where the mutation 123 00:09:24,600 --> 00:09:27,600 ‫actually happens, or in other words 124 00:09:27,600 --> 00:09:31,830 ‫we can also pass a similar thing right here 125 00:09:31,830 --> 00:09:34,830 ‫into the mutation function which in this case 126 00:09:34,830 --> 00:09:39,480 ‫we renamed to create cabin but that's the same thing 127 00:09:39,480 --> 00:09:42,180 ‫so this is just simply the mutate function 128 00:09:42,180 --> 00:09:45,990 ‫that is coming from React query so basically 129 00:09:45,990 --> 00:09:49,800 ‫that is coming from right here 130 00:09:49,800 --> 00:09:54,360 ‫so it's the result of use mutation and so again we can 131 00:09:54,360 --> 00:09:56,850 ‫place this on success handler function 132 00:09:56,850 --> 00:10:01,850 ‫not only right here but also right in the function 133 00:10:02,460 --> 00:10:05,400 ‫where the mutation actually happens 134 00:10:05,400 --> 00:10:09,870 ‫so all we need to do is to pass in an object of options 135 00:10:09,870 --> 00:10:13,420 ‫and so then there we can do on success 136 00:10:14,940 --> 00:10:19,940 ‫and then here we can very simply call the reset function 137 00:10:22,050 --> 00:10:24,570 ‫and also this call back right here 138 00:10:24,570 --> 00:10:27,060 ‫actually gets access to the data 139 00:10:27,060 --> 00:10:29,530 ‫that the mutation function returns 140 00:10:30,870 --> 00:10:34,230 ‫or in other words we can here get access 141 00:10:34,230 --> 00:10:39,230 ‫to this new cabin data that we return right here 142 00:10:39,990 --> 00:10:44,990 ‫and so this data again is going to be the newly created 143 00:10:45,270 --> 00:10:50,260 ‫cabin or the edited one so just to see that here 144 00:10:51,810 --> 00:10:56,377 ‫let's log it to the console and so then let's try this out. 145 00:11:01,650 --> 00:11:06,090 ‫So let's call this one zero zero eight for eight people 146 00:11:06,090 --> 00:11:10,420 ‫for 800 euros, 80 discount, and something 147 00:11:13,200 --> 00:11:16,110 ‫and so let's see if this resets the field 148 00:11:16,110 --> 00:11:19,740 ‫and if we then get the newly created object down here 149 00:11:19,740 --> 00:11:22,530 ‫and indeed both of them happened 150 00:11:22,530 --> 00:11:24,870 ‫and we know that this is the new object 151 00:11:24,870 --> 00:11:29,133 ‫because it contains the created at and also the new ID. 152 00:11:30,210 --> 00:11:35,210 ‫Great, so let's also, since we are already here 153 00:11:36,420 --> 00:11:39,880 ‫do the same thing in the other one 154 00:11:41,220 --> 00:11:46,220 ‫so right here because now we will also abstract 155 00:11:46,320 --> 00:11:49,060 ‫this one here into its own custom hook 156 00:11:52,860 --> 00:11:57,860 ‫so taking all of this and then let's call that one 157 00:12:04,350 --> 00:12:09,350 ‫use edit cabin.js, paste all of that, 158 00:12:10,380 --> 00:12:14,290 ‫export function use edit cabin 159 00:12:20,310 --> 00:12:24,070 ‫and as always importing all of this stuff here 160 00:12:27,000 --> 00:12:32,000 ‫and we also need this function and the toast. 161 00:12:36,420 --> 00:12:40,360 ‫Let's get rid of this one and finally return 162 00:12:41,610 --> 00:12:46,610 ‫is editing and edit cabin so that looks great, 163 00:12:50,160 --> 00:12:53,800 ‫come back into form, now we can delete all of this stuff 164 00:12:54,778 --> 00:12:59,778 ‫and then is editing and edit cabin 165 00:13:01,230 --> 00:13:06,230 ‫from use edit cabin, let's import that 166 00:13:10,350 --> 00:13:14,943 ‫and then we are done with this function right here. 167 00:13:15,990 --> 00:13:20,740 ‫Now here this should be called is editing 168 00:13:22,230 --> 00:13:27,090 ‫and yeah, this one should have been placed actually, 169 00:13:27,090 --> 00:13:30,750 ‫well actually nowhere, actually we want to import 170 00:13:30,750 --> 00:13:33,930 ‫a new file with this and then it is this one 171 00:13:33,930 --> 00:13:38,550 ‫that we no longer need so the same thing 172 00:13:38,550 --> 00:13:42,480 ‫then here and here and with this, 173 00:13:47,640 --> 00:13:50,470 ‫actually the component is looking a bit cleaner 174 00:13:52,350 --> 00:13:55,390 ‫even though there's still some confusion going on here 175 00:13:56,640 --> 00:13:58,740 ‫but well that's just because we're doing 176 00:13:58,740 --> 00:14:02,193 ‫also a lot of different things in this one component. 177 00:14:04,110 --> 00:14:06,600 ‫All right so I think we can close this one 178 00:14:06,600 --> 00:14:09,750 ‫for now, this one let's leave open 179 00:14:09,750 --> 00:14:12,720 ‫and now finally let's turn our attention back 180 00:14:12,720 --> 00:14:16,020 ‫to the cabin table itself which is where 181 00:14:16,020 --> 00:14:19,200 ‫we get this data here in the beginning 182 00:14:19,200 --> 00:14:23,130 ‫and so let's also grab this one and maybe you want to 183 00:14:23,130 --> 00:14:27,450 ‫keep it as a reference so let's just duplicate 184 00:14:27,450 --> 00:14:32,077 ‫this file here, call it V1 and now let's cut this 185 00:14:34,500 --> 00:14:38,100 ‫and create one final custom hook 186 00:14:38,100 --> 00:14:40,590 ‫and so this one where we just fetched the data 187 00:14:40,590 --> 00:14:45,590 ‫I like to call it then use cabins just like this 188 00:14:46,980 --> 00:14:51,740 ‫so export, use cabins, of course, 189 00:14:53,700 --> 00:14:58,700 ‫the function keyword and then we need use query 190 00:15:04,680 --> 00:15:09,680 ‫and down in the end we just return all of this 191 00:15:09,990 --> 00:15:14,853 ‫so is loading error and the cabins. 192 00:15:16,350 --> 00:15:20,010 ‫All right and so here all we have to do 193 00:15:20,010 --> 00:15:24,100 ‫is to grab is loading and the cabins 194 00:15:25,350 --> 00:15:30,350 ‫from use cabins and then also import that 195 00:15:43,050 --> 00:15:46,907 ‫then we no longer need this stuff and there we go. 196 00:15:51,960 --> 00:15:55,270 ‫So it looks like it's working exactly in the same way 197 00:15:56,850 --> 00:15:59,190 ‫but of course this is a lot cleaner 198 00:15:59,190 --> 00:16:02,970 ‫so very straightforward what this one here is doing 199 00:16:02,970 --> 00:16:05,670 ‫and so now if for some reason we need this data 200 00:16:05,670 --> 00:16:09,750 ‫somewhere else, it's as easy as just grabbing this 201 00:16:09,750 --> 00:16:13,380 ‫and then for example, well let's say for some reason 202 00:16:13,380 --> 00:16:17,263 ‫we need this in the sidebar, so why not, 203 00:16:19,830 --> 00:16:22,830 ‫let's come to the sidebar and in there 204 00:16:22,830 --> 00:16:27,830 ‫we can just do this, so importing that 205 00:16:29,280 --> 00:16:33,420 ‫and then we can just log the cabins 206 00:16:33,420 --> 00:16:35,290 ‫to the console here for example 207 00:16:36,960 --> 00:16:39,750 ‫so let's say that we are on the homepage 208 00:16:39,750 --> 00:16:41,440 ‫and down here we have our data 209 00:16:42,360 --> 00:16:45,520 ‫so right away it gets into the cache 210 00:16:46,380 --> 00:16:50,640 ‫and so then whenever we come to the cabins page next 211 00:16:50,640 --> 00:16:54,480 ‫as we already know the data is then already there 212 00:16:54,480 --> 00:16:58,050 ‫so that's one of the huge, maybe even the biggest advantage 213 00:16:58,050 --> 00:17:02,100 ‫of React query, so really really great 214 00:17:02,100 --> 00:17:04,290 ‫and useful feature right there 215 00:17:04,290 --> 00:17:06,660 ‫and so with this custom hook we now made it 216 00:17:06,660 --> 00:17:11,640 ‫even easier to reuse the data in multiple places 217 00:17:11,640 --> 00:17:13,620 ‫but of course we don't need this here, 218 00:17:13,620 --> 00:17:17,140 ‫this was just to experiment around a bit more 219 00:17:18,420 --> 00:17:23,193 ‫and so let's close this and wrap up this lecture.