implementing useActionState

src/app/_components/CreateWine.tsx

@@ -1,4 +1,5 @@
-import { addWine } from "~/server/actions/addWine";
+import { useActionState } from "react";
+import { InsertResult, addWine } from "~/server/actions/addWine";
 import { getProducers } from "~/server/actions/allProducers";
 
 type Wine = {
@@ -6,21 +7,21 @@ type Wine = {
   producer: string;
 };
 
-async function submitWine(formData: FormData): Promise<void> {
-  "use server";
-  const wine: Wine = {
-    name: formData.get("name") as string,
-    producer: formData.get("producer") as string,
-  };
-
-  addWine(wine);
-}
 const producers = await getProducers();
 
 export default function CreateWine() {
+  const [formState, formAction] = useActionState(addWine, {
+    message: "",
+    errors: undefined,
+    fieldValues: {
+      name: "",
+      producer: "",
+    },
+  });
+
   return (
     <div>
-      <form action={submitWine}>
+      <form action={formAction}>
         <input type="text" name="name" />
         <select name="producer">
           {producers.map((producer, i) => (

src/server/actions/addWine.ts

@@ -2,16 +2,25 @@
 import { db } from '../db/index'
 import { wines } from '../db/schema'
 
-type wine = {
+type Wine = {
   name: string;
   producer: string;
 }
 
-export const addWine = async (wine: wine) => {
+export type InsertResult = {
+  name: string;
+  producer: string;
+  id: string;
+  createdAt: Date;
+  updatedAt: Date | null;
+}[];
+
+export const addWine = async (wine: Wine): Promise<InsertResult>  => {
   const { name, producer } = wine;
-    await db.insert(wines).values({
+  const response = await db.insert(wines).values({
       producer: producer,
       name: name,
     })
     .returning();
+  return response;
   };