Merge pull request 'admin-forms' (#12) from admin-forms into main

Reviewed-on: #12

src/app/App.tsx

@@ -4,6 +4,10 @@ import CreateCountry from "./_components/admin/CreateCountry";
 import AllCountries from "./_components/AllCountries";
 import CreateRegion from "./_components/admin/CreateRegion";
 import AllRegions from "./_components/AllRegions";
+import CreateSubRegion from "./_components/admin/CreateSubRegion";
+import AllSubRegions from "./_components/AllSubRegions";
+import CreateProducer from "./_components/admin/CreateProducer";
+import AllProducers from "./_components/allProducers";
 
 export default function App() {
   return (
@@ -14,6 +18,10 @@ export default function App() {
       <AllCountries />
       <CreateRegion />
       <AllRegions />
+      <CreateSubRegion />
+      <AllSubRegions />
+      <CreateProducer />
+      <AllProducers />
     </div>
   );
 }

src/app/_components/AllCountries.tsx

@@ -1,9 +1,9 @@
 import { Delete } from "lucide-react";
 import { deleteCountry } from "~/server/actions/deleteCountry";
-import { db } from "~/server/db";
+import getAllCountries from "~/server/actions/getAllCountries";
 
 export default async function AllCountries() {
-  const countries = await db.query.countries.findMany();
+  const countries = await getAllCountries();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All Countries:</h1>

src/app/_components/AllRegions.tsx

@@ -1,29 +1,24 @@
-import { db } from "~/server/db";
+import { Delete } from "lucide-react";
+import deleteRegion from "~/server/actions/deleteRegion";
+import getAllCountries from "~/server/actions/getAllCountries";
+import getAllRegions from "~/server/actions/getAllRegions";
 
 export default async function AllRegions() {
-  const allRegions = await db.query.regions.findMany();
-  const allCountries = await db.query.countries.findMany();
+  const allRegions = await getAllRegions();
+  const allCountries = await getAllCountries();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All Regions:</h1>
-      {allRegions[0] ? (
-        <>
-          <ul>
-            {allRegions.map((region) => (
-              <li key={region.id}>
-                {region.name} -{" "}
-                {
-                  allCountries.find(
-                    (country) => country.id === region.countryId,
-                  )?.name
-                }
-              </li>
-            ))}
-          </ul>
-        </>
-      ) : (
-        <p>There are no regions in the db.</p>
-      )}
+      {allRegions.map((region) => (
+        <div key={region.id} className="flex gap-1">
+          <p>{region.name}</p>
+          <form action={deleteRegion.bind(null, region.id)}>
+            <button>
+              <Delete />
+            </button>
+          </form>
+        </div>
+      ))}
     </div>
   );
 }

src/app/_components/AllSubRegions.tsx

@@ -0,0 +1,22 @@
+import { Delete } from "lucide-react";
+import deleteSubRegion from "~/server/actions/deleteSubRegion";
+import getAllSubRegions from "~/server/actions/getAllSubRegions";
+
+export default async function AllSubRegions() {
+  const allSubRegions = await getAllSubRegions();
+  return (
+    <div className="pt-4">
+      <h1 className="text-2xl">All Sub Regions:</h1>
+      {allSubRegions.map((subRegion) => (
+        <div key={subRegion.id} className="flex gap-1">
+          <p>{subRegion.name}</p>
+          <form action={deleteSubRegion.bind(null, subRegion.id)}>
+            <button>
+              <Delete />
+            </button>
+          </form>
+        </div>
+      ))}
+    </div>
+  );
+}

src/app/_components/admin/CreateCountry.tsx

@@ -2,9 +2,9 @@ import CreateCountryForm from "./CreateCountryForm";
 
 export default function CreateCountry() {
   return (
-    <>
+    <div className="container flex w-full flex-col justify-center py-4">
       <h1 className="pt-4 text-2xl">Fill the form to create a new country</h1>
       <CreateCountryForm />
-    </>
+    </div>
   );
 }

src/app/_components/admin/CreateProducer.tsx

@@ -0,0 +1,13 @@
+"use server";
+import getAllCountries from "~/server/actions/getAllCountries";
+import CreateProducerForm from "./CreateProducerForm";
+
+export default async function CreateProducer() {
+  const allCountries = await getAllCountries();
+  return (
+    <div className="container flex w-full flex-col justify-center py-4">
+      <h1 className="pt-4 text-2xl">Fill the form to create a new producer</h1>
+      <CreateProducerForm allCountries={allCountries} />
+    </div>
+  );
+}

src/app/_components/admin/CreateProducerForm.tsx

@@ -0,0 +1,108 @@
+"use client";
+import clsx from "clsx";
+import { Check, CircleX } from "lucide-react";
+import { useFormState } from "react-dom";
+import { Input } from "~/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Textarea } from "~/components/ui/textarea";
+import { addProducer } from "~/server/actions/addProducer";
+import SubmitButton from "../SubmitButton";
+
+type Country = {
+  id: string;
+  name: string;
+};
+
+export default function CreateProducerForm(props: { allCountries: Country[] }) {
+  const { allCountries } = props;
+  const [formState, formAction] = useFormState(addProducer, {
+    message: "",
+    errors: undefined,
+    fieldValues: {
+      name: "",
+      description: "",
+      imageUrl: "",
+      countryId: "",
+    },
+  });
+  return (
+    <form action={formAction}>
+      <Input
+        name="name"
+        id="name"
+        placeholder="Enter the name of the producer..."
+        className={clsx({ "border-red-500": formState.errors?.name })}
+      />
+      {formState.message !== "" && !formState.errors?.name ? (
+        <Check className="text-green-500" />
+      ) : (
+        ""
+      )}
+      {formState.errors?.name ? (
+        <div className="flex min-w-96 items-center gap-1 text-red-500">
+          <CircleX />
+          <span className="text-sm">{formState.errors?.name}</span>
+        </div>
+      ) : (
+        ""
+      )}
+      <Textarea
+        name="description"
+        id="description"
+        placeholder="Enter a description of the producer..."
+        className={clsx({ "border-red-500": formState.errors?.description })}
+      />
+      {formState.message !== "" && !formState.errors?.description ? (
+        <Check className="text-green-500" />
+      ) : (
+        ""
+      )}
+      {formState.errors?.description ? (
+        <div className="flex min-w-96 items-center gap-1 text-red-500">
+          <CircleX />
+          <span className="text-sm">{formState.errors?.description}</span>
+        </div>
+      ) : (
+        ""
+      )}
+      <Input
+        name="imageUrl"
+        id="imageUrl"
+        placeholder="Image URL"
+        className={clsx({ "border-red-500": formState.errors?.imageUrl })}
+      />
+      {formState.message !== "" && !formState.errors?.imageUrl ? (
+        <Check className="text-green-500" />
+      ) : (
+        ""
+      )}
+      {formState.errors?.imageUrl ? (
+        <div className="flex min-w-96 items-center gap-1 text-red-500">
+          <CircleX />
+          <span className="text-sm">{formState.errors?.imageUrl}</span>
+        </div>
+      ) : (
+        ""
+      )}
+      <Select name="countryId">
+        <SelectTrigger className={`w-[180px] `}>
+          <SelectValue placeholder="select country" />
+        </SelectTrigger>
+        <SelectContent>
+          {allCountries.map((country) => (
+            <SelectItem key={country.id} value={country.id}>
+              {country.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <SubmitButton text={"producer"} />
+    </form>
+  );
+}

src/app/_components/admin/CreateRegion.tsx

@@ -1,13 +1,13 @@
 "use server";
-import { db } from "~/server/db";
 import CreateRegionForm from "./CreateRegionForm";
+import getAllCountries from "~/server/actions/getAllCountries";
 
 export default async function CreateRegion() {
-  const allCountries = await db.query.countries.findMany();
+  const allCountries = await getAllCountries();
   return (
-    <>
+    <div className="container flex w-full flex-col justify-center py-4">
       <h1 className="pt-4 text-2xl">Fill the form to create a new region</h1>
       <CreateRegionForm countries={allCountries} />
-    </>
+    </div>
   );
 }

src/app/_components/admin/CreateSubRegion.tsx

@@ -0,0 +1,21 @@
+"use server";
+import getAllRegions from "~/server/actions/getAllRegions";
+import CreateSubRegionForm from "./CreateSubRegionForm";
+import getAllCountries from "~/server/actions/getAllCountries";
+
+const allRegions = await getAllRegions();
+const allCountries = await getAllCountries();
+
+export default async function CreateSubRegion() {
+  return (
+    <div className="container flex w-full flex-col justify-center py-4">
+      <h1 className="pt-4 text-2xl">
+        Fill the form to create a new Sub Region
+      </h1>
+      <CreateSubRegionForm
+        allRegions={allRegions}
+        allCountries={allCountries}
+      />
+    </div>
+  );
+}

src/app/_components/admin/CreateSubRegionForm.tsx

@@ -0,0 +1,136 @@
+"use client";
+import clsx from "clsx";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useFormState } from "react-dom";
+import { Input } from "~/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { addSubRegion } from "~/server/actions/addSubRegion";
+import SubmitButton from "../SubmitButton";
+import { Check, CircleX } from "lucide-react";
+
+type Region = {
+  id: string;
+  name: string;
+  countryId: string;
+};
+type Country = {
+  id: string;
+  name: string;
+};
+
+export default function CreateSubRegionForm(props: {
+  allRegions: Region[];
+  allCountries: Country[];
+}) {
+  const { allRegions, allCountries } = props;
+  const [selectCountryId, setSelectCountryId] = useState<string | undefined>(
+    undefined,
+  );
+  const [selectCountryRegions, setSelectCountryRegions] = useState<Region[]>(
+    [],
+  );
+  const [formState, formActions] = useFormState(addSubRegion, {
+    message: "",
+    errors: undefined,
+    fieldValues: {
+      name: "",
+      regionId: "",
+    },
+  });
+
+  useEffect(() => {
+    if (selectCountryId) {
+      const regions = allRegions.filter(
+        (region) => region.countryId === selectCountryId,
+      );
+      setSelectCountryRegions(regions);
+    }
+  }, [selectCountryId]);
+
+  const formRef = useRef<HTMLFormElement>(null);
+  useEffect(() => {
+    if (formState.message === "success") {
+      formRef.current?.reset();
+    }
+  }, [formState.message]);
+  return (
+    <div className="flex flex-col gap-2">
+      {/* country selector */}
+      <Select
+        name="country"
+        onValueChange={(value) => setSelectCountryId(value)}
+      >
+        <SelectTrigger className={`w-[180px] `}>
+          <SelectValue placeholder="select country" />
+        </SelectTrigger>
+        <SelectContent>
+          {allCountries.map((country) => (
+            <SelectItem key={country.id} value={country.id}>
+              {country.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <form ref={formRef} action={formActions}>
+        {/* region selector */}
+        <div className="flex max-w-3xl items-center gap-2">
+          <Select name="regionId">
+            <SelectTrigger
+              className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.regionId })}`}
+            >
+              <SelectValue placeholder="select region" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectCountryRegions.map((region) => (
+                <SelectItem key={region.id} value={region.id}>
+                  {region.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {formState.message === "success" && !formState.errors?.regionId ? (
+            <Check className="text-green-500" />
+          ) : (
+            ""
+          )}
+          {formState.errors?.regionId ? (
+            <div className="flex min-w-40 items-center gap-1 text-red-500">
+              <CircleX className="text-red-500" />
+              <span className="text-sm">{formState.errors?.regionId}</span>
+            </div>
+          ) : (
+            ""
+          )}
+        </div>
+        <div className="flex max-w-3xl items-center gap-2">
+          <Input
+            name="name"
+            id="name"
+            placeholder="Name the sub region"
+            className={`${clsx({ "border-red-500": formState.errors?.name })}`}
+          />
+          {formState.message === "success" && !formState.errors?.name ? (
+            <Check className="text-green-500" />
+          ) : (
+            ""
+          )}
+          {formState.errors?.name ? (
+            <div className="flex min-w-40 items-center gap-1 text-red-500">
+              <CircleX className="text-red-500" />
+              <span className="text-sm">{formState.errors?.name}</span>
+            </div>
+          ) : (
+            ""
+          )}
+        </div>
+        <SubmitButton text={"sub region"} />
+      </form>
+    </div>
+  );
+}

src/app/_components/allProducers.tsx

@@ -0,0 +1,22 @@
+import { Delete } from "lucide-react";
+import deleteProducer from "~/server/actions/deleteProducer";
+import getAllProducers from "~/server/actions/getAllProducers";
+
+export default async function AllProducers() {
+  const allProducers = await getAllProducers();
+  return (
+    <div className="pt-4">
+      <h1 className="text-2xl">All Producers:</h1>
+      {allProducers.map((producer) => (
+        <div key={producer.id} className="flex gap-1">
+          <p>{producer.name}</p>
+          <form action={deleteProducer.bind(null, producer.id)}>
+            <button>
+              <Delete />
+            </button>
+          </form>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/server/actions/addProducer.ts

@@ -0,0 +1,77 @@
+"use server";
+import { eq } from "drizzle-orm";
+import { db } from "../db";
+import { producers } from "../db/schema";
+import { ZodError, z } from "zod";
+import { revalidatePath } from "next/cache";
+
+export const addProducer = async (prevstate: any, formData: FormData) => {
+  //assign formdaata to variables.
+  const name = (formData.get("name") as string).toLowerCase();
+  const description = (formData.get("description") as string).toLowerCase();
+  const imageUrl = (formData.get("imageUrl") as string).toLowerCase();
+  const countryId = formData.get("countryId") as string;
+
+  //check if producer already exists in country
+  const exists = await db
+    .select({ name: producers.name })
+    .from(producers)
+    .where(eq(producers.name, name));
+
+  //Define the schema for the form data
+  const schema = z.object({
+    name: z
+      .string()
+      .min(1, "Name is required")
+      .refine(() => !exists[0], {
+        message: `${name} already exists in selected country`,
+      }),
+    description: z.string(),
+    imageUrl: z.string(),
+    countryId: z.string().min(1, "No country selected"),
+  });
+  //Parse the form data using the schema for validation, and check if the name already exists
+  try {
+    schema.parse({
+      name,
+      description,
+      imageUrl,
+      countryId,
+    });
+    //If the name doesn't exist, add the country to the database abd revalidate the page
+    await db
+      .insert(producers)
+      .values({ name, description, imageUrl, countryId });
+    revalidatePath("/");
+    //Return a success message
+    return {
+      message: "success",
+      errors: undefined,
+      fieldValues: {
+        name: "",
+        description: "",
+        imageUrl: "",
+        countryId: "",
+      },
+    };
+  } catch (error) {
+    const zodError = error as ZodError;
+    const errorMap = zodError.flatten().fieldErrors;
+    //Return an error object with the field values and errors.
+    return {
+      message: "error",
+      errors: {
+        name: errorMap["name"]?.[0] ?? "",
+        description: errorMap["description"]?.[0] ?? "",
+        imageUrl: errorMap["imageUrl"]?.[0] ?? "",
+        countryId: errorMap["countryId"]?.[0] ?? "",
+      },
+      fieldValues: {
+        name,
+        description,
+        imageUrl,
+        countryId,
+      },
+    };
+  }
+};

src/server/actions/addSubRegion.ts

@@ -0,0 +1,64 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+import { db } from "../db";
+import { subRegions } from "../db/schema";
+import { ZodError, z } from "zod";
+import { revalidatePath } from "next/cache";
+
+export const addSubRegion = async (prevstate: any, formData: FormData) => {
+  //assign formdaata to variables.
+  const name = (formData.get("name") as string).toLowerCase();
+  const regionId = formData.get("regionId") as string;
+
+  //check if region already exists in country
+  const exists = await db
+    .select({ name: subRegions.name })
+    .from(subRegions)
+    .where(eq(subRegions.regionId, regionId) && eq(subRegions.name, name));
+
+  //Define the schema for the form data
+  const schema = z.object({
+    regionId: z.string().min(1, "No region selected"),
+    name: z
+      .string()
+      .min(1, "Name is required")
+      .refine(() => !exists[0], {
+        message: `${name} already exists in selected region`,
+      }),
+  });
+  //Parse the form data using the schema for validation, and check if the name already exists
+  try {
+    schema.parse({
+      regionId,
+      name,
+    });
+    //If the name doesn't exist, add the country to the database abd revalidate the page
+    await db.insert(subRegions).values({ regionId, name });
+    revalidatePath("/");
+    //Return a success message
+    return {
+      message: "success",
+      errors: undefined,
+      fieldValues: {
+        name: "",
+        regionId: "",
+      },
+    };
+  } catch (error) {
+    const zodError = error as ZodError;
+    const errorMap = zodError.flatten().fieldErrors;
+    //Return an error object with the field values and errors.
+    return {
+      message: "error",
+      errors: {
+        name: errorMap["name"]?.[0] ?? "",
+        regionId: errorMap["regionId"]?.[0] ?? "",
+      },
+      fieldValues: {
+        name,
+        regionId,
+      },
+    };
+  }
+};

src/server/actions/deleteProducer.ts

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

src/server/actions/deleteRegion.ts

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

src/server/actions/deleteSubRegion.ts

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

src/server/actions/getAllCountries.ts

@@ -0,0 +1,6 @@
+import { db } from "../db";
+
+export default async function getAllCountries() {
+  const allCountries = await db.query.countries.findMany();
+  return allCountries;
+}

src/server/actions/getAllProducers.ts

@@ -0,0 +1,7 @@
+"use server";
+import { db } from "../db";
+
+export default async function getAllProducers() {
+  const allProducers = await db.query.producers.findMany();
+  return allProducers;
+}

src/server/actions/getAllRegions.ts

@@ -0,0 +1,6 @@
+import { db } from "../db";
+
+export default async function getAllRegions() {
+  const allRegions = await db.query.regions.findMany();
+  return allRegions;
+}

src/server/actions/getAllSubRegions.ts

@@ -0,0 +1,7 @@
+"use server";
+import { db } from "../db";
+
+export default async function getAllSubRegions() {
+  const allSubRegions = await db.query.subRegions.findMany();
+  return allSubRegions;
+}