Merge branch 'main' of https://gitea.rannes.dev/rannes.dev/wine-shop

src/app/_components/AllRegions.tsx

@@ -2,6 +2,7 @@ import { db } from "~/server/db";
 
 export default async function AllRegions() {
   const allRegions = await db.query.regions.findMany();
+  const allCountries = await db.query.countries.findMany();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All Regions:</h1>
@@ -9,7 +10,14 @@ export default async function AllRegions() {
         <>
           <ul>
             {allRegions.map((region) => (
-              <li key={region.id}>{region.name}</li>
+              <li key={region.id}>
+                {region.name} -{" "}
+                {
+                  allCountries.find(
+                    (country) => country.id === region.countryId,
+                  )?.name
+                }
+              </li>
             ))}
           </ul>
         </>

src/app/_components/admin/CreateCountryForm.tsx

@@ -2,22 +2,16 @@
 import { Input } from "~/components/ui/input";
 import { addCountry } from "~/server/actions/addCountry";
 import SubmitButton from "../SubmitButton";
-import { useRef } from "react";
-
-const initialState = {
-  name: "" as string,
-};
+import { useFormState } from "react-dom";
 
 export default function CreateCountryForm() {
-  const ref = useRef<HTMLFormElement>(null);
-  const handleSubmit = async (formData: FormData) => {
-    ref.current?.reset();
-    await addCountry(formData);
-  };
+  const [state, formAction] = useFormState(addCountry, null);
+
   return (
-    <form ref={ref} action={handleSubmit}>
-      <Input name="name" required />
+    <form action={formAction}>
+      <Input name="name" />
       <SubmitButton text={"Country"} />
+      {state?.message}
     </form>
   );
 }

src/app/_components/admin/CreateRegionForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Input } from "~/components/ui/input";
 import SubmitButton from "../SubmitButton";
-import { useRef } from "react";
+import { useActionState } from "react";
 import { addRegion } from "~/server/actions/addRegion";
 import {
   Select,
@@ -11,7 +11,6 @@ import {
   SelectValue,
 } from "~/components/ui/select";
 import { useFormState } from "react-dom";
-import { init } from "next/dist/compiled/webpack/webpack";
 
 interface Country {
   id: string;
@@ -21,10 +20,9 @@ interface Country {
 export default function CreateRegionForm(props: { countries: Country[] }) {
   const [state, formAction] = useFormState(addRegion, null);
   const { countries } = props;
-  const ref = useRef<HTMLFormElement>(null);
   return (
-    <form ref={ref} action={formAction}>
-      <Input name="name" required />
+    <form action={formAction}>
+      <Input name="name" />
       <Select name="country">
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Country" />

src/server/actions/addCountry.ts

@@ -3,15 +3,41 @@
 import { revalidatePath } from "next/cache";
 import { db } from "../db";
 import { countries } from "../db/schema";
+import * as z from "zod";
 
-type NewCountry = {
-  name: string;
-};
+const schema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+});
 
-export const addCountry = async (formData: FormData) => {
-  const newCountry: NewCountry = {
-    name: (formData.get("name") as string).toLowerCase(),
+export async function addCountry(prevstate: any, formData: FormData) {
+  const name = formData.get("name") as string;
+  const newCountry = schema.safeParse({ name: name.toLowerCase() });
+
+  if (!newCountry.success) {
+    const errors = newCountry.error.issues.map((issue) =>
+      console.log(issue.message),
+    );
+    return {
+      message: errors,
+      data: newCountry.data,
     };
+  } else {
+    const confirmCreate = await db
+      .insert(countries)
+      .values(newCountry.data)
+      .onConflictDoNothing()
+      .returning({ name: countries.name });
+    if (!confirmCreate[0]) {
+      return {
+        message: `${newCountry.data.name} already exists`,
+        data: newCountry.data,
+      };
+    } else {
       revalidatePath("/");
-  await db.insert(countries).values(newCountry).returning();
+      return {
+        message: `${confirmCreate[0].name} added`,
+        data: newCountry.data,
       };
+    }
+  }
+}

src/server/actions/addRegion.ts

@@ -11,27 +11,26 @@ const schema = z.object({
 });
 
 export const addRegion = async (prevstate: any, formData: FormData) => {
-  const newRegion = schema.safeParse({
+  const regionData = {
     name: (formData.get("name") as string).toLowerCase(),
     countryId: formData.get("country") as string,
-  });
+  };
+  const newRegion = schema.safeParse(regionData);
   if (!newRegion.success) {
     return {
-      message: "failed",
-      errors: newRegion.error,
-      data: null,
+      message: newRegion.error.issues[0]?.message,
+      data: newRegion.data,
     };
   }
   const confirmedRegion = await db
     .insert(regions)
     .values(newRegion.data)
-    .onConflictDoNothing({ target: regions.name })
+    .onConflictDoNothing()
     .returning({ name: regions.name });
-  if (!confirmedRegion[0]?.name) {
+  if (!confirmedRegion[0]) {
     return {
-      message: "region already exists",
-      errors: newRegion.error,
-      data: null,
+      message: `${newRegion.data.name} already exists`,
+      data: newRegion.data,
     };
   } else {
     const message = `${newRegion.data.name} added`;

src/server/db/schema.ts

@@ -7,6 +7,7 @@ import {
   text,
   timestamp,
   uuid,
+  unique,
 } from "drizzle-orm/pg-core";
 import { relations } from "drizzle-orm";
 
@@ -81,11 +82,17 @@ export const winesRelations = relations(wines, ({ one }) => ({
   }),
 }));
 
-export const subRegions = createTable("subRegion", {
+export const subRegions = createTable(
+  "subRegion",
+  {
     id: uuid("id").primaryKey().notNull().defaultRandom(),
     name: text("name").notNull().unique(),
     regionId: uuid("regionId").notNull(),
-});
+  },
+  (t) => ({
+    uniqueSubRegion: unique().on(t.name, t.regionId),
+  }),
+);
 
 export const subRegionsRelations = relations(subRegions, ({ many, one }) => ({
   wines: many(wines),
@@ -95,11 +102,17 @@ export const subRegionsRelations = relations(subRegions, ({ many, one }) => ({
   }),
 }));
 
-export const regions = createTable("region", {
+export const regions = createTable(
+  "region",
+  {
     id: uuid("id").primaryKey().notNull().defaultRandom(),
-  name: text("name").notNull().unique(),
+    name: text("name").notNull(),
     countryId: uuid("countryId").notNull(),
-});
+  },
+  (t) => ({
+    uniqueRegion: unique().on(t.name, t.countryId),
+  }),
+);
 
 export const regionsRelations = relations(regions, ({ many, one }) => ({
   wines: many(wines),