From 5a65b980340d15690437507958eb79cfce41188f Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Tue, 31 Oct 2023 16:14:37 +0000
Subject: [PATCH] Use bind instead of hidden field (#311)

* Use bind instead of hidden field

* Update actions.ts
---
 dashboard/final-example/app/lib/actions.ts     | 18 ++++++++----------
 .../final-example/app/ui/invoices/buttons.tsx  |  5 +++--
 .../app/ui/invoices/edit-form.tsx              |  5 ++---
 .../app/ui/invoices/edit-form.tsx              |  2 --
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/dashboard/final-example/app/lib/actions.ts b/dashboard/final-example/app/lib/actions.ts
index 9bc5dc1..2de94e5 100644
--- a/dashboard/final-example/app/lib/actions.ts
+++ b/dashboard/final-example/app/lib/actions.ts
@@ -21,8 +21,7 @@ const FormSchema = z.object({
 });
 
 const CreateInvoice = FormSchema.omit({ id: true, date: true });
-const UpdateInvoice = FormSchema.omit({ date: true });
-const DeleteInvoice = FormSchema.pick({ id: true });
+const UpdateInvoice = FormSchema.omit({ date: true, id: true });
 
 // This is temporary
 export type State = {
@@ -73,9 +72,12 @@ export async function createInvoice(prevState: State, formData: FormData) {
   redirect('/dashboard/invoices');
 }
 
-export async function updateInvoice(prevState: State, formData: FormData) {
+export async function updateInvoice(
+  id: string,
+  prevState: State,
+  formData: FormData,
+) {
   const validatedFields = UpdateInvoice.safeParse({
-    id: formData.get('id'),
     customerId: formData.get('customerId'),
     amount: formData.get('amount'),
     status: formData.get('status'),
@@ -88,7 +90,7 @@ export async function updateInvoice(prevState: State, formData: FormData) {
     };
   }
 
-  const { id, customerId, amount, status } = validatedFields.data;
+  const { customerId, amount, status } = validatedFields.data;
   const amountInCents = amount * 100;
 
   try {
@@ -105,13 +107,9 @@ export async function updateInvoice(prevState: State, formData: FormData) {
   redirect('/dashboard/invoices');
 }
 
-export async function deleteInvoice(formData: FormData) {
+export async function deleteInvoice(id: string) {
   // throw new Error('Failed to Delete Invoice');
 
-  const { id } = DeleteInvoice.parse({
-    id: formData.get('id'),
-  });
-
   try {
     await sql`DELETE FROM invoices WHERE id = ${id}`;
     revalidatePath('/dashboard/invoices');
diff --git a/dashboard/final-example/app/ui/invoices/buttons.tsx b/dashboard/final-example/app/ui/invoices/buttons.tsx
index eed4d4f..79bfac7 100644
--- a/dashboard/final-example/app/ui/invoices/buttons.tsx
+++ b/dashboard/final-example/app/ui/invoices/buttons.tsx
@@ -26,9 +26,10 @@ export function UpdateInvoice({ id }: { id: string }) {
 }
 
 export function DeleteInvoice({ id }: { id: string }) {
+  const deleteInvoiceWithId = deleteInvoice.bind(null, id);
+
   return (
-    <form action={deleteInvoice}>
-      <input type="hidden" name="id" value={id} />
+    <form action={deleteInvoiceWithId}>
       <button className="rounded-md border p-2 hover:bg-gray-100">
         <span className="sr-only">Delete</span>
         <TrashIcon className="w-5" />
diff --git a/dashboard/final-example/app/ui/invoices/edit-form.tsx b/dashboard/final-example/app/ui/invoices/edit-form.tsx
index 11e5112..1855ded 100644
--- a/dashboard/final-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/edit-form.tsx
@@ -20,13 +20,12 @@ export default function EditInvoiceForm({
   customers: CustomerField[];
 }) {
   const initialState = { message: null, errors: {} };
-  const [state, dispatch] = useFormState(updateInvoice, initialState);
+  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
+  const [state, dispatch] = useFormState(updateInvoiceWithId, initialState);
 
   return (
     <form action={dispatch}>
       <div className="rounded-md bg-gray-50 p-4 md:p-6">
-        {/* Invoice ID */}
-        <input type="hidden" name="id" value={invoice.id} />
         {/* Customer Name */}
         <div className="mb-4">
           <label htmlFor="customer" className="mb-2 block text-sm font-medium">
diff --git a/dashboard/starter-example/app/ui/invoices/edit-form.tsx b/dashboard/starter-example/app/ui/invoices/edit-form.tsx
index 4e476a4..f8544c1 100644
--- a/dashboard/starter-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/starter-example/app/ui/invoices/edit-form.tsx
@@ -20,8 +20,6 @@ export default function EditInvoiceForm({
   return (
     <form>
       <div className="rounded-md bg-gray-50 p-4 md:p-6">
-        {/* Invoice ID */}
-        <input type="hidden" name="id" value={invoice.id} />
         {/* Customer Name */}
         <div className="mb-4">
           <label htmlFor="customer" className="mb-2 block text-sm font-medium">