created delete function
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m25s
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m25s
This commit is contained in:
parent
dbdb5356e2
commit
0bab29653a
@ -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) => (
|
||||||
|
<div className="flex gap-1">
|
||||||
<p key={country.id}>{country.name}</p>
|
<p key={country.id}>{country.name}</p>
|
||||||
|
<form action={deleteCountry.bind(null, country.id)}>
|
||||||
|
<button>❌</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
@ -1,4 +0,0 @@
|
|||||||
export default function WineName(props: { name: string }) {
|
|
||||||
const { name } = props;
|
|
||||||
return <p>{name}</p>;
|
|
||||||
}
|
|
@ -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,
|
||||||
|
@ -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(),
|
||||||
};
|
};
|
||||||
|
11
src/server/actions/deleteCountry.ts
Normal file
11
src/server/actions/deleteCountry.ts
Normal 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("/");
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user