wine-shop/src/app/_components/CreateWine.tsx

"use client";
import { useActionState, useEffect, useState } from "react";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import { addWine } from "~/server/actions/addWine";
import { getProducers } from "~/server/actions/allProducers";

async function fetchProducers() {
  const producers = await getProducers();
  return producers;
}

type ProducersData = {
  id: string;
  name: string;
  createdAt: Date;
  country: string;
  region: string;
  email: string;
}[];

export default function CreateWine() {
  const [formState, formAction] = useActionState(addWine, {
    message: "",
    errors: undefined,
    fieldValues: {
      name: "",
      producer: "",
    },
  });
  const [producers, setProducers] = useState<ProducersData>([]);
  useEffect(() => {
    async function loadProducers() {
      const producersData = await fetchProducers();
      setProducers(producersData);
    }
    loadProducers();
  }, []);
  return (
    <div className="flex w-full flex-col">
      <form action={formAction} className="flex flex-col gap-2">
        <Input
          placeholder="Enter wine name"
          className="border-2"
          type="text"
          name="name"
        />
        <Select name="producer">
          <SelectTrigger className="w-[280px]">
            <SelectValue placeholder="Select a producer" />
          </SelectTrigger>
          <SelectContent>
            {producers.map((producer, i) => (
              <SelectItem key={i} value={producer.id}>
                {producer.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button type="submit">Add wine</Button>
      </form>
      {formState.message === "success" ? (
        <span className="text-green-400">Wine succesfully submitted</span>
      ) : (
        ""
      )}
    </div>
  );
}