created delete function
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m25s

This commit is contained in:
ChrQR 2024-05-28 22:41:55 +02:00
parent dbdb5356e2
commit 0bab29653a
6 changed files with 23 additions and 10 deletions

View File

@ -1,3 +1,4 @@
import { deleteCountry } from "~/server/actions/deleteCountry";
import { db } from "~/server/db"; import { db } from "~/server/db";
export default async function AllCountries() { export default async function AllCountries() {
@ -6,7 +7,12 @@ export default async function AllCountries() {
<div className="pt-4"> <div className="pt-4">
<h1 className="text-2xl">All Countries:</h1> <h1 className="text-2xl">All Countries:</h1>
{countries.map((country) => ( {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> </div>
); );

View File

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

View File

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

View File

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

View File

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

View File

@ -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("/");
}