From 4184fdb7ff54c6447958036f93e73714ef38acb6 Mon Sep 17 00:00:00 2001
From: esgoet <toddesgo@gmail.com>
Date: Mon, 19 Aug 2024 11:18:33 +0200
Subject: [PATCH] Fix conflicting types in BookForm

---
 frontend/src/components/bookForm/BookForm.tsx     |  8 ++++----
 .../confirmationModal/ConfirmationModal.tsx       |  8 ++++----
 .../bookDetailsPage/BookDetailsPage.tsx           | 15 ++++++++-------
 .../components/addBookForm/AddBookForm.tsx        |  4 ++--
 frontend/src/types/types.ts                       |  2 +-
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/bookForm/BookForm.tsx b/frontend/src/components/bookForm/BookForm.tsx
index 22fdadf..6af9857 100644
--- a/frontend/src/components/bookForm/BookForm.tsx
+++ b/frontend/src/components/bookForm/BookForm.tsx
@@ -1,10 +1,10 @@
-import {Book, NewBook} from "../../types/types.ts";
-import {ChangeEvent, FormEvent} from "react";
+import {BookWithoutId} from "../../types/types.ts";
+import {ChangeEvent, Dispatch, FormEvent, SetStateAction} from "react";
 import "./BookForm.css";
 
 type BookFormProps = {
-    book: Book | NewBook,
-    setBook: (book: Book | NewBook) => void,
+    book: BookWithoutId,
+    setBook: Dispatch<SetStateAction<BookWithoutId>>,
     handleSubmit: (event: FormEvent<HTMLFormElement>) => void,
     action: string,
     editable: boolean
diff --git a/frontend/src/components/confirmationModal/ConfirmationModal.tsx b/frontend/src/components/confirmationModal/ConfirmationModal.tsx
index e7d1426..4441d3b 100644
--- a/frontend/src/components/confirmationModal/ConfirmationModal.tsx
+++ b/frontend/src/components/confirmationModal/ConfirmationModal.tsx
@@ -1,11 +1,11 @@
 import "./ConfirmationModal.css";
 import DeleteIcon from "../../assets/delete-svgrepo-com.svg";
-import {Book} from "../../types/types.ts";
+import {BookWithoutId} from "../../types/types.ts";
 
 type ModalProps = {
     handleClose: () => void,
-    handleDeleteConfirm: (id: string) => void,
-    bookToBeDeleted: Book
+    handleDeleteConfirm: () => void,
+    bookToBeDeleted: BookWithoutId
 }
 
 export default function ConfirmationModal ({handleClose, handleDeleteConfirm, bookToBeDeleted}: ModalProps) {
@@ -21,7 +21,7 @@ export default function ConfirmationModal ({handleClose, handleDeleteConfirm, bo
                 </div>
                 <div className={"modal-buttons"}>
                     <button className={"close-btn"} onClick={handleClose}>No, cancel</button>
-                    <button className={"delete-btn"} onClick={() => handleDeleteConfirm(bookToBeDeleted.id)}>Yes, delete!</button>
+                    <button className={"delete-btn"} onClick={handleDeleteConfirm}>Yes, delete!</button>
                 </div>
             </div>
         </div>
diff --git a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
index 9928185..c41ecf9 100644
--- a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
+++ b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
@@ -1,10 +1,10 @@
 import "./BookDetailsPage.css";
-import {Book} from "../../../types/types.ts";
 import {Link, useNavigate, useParams} from "react-router-dom";
 import axios from "axios";
 import {FormEvent, useEffect, useState} from "react";
 import BookForm from "../../../components/bookForm/BookForm.tsx";
 import ConfirmationModal from "../../../components/confirmationModal/ConfirmationModal.tsx";
+import {BookWithoutId} from "../../../types/types.ts";
 
 
 type DeleteProps = {
@@ -12,10 +12,9 @@ type DeleteProps = {
 }
 
 export default function BookDetailsPage({deleteBook}: Readonly<DeleteProps>) {
-    const [book, setBook] = useState<Book>({
+    const [book, setBook] = useState<BookWithoutId>({
         title: "",
         author: "",
-        id: "",
         description: "",
         genre: "",
         isbn: "",
@@ -47,10 +46,12 @@ export default function BookDetailsPage({deleteBook}: Readonly<DeleteProps>) {
         setShowDeleteModal(false)
     }
 
-    const handleDeleteConfirm = (id: string) => {
-        deleteBook(id);
-        navigate("/books");
-        setShowDeleteModal(false);
+    const handleDeleteConfirm = () => {
+        if (id) {
+            deleteBook(id);
+            navigate("/books");
+            setShowDeleteModal(false);
+        }
     }
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
diff --git a/frontend/src/pages/BookGalleryPage/components/addBookForm/AddBookForm.tsx b/frontend/src/pages/BookGalleryPage/components/addBookForm/AddBookForm.tsx
index 06f42b5..fd1b876 100644
--- a/frontend/src/pages/BookGalleryPage/components/addBookForm/AddBookForm.tsx
+++ b/frontend/src/pages/BookGalleryPage/components/addBookForm/AddBookForm.tsx
@@ -1,5 +1,5 @@
 import { FormEvent, useState} from "react";
-import {NewBook} from "../../../../types/types.ts";
+import {BookWithoutId} from "../../../../types/types.ts";
 import axios from "axios";
 import {useNavigate} from "react-router-dom";
 import "./AddBookForm.css";
@@ -10,7 +10,7 @@ type FetchProps = {
 }
 
 export default function AddBookForm({fetchBooks}: Readonly<FetchProps>) {
-    const [book, setBook] = useState<NewBook>({
+    const [book, setBook] = useState<BookWithoutId>({
         title: "",
         author: "",
         description: "",
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 3e21874..aa7cf7f 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -9,7 +9,7 @@ export type Book = {
     publicationDate: string
 }
 
-export type NewBook = {
+export type BookWithoutId = {
     title: string,
     author: string,
     description: string,