From dbdb5356e26b592a34d3a82efc495427425126e6 Mon Sep 17 00:00:00 2001 From: ChrQR Date: Tue, 28 May 2024 22:16:39 +0200 Subject: [PATCH] updated components for pending --- src/app/_components/SearchBar.tsx | 2 - src/app/_components/SubmitButton.tsx | 11 +++ .../_components/admin/CreateCountryForm.tsx | 28 ++++---- src/components/ui/alert.tsx | 59 ++++++++++++++++ src/server/actions/addWine.ts | 67 ------------------- src/server/actions/allProducers.ts | 7 -- src/server/actions/createCountry.ts | 18 +++++ src/server/actions/getAllWines.ts | 7 -- src/server/actions/getProducer.ts | 10 --- src/server/actions/getWineDetails.ts | 13 ---- 10 files changed, 100 insertions(+), 122 deletions(-) create mode 100644 src/app/_components/SubmitButton.tsx create mode 100644 src/components/ui/alert.tsx delete mode 100644 src/server/actions/addWine.ts delete mode 100644 src/server/actions/allProducers.ts create mode 100644 src/server/actions/createCountry.ts delete mode 100644 src/server/actions/getAllWines.ts delete mode 100644 src/server/actions/getProducer.ts delete mode 100644 src/server/actions/getWineDetails.ts diff --git a/src/app/_components/SearchBar.tsx b/src/app/_components/SearchBar.tsx index 14fc88d..7f0b368 100644 --- a/src/app/_components/SearchBar.tsx +++ b/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) { e.preventDefault(); const newValue = e.target.value; - setQuery(newValue); setStoreSearchQuery(newValue); } return ( diff --git a/src/app/_components/SubmitButton.tsx b/src/app/_components/SubmitButton.tsx new file mode 100644 index 0000000..a4c6322 --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/app/_components/admin/CreateCountryForm.tsx b/src/app/_components/admin/CreateCountryForm.tsx index ff8838c..1b784ef 100644 --- a/src/app/_components/admin/CreateCountryForm.tsx +++ b/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(null); + const handleSubmit = async (formData: FormData) => { + ref.current?.reset(); + await addCountry(formData); }; return ( -
+ - + ); } diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx new file mode 100644 index 0000000..990e8a6 --- /dev/null +++ b/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 & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/src/server/actions/addWine.ts b/src/server/actions/addWine.ts deleted file mode 100644 index c09cf65..0000000 --- a/src/server/actions/addWine.ts +++ /dev/null @@ -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; - errors: Record | undefined; - fieldValues: NewWine; -} - -const schema = z.object({ - name: z.string(), - producer: z.string().uuid(), -}) - -export const addWine = async ( - prevState: FormState, - formData: FormData): Promise => { - 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 - } - } - } - } \ No newline at end of file diff --git a/src/server/actions/allProducers.ts b/src/server/actions/allProducers.ts deleted file mode 100644 index 4838261..0000000 --- a/src/server/actions/allProducers.ts +++ /dev/null @@ -1,7 +0,0 @@ -'use server' -import { db } from "../db/index"; - - -export async function getProducers(){ - return db.query.producers.findMany(); -} \ No newline at end of file diff --git a/src/server/actions/createCountry.ts b/src/server/actions/createCountry.ts new file mode 100644 index 0000000..5e38297 --- /dev/null +++ b/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(); +}; diff --git a/src/server/actions/getAllWines.ts b/src/server/actions/getAllWines.ts deleted file mode 100644 index 11c95e2..0000000 --- a/src/server/actions/getAllWines.ts +++ /dev/null @@ -1,7 +0,0 @@ -'use server' -import { db } from "../db/index"; - -export async function getAllWines(){ - const wines = db.query.wines.findMany() - return wines; -} \ No newline at end of file diff --git a/src/server/actions/getProducer.ts b/src/server/actions/getProducer.ts deleted file mode 100644 index 9f65fd7..0000000 --- a/src/server/actions/getProducer.ts +++ /dev/null @@ -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), - }); -} diff --git a/src/server/actions/getWineDetails.ts b/src/server/actions/getWineDetails.ts deleted file mode 100644 index 87bbac7..0000000 --- a/src/server/actions/getWineDetails.ts +++ /dev/null @@ -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; -}