Refactor Invoice POST Handler to Next.js Server Action

Instructor: [0:00] Now that we've created our server action for creating a customer, your challenge in this video is to do the same thing with our invoices.

[0:12] Remove the invoices route and create an invoices action, and then in the form to create an invoice, replace the React Hook Form and use Query code with the server action.

[0:23] I'll just show my solution. One thing you'll need to do is make sure you pass the customers down to the dialog component, where we have the form for creating an invoice.

[0:34] The reason being is that before we had been using React Query to call our GET customers API route, but that route no longer exists, so we need to pass those customers down from a server component to the dialog component.

[0:47] The first thing to note that I did was I added this create invoice form. This is a new form that's under the full stack forms here. In this server component, we get our customers and we pass it to this Create Invoice form, so we can look at this Create Invoice form.

[1:02] Here, I refactored it. It was using React Hook Form and React Query, and so I refactored it to use a server action. Like our customer action, we have our invoice form ref for our form to clear it once we submit it.

[1:15] Here we have our action with the form data, and then we pass that form data to our add invoice action. Then once that action completes, we set open to so the dialog closes.

[1:26] Now, if we go look in our action here, most of this was originally copied from the invoice API route, which we deleted. The main difference here is that instead of destructuring from the request, we are just getting them straight from the form data. Then we do our normal checks, and then we add it assuming there is no errors.

[1:45] Then, at the end, we redirect to that invoice ID.