add "Delete" button to the Details page.

neuefische · Aug 14, 2024 · 4219b65 · 4219b65
1 parent 61ec448
commit 4219b65
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
@@ -19,13 +19,19 @@ export default function BookDetailsPage() {
         fetchBook();
     },[])
 
+    const deleteBook = (id: string) => {
+        axios.delete("/api/books/" + id)
+    }
+
+
     return (
         <>
             <article>
                 <h3>Title: {book.title}</h3>
                 <p>Author: {book.author}</p>
                 <p>More details...</p>
                 <Link to={"/"}>Back</Link>
+                <button onClick={() => {deleteBook(book.id)}}>Delete</button>
             </article>
         </>
     )

diff --git a/frontend/src/pages/BookGalleryPage/components/bookCard/BookCard.tsx b/frontend/src/pages/BookGalleryPage/components/bookCard/BookCard.tsx
@@ -2,18 +2,11 @@ import "./BookCard.css"
 
 import {Book} from "../../../../types/types.ts";
 import {Link} from "react-router-dom";
-import {Book} from "../../types/types.ts";
-import axios from "axios";
 
 type BookCardProps = {
     book: Book
 }
 
-const deleteBook = (id: string) => {
-    axios.delete("api/books/" + id)
-        .catch((error) => alert(error.message))
-}
-
 export default function BookCard({book}: BookCardProps) {
 
     return (
@@ -22,7 +15,6 @@ export default function BookCard({book}: BookCardProps) {
             <p>Id: {book.id}</p>
             <p>Title: {book.title}</p>
             <p>Author:{book.author}</p>
-            <button onClick={() => deleteBook(book.id)}>Delete</button>
             <Link to={`/books/${book.id}`}>Details</Link>
         </li>