From f76e72db8084eaae2b81f49038332cad122a26a1 Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.com>
Date: Sat, 25 May 2024 07:29:02 +0200
Subject: [PATCH] implementing useActionState

---
 src/app/_components/CreateWine.tsx | 23 ++++++++++++-----------
 src/server/actions/addWine.ts      | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/app/_components/CreateWine.tsx b/src/app/_components/CreateWine.tsx
index afbb541..e437421 100644
--- a/src/app/_components/CreateWine.tsx
+++ b/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) => (
diff --git a/src/server/actions/addWine.ts b/src/server/actions/addWine.ts
index 630f139..247497d 100644
--- a/src/server/actions/addWine.ts
+++ b/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;
   };
\ No newline at end of file