1 00:00:01,200 --> 00:00:02,700 ‫And now to finish, 2 00:00:02,700 --> 00:00:06,180 ‫let's do the same thing, but with writing. 3 00:00:06,180 --> 00:00:09,450 ‫So with updating data, using a form 4 00:00:09,450 --> 00:00:12,363 ‫but without causing a new navigation. 5 00:00:13,560 --> 00:00:14,820 ‫And by doing this, 6 00:00:14,820 --> 00:00:18,120 ‫we will be able to implement the last feature 7 00:00:18,120 --> 00:00:21,240 ‫that is still missing from this application 8 00:00:21,240 --> 00:00:22,950 ‫which is to allow users 9 00:00:22,950 --> 00:00:26,670 ‫to mark their order as a priority order 10 00:00:26,670 --> 00:00:30,570 ‫even after the order has already been placed. 11 00:00:30,570 --> 00:00:33,543 ‫And so let's get back to work. 12 00:00:35,040 --> 00:00:37,770 ‫So the idea here is to, 13 00:00:37,770 --> 00:00:40,875 ‫whenever the order is not a priority order, 14 00:00:40,875 --> 00:00:44,283 ‫to display a button here below this order 15 00:00:44,283 --> 00:00:48,813 ‫where the user can click to make the order a priority order. 16 00:00:50,730 --> 00:00:53,490 ‫So let's implement that here. 17 00:00:53,490 --> 00:00:57,076 ‫So creating that button here on the order 18 00:00:57,076 --> 00:01:00,516 ‫but let's actually encapsulate this functionality 19 00:01:00,516 --> 00:01:03,060 ‫in a new component. 20 00:01:03,060 --> 00:01:05,103 ‫So here in order. 21 00:01:06,180 --> 00:01:07,233 ‫So let's create, 22 00:01:08,610 --> 00:01:11,313 ‫so let's call this UpdateOrder.JSX. 23 00:01:15,270 --> 00:01:20,270 ‫And so here, let's then receive that entire order object 24 00:01:20,970 --> 00:01:24,753 ‫even though we will only update the order's priority. 25 00:01:26,820 --> 00:01:27,653 ‫Okay? 26 00:01:28,620 --> 00:01:31,290 ‫And so as I was saying earlier, here, 27 00:01:31,290 --> 00:01:35,187 ‫let's then actually return a button of the type primary 28 00:01:40,920 --> 00:01:45,920 ‫in order to make priority. 29 00:01:47,100 --> 00:01:50,110 ‫So here we now need to import that button 30 00:01:59,220 --> 00:02:03,450 ‫and then let's include that right here. 31 00:02:03,450 --> 00:02:06,160 ‫So probably right here at the very end 32 00:02:07,150 --> 00:02:11,463 ‫but only if the order is not a priority order. 33 00:02:12,360 --> 00:02:15,573 ‫So we should already have that status here. 34 00:02:16,590 --> 00:02:19,290 ‫Or actually, yeah, it's this priority here. 35 00:02:19,290 --> 00:02:22,680 ‫So this will either be true or false. 36 00:02:22,680 --> 00:02:26,910 ‫And so let's say if it's not priority, 37 00:02:26,910 --> 00:02:30,933 ‫then we want to render that update order. 38 00:02:32,100 --> 00:02:34,980 ‫So UpdateOrder like this, 39 00:02:34,980 --> 00:02:38,463 ‫and we need to pass in the entire order object. 40 00:02:42,270 --> 00:02:45,570 ‫So in this case, we will not see that button right here 41 00:02:45,570 --> 00:02:48,333 ‫because this is already a priority. 42 00:02:50,190 --> 00:02:52,617 ‫Let's just remove this console.log 43 00:02:52,617 --> 00:02:57,617 ‫and then let's create ourselves a new order 44 00:03:00,720 --> 00:03:03,423 ‫so that we can then make that one priority. 45 00:03:08,160 --> 00:03:11,910 ‫Then here, let's not even bother with getting the position. 46 00:03:11,910 --> 00:03:13,923 ‫And then let's order. 47 00:03:15,780 --> 00:03:16,613 ‫All right. 48 00:03:16,613 --> 00:03:21,480 ‫And so indeed, now here we have our Make Priority button. 49 00:03:21,480 --> 00:03:22,680 ‫And so as we click this 50 00:03:22,680 --> 00:03:26,340 ‫we want to change priority from false to true. 51 00:03:26,340 --> 00:03:29,352 ‫And then this whole page here should re-render 52 00:03:29,352 --> 00:03:31,590 ‫and make this button disappear 53 00:03:31,590 --> 00:03:35,173 ‫and displaying appear the priority status. 54 00:03:35,173 --> 00:03:38,790 ‫So let's see how we can do that using again 55 00:03:38,790 --> 00:03:40,337 ‫the usefetcher hook. 56 00:03:41,400 --> 00:03:44,373 ‫So just like we did in the previous lecture. 57 00:03:49,110 --> 00:03:53,490 ‫So usefetcher like this. 58 00:03:53,490 --> 00:03:57,870 ‫And now in order to update, so to write data, 59 00:03:57,870 --> 00:04:00,570 ‫we do not use fetcher.load, 60 00:04:00,570 --> 00:04:03,510 ‫but instead we use a form component 61 00:04:03,510 --> 00:04:05,763 ‫data fetcher provides to us. 62 00:04:06,990 --> 00:04:10,530 ‫So basically what we will do is to simply 63 00:04:10,530 --> 00:04:13,290 ‫wrap this button here into a form 64 00:04:13,290 --> 00:04:16,454 ‫even though we don't have any input elements, 65 00:04:16,454 --> 00:04:19,083 ‫but still, this is how it works. 66 00:04:20,280 --> 00:04:22,218 ‫So the syntax looks a bit strange 67 00:04:22,218 --> 00:04:27,218 ‫but this is actually just a component. 68 00:04:27,660 --> 00:04:30,843 ‫And so we can do this. 69 00:04:32,370 --> 00:04:35,880 ‫And so basically this is just like the other form 70 00:04:35,880 --> 00:04:38,313 ‫that we worked with earlier. 71 00:04:39,810 --> 00:04:44,080 ‫So just like this React Router form here 72 00:04:45,300 --> 00:04:48,180 ‫with the only difference that submitting this one here 73 00:04:48,180 --> 00:04:50,670 ‫actually creates a new navigation. 74 00:04:50,670 --> 00:04:54,840 ‫So the idea with this one is to navigate away from the page 75 00:04:54,840 --> 00:04:56,520 ‫while this one, 76 00:04:56,520 --> 00:05:00,510 ‫so fetcher.Form will not navigate away, 77 00:05:00,510 --> 00:05:02,370 ‫it will simply submit a form 78 00:05:02,370 --> 00:05:05,310 ‫and then also revalidate the page. 79 00:05:05,310 --> 00:05:09,385 ‫But let's talk about re-validation in a minute. 80 00:05:09,385 --> 00:05:14,373 ‫For now, let's set the method here to patch. 81 00:05:15,330 --> 00:05:19,680 ‫I think it should be because we will update the order. 82 00:05:19,680 --> 00:05:21,960 ‫And then let's also quickly move that button 83 00:05:21,960 --> 00:05:24,090 ‫to the right side. 84 00:05:24,090 --> 00:05:27,090 ‫So this is really nice about Tailwind again. 85 00:05:27,090 --> 00:05:29,400 ‫So as soon as we have it installed 86 00:05:29,400 --> 00:05:33,081 ‫we can simply very easily apply this kind of styling 87 00:05:33,081 --> 00:05:36,123 ‫without any effort from our site. 88 00:05:37,440 --> 00:05:38,370 ‫All right. 89 00:05:38,370 --> 00:05:42,570 ‫But now let's write the actual logic to update to order. 90 00:05:42,570 --> 00:05:45,603 ‫And so for that, we need again an action. 91 00:05:48,360 --> 00:05:51,990 ‫So async function, 92 00:05:51,990 --> 00:05:55,020 ‫which by default should be called action. 93 00:05:55,020 --> 00:05:59,250 ‫And so here we again get access to the request 94 00:05:59,250 --> 00:06:00,617 ‫and to the params, 95 00:06:01,950 --> 00:06:05,477 ‫and we will see how we use these later. 96 00:06:05,477 --> 00:06:08,885 ‫For now, let's just log something here to the console. 97 00:06:08,885 --> 00:06:10,770 ‫Let's say update. 98 00:06:10,770 --> 00:06:14,625 ‫And then we as always need to return something 99 00:06:14,625 --> 00:06:17,283 ‫which in this case will just be null. 100 00:06:18,870 --> 00:06:20,177 ‫So just like before, 101 00:06:20,177 --> 00:06:24,630 ‫let's export this here as a named export. 102 00:06:24,630 --> 00:06:26,490 ‫And then just like before 103 00:06:26,490 --> 00:06:30,600 ‫we need to wire everything up in our route definition. 104 00:06:30,600 --> 00:06:33,963 ‫So we need to connect this action with the page. 105 00:06:35,610 --> 00:06:38,850 ‫So let's come back here to App.js 106 00:06:38,850 --> 00:06:42,450 ‫where we have our route definitions. 107 00:06:42,450 --> 00:06:43,770 ‫And so this one, 108 00:06:43,770 --> 00:06:47,823 ‫we will actually connect to this route right here. 109 00:06:50,940 --> 00:06:53,220 ‫So action should be, 110 00:06:53,220 --> 00:06:56,253 ‫then first we need to of course import that. 111 00:07:01,440 --> 00:07:03,003 ‫So let's do that right here. 112 00:07:03,900 --> 00:07:06,390 ‫And it is a named import. 113 00:07:06,390 --> 00:07:11,390 ‫So loader and then let's rename it as updateOrderAction 114 00:07:16,470 --> 00:07:21,470 ‫from features order, and then UpdateOrder. 115 00:07:27,390 --> 00:07:31,260 ‫All right, and now here, let's then use that. 116 00:07:31,260 --> 00:07:33,660 ‫So updateOrderAction. 117 00:07:33,660 --> 00:07:35,850 ‫And this is going to work just fine 118 00:07:35,850 --> 00:07:38,310 ‫even though the form that we want to connect 119 00:07:38,310 --> 00:07:42,000 ‫with this action is not really on this page 120 00:07:42,000 --> 00:07:46,706 ‫but on a child component of this order page, right? 121 00:07:46,706 --> 00:07:51,153 ‫So the form that we want to be handled with this action here 122 00:07:51,153 --> 00:07:54,150 ‫is actually inside UpdateOrder 123 00:07:54,150 --> 00:07:56,820 ‫which is a child component of order, 124 00:07:56,820 --> 00:08:00,953 ‫but React Router is smart enough to figure that out, okay? 125 00:08:03,240 --> 00:08:05,848 ‫And so as soon as we click here 126 00:08:05,848 --> 00:08:09,960 ‫we should get this log in our console. 127 00:08:09,960 --> 00:08:11,036 ‫So let's see. 128 00:08:11,036 --> 00:08:14,940 ‫And apparently something went wrong. 129 00:08:14,940 --> 00:08:18,270 ‫So let's go back to our route definition. 130 00:08:18,270 --> 00:08:20,603 ‫But here everything seems to be correct. 131 00:08:20,603 --> 00:08:24,990 ‫Maybe we just need to reload this. 132 00:08:24,990 --> 00:08:28,312 ‫So let me grab this right here, come back here, 133 00:08:28,312 --> 00:08:30,393 ‫then do a hard reload. 134 00:08:31,740 --> 00:08:35,440 ‫And ah, so here we see some error 135 00:08:36,360 --> 00:08:41,360 ‫and ah, so here I was trying to import loader 136 00:08:42,150 --> 00:08:44,973 ‫which should be called of course action. 137 00:08:47,248 --> 00:08:49,840 ‫So another silly bug here 138 00:08:50,899 --> 00:08:55,080 ‫but this is just so you see that this really happens. 139 00:08:55,080 --> 00:08:56,982 ‫So while you are building an application 140 00:08:56,982 --> 00:08:59,490 ‫you'll make mistakes all the time. 141 00:08:59,490 --> 00:09:01,635 ‫That's just completely normal. 142 00:09:01,635 --> 00:09:04,395 ‫But anyway, now this should be handled 143 00:09:04,395 --> 00:09:09,240 ‫and indeed we get the update locked to the console. 144 00:09:09,240 --> 00:09:13,710 ‫So now our form right here is connected with this action. 145 00:09:13,710 --> 00:09:15,112 ‫And so now all we have to do 146 00:09:15,112 --> 00:09:17,760 ‫is to actually set the priority 147 00:09:17,760 --> 00:09:20,013 ‫to true on the current order. 148 00:09:21,060 --> 00:09:24,930 ‫So usually when we do some kind of data updating, 149 00:09:24,930 --> 00:09:29,160 ‫we will then have a couple of inputs here also in this form. 150 00:09:29,160 --> 00:09:31,710 ‫But in this case, we don't have any inputs, 151 00:09:31,710 --> 00:09:34,320 ‫all we have is this button here. 152 00:09:34,320 --> 00:09:35,550 ‫And so in this case, 153 00:09:35,550 --> 00:09:39,093 ‫we don't even need to read any data from the request. 154 00:09:39,093 --> 00:09:43,590 ‫So opposed to what we did here. 155 00:09:43,590 --> 00:09:45,210 ‫So here we got the request, 156 00:09:45,210 --> 00:09:48,360 ‫and then we read the data from there, 157 00:09:48,360 --> 00:09:51,630 ‫which again, in this case is not necessary. 158 00:09:51,630 --> 00:09:54,156 ‫So we don't even need that request here. 159 00:09:54,156 --> 00:09:58,593 ‫Let's just leave it there so that you know that it exists. 160 00:09:59,490 --> 00:10:01,350 ‫So let's get rid of this. 161 00:10:01,350 --> 00:10:03,210 ‫And what we are going to do now 162 00:10:03,210 --> 00:10:07,710 ‫is to use one of our services, 163 00:10:07,710 --> 00:10:10,260 ‫so this one right here 164 00:10:10,260 --> 00:10:12,480 ‫and call this function. 165 00:10:12,480 --> 00:10:15,150 ‫So this update order function. 166 00:10:15,150 --> 00:10:18,690 ‫And as we see, this is a patch request 167 00:10:18,690 --> 00:10:22,350 ‫which is one of the two ways of updating data. 168 00:10:22,350 --> 00:10:24,180 ‫So there is the put request 169 00:10:24,180 --> 00:10:28,560 ‫where we need to pass in the entire new updated object. 170 00:10:28,560 --> 00:10:30,330 ‫And then there is patch, 171 00:10:30,330 --> 00:10:33,751 ‫which will only take in the data that has actually changed 172 00:10:33,751 --> 00:10:37,950 ‫and add that to the original object on the server. 173 00:10:37,950 --> 00:10:41,640 ‫So long story short, all we need to pass in here 174 00:10:41,640 --> 00:10:44,550 ‫in this function is the ID of the order 175 00:10:44,550 --> 00:10:45,717 ‫that should be updated 176 00:10:45,717 --> 00:10:49,923 ‫and then only the data that should be updated. 177 00:10:50,845 --> 00:10:54,040 ‫So the data that should be updated 178 00:10:56,640 --> 00:10:59,703 ‫is only the priority field, 179 00:11:00,990 --> 00:11:04,534 ‫and it should always simply be set to true 180 00:11:04,534 --> 00:11:09,420 ‫because this button is only visible here 181 00:11:09,420 --> 00:11:11,970 ‫whenever the priority is false. 182 00:11:11,970 --> 00:11:15,744 ‫So then here we basically just turn that on. 183 00:11:15,744 --> 00:11:20,744 ‫And so then here, let's await that update order function 184 00:11:23,794 --> 00:11:28,380 ‫which needs the current ID and that data. 185 00:11:28,380 --> 00:11:31,577 ‫So where do we get the order ID from? 186 00:11:31,577 --> 00:11:34,170 ‫Well, luckily for us, 187 00:11:34,170 --> 00:11:37,320 ‫we also have here this params object 188 00:11:37,320 --> 00:11:41,160 ‫which is still able to give us the information here 189 00:11:41,160 --> 00:11:42,960 ‫about the current URL, 190 00:11:42,960 --> 00:11:46,923 ‫and that contains the order ID param right there. 191 00:11:47,999 --> 00:11:51,377 ‫So we can simply do params.orderId 192 00:11:53,344 --> 00:11:58,233 ‫and then the data, and that is actually already it. 193 00:11:59,187 --> 00:12:03,390 ‫So let's click here now and see what happens. 194 00:12:03,390 --> 00:12:07,590 ‫So take good notice here of what will happen. 195 00:12:07,590 --> 00:12:12,590 ‫So let's click and immediately our page updated here. 196 00:12:13,500 --> 00:12:17,070 ‫So we got now the priority price here 197 00:12:17,070 --> 00:12:20,880 ‫and we have the priority status also displayed here. 198 00:12:20,880 --> 00:12:23,970 ‫And so this is the power of re-validation 199 00:12:23,970 --> 00:12:26,040 ‫that I mentioned earlier. 200 00:12:26,040 --> 00:12:30,300 ‫So re-validation basically means that React Router knows 201 00:12:30,300 --> 00:12:34,410 ‫that the data has changed as a result of this action. 202 00:12:34,410 --> 00:12:36,840 ‫And so then whenever that happens, 203 00:12:36,840 --> 00:12:39,955 ‫it'll automatically re-fetch the data in the background 204 00:12:39,955 --> 00:12:44,160 ‫and then re-render the page with that new data. 205 00:12:44,160 --> 00:12:46,107 ‫And so that is what is so helpful 206 00:12:46,107 --> 00:12:49,260 ‫about this fetcher form here. 207 00:12:49,260 --> 00:12:52,800 ‫So this form that we can use to update some data 208 00:12:52,800 --> 00:12:55,170 ‫without causing a navigation. 209 00:12:55,170 --> 00:12:57,381 ‫And so just like I mentioned earlier, 210 00:12:57,381 --> 00:13:01,290 ‫if you are building a highly interactive web application, 211 00:13:01,290 --> 00:13:04,530 ‫you'll use this all the time probably. 212 00:13:04,530 --> 00:13:06,298 ‫Now as I had mentioned earlier, 213 00:13:06,298 --> 00:13:10,440 ‫probably you will then also use some input fields here. 214 00:13:10,440 --> 00:13:14,315 ‫And if you want, you can now practice this new skill here 215 00:13:14,315 --> 00:13:18,180 ‫by allowing the user to update some other information, 216 00:13:18,180 --> 00:13:21,870 ‫for example, their address or their phone number. 217 00:13:21,870 --> 00:13:24,651 ‫So you can play around with this here if you want, 218 00:13:24,651 --> 00:13:27,246 ‫which would probably be a good idea 219 00:13:27,246 --> 00:13:31,320 ‫if you want to really cement these new skills. 220 00:13:31,320 --> 00:13:32,898 ‫But with that being said, 221 00:13:32,898 --> 00:13:34,797 ‫we now have actually finished 222 00:13:34,797 --> 00:13:38,670 ‫this Fast React Pizza application. 223 00:13:38,670 --> 00:13:42,892 ‫So congratulations for building your biggest application yet 224 00:13:42,892 --> 00:13:46,080 ‫and I hope that you are as happy as I am 225 00:13:46,080 --> 00:13:49,620 ‫about the way that this application turned out. 226 00:13:49,620 --> 00:13:53,010 ‫So I really, really like this small application here 227 00:13:53,010 --> 00:13:56,317 ‫and we covered a lot of ground in terms of features 228 00:13:56,317 --> 00:14:00,120 ‫and also in terms of how to actually build 229 00:14:00,120 --> 00:14:04,394 ‫a real more professional web application with React. 230 00:14:04,394 --> 00:14:06,750 ‫Now, I have a lot more ideas 231 00:14:06,750 --> 00:14:09,206 ‫about features that we could implement here 232 00:14:09,206 --> 00:14:12,570 ‫but I think that this is more than enough. 233 00:14:12,570 --> 00:14:14,048 ‫And if you're interested in knowing 234 00:14:14,048 --> 00:14:16,110 ‫about these other features, 235 00:14:16,110 --> 00:14:17,150 ‫if you want to practice, 236 00:14:17,150 --> 00:14:20,790 ‫then just ask me in the course Q&A. 237 00:14:20,790 --> 00:14:23,280 ‫But for now, let's wrap up this project 238 00:14:23,280 --> 00:14:25,350 ‫and also this section 239 00:14:25,350 --> 00:14:27,720 ‫so that I can see you right in the next section 240 00:14:27,720 --> 00:14:30,662 ‫where we will start building the main 241 00:14:30,662 --> 00:14:34,383 ‫and the biggest project of the entire course.