src/app/_components/AllCountries.tsx

@@ -1,4 +1,3 @@
-import { deleteCountry } from "~/server/actions/deleteCountry";
 import { db } from "~/server/db";
 
 export default async function AllCountries() {
@@ -7,12 +6,7 @@ export default async function AllCountries() {
     <div className="pt-4">
       <h1 className="text-2xl">All Countries:</h1>
       {countries.map((country) => (
-        <div className="flex gap-1">
+        <p key={country.id}>{country.name}</p>
-          <p key={country.id}>{country.name}</p>
-          <form action={deleteCountry.bind(null, country.id)}>
-            <button>❌</button>
-          </form>
-        </div>
       ))}
     </div>
   );

src/app/_components/SearchBar.tsx

@@ -4,12 +4,14 @@ import { Input } from "~/components/ui/input";
 import useFilterStore from "../store";
 
 export default function SearchBar() {
+  const [query, setQuery] = useState("");
   const setStoreSearchQuery = useFilterStore((state) => state.setSearchQuery);
   const { searchQuery } = useFilterStore((state) => state.filters);
 
   function handleInput(e: ChangeEvent<HTMLInputElement>) {
     e.preventDefault();
     const newValue = e.target.value;
+    setQuery(newValue);
     setStoreSearchQuery(newValue);
   }
   return (

src/app/_components/SubmitButton.tsx

@@ -1,11 +0,0 @@
-import { useFormStatus } from "react-dom";
-import { Button } from "~/components/ui/button";
-
-export default function SubmitButton() {
-  const { pending } = useFormStatus();
-  return (
-    <Button disabled={pending}>
-      {pending ? "Adding country.." : "Add country"}
-    </Button>
-  );
-}

src/app/_components/WineList.tsx

@@ -1,17 +1,17 @@
 "use server";
-import { deleteCountry } from "~/server/actions/deleteCountry";
 import { db } from "~/server/db";
+import WineName from "./WineName";
 
 export default async function WineList() {
   const wines = await db.query.wines.findMany();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All wines:</h1>
-      {wines ? (
+      {wines && wines.length > 0 ? (
         <>
           <ul>
             {wines.map((wine) => (
-              <li key={wine.id}>{wine.name}</li>
+              <WineName key={wine.id} name={wine.name} />
             ))}
           </ul>
         </>

src/app/_components/WineName.tsx

@@ -0,0 +1,4 @@
+export default function WineName(props: { name: string }) {
+  const { name } = props;
+  return <p>{name}</p>;
+}

src/app/_components/admin/CreateCountryForm.tsx

@@ -1,23 +1,26 @@
-"use client";
+import { revalidatePath } from "next/cache";
+import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
-import { addCountry } from "~/server/actions/createCountry";
+import { db } from "~/server/db";
-import SubmitButton from "../SubmitButton";
+import { countries } from "~/server/db/schema";
-import { useRef } from "react";
 
-const initialState = {
+type NewCountry = {
-  name: "" as string,
+  name: string;
 };
 
-export default function CreateCountryForm() {
+export default async function CreateCountryForm() {
-  const ref = useRef<HTMLFormElement>(null);
+  const addCountry = async (formData: FormData) => {
-  const handleSubmit = async (formData: FormData) => {
+    "use server";
-    ref.current?.reset();
+    const newCountry: NewCountry = {
-    await addCountry(formData);
+      name: formData.get("name") as string,
+    };
+    await db.insert(countries).values(newCountry).returning();
+    revalidatePath("/");
   };
   return (
-    <form ref={ref} action={handleSubmit}>
+    <form action={addCountry}>
       <Input name="name" required />
-      <SubmitButton />
+      <Button>Add country</Button>
     </form>
   );
 }

src/components/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "~/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border border-slate-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
-        destructive:
-          "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

src/server/actions/addWine.ts

@@ -0,0 +1,67 @@
+'use server'
+import { ZodError, z } from 'zod';
+import { db } from '../db/index'
+import { wines } from '../db/schema'
+import { QueryResult } from 'pg';
+
+type NewWine = typeof wines.$inferInsert;
+
+export type InsertResult = {
+  name: string;
+  producer: string;
+  id: string;
+  createdAt: Date;
+  updatedAt: Date | null;
+  
+}[];
+export type Fields = {
+  name: FormDataEntryValue | null
+  producer: FormDataEntryValue | null;
+}
+
+export type FormState = {
+  message: string | QueryResult<never>;
+  errors: Record<keyof Fields, string> | undefined;
+  fieldValues: NewWine;
+}
+
+const schema = z.object({
+  name: z.string(),
+  producer: z.string().uuid(),
+})
+
+export const addWine = async (
+  prevState: FormState,
+  formData: FormData): Promise<FormState>  => {
+  const newWine: NewWine = {
+    name: formData.get('name') as string,
+    producer: formData.get('producer') as string
+  }
+  try {
+    schema.parse(newWine)
+
+    await db.insert(wines).values(newWine);
+    return {
+      message: 'success',
+      errors: undefined,
+      fieldValues: {
+        name: "",
+        producer: ""
+      }
+    }
+  } catch (error) {
+    const zodError = error as ZodError;
+    const errorMap = zodError.flatten().fieldErrors;
+    return {
+      message: "error",
+      errors: {
+        name: errorMap["name"]?.[0] ?? "",
+        producer: errorMap["producer"]?.[0] ?? ""
+      },
+      fieldValues: {
+        name: newWine.name,
+        producer: newWine.producer
+      }
+    }
+  }
+  }

src/server/actions/allProducers.ts

@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getProducers(){
+    return db.query.producers.findMany();
+}

src/server/actions/createCountry.ts

@@ -1,17 +0,0 @@
-"use server";
-
-import { revalidatePath } from "next/cache";
-import { db } from "../db";
-import { countries } from "../db/schema";
-
-type NewCountry = {
-  name: string;
-};
-
-export const addCountry = async (formData: FormData) => {
-  const newCountry: NewCountry = {
-    name: (formData.get("name") as string).toLowerCase(),
-  };
-  revalidatePath("/");
-  await db.insert(countries).values(newCountry).returning();
-};

src/server/actions/deleteCountry.ts

@@ -1,11 +0,0 @@
-"use server";
-
-import { eq } from "drizzle-orm";
-import { db } from "../db";
-import { countries } from "../db/schema";
-import { revalidatePath } from "next/cache";
-
-export async function deleteCountry(id: string) {
-  await db.delete(countries).where(eq(countries.id, id));
-  revalidatePath("/");
-}

src/server/actions/getAllWines.ts

@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+export async function getAllWines(){
+    const wines = db.query.wines.findMany() 
+    return wines;
+}

src/server/actions/getProducer.ts

@@ -0,0 +1,10 @@
+"use server";
+import { producers } from "../db/schema";
+import { db } from "../db";
+import { eq } from "drizzle-orm";
+
+export default async function getProducer(id: string) {
+  return db.query.producers.findFirst({
+    where: eq(producers.id, id),
+  });
+}

src/server/actions/getWineDetails.ts

@@ -0,0 +1,13 @@
+"use server";
+import { sql } from "drizzle-orm";
+import { db } from "../db";
+import { wines, producers } from "../db/schema";
+import { UUID } from "crypto";
+
+export async function getWineDetails(id: string) {
+  const results = await db
+    .select()
+    .from(producers)
+    .where(sql`${producers.id} = ${id}`);
+  return results;
+}