‫And now to finish,
‫let's do the same thing, but with writing.
‫So with updating data, using a form
‫but without causing a new navigation.
‫And by doing this,
‫we will be able to implement the last feature
‫that is still missing from this application
‫which is to allow users
‫to mark their order as a priority order
‫even after the order has already been placed.
‫And so let's get back to work.
‫So the idea here is to,
‫whenever the order is not a priority order,
‫to display a button here below this order
‫where the user can click to make the order a priority order.
‫So let's implement that here.
‫So creating that button here on the order
‫but let's actually encapsulate this functionality
‫in a new component.
‫So here in order.
‫So let's create,
‫so let's call this UpdateOrder.JSX.
‫And so here, let's then receive that entire order object
‫even though we will only update the order's priority.
‫Okay?
‫And so as I was saying earlier, here,
‫let's then actually return a button of the type primary
‫in order to make priority.
‫So here we now need to import that button
‫and then let's include that right here.
‫So probably right here at the very end
‫but only if the order is not a priority order.
‫So we should already have that status here.
‫Or actually, yeah, it's this priority here.
‫So this will either be true or false.
‫And so let's say if it's not priority,
‫then we want to render that update order.
‫So UpdateOrder like this,
‫and we need to pass in the entire order object.
‫So in this case, we will not see that button right here
‫because this is already a priority.
‫Let's just remove this console.log
‫and then let's create ourselves a new order
‫so that we can then make that one priority.
‫Then here, let's not even bother with getting the position.
‫And then let's order.
‫All right.
‫And so indeed, now here we have our Make Priority button.
‫And so as we click this
‫we want to change priority from false to true.
‫And then this whole page here should re-render
‫and make this button disappear
‫and displaying appear the priority status.
‫So let's see how we can do that using again
‫the usefetcher hook.
‫So just like we did in the previous lecture.
‫So usefetcher like this.
‫And now in order to update, so to write data,
‫we do not use fetcher.load,
‫but instead we use a form component
‫data fetcher provides to us.
‫So basically what we will do is to simply
‫wrap this button here into a form
‫even though we don't have any input elements,
‫but still, this is how it works.
‫So the syntax looks a bit strange
‫but this is actually just a component.
‫And so we can do this.
‫And so basically this is just like the other form
‫that we worked with earlier.
‫So just like this React Router form here
‫with the only difference that submitting this one here
‫actually creates a new navigation.
‫So the idea with this one is to navigate away from the page
‫while this one,
‫so fetcher.Form will not navigate away,
‫it will simply submit a form
‫and then also revalidate the page.
‫But let's talk about re-validation in a minute.
‫For now, let's set the method here to patch.
‫I think it should be because we will update the order.
‫And then let's also quickly move that button
‫to the right side.
‫So this is really nice about Tailwind again.
‫So as soon as we have it installed
‫we can simply very easily apply this kind of styling
‫without any effort from our site.
‫All right.
‫But now let's write the actual logic to update to order.
‫And so for that, we need again an action.
‫So async function,
‫which by default should be called action.
‫And so here we again get access to the request
‫and to the params,
‫and we will see how we use these later.
‫For now, let's just log something here to the console.
‫Let's say update.
‫And then we as always need to return something
‫which in this case will just be null.
‫So just like before,
‫let's export this here as a named export.
‫And then just like before
‫we need to wire everything up in our route definition.
‫So we need to connect this action with the page.
‫So let's come back here to App.js
‫where we have our route definitions.
‫And so this one,
‫we will actually connect to this route right here.
‫So action should be,
‫then first we need to of course import that.
‫So let's do that right here.
‫And it is a named import.
‫So loader and then let's rename it as updateOrderAction
‫from features order, and then UpdateOrder.
‫All right, and now here, let's then use that.
‫So updateOrderAction.
‫And this is going to work just fine
‫even though the form that we want to connect
‫with this action is not really on this page
‫but on a child component of this order page, right?
‫So the form that we want to be handled with this action here
‫is actually inside UpdateOrder
‫which is a child component of order,
‫but React Router is smart enough to figure that out, okay?
‫And so as soon as we click here
‫we should get this log in our console.
‫So let's see.
‫And apparently something went wrong.
‫So let's go back to our route definition.
‫But here everything seems to be correct.
‫Maybe we just need to reload this.
‫So let me grab this right here, come back here,
‫then do a hard reload.
‫And ah, so here we see some error
‫and ah, so here I was trying to import loader
‫which should be called of course action.
‫So another silly bug here
‫but this is just so you see that this really happens.
‫So while you are building an application
‫you'll make mistakes all the time.
‫That's just completely normal.
‫But anyway, now this should be handled
‫and indeed we get the update locked to the console.
‫So now our form right here is connected with this action.
‫And so now all we have to do
‫is to actually set the priority
‫to true on the current order.
‫So usually when we do some kind of data updating,
‫we will then have a couple of inputs here also in this form.
‫But in this case, we don't have any inputs,
‫all we have is this button here.
‫And so in this case,
‫we don't even need to read any data from the request.
‫So opposed to what we did here.
‫So here we got the request,
‫and then we read the data from there,
‫which again, in this case is not necessary.
‫So we don't even need that request here.
‫Let's just leave it there so that you know that it exists.
‫So let's get rid of this.
‫And what we are going to do now
‫is to use one of our services,
‫so this one right here
‫and call this function.
‫So this update order function.
‫And as we see, this is a patch request
‫which is one of the two ways of updating data.
‫So there is the put request
‫where we need to pass in the entire new updated object.
‫And then there is patch,
‫which will only take in the data that has actually changed
‫and add that to the original object on the server.
‫So long story short, all we need to pass in here
‫in this function is the ID of the order
‫that should be updated
‫and then only the data that should be updated.
‫So the data that should be updated
‫is only the priority field,
‫and it should always simply be set to true
‫because this button is only visible here
‫whenever the priority is false.
‫So then here we basically just turn that on.
‫And so then here, let's await that update order function
‫which needs the current ID and that data.
‫So where do we get the order ID from?
‫Well, luckily for us,
‫we also have here this params object
‫which is still able to give us the information here
‫about the current URL,
‫and that contains the order ID param right there.
‫So we can simply do params.orderId
‫and then the data, and that is actually already it.
‫So let's click here now and see what happens.
‫So take good notice here of what will happen.
‫So let's click and immediately our page updated here.
‫So we got now the priority price here
‫and we have the priority status also displayed here.
‫And so this is the power of re-validation
‫that I mentioned earlier.
‫So re-validation basically means that React Router knows
‫that the data has changed as a result of this action.
‫And so then whenever that happens,
‫it'll automatically re-fetch the data in the background
‫and then re-render the page with that new data.
‫And so that is what is so helpful
‫about this fetcher form here.
‫So this form that we can use to update some data
‫without causing a navigation.
‫And so just like I mentioned earlier,
‫if you are building a highly interactive web application,
‫you'll use this all the time probably.
‫Now as I had mentioned earlier,
‫probably you will then also use some input fields here.
‫And if you want, you can now practice this new skill here
‫by allowing the user to update some other information,
‫for example, their address or their phone number.
‫So you can play around with this here if you want,
‫which would probably be a good idea
‫if you want to really cement these new skills.
‫But with that being said,
‫we now have actually finished
‫this Fast React Pizza application.
‫So congratulations for building your biggest application yet
‫and I hope that you are as happy as I am
‫about the way that this application turned out.
‫So I really, really like this small application here
‫and we covered a lot of ground in terms of features
‫and also in terms of how to actually build
‫a real more professional web application with React.
‫Now, I have a lot more ideas
‫about features that we could implement here
‫but I think that this is more than enough.
‫And if you're interested in knowing
‫about these other features,
‫if you want to practice,
‫then just ask me in the course Q&A.
‫But for now, let's wrap up this project
‫and also this section
‫so that I can see you right in the next section
‫where we will start building the main
‫and the biggest project of the entire course.