updated components for pending

src/app/_components/SearchBar.tsx

@@ -4,14 +4,12 @@ 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

@@ -0,0 +1,11 @@
+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/admin/CreateCountryForm.tsx

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

src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+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

@@ -1,67 +0,0 @@
-'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

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

src/server/actions/createCountry.ts

@@ -0,0 +1,18 @@
+"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) => {
+  "use server";
+  const newCountry: NewCountry = {
+    name: (formData.get("name") as string).toLowerCase(),
+  };
+  revalidatePath("/");
+  await db.insert(countries).values(newCountry).returning();
+};

src/server/actions/getAllWines.ts

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

src/server/actions/getProducer.ts

@@ -1,10 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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;
-}