diff --git a/src/app/App.tsx b/src/app/App.tsx
index bf28490..251a9b5 100644
--- a/src/app/App.tsx
+++ b/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() {
+
+
+
+
);
}
diff --git a/src/app/_components/AllCountries.tsx b/src/app/_components/AllCountries.tsx
index 5fdbd62..e7744a0 100644
--- a/src/app/_components/AllCountries.tsx
+++ b/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 (
All Countries:
diff --git a/src/app/_components/AllRegions.tsx b/src/app/_components/AllRegions.tsx
index 4eb73b8..c3f2162 100644
--- a/src/app/_components/AllRegions.tsx
+++ b/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 (
All Regions:
- {allRegions[0] ? (
- <>
-
- {allRegions.map((region) => (
- -
- {region.name} -{" "}
- {
- allCountries.find(
- (country) => country.id === region.countryId,
- )?.name
- }
-
- ))}
-
- >
- ) : (
-
There are no regions in the db.
- )}
+ {allRegions.map((region) => (
+
+ ))}
);
}
diff --git a/src/app/_components/AllSubRegions.tsx b/src/app/_components/AllSubRegions.tsx
new file mode 100644
index 0000000..ccdce27
--- /dev/null
+++ b/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 (
+
+
All Sub Regions:
+ {allSubRegions.map((subRegion) => (
+
+ ))}
+
+ );
+}
diff --git a/src/app/_components/admin/CreateCountry.tsx b/src/app/_components/admin/CreateCountry.tsx
index 0c10572..6223e42 100644
--- a/src/app/_components/admin/CreateCountry.tsx
+++ b/src/app/_components/admin/CreateCountry.tsx
@@ -2,9 +2,9 @@ import CreateCountryForm from "./CreateCountryForm";
export default function CreateCountry() {
return (
- <>
+
Fill the form to create a new country
- >
+
);
}
diff --git a/src/app/_components/admin/CreateProducer.tsx b/src/app/_components/admin/CreateProducer.tsx
new file mode 100644
index 0000000..067e7db
--- /dev/null
+++ b/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 (
+
+
Fill the form to create a new producer
+
+
+ );
+}
diff --git a/src/app/_components/admin/CreateProducerForm.tsx b/src/app/_components/admin/CreateProducerForm.tsx
new file mode 100644
index 0000000..abe5c4a
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/src/app/_components/admin/CreateRegion.tsx b/src/app/_components/admin/CreateRegion.tsx
index 56b6f3f..d700be8 100644
--- a/src/app/_components/admin/CreateRegion.tsx
+++ b/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 (
- <>
+
Fill the form to create a new region
- >
+
);
}
diff --git a/src/app/_components/admin/CreateSubRegion.tsx b/src/app/_components/admin/CreateSubRegion.tsx
new file mode 100644
index 0000000..75f27bb
--- /dev/null
+++ b/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 (
+
+
+ Fill the form to create a new Sub Region
+
+
+
+ );
+}
diff --git a/src/app/_components/admin/CreateSubRegionForm.tsx b/src/app/_components/admin/CreateSubRegionForm.tsx
new file mode 100644
index 0000000..54b9e0f
--- /dev/null
+++ b/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
(
+ undefined,
+ );
+ const [selectCountryRegions, setSelectCountryRegions] = useState(
+ [],
+ );
+ 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(null);
+ useEffect(() => {
+ if (formState.message === "success") {
+ formRef.current?.reset();
+ }
+ }, [formState.message]);
+ return (
+
+ {/* country selector */}
+
+
+
+ );
+}
diff --git a/src/app/_components/allProducers.tsx b/src/app/_components/allProducers.tsx
new file mode 100644
index 0000000..5dbfa10
--- /dev/null
+++ b/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 (
+
+
All Producers:
+ {allProducers.map((producer) => (
+
+
{producer.name}
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..4fdcd1b
--- /dev/null
+++ b/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 {}
+
+const Textarea = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/server/actions/addProducer.ts b/src/server/actions/addProducer.ts
new file mode 100644
index 0000000..726e30d
--- /dev/null
+++ b/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,
+ },
+ };
+ }
+};
diff --git a/src/server/actions/addSubRegion.ts b/src/server/actions/addSubRegion.ts
new file mode 100644
index 0000000..5c16295
--- /dev/null
+++ b/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,
+ },
+ };
+ }
+};
diff --git a/src/server/actions/deleteProducer.ts b/src/server/actions/deleteProducer.ts
new file mode 100644
index 0000000..68ecc12
--- /dev/null
+++ b/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("/");
+}
diff --git a/src/server/actions/deleteRegion.ts b/src/server/actions/deleteRegion.ts
new file mode 100644
index 0000000..439b095
--- /dev/null
+++ b/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("/");
+}
diff --git a/src/server/actions/deleteSubRegion.ts b/src/server/actions/deleteSubRegion.ts
new file mode 100644
index 0000000..9c687b4
--- /dev/null
+++ b/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("/");
+}
diff --git a/src/server/actions/getAllCountries.ts b/src/server/actions/getAllCountries.ts
new file mode 100644
index 0000000..43e7763
--- /dev/null
+++ b/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;
+}
diff --git a/src/server/actions/getAllProducers.ts b/src/server/actions/getAllProducers.ts
new file mode 100644
index 0000000..d367ce8
--- /dev/null
+++ b/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;
+}
diff --git a/src/server/actions/getAllRegions.ts b/src/server/actions/getAllRegions.ts
new file mode 100644
index 0000000..a478386
--- /dev/null
+++ b/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;
+}
diff --git a/src/server/actions/getAllSubRegions.ts b/src/server/actions/getAllSubRegions.ts
new file mode 100644
index 0000000..d1aed18
--- /dev/null
+++ b/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;
+}