From f76e72db8084eaae2b81f49038332cad122a26a1 Mon Sep 17 00:00:00 2001 From: christian Date: Sat, 25 May 2024 07:29:02 +0200 Subject: [PATCH 1/6] 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 { - "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 (
-
+ +
+ {JSON.stringify(formState)}
); } diff --git a/src/app/_components/FormCard.tsx b/src/app/_components/FormCard.tsx new file mode 100644 index 0000000..d6e5791 --- /dev/null +++ b/src/app/_components/FormCard.tsx @@ -0,0 +1,10 @@ +import CreateWine from "./CreateWine"; + +export default function FormCard() { + return ( +
+

Add a new wine

+ +
+ ); +} diff --git a/src/app/_components/WineCards.tsx b/src/app/_components/WineCards.tsx deleted file mode 100644 index 678f2f1..0000000 --- a/src/app/_components/WineCards.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { getWines } from "~/server/actions/allWines"; -import WineName from "./WineName"; -import WineProducer from "./WineProducer"; -export const dynamic = "force-dynamic"; - -const allWines = await getWines(); -export default async function WineCards() { - return ( - <> - {allWines.map((wine, i) => { - return ( -
- - -
- ); - })} - - ); -} diff --git a/src/server/actions/addWine.ts b/src/server/actions/addWine.ts index 95ab41e..c09cf65 100644 --- a/src/server/actions/addWine.ts +++ b/src/server/actions/addWine.ts @@ -2,6 +2,7 @@ import { ZodError, z } from 'zod'; import { db } from '../db/index' import { wines } from '../db/schema' +import { QueryResult } from 'pg'; type NewWine = typeof wines.$inferInsert; @@ -19,7 +20,7 @@ export type Fields = { } export type FormState = { - message: string; + message: string | QueryResult; errors: Record | undefined; fieldValues: NewWine; } @@ -39,9 +40,9 @@ export const addWine = async ( try { schema.parse(newWine) - const response = await db.insert(wines).values(newWine); + await db.insert(wines).values(newWine); return { - message: `success fully added ${response}`, + message: 'success', errors: undefined, fieldValues: { name: "",