diff --git a/src/app/App.tsx b/src/app/App.tsx
index 2572a74..d814587 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,17 +1,15 @@
-"use client";
-import useFilterStore from "./store";
import WineList from "./_components/WineList";
-
-
+import FilterStatus from "./_components/FilterState";
+import CreateCountry from "./_components/admin/CreateCountry";
+import AllCountries from "./_components/AllCountries";
export default function App() {
- const filters = useFilterStore((state) => state.filters);
-
return (
-
Filter state:
- {JSON.stringify(filters)}
-
+
+
+
+
);
}
diff --git a/src/app/_components/AllCountries.tsx b/src/app/_components/AllCountries.tsx
new file mode 100644
index 0000000..9d726be
--- /dev/null
+++ b/src/app/_components/AllCountries.tsx
@@ -0,0 +1,7 @@
+export default async function AllCountries() {
+ return (
+
+
All Countries:
+
+ );
+}
diff --git a/src/app/_components/CreateWine.tsx b/src/app/_components/CreateWine.tsx
deleted file mode 100644
index 72a0a17..0000000
--- a/src/app/_components/CreateWine.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-import { useActionState, useEffect, useState } from "react";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "~/components/ui/select";
-import { addWine } from "~/server/actions/addWine";
-import { getProducers } from "~/server/actions/allProducers";
-
-async function fetchProducers() {
- const producers = await getProducers();
- return producers;
-}
-
-type ProducersData = {
- id: string;
- name: string;
- createdAt: Date;
- country: string;
- region: string;
- email: string;
-}[];
-
-export default function CreateWine() {
- const [formState, formAction] = useActionState(addWine, {
- message: "",
- errors: undefined,
- fieldValues: {
- name: "",
- producer: "",
- },
- });
- const [producers, setProducers] = useState([]);
- useEffect(() => {
- async function loadProducers() {
- const producersData = await fetchProducers();
- setProducers(producersData);
- }
- loadProducers();
- }, []);
- return (
-
-
- {formState.message === "success" ? (
- Wine succesfully submitted
- ) : (
- ""
- )}
-
- );
-}
diff --git a/src/app/_components/FilterState.tsx b/src/app/_components/FilterState.tsx
new file mode 100644
index 0000000..be5b720
--- /dev/null
+++ b/src/app/_components/FilterState.tsx
@@ -0,0 +1,12 @@
+"use client";
+import useFilterStore, { FilterState } from "../store";
+
+export default function FilterStatus() {
+ const filters = useFilterStore((state) => state.filters);
+ return (
+ <>
+ Filter state:
+ {JSON.stringify(filters, null, 2)}
+ >
+ );
+}
diff --git a/src/app/_components/FormCard.tsx b/src/app/_components/FormCard.tsx
deleted file mode 100644
index d2ccdeb..0000000
--- a/src/app/_components/FormCard.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "~/components/ui/card";
-import CreateWine from "./CreateWine";
-
-export default function FormCard() {
- return (
-
-
- Add wine
- All fields are required so get to it!
-
-
-
-
-
- Card Footer
-
-
- );
-}
diff --git a/src/app/_components/Wine.tsx b/src/app/_components/Wine.tsx
deleted file mode 100644
index 2c3b3bc..0000000
--- a/src/app/_components/Wine.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Wine(wine) {
- return {wine.name};
-}
diff --git a/src/app/_components/WineList.tsx b/src/app/_components/WineList.tsx
index 648ae59..a0f41be 100644
--- a/src/app/_components/WineList.tsx
+++ b/src/app/_components/WineList.tsx
@@ -1,17 +1,23 @@
"use server";
import { db } from "~/server/db";
-import Wine from "./Wine";
+import WineName from "./WineName";
+const wines = await db.query.wines.findMany();
export default async function WineList() {
- const wines = await db.query.wines.findMany();
return (
- <>
- All wines:
-
- {wines.map((wine) => (
-
- ))}
-
- >
+
+
All wines:
+ {wines && wines.length > 0 ? (
+ <>
+
+ {wines.map((wine) => (
+
+ ))}
+
+ >
+ ) : (
+
There are no wines in the db.
+ )}
+
);
}
diff --git a/src/app/_components/WineName.tsx b/src/app/_components/WineName.tsx
new file mode 100644
index 0000000..44a0043
--- /dev/null
+++ b/src/app/_components/WineName.tsx
@@ -0,0 +1,4 @@
+export default function WineName(props: { name: string }) {
+ const { name } = props;
+ return {name}
;
+}
diff --git a/src/app/_components/admin/CreateCountry.tsx b/src/app/_components/admin/CreateCountry.tsx
new file mode 100644
index 0000000..0c10572
--- /dev/null
+++ b/src/app/_components/admin/CreateCountry.tsx
@@ -0,0 +1,10 @@
+import CreateCountryForm from "./CreateCountryForm";
+
+export default function CreateCountry() {
+ return (
+ <>
+ Fill the form to create a new country
+
+ >
+ );
+}
diff --git a/src/app/_components/admin/CreateCountryForm.tsx b/src/app/_components/admin/CreateCountryForm.tsx
new file mode 100644
index 0000000..ff8838c
--- /dev/null
+++ b/src/app/_components/admin/CreateCountryForm.tsx
@@ -0,0 +1,26 @@
+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";
+
+type NewCountry = {
+ name: 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("/");
+ };
+ return (
+
+ );
+}
diff --git a/src/app/store.ts b/src/app/store.ts
index 13d040d..87cf600 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -2,7 +2,7 @@ import { create } from "zustand";
import { produce } from "immer";
import { persist, createJSONStorage } from "zustand/middleware";
-interface FilterState {
+export interface FilterState {
filters: Filters;
}
@@ -82,7 +82,7 @@ const useFilterStore = create()(
setSearchQuery: (searchQuery: string) =>
set(
produce((state: FilterState) => {
- state.filters.searchQuery = searchQuery;
+ state.filters.searchQuery = searchQuery;
}),
),
addRegion: (region) =>