src/app/_components/CreateWine.tsx

@@ -1,13 +1,21 @@
-import { useActionState } from "react";
-import { InsertResult, addWine } from "~/server/actions/addWine";
+"use client";
+import { useActionState, useEffect, useState } from "react";
+import { addWine } from "~/server/actions/addWine";
 import { getProducers } from "~/server/actions/allProducers";
 
-type Wine = {
-  name: string;
-  producer: string;
-};
+async function fetchProducers() {
+  const producers = await getProducers();
+  return producers;
+}
 
-const producers = await getProducers();
+type ProducersData = {
+  id: string;
+  name: string;
+  createdAt: Date;
+  country: string;
+  region: string;
+  email: string;
+}[];
 
 export default function CreateWine() {
   const [formState, formAction] = useActionState(addWine, {
@@ -18,7 +26,14 @@ export default function CreateWine() {
       producer: "",
     },
   });
-
+  const [producers, setProducers] = useState<ProducersData>([]);
+  useEffect(() => {
+    async function loadProducers() {
+      const producersData = await fetchProducers();
+      setProducers(producersData);
+    }
+    loadProducers();
+  }, []);
   return (
     <div>
       <form action={formAction}>