diff --git a/src/app/_components/AllRegions.tsx b/src/app/_components/AllRegions.tsx
index 9c3f008..4eb73b8 100644
--- a/src/app/_components/AllRegions.tsx
+++ b/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 (
All Regions:
@@ -9,7 +10,14 @@ export default async function AllRegions() {
<>
{allRegions.map((region) => (
- - {region.name}
+ -
+ {region.name} -{" "}
+ {
+ allCountries.find(
+ (country) => country.id === region.countryId,
+ )?.name
+ }
+
))}
>
diff --git a/src/app/_components/admin/CreateCountryForm.tsx b/src/app/_components/admin/CreateCountryForm.tsx
index bd79a74..45ab5bf 100644
--- a/src/app/_components/admin/CreateCountryForm.tsx
+++ b/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
(null);
- const handleSubmit = async (formData: FormData) => {
- ref.current?.reset();
- await addCountry(formData);
- };
+ const [state, formAction] = useFormState(addCountry, null);
+
return (
-
);
}
diff --git a/src/app/_components/admin/CreateRegionForm.tsx b/src/app/_components/admin/CreateRegionForm.tsx
index b7f6a89..2c3ba9b 100644
--- a/src/app/_components/admin/CreateRegionForm.tsx
+++ b/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(null);
return (
-