created delete function

src/app/_components/AllCountries.tsx

@@ -1,3 +1,4 @@
+import { deleteCountry } from "~/server/actions/deleteCountry";
 import { db } from "~/server/db";
 
 export default async function AllCountries() {
@@ -6,7 +7,12 @@ export default async function AllCountries() {
     <div className="pt-4">
       <h1 className="text-2xl">All Countries:</h1>
       {countries.map((country) => (
-        <p key={country.id}>{country.name}</p>
+        <div className="flex gap-1">
+          <p key={country.id}>{country.name}</p>
+          <form action={deleteCountry.bind(null, country.id)}>
+            <button>❌</button>
+          </form>
+        </div>
       ))}
     </div>
   );

src/app/_components/WineList.tsx

@@ -1,17 +1,17 @@
 "use server";
+import { deleteCountry } from "~/server/actions/deleteCountry";
 import { db } from "~/server/db";
-import WineName from "./WineName";
 
 export default async function WineList() {
   const wines = await db.query.wines.findMany();
   return (
     <div className="pt-4">
       <h1 className="text-2xl">All wines:</h1>
-      {wines && wines.length > 0 ? (
+      {wines ? (
         <>
           <ul>
             {wines.map((wine) => (
-              <WineName key={wine.id} name={wine.name} />
+              <li key={wine.id}>{wine.name}</li>
             ))}
           </ul>
         </>

src/app/_components/WineName.tsx

@@ -1,4 +0,0 @@
-export default function WineName(props: { name: string }) {
-  const { name } = props;
-  return <p>{name}</p>;
-}

src/app/_components/admin/CreateCountryForm.tsx

@@ -1,7 +1,8 @@
+"use client";
 import { Input } from "~/components/ui/input";
 import { addCountry } from "~/server/actions/createCountry";
 import SubmitButton from "../SubmitButton";
-import { useActionState, useRef } from "react";
+import { useRef } from "react";
 
 const initialState = {
   name: "" as string,

src/server/actions/createCountry.ts

@@ -9,7 +9,6 @@ type NewCountry = {
 };
 
 export const addCountry = async (formData: FormData) => {
-  "use server";
   const newCountry: NewCountry = {
     name: (formData.get("name") as string).toLowerCase(),
   };

src/server/actions/deleteCountry.ts

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