Use bind instead of hidden field (#311)

* Use bind instead of hidden field

* Update actions.ts

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');

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" />

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">

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">