‫Let's now change subjects
‫and learn how we can use React Router's actions
‫to write data or to mutate data on the server.
‫So while the loaders that we used earlier are to read data,
‫actions are used to write data or to mutate data.
‫So a state that is stored on some server.
‫Or in other words, actions allow us
‫to manage this remote server state using action functions
‫and forms that we then wire up to routes
‫similar to what we did earlier with the loaders.
‫Okay, so remember from the project requirements
‫that orders are made by sending a post request
‫with the order data to the API.
‫And so these actions and forms
‫that we just talked about are ideal to create new orders.
‫And so that's what we're going to do in this lecture.
‫So we will come now to this create order page component,
‫and there we will create a form
‫and we will create an action.
‫So let's open up this component
‫and let's just take a quick look.
‫So here we already have a cart,
‫which is basically this fake cart right here.
‫So when we submit a new order,
‫we need to submit the user data
‫plus the selected pizzas which are stored in the cart.
‫Now, we don't have that cart yet,
‫but we still want to already learn how to create a new order
‫using these actions and forms.
‫And therefore, for now, we are just going
‫to use this fake cart object.
‫Then you see we actually already have the form as well,
‫and it has an input field for the customer.
‫So for the customer name, then for the customer phone,
‫and the address, and also to mark
‫whether the order is priority or not.
‫So let's actually come here to that URL, which is order/new.
‫And so here we see exactly that form that I just described.
‫Okay, now to make this form work nicely with React Router,
‫we need to replace this with a form component
‫that React Router gives us.
‫So let's replace this form with the uppercase form
‫that we can again import from react-router-dom.
‫So make sure that you have this line right here.
‫Then let's just see if it closed correctly.
‫And yeah, it did.
‫Then here we also need to specify now the method
‫which is going to be a post request.
‫So just like we said earlier,
‫we are doing a post request to create a new order.
‫But here we could also use patch and delete, but not get.
‫So the get method here wouldn't work
‫in the way that we will see throughout this lecture,
‫but post, patch, and delete are going to work.
‫Then we could also specify the action
‫where we could then write the path
‫that this form should be submitted to.
‫But this is not going to be necessary, because by default,
‫React Router will simply match the closest route,
‫so there's no need to write order/new, okay?
‫But let's actually leave this here like this,
‫because it also does work.
‫And so I'm just going to leave both of these ways here.
‫Now, this on its own doesn't do anything yet,
‫and so now we need to specify,
‫or we need to create an action.
‫And so this is similar to the loaders
‫that we created earlier.
‫So we will also create now a function
‫that we are going to export from here.
‫So export function, and then by default,
‫as a convention, we just call this function action.
‫Now, as soon as we submit this special form here,
‫that will then create a request that will basically
‫be intercepted by this action function
‫as soon as we have it connected with React Router.
‫So here with this route, but more about that later.
‫So again, whenever this form here will be submitted,
‫behind the scenes, React Router will then call
‫this action function and it will pass in the request
‫that was submitted.
‫And so here we can then get access to that.
‫All right.
‫Then here, let's create a variable called form data.
‫And then here we just await request,
‫which is this request that we just got, .formData.
‫And this is actually just a regular web API.
‫So this form data here is provided by the browser.
‫So now this is complaining,
‫because this now needs to be an async function.
‫Then let's log something to the console,
‫so this form data here.
‫And then I believe that we also
‫need to always return something.
‫So for now, let's just return now here.
‫And now as a final step, we need to connect these two.
‫So we need to come to our route
‫and then connect this action to the route.
‫So let's do that.
‫And as always, let's first import it here.
‫So here, action as create.
‫Let's say createOrderAction.
‫And then here, let's specify the action property.
‫And then here is where we specify that one.
‫So createOrderAction, just like this.
‫And so now whenever there will be a new form submission
‫on this route right here, so on this path,
‫then this action that we specified here will be called.
‫And so that's then this function right here.
‫So let's just reload this here,
‫and let's just test this with something,
‫order now, and beautiful.
‫So we have something here,
‫even though we can't really see it here.
‫So let's actually also convert it to an object.
‫FromEntries(formData).
‫Then let's just log the data itself.
‫Try that again, and here we go.
‫So it's a bit difficult to work
‫with this form data object here,
‫but this part is not really so important.
‫So this is just some standard,
‫or some recipe that we always will need to follow.
‫But anyway, what matters here is that it was really,
‫really easy to get all this data
‫out of the form here into this function.
‫So notice how this entire form right here
‫works completely without any JavaScript
‫and without any onSubmit handlers, for example.
‫So all we have is this form here,
‫and then React Router takes care of the rest.
‫We also didn't have to create any state variables here
‫for each of these input fields,
‫and we didn't even have to create a loading state.
‫So React Router will do all of this automatically
‫without us having to do anything.
‫And the idea behind all this is to basically allow us
‫to go back to the basics, so to the way HTML used to work
‫back in the day before everyone started using JavaScript
‫for the front end.
‫So back then, we simply created HTML forms
‫similar to this one, and then when we submitted them,
‫a request was sent to the server,
‫which then did the work that it needed to.
‫So this here is now very similar.
‫The only difference is that the data then gets
‫into this action where we can then do our action.
‫Well, just as the name says.
‫The only thing that we need to do, again, to make this work,
‫is to connect this URL here with the action.
‫All right.
‫Now next up we also want to get our cart data
‫here into this action.
‫So the cart is right here in this component,
‫but we also now want to basically submit it in the form
‫so that we can then get access to it in the action.
‫So you might think that we can just use this variable here
‫right in the action, but later on,
‫this cart will actually come from Redux.
‫And so then we can really only get this cart
‫right here in the component.
‫Now, thankfully for us, there is a nice way
‫of actually getting some data into the action
‫without it being a form field.
‫So what we can do is a hidden input.
‫So we can do that anywhere in the form,
‫but let's just do it here at the very end.
‫So if we set it to type hidden, and the name to cart,
‫and the value to JSON.stringify,
‫because this cart is right now an object,
‫but here we can only have strings.
‫So we need to convert this to a string here.
‫So if we do it like this, then later on,
‫when we submit this form again,
‫it should then show up right here in our form data as well.
‫So let's actually try that immediately.
‫And there it is.
‫So right there, but what about this priority field?
‫So I think I have to actually select it here
‫in order for it to show up.
‫And indeed, there it is.
‫So now we have priority on.
‫So we have our raw data right here in the action now,
‫but we need to model it a little bit.
‫So this priority should be always existent
‫in the data that we are going to submit,
‫and it should be true or false, not just on.
‫And of course the cart also needs to be converted
‫back to an object.
‫And so let's now quickly do that.
‫So let's create a new variable here called the order,
‫just like this.
‫And then let's start by spreading in the data,
‫and then we will just overwrite some of them.
‫So the cart should be JSON.parse(data.cart).
‫And then the priority will be data.priority,
‫and then we just check if it is equal to on.
‫More like this.
‫And then let's log it to the console.
‫Let's clean this up.
‫And this looks beautiful.
‫So here now we have our cart back to being an array,
‫and priority is set to true.
‫And if we change this here now,
‫then the priority should be false.
‫Nice, so we have the data now in the shape
‫that we want it to be, and so now we can use it
‫to create a new order.
‫So we already, once again, have an API endpoint
‫for that inside a function right here in APIRestaurant.
‫So we have the createOrder function,
‫which receives a new order object as an argument.
‫So that's pretty straightforward.
‫And so let's do createOrder,
‫and make sure that it has been correctly imported.
‫And then we pass in the order.
‫Now, let's just open up this function here again,
‫so that I can show you that this createOrder function
‫actually returns the newly created object.
‫So the new order is actually returned.
‫And so the nice thing about that
‫is that we can now await that here.
‫So we can call this here newOrder.
‫And then what we will want to do
‫is to immediately redirect the page to the order/ID.
‫So basically showing the user all the information
‫about that new order.
‫So basically what we implemented in the previous lecture.
‫So let's do that here, but we cannot do it
‫using the navigate function, because the navigate function
‫comes from calling the useNavigate hook,
‫but we cannot call hooks inside this function.
‫So hooks can only be called inside components.
‫And so here we need to use another function,
‫which is called redirect.
‫So this is basically another function that is provided to us
‫by React Router, which basically will just create
‫a new response or a new request.
‫I'm not really sure, but it's also not so important.
‫What matters is that behind the scenes,
‫all of this really works with the web API's
‫standard request and response API's.
‫And so if from here we return a new response,
‫then React Router will automatically go
‫to the URL that is contained in that new response.
‫So again, this redirect here will actually create
‫that response, which we can see right here
‫in this TypeScript definition.
‫But anyway, long story short, all we have to do here
‫is to now specify basically this new URL.
‫So order/slash and then newOrder.id,
‫which will have been created on the server by the API.
‫So again, this new order that we get here
‫is already the new object that is coming back
‫from the API as a response of calling this function here.
‫And so this will then already contain the ID,
‫which will then be placed here in the URL,
‫which will then fetch that new order immediately
‫from the server and display it here.
‫So that's again what we implemented in the previous lecture.
‫So let's try this now again, and nothing happened.
‫So let's see here our network tab to see...
‫Well, maybe we should clear all of this and try that again.
‫So just to see if any request was created.
‫And indeed, it actually was.
‫Ah, and now it did work.
‫So then we quickly saw the loader here,
‫and then we just got our brand new order.
‫So mine is here on May 1st, but you will see
‫exactly the date that you are on right now.
‫And these prizes here will be the same,
‫because we are all using still this fake cart here,
‫of course.
‫Beautiful.
‫So that worked really nicely.
‫And so once again, this is really,
‫really an amazing pattern for doing data manipulation
‫and also for writing new data simply using these actions
‫and React Router's form component.
‫So without writing all the boilerplate code
‫that we used to write earlier.
‫So where we had to create state variables
‫for all these inputs, then we had to handle
‫the request here.
‫We had to prevent default, and really all that stuff.
‫But with this, we kind of go back to the roots.
‫All we do is to have a form and then we submit this form,
‫and then since we wired up this action that we created
‫to this URL, then we catch that request
‫right here in this action and do whatever work
‫that we have to do.
‫So in this case, we get all the data from the form,
‫which is probably always going to be
‫these two lines of code here,
‫which might change in the future, I think,
‫but for now, this is just how it works.
‫Then we create our new order object
‫and submit it with a post request
‫to this createOrder right here.
‫So the post request is really made here.
‫So here in this fetch request,
‫where we have this post method,
‫this is where, actually, the new order is created.
‫All right, then we get back that new order object
‫and we redirect immediately to order/ the newOrder.id.
‫So the ID of this newly created order is exactly this,
‫and for you, it's going to be another one.
‫So let's just copy this here.
‫Let's go back to the homepage,
‫and then we can of course paste this in here, hit enter,
‫and then we will get exactly that order
‫that we just created right here.
‫So in other words, the user can now search
‫for the order that they created.
‫Great, so I hope that this made sense.
‫And now all we have to do in the next lecture
‫is some error handling here.