Merge pull request #18 from neuefische/Feat/make-details-edit-form

Fix conflicting types in BookForm
neuefische · Aug 19, 2024 · 0e2fc35 · 0e2fc35
2 parents 593d687 + 4184fdb
commit 0e2fc35
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git 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
@@ -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
@@ -1,21 +1,20 @@
 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 = {
     deleteBook: (id: string) => void;
 }
 
 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
@@ -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
@@ -9,7 +9,7 @@ export type Book = {
     publicationDate: string
 }
 
-export type NewBook = {
+export type BookWithoutId = {
     title: string,
     author: string,
     description: string,