From 824b10855ce452d561c321110965727684b64d9c Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Wed, 14 Aug 2024 15:31:17 +0200
Subject: [PATCH 01/12] add put endpoint to backend

---
 .../backend/controllers/BookController.java       | 15 ++++++++++++---
 .../com/github/esgoet/backend/models/Book.java    |  7 ++++++-
 .../backend/repositories/BookRepository.java      | 11 +++++++++++
 .../esgoet/backend/services/BookService.java      |  4 ++++
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java b/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
index f55eded..93fd62a 100644
--- a/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
+++ b/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
@@ -3,9 +3,9 @@
 import com.github.esgoet.backend.models.Book;
 import com.github.esgoet.backend.services.BookService;
 import lombok.RequiredArgsConstructor;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.server.ResponseStatusException;
 
 import java.util.List;
 
@@ -21,4 +21,13 @@ public class BookController {
     public List<Book> getBooks() {
         return bookService.getAllBooks();
     }
+
+    @PutMapping(path = {"{id}/update", "{id}"})
+    Book update(@PathVariable String id, @RequestBody Book book) {
+        if (!book.id().equals(id)) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "The id in the url does not match the request body's id");
+        }
+        return bookService.update(book);
+    }
+
 }
diff --git a/backend/src/main/java/com/github/esgoet/backend/models/Book.java b/backend/src/main/java/com/github/esgoet/backend/models/Book.java
index ff5d770..553f117 100644
--- a/backend/src/main/java/com/github/esgoet/backend/models/Book.java
+++ b/backend/src/main/java/com/github/esgoet/backend/models/Book.java
@@ -8,5 +8,10 @@
 public record Book(
         String id,
         String author,
-        String title) {
+        String title,
+        String genre,
+        String isbn,
+        String cover,
+        String description
+) {
 }
diff --git a/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java b/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
index f8eb941..401495c 100644
--- a/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
+++ b/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
@@ -4,6 +4,17 @@
 import org.springframework.data.mongodb.repository.MongoRepository;
 import org.springframework.stereotype.Repository;
 
+import java.util.HashMap;
+import java.util.Map;
+
+
 @Repository
 public interface BookRepository extends MongoRepository<Book, String> {
+
+    final Map<String, Book> books = new HashMap<>();
+
+    public default Book update(Book book) {
+        books.put(book.id(), book);
+        return book;
+    }
 }
diff --git a/backend/src/main/java/com/github/esgoet/backend/services/BookService.java b/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
index c42aaa4..6fe7fd5 100644
--- a/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
+++ b/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
@@ -16,4 +16,8 @@ public class BookService {
     public List<Book> getAllBooks() {
         return bookRepository.findAll();
     }
+
+    public Book update(Book book) {
+        return bookRepository.update(book);
+    }
 }

From 13a3fbf5cbcd7e05d8416e2e0d68b9e478864b94 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Wed, 14 Aug 2024 16:45:35 +0200
Subject: [PATCH 02/12] add editForm component

---
 frontend/src/App.tsx                          | 16 ++---
 frontend/src/components/editForm/EditForm.css |  5 ++
 frontend/src/components/editForm/EditForm.tsx | 58 +++++++++++++++++++
 3 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/editForm/EditForm.css
 create mode 100644 frontend/src/components/editForm/EditForm.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4c161ec..b6ab4b0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,11 +4,12 @@ import axios from "axios"
 import {Book} from "./types/types.ts";
 import {useEffect, useState} from "react";
 import BookGallery from "./components/bookGallery/BookGallery.tsx";
+import EditForm from "./components/editForm/EditForm.tsx";
 
 
 function App() {
 
-    const[data, setData] = useState<Book[]>([])
+    const [data, setData] = useState<Book[]>([])
 
     const fetchBooks = () => {
         axios.get("/api/books")
@@ -24,14 +25,13 @@ function App() {
         fetchBooks()
     }, []);
 
-    console.log(data)
-
     return (
-    <>
-        <h1>LibraryApp</h1>
-        <h3>Cool motto ( ͡° ͜ʖ ͡°)</h3>
-        <BookGallery data={data}/>
-    </>
+        <>
+            <h1>LibraryApp</h1>
+            <h3>Cool motto ( ͡° ͜ʖ ͡°)</h3>
+            <BookGallery data={data}/>
+            <EditForm/>
+        </>
     )
 }
 
diff --git a/frontend/src/components/editForm/EditForm.css b/frontend/src/components/editForm/EditForm.css
new file mode 100644
index 0000000..6328b39
--- /dev/null
+++ b/frontend/src/components/editForm/EditForm.css
@@ -0,0 +1,5 @@
+form {
+    display: flex;
+    flex-direction: column;
+}
+
diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
new file mode 100644
index 0000000..13273ff
--- /dev/null
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -0,0 +1,58 @@
+import './EditForm.css'
+import {ChangeEvent, FormEvent, useState} from "react";
+import axios from "axios";
+
+export default function EditForm({data}) {
+
+    type BookData = {
+        title?: string,
+        author?: string,
+        description?: string,
+        genre?: string,
+        isbn?: string,
+        cover?: string
+
+    }
+
+    const [formData, setFormData] = useState<BookData>()
+
+    function handleChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+        const {name, value} = event.target;
+        setFormData({
+            ...formData, [name]: value
+        });
+    }
+
+    async function onSubmit(event: FormEvent<HTMLFormElement>) {
+        event.preventDefault();
+        try {
+            const response = await axios.put(`/api/books/${data.id}/update`, formData);
+            console.log('Update successful:', response.data);
+        } catch (error) {
+            console.error('Update failed:', error);
+        }
+        console.log(formData)
+    }
+
+    function onCancel() {
+        console.log("cancel")
+    }
+
+    return (
+
+        <form onSubmit={onSubmit}>
+            <label>Title: <input placeholder={"Title"} type="text" name="title" onChange={handleChange}/></label>
+            <label>Author: <input placeholder={"Author"} type="text" name="author" onChange={handleChange}/></label>
+            <label>Description: </label>
+            <textarea rows={5} cols={30} placeholder={"Description"} name="description" onChange={handleChange}/>
+            <label>Genre: <input placeholder={"Genre"} type="text" name="genre" onChange={handleChange}/></label>
+            <label>ISBN: <input placeholder={"ISBN"} type="text" name="isbn" onChange={handleChange}/></label>
+            <label>Cover: <input placeholder={"Cover"} type="text" name="cover" onChange={handleChange}/></label>
+            <div>
+                <button type={"submit"}>Submit</button>
+                <button onClick={onCancel} type={"button"}>Cancel</button>
+            </div>
+        </form>
+
+    )
+}
\ No newline at end of file

From ff9cd6c753cecebe40173fd5777ce8e00967e129 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Wed, 14 Aug 2024 17:03:56 +0200
Subject: [PATCH 03/12] fixed type error

---
 frontend/src/components/editForm/EditForm.tsx | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
index 13273ff..7a22ba5 100644
--- a/frontend/src/components/editForm/EditForm.tsx
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -2,19 +2,22 @@ import './EditForm.css'
 import {ChangeEvent, FormEvent, useState} from "react";
 import axios from "axios";
 
-export default function EditForm({data}) {
 
-    type BookData = {
-        title?: string,
-        author?: string,
-        description?: string,
-        genre?: string,
-        isbn?: string,
-        cover?: string
+type FormData = {
+    title?: string,
+    author?: string,
+    description?: string,
+    genre?: string,
+    isbn?: string,
+    cover?: string,
+    id?: string
+
+}
+
+export default function EditForm() {
 
-    }
 
-    const [formData, setFormData] = useState<BookData>()
+    const [formData, setFormData] = useState<FormData>()
 
     function handleChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
         const {name, value} = event.target;
@@ -26,7 +29,7 @@ export default function EditForm({data}) {
     async function onSubmit(event: FormEvent<HTMLFormElement>) {
         event.preventDefault();
         try {
-            const response = await axios.put(`/api/books/${data.id}/update`, formData);
+            const response = await axios.put(`/api/books/${book.id}/update`, formData);
             console.log('Update successful:', response.data);
         } catch (error) {
             console.error('Update failed:', error);

From 6840123ec6ecc534689aaf59768330161c4cbd5d Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Thu, 15 Aug 2024 10:37:45 +0200
Subject: [PATCH 04/12] add styling to edit form

---
 frontend/src/components/editForm/EditForm.css | 3 +++
 frontend/src/components/editForm/EditForm.tsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/frontend/src/components/editForm/EditForm.css b/frontend/src/components/editForm/EditForm.css
index 6328b39..50336de 100644
--- a/frontend/src/components/editForm/EditForm.css
+++ b/frontend/src/components/editForm/EditForm.css
@@ -1,5 +1,8 @@
 form {
     display: flex;
     flex-direction: column;
+    background-color: lightslategray;
 }
 
+
+
diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
index 7a22ba5..b6df40e 100644
--- a/frontend/src/components/editForm/EditForm.tsx
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -26,6 +26,7 @@ export default function EditForm() {
         });
     }
 
+// wenn ein feld nicht bearbeitet wird dasnn die alten daten uebernehmen nicht ueberschreiben mit leerem string
     async function onSubmit(event: FormEvent<HTMLFormElement>) {
         event.preventDefault();
         try {

From 806027bc26925990cb18ac9af0b0c02b4d406c7a Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Thu, 15 Aug 2024 12:23:27 +0200
Subject: [PATCH 05/12]  add editForm component to details page

---
 frontend/src/App.tsx                          | 24 ++++++-------
 frontend/src/components/editForm/EditForm.tsx | 25 ++++++-------
 .../bookDetailsPage/BookDetailsPage.tsx       | 35 +++++++++++++++----
 frontend/src/types/types.ts                   |  4 +++
 4 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bd9c178..d5f6048 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,12 +6,11 @@ import {useEffect, useState} from "react";
 import {Link, Route, Routes} from "react-router-dom";
 import BookDetailsPage from "./pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx";
 import BookGalleryPage from "./pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.tsx";
-import EditForm from "./components/editForm/EditForm.tsx";
 
 
 function App() {
 
-    const[data, setData] = useState<Book[]>([])
+    const [data, setData] = useState<Book[]>([])
 
     const fetchBooks = () => {
         axios.get("/api/books")
@@ -28,19 +27,16 @@ function App() {
     }, []);
 
 
-
     return (
-    <>
-        <h1>LibraryApp</h1>
-        <h3>Cool motto ( ͡° ͜ʖ ͡°)</h3>
-        <Link to={"/books"}>All Books</Link>
-        <Routes>
-            <Route path={"/books"} element={<BookGalleryPage data={data}/>}/>
-            <Route path={"/books/:id"} element={<BookDetailsPage/>}/>
-        </Routes>
-        <EditForm/>
-
-    </>
+        <>
+            <h1>LibraryApp</h1>
+            <h3>Cool motto ( ͡° ͜ʖ ͡°)</h3>
+            <Link to={"/books"}>All Books</Link>
+            <Routes>
+                <Route path={"/books"} element={<BookGalleryPage data={data}/>}/>
+                <Route path={"/books/:id"} element={<BookDetailsPage/>}/>
+            </Routes>
+        </>
     )
 }
 
diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
index b6df40e..abb04ac 100644
--- a/frontend/src/components/editForm/EditForm.tsx
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -2,7 +2,6 @@ import './EditForm.css'
 import {ChangeEvent, FormEvent, useState} from "react";
 import axios from "axios";
 
-
 type FormData = {
     title?: string,
     author?: string,
@@ -11,11 +10,9 @@ type FormData = {
     isbn?: string,
     cover?: string,
     id?: string
-
 }
 
-export default function EditForm() {
-
+export default function EditForm({id, title, author, description, genre, isbn, cover}: FormData) {
 
     const [formData, setFormData] = useState<FormData>()
 
@@ -26,11 +23,10 @@ export default function EditForm() {
         });
     }
 
-// wenn ein feld nicht bearbeitet wird dasnn die alten daten uebernehmen nicht ueberschreiben mit leerem string
     async function onSubmit(event: FormEvent<HTMLFormElement>) {
         event.preventDefault();
         try {
-            const response = await axios.put(`/api/books/${book.id}/update`, formData);
+            const response = await axios.put(`/api/books/${id}/update`, formData);
             console.log('Update successful:', response.data);
         } catch (error) {
             console.error('Update failed:', error);
@@ -43,15 +39,14 @@ export default function EditForm() {
     }
 
     return (
-
         <form onSubmit={onSubmit}>
-            <label>Title: <input placeholder={"Title"} type="text" name="title" onChange={handleChange}/></label>
-            <label>Author: <input placeholder={"Author"} type="text" name="author" onChange={handleChange}/></label>
+            <label>Title: <input placeholder={`${title}`} type="text" name="title" onChange={handleChange}/></label>
+            <label>Author: <input placeholder={`${author}`} type="text" name="author" onChange={handleChange}/></label>
             <label>Description: </label>
-            <textarea rows={5} cols={30} placeholder={"Description"} name="description" onChange={handleChange}/>
-            <label>Genre: <input placeholder={"Genre"} type="text" name="genre" onChange={handleChange}/></label>
-            <label>ISBN: <input placeholder={"ISBN"} type="text" name="isbn" onChange={handleChange}/></label>
-            <label>Cover: <input placeholder={"Cover"} type="text" name="cover" onChange={handleChange}/></label>
+            <textarea rows={5} cols={30} placeholder={`${description}`} name="description" onChange={handleChange}/>
+            <label>Genre: <input placeholder={`${genre}`} type="text" name="genre" onChange={handleChange}/></label>
+            <label>ISBN: <input placeholder={`${isbn}`} type="text" name="isbn" onChange={handleChange}/></label>
+            <label>Cover: <input placeholder={`${cover}`} type="text" name="cover" onChange={handleChange}/></label>
             <div>
                 <button type={"submit"}>Submit</button>
                 <button onClick={onCancel} type={"button"}>Cancel</button>
@@ -59,4 +54,6 @@ export default function EditForm() {
         </form>
 
     )
-}
\ No newline at end of file
+}
+
+// wenn ein feld nicht bearbeitet wird dasnn die alten daten uebernehmen nicht ueberschreiben mit leerem string
\ No newline at end of file
diff --git a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
index 314215e..1a2769c 100644
--- a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
+++ b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
@@ -3,30 +3,51 @@ import {Book} from "../../../types/types.ts";
 import {Link, useParams} from "react-router-dom";
 import axios from "axios";
 import {useEffect, useState} from "react";
+import EditForm from "../../../components/editForm/EditForm.tsx";
 
 export default function BookDetailsPage() {
-    const [book, setBook] = useState<Book>({title: "", author: "", id: ""})
+    const [book, setBook] = useState<Book>({
+        title: "",
+        author: "",
+        id: "",
+        description: "",
+        genre: "",
+        isbn: "",
+        cover: ""
+    })
     const params = useParams();
     const id: string | undefined = params.id;
 
     const fetchBook = () => {
         axios.get(`/api/books/${id}`)
-            .then((response)=> setBook(response.data))
+            .then((response) => setBook(response.data))
             .catch((error) => console.log(error.response.data))
     }
 
-    useEffect(()=>{
+    useEffect(() => {
         fetchBook();
-    },[])
-
+    }, [])
+    console.log(book)
     return (
         <>
             <article>
                 <h3>Title: {book.title}</h3>
                 <p>Author: {book.author}</p>
-                <p>More details...</p>
+                <p>Description: {book.description}</p>
+                <p>Genre: {book.genre} </p>
+                <p>ISBN: {book.isbn}</p>
+                <img width={200} alt={`cover form book ${book.title}`} src={book.cover}/>
                 <Link to={"/"}>Back</Link>
             </article>
+            <EditForm
+                id={book.id}
+                title={book.title}
+                author={book.author}
+                description={book.description}
+                genre={book.genre}
+                isbn={book.isbn}
+                cover={book.cover}
+            />
         </>
     )
-    }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 6f94988..940b409 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -2,4 +2,8 @@ export type Book = {
     id: string,
     author: string,
     title: string
+    description: string,
+    genre: string,
+    isbn: string,
+    cover: string
 }

From c6f07921af8145ed088712ac681b5369e811b3d0 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Thu, 15 Aug 2024 14:39:25 +0200
Subject: [PATCH 06/12] add useEffect to finalize update function

---
 frontend/src/components/editForm/EditForm.tsx | 41 ++++++++++---------
 .../bookDetailsPage/BookDetailsPage.tsx       | 11 +----
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
index abb04ac..a254130 100644
--- a/frontend/src/components/editForm/EditForm.tsx
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -1,20 +1,19 @@
 import './EditForm.css'
-import {ChangeEvent, FormEvent, useState} from "react";
+import {ChangeEvent, FormEvent, useEffect, useState} from "react";
 import axios from "axios";
+import {Book} from "../../types/types.ts";
 
 type FormData = {
-    title?: string,
-    author?: string,
-    description?: string,
-    genre?: string,
-    isbn?: string,
-    cover?: string,
-    id?: string
+    book: Book
 }
 
-export default function EditForm({id, title, author, description, genre, isbn, cover}: FormData) {
+export default function EditForm({book}: FormData) {
 
-    const [formData, setFormData] = useState<FormData>()
+    const [formData, setFormData] = useState<Book>(book);
+
+    useEffect(() => {
+        setFormData(book);
+    }, [book]);
 
     function handleChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
         const {name, value} = event.target;
@@ -26,12 +25,11 @@ export default function EditForm({id, title, author, description, genre, isbn, c
     async function onSubmit(event: FormEvent<HTMLFormElement>) {
         event.preventDefault();
         try {
-            const response = await axios.put(`/api/books/${id}/update`, formData);
+            const response = await axios.put(`/api/books/${book.id}/update`, formData);
             console.log('Update successful:', response.data);
         } catch (error) {
             console.error('Update failed:', error);
         }
-        console.log(formData)
     }
 
     function onCancel() {
@@ -40,13 +38,19 @@ export default function EditForm({id, title, author, description, genre, isbn, c
 
     return (
         <form onSubmit={onSubmit}>
-            <label>Title: <input placeholder={`${title}`} type="text" name="title" onChange={handleChange}/></label>
-            <label>Author: <input placeholder={`${author}`} type="text" name="author" onChange={handleChange}/></label>
+            <label>Title: <input placeholder={book.title} type="text" name="title" value={formData.title}
+                                 onChange={handleChange}/></label>
+            <label>Author: <input placeholder={book.author} type="text" name="author" value={formData.author}
+                                  onChange={handleChange}/></label>
             <label>Description: </label>
-            <textarea rows={5} cols={30} placeholder={`${description}`} name="description" onChange={handleChange}/>
-            <label>Genre: <input placeholder={`${genre}`} type="text" name="genre" onChange={handleChange}/></label>
-            <label>ISBN: <input placeholder={`${isbn}`} type="text" name="isbn" onChange={handleChange}/></label>
-            <label>Cover: <input placeholder={`${cover}`} type="text" name="cover" onChange={handleChange}/></label>
+            <textarea rows={5} cols={30} placeholder={book.description} name="description" value={formData.description}
+                      onChange={handleChange}/>
+            <label>Genre: <input placeholder={book.genre} type="text" name="genre" value={formData.genre}
+                                 onChange={handleChange}/></label>
+            <label>ISBN: <input placeholder={book.isbn} type="text" name="isbn" value={formData.isbn}
+                                onChange={handleChange}/></label>
+            <label>Cover: <input placeholder={book.cover} type="text" name="cover" value={formData.cover}
+                                 onChange={handleChange}/></label>
             <div>
                 <button type={"submit"}>Submit</button>
                 <button onClick={onCancel} type={"button"}>Cancel</button>
@@ -56,4 +60,3 @@ export default function EditForm({id, title, author, description, genre, isbn, c
     )
 }
 
-// wenn ein feld nicht bearbeitet wird dasnn die alten daten uebernehmen nicht ueberschreiben mit leerem string
\ No newline at end of file
diff --git a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
index 1a2769c..91faee9 100644
--- a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
+++ b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
@@ -27,7 +27,6 @@ export default function BookDetailsPage() {
     useEffect(() => {
         fetchBook();
     }, [])
-    console.log(book)
     return (
         <>
             <article>
@@ -39,15 +38,7 @@ export default function BookDetailsPage() {
                 <img width={200} alt={`cover form book ${book.title}`} src={book.cover}/>
                 <Link to={"/"}>Back</Link>
             </article>
-            <EditForm
-                id={book.id}
-                title={book.title}
-                author={book.author}
-                description={book.description}
-                genre={book.genre}
-                isbn={book.isbn}
-                cover={book.cover}
-            />
+            <EditForm book={book}/>
         </>
     )
 }
\ No newline at end of file

From a466315c4ce4cbf4fc16b0f5396eae4c5cc28735 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Thu, 15 Aug 2024 14:40:16 +0200
Subject: [PATCH 07/12] refactor update endpoint

---
 .../backend/controllers/BookController.java      | 13 ++++++-------
 .../backend/repositories/BookRepository.java     | 10 ----------
 .../esgoet/backend/services/BookService.java     | 16 ++++++++++++----
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java b/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
index 854c9ba..2694c1a 100644
--- a/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
+++ b/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
@@ -12,7 +12,6 @@
 
 import org.springframework.web.bind.annotation.PathVariable;
 
-
 import java.util.List;
 
 @RestController
@@ -22,23 +21,23 @@ public class BookController {
 
     private final BookService bookService;
 
-
     @GetMapping
     public List<Book> getBooks() {
         return bookService.getAllBooks();
     }
 
+    @GetMapping("/{id}")
+    public Book getBook(@PathVariable String id) {
+        return bookService.getBook(id);
+    }
+
     @PutMapping(path = {"{id}/update", "{id}"})
     Book update(@PathVariable String id, @RequestBody Book book) {
         if (!book.id().equals(id)) {
             throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "The id in the url does not match the request body's id");
         }
-        return bookService.update(book);
+        return bookService.updateBook(book, id);
     }
 
 
-    @GetMapping("/{id}")
-    public Book getBook(@PathVariable String id) {
-        return bookService.getBook(id);
-    }
 }
diff --git a/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java b/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
index 401495c..fe24d1c 100644
--- a/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
+++ b/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
@@ -4,17 +4,7 @@
 import org.springframework.data.mongodb.repository.MongoRepository;
 import org.springframework.stereotype.Repository;
 
-import java.util.HashMap;
-import java.util.Map;
-
-
 @Repository
 public interface BookRepository extends MongoRepository<Book, String> {
 
-    final Map<String, Book> books = new HashMap<>();
-
-    public default Book update(Book book) {
-        books.put(book.id(), book);
-        return book;
-    }
 }
diff --git a/backend/src/main/java/com/github/esgoet/backend/services/BookService.java b/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
index 94fad73..b8ca216 100644
--- a/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
+++ b/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
@@ -5,6 +5,7 @@
 import com.github.esgoet.backend.repositories.BookRepository;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
+
 import java.util.List;
 
 
@@ -18,12 +19,19 @@ public List<Book> getAllBooks() {
         return bookRepository.findAll();
     }
 
-    public Book update(Book book) {
-        return bookRepository.update(book);
-    }
-
     public Book getBook(String id) {
         return bookRepository.findById(id)
                 .orElseThrow(() -> new BookNotFoundException("No book found with id: " + id));
     }
+
+    public Book updateBook(Book updateBook, String id) {
+        Book book = bookRepository.findById(id).orElseThrow(() -> new BookNotFoundException("No book found with id: " + id))
+                .withAuthor(updateBook.author())
+                .withCover(updateBook.cover())
+                .withDescription(updateBook.description())
+                .withGenre(updateBook.genre())
+                .withTitle(updateBook.title())
+                .withIsbn(updateBook.isbn());
+        return bookRepository.save(book);
+    }
 }

From 8360a0ed5ceb1d2ebb27929227bb4e6c05b86338 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Thu, 15 Aug 2024 15:45:36 +0200
Subject: [PATCH 08/12] add unit and integration tests for updateBook mehtod

---
 .../github/esgoet/backend/models/Book.java    |  5 +-
 .../BookControllerIntegrationTest.java        | 52 ++++++++++++++--
 .../backend/services/BookServiceUnitTest.java | 59 ++++++++++++++++---
 3 files changed, 102 insertions(+), 14 deletions(-)

diff --git a/backend/src/main/java/com/github/esgoet/backend/models/Book.java b/backend/src/main/java/com/github/esgoet/backend/models/Book.java
index 553f117..dbc28fe 100644
--- a/backend/src/main/java/com/github/esgoet/backend/models/Book.java
+++ b/backend/src/main/java/com/github/esgoet/backend/models/Book.java
@@ -10,8 +10,9 @@ public record Book(
         String author,
         String title,
         String genre,
+        String description,
         String isbn,
-        String cover,
-        String description
+        String cover
+
 ) {
 }
diff --git a/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java b/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
index 800732f..72dca33 100644
--- a/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
+++ b/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
@@ -35,18 +35,22 @@ public void getAllBooks_Test_When_DbEmpty_Then_returnEmptyArray() throws Excepti
     @Test
     void getBook_Test_whenIdExists() throws Exception {
         //GIVEN
-        bookRepository.save(new Book("1","George Orwell", "1984"));
+        bookRepository.save(new Book("1", "George Orwell", "1984", "Thriller", "this is a description", "123456isbn", "https://linkToCover"));
         //WHEN
         mockMvc.perform(MockMvcRequestBuilders.get("/api/books/1"))
                 //THEN
                 .andExpect(status().isOk())
                 .andExpect(content().json("""
                         {
-                          "id": "1",
-                          "author": "George Orwell",
-                          "title": "1984"
+                             "id": "1",
+                             "author": "George Orwell",
+                             "title": "1984",
+                             "genre": "Thriller",
+                             "description": "this is a description",
+                             "isbn": "123456isbn",
+                             "cover": "https://linkToCover"
                         }
-                        """));
+                         """));
     }
 
     @DirtiesContext
@@ -65,4 +69,42 @@ void getBook_Test_whenIdDoesNotExists() throws Exception {
                 .andExpect(jsonPath("$.timestamp").exists());
     }
 
+
+    @DirtiesContext
+    @Test
+    void updateBook_Test_When_IdMatches() throws Exception {
+        // GIVEN
+        bookRepository.save(new Book("1", "author1", "title1", "genre1", "description1", "12345678", "cover1"));
+
+        Book updatedBook = new Book("1", "author2", "title2", "genre2", "description2", "23456789", "cover2");
+
+        // WHEN
+        mockMvc.perform(MockMvcRequestBuilders.put("/api/books/1/update")
+                        .contentType("application/json")
+                        .content("""
+                                {
+                                    "id": "1",
+                                    "author": "author2",
+                                    "title": "title2",
+                                    "genre": "genre2",
+                                    "description": "description2",
+                                    "isbn": "23456789",
+                                    "cover": "cover2"
+                                }
+                                """))
+                // THEN
+                .andExpect(status().isOk())
+                .andExpect(content().json("""
+                        {
+                            "id": "1",
+                            "author": "author2",
+                            "title": "title2",
+                            "genre": "genre2",
+                            "description": "description2",
+                            "isbn": "23456789",
+                            "cover": "cover2"
+                        }
+                        """));
+    }
+
 }
\ No newline at end of file
diff --git a/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java b/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
index 235dd23..6f1890f 100644
--- a/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
+++ b/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
@@ -22,13 +22,13 @@ class BookServiceUnitTest {
     @Test
     void getAllBooks_Test() {
         List<Book> allBooks = List.of(
-                new Book("1", "Simon", "Java for Dummies"),
-                new Book("2","Florian", "Java not for Dummies")
+                new Book("1", "Simon", "Java for Dummies", "horror", "this is a description", "123456isbn", "https://linkToCover"),
+                new Book("2", "Florian", "Java not for Dummies", "action", "this is a description2", "789012isbn", "https://linkToAnotherCover")
         );
 
         List<Book> expectedBooks = List.of(
-                new Book("1", "Simon", "Java for Dummies"),
-                new Book("2","Florian", "Java not for Dummies")
+                new Book("1", "Simon", "Java for Dummies", "horror", "this is a description", "123456isbn", "https://linkToCover"),
+                new Book("2", "Florian", "Java not for Dummies", "action", "this is a description2", "789012isbn", "https://linkToAnotherCover")
         );
 
         when(bookRepo.findAll()).thenReturn(allBooks);
@@ -49,12 +49,12 @@ void getAllBooks_WhenEmpty_ReturnsEmptyList() {
     @Test
     void getBook_Test_whenBookExists_thenReturnBook() {
         //GIVEN
-        Book book = new Book("1", "George Orwell", "1984");
+        Book book = new Book("1", "George Orwell", "1984", "Thriller", "this is a description", "123456isbn", "https://linkToCover");
         when(bookRepo.findById("1")).thenReturn(Optional.of(book));
         //WHEN
         Book actual = bookService.getBook("1");
         //THEN
-        Book expected = new Book("1", "George Orwell", "1984");
+        Book expected = new Book("1", "George Orwell", "1984", "Thriller", "this is a description", "123456isbn", "https://linkToCover");
         verify(bookRepo).findById("1");
         assertEquals(expected, actual);
     }
@@ -65,9 +65,54 @@ void getBook_Test_whenBookDoesNotExists_thenThrow() {
         when(bookRepo.findById("1")).thenReturn(Optional.empty());
         //WHEN
         //THEN
-        assertThrows(BookNotFoundException.class,() -> bookService.getBook("1"));
+        assertThrows(BookNotFoundException.class, () -> bookService.getBook("1"));
         verify(bookRepo).findById("1");
     }
 
+    @Test
+    void testUpdateBook_Success() {
+
+        // Given
+        String id = "1";
+        Book existingBook = new Book(id, "author1", "title1", "genre1", "description1", "12345678", "cover1");
+        Book updatedBook = new Book(id, "author2", "title2", "genre2", "description2", "23456789", "cover2");
+
+        // When
+        when(bookRepo.findById(id)).thenReturn(Optional.of(existingBook));
+        when(bookRepo.save(any(Book.class))).thenAnswer(invocation -> invocation.getArguments()[0]);
+
+        Book result = bookService.updateBook(updatedBook, id);
+
+        // Then
+        assertNotNull(result);
+        assertEquals(updatedBook.title(), result.title());
+        assertEquals(updatedBook.author(), result.author());
+        assertEquals(updatedBook.genre(), result.genre());
+        assertEquals(updatedBook.description(), result.description());
+        assertEquals(updatedBook.cover(), result.cover());
+        assertEquals(updatedBook.isbn(), result.isbn());
+        verify(bookRepo).findById(id);
+        verify(bookRepo).save(any(Book.class));
+    }
+
+    @Test
+    void testUpdateBook_BookNotFound() {
+
+        // Given
+        String id = "1";
+        Book updatedBook = new Book(id, "author", "title", "genre", "description", "isbn", "cover");
+
+        //When
+        when(bookRepo.findById(id)).thenReturn(Optional.empty());
+
+        //Then
+        BookNotFoundException thrown = assertThrows(
+                BookNotFoundException.class,
+                () -> bookService.updateBook(updatedBook, id)
+        );
+        assertEquals("No book found with id: " + id, thrown.getMessage());
+        verify(bookRepo).findById(id);
+        verify(bookRepo, never()).save(any(Book.class));
+    }
 
 }
\ No newline at end of file

From 93cbdd5471e922ad801fd8d94f5ccd4991d97c92 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Thu, 15 Aug 2024 17:16:02 +0200
Subject: [PATCH 09/12] fix sonarcloud errors

---
 .../backend/controllers/BookController.java   | 14 ++++---------
 .../dto/{NewBookDto.java => BookDto.java}     |  2 +-
 .../esgoet/backend/services/BookService.java  | 20 +++++++++----------
 .../BookControllerIntegrationTest.java        | 17 ----------------
 .../backend/services/BookServiceUnitTest.java | 14 ++++++-------
 5 files changed, 22 insertions(+), 45 deletions(-)
 rename backend/src/main/java/com/github/esgoet/backend/dto/{NewBookDto.java => BookDto.java} (92%)

diff --git a/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java b/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
index a2b4f2d..ae5dcf0 100644
--- a/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
+++ b/backend/src/main/java/com/github/esgoet/backend/controllers/BookController.java
@@ -1,6 +1,6 @@
 package com.github.esgoet.backend.controllers;
 
-import com.github.esgoet.backend.dto.NewBookDto;
+import com.github.esgoet.backend.dto.BookDto;
 import com.github.esgoet.backend.models.Book;
 import com.github.esgoet.backend.services.BookService;
 import lombok.RequiredArgsConstructor;
@@ -9,9 +9,6 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.bind.annotation.*;
-import org.springframework.http.HttpStatus;
-import org.springframework.web.server.ResponseStatusException;
-
 
 
 import java.util.List;
@@ -41,15 +38,12 @@ public Book getBook(@PathVariable String id) {
     }
 
     @PostMapping
-    public Book addABook(@RequestBody NewBookDto newBookDto) {
-        return bookService.saveBook(newBookDto);
+    public Book addABook(@RequestBody BookDto bookDto) {
+        return bookService.saveBook(bookDto);
     }
 
     @PutMapping(path = {"{id}/update", "{id}"})
-    Book update(@PathVariable String id, @RequestBody Book book) {
-        if (!book.id().equals(id)) {
-            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "The id in the url does not match the request body's id");
-        }
+    public Book update(@PathVariable String id, @RequestBody BookDto book) {
         return bookService.updateBook(book, id);
     }
 }
diff --git a/backend/src/main/java/com/github/esgoet/backend/dto/NewBookDto.java b/backend/src/main/java/com/github/esgoet/backend/dto/BookDto.java
similarity index 92%
rename from backend/src/main/java/com/github/esgoet/backend/dto/NewBookDto.java
rename to backend/src/main/java/com/github/esgoet/backend/dto/BookDto.java
index 36eb371..3a9f0b2 100644
--- a/backend/src/main/java/com/github/esgoet/backend/dto/NewBookDto.java
+++ b/backend/src/main/java/com/github/esgoet/backend/dto/BookDto.java
@@ -6,7 +6,7 @@
 import java.time.LocalDate;
 
 @With
-public record NewBookDto(
+public record BookDto(
         String author,
         String title,
         Genre genre,
diff --git a/backend/src/main/java/com/github/esgoet/backend/services/BookService.java b/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
index dc30121..8b4b45e 100644
--- a/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
+++ b/backend/src/main/java/com/github/esgoet/backend/services/BookService.java
@@ -1,6 +1,6 @@
 package com.github.esgoet.backend.services;
 
-import com.github.esgoet.backend.dto.NewBookDto;
+import com.github.esgoet.backend.dto.BookDto;
 import com.github.esgoet.backend.models.Book;
 import com.github.esgoet.backend.models.BookNotFoundException;
 import com.github.esgoet.backend.repositories.BookRepository;
@@ -29,21 +29,21 @@ public Book getBook(String id) {
                 .orElseThrow(() -> new BookNotFoundException("No book found with id: " + id));
     }
 
-    public Book saveBook(NewBookDto newBookDto) {
+    public Book saveBook(BookDto bookDto) {
         Book bookToSave = new Book(
                 idService.randomId(),
-                newBookDto.author(),
-                newBookDto.title(),
-                newBookDto.genre(),
-                newBookDto.description(),
-                newBookDto.isbn(),
-                newBookDto.cover(),
-                newBookDto.publicationDate()
+                bookDto.author(),
+                bookDto.title(),
+                bookDto.genre(),
+                bookDto.description(),
+                bookDto.isbn(),
+                bookDto.cover(),
+                bookDto.publicationDate()
         );
         return bookRepository.save(bookToSave);
     }
 
-    public Book updateBook(Book updateBook, String id) {
+    public Book updateBook(BookDto updateBook, String id) {
         Book book = bookRepository.findById(id).orElseThrow(() -> new BookNotFoundException("No book found with id: " + id))
                 .withAuthor(updateBook.author())
                 .withCover(updateBook.cover())
diff --git a/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java b/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
index f07f2d7..8c84dfc 100644
--- a/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
+++ b/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
@@ -123,23 +123,6 @@ public void deleteBook() throws Exception {
                 .andExpect(content().json("[]"));
     }
 
-//    @DirtiesContext
-//    @Test
-//    void getBook_Test_whenIdDoesNotExists() throws Exception {
-//        //WHEN
-//        mockMvc.perform(MockMvcRequestBuilders.get("/api/books/1"))
-//                //THEN
-//                .andExpect(status().isNotFound())
-//                .andExpect(content().json("""
-//                        {
-//                          "message":"No book found with id: 1",
-//                          "statusCode":404
-//                        }
-//                        """))
-//                .andExpect(jsonPath("$.timestamp").exists());
-//    }
-
-
     @DirtiesContext
     @Test
     void updateBook_Test_When_IdMatches() throws Exception {
diff --git a/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java b/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
index 2daa191..a339ff4 100644
--- a/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
+++ b/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
@@ -1,6 +1,6 @@
 package com.github.esgoet.backend.services;
 
-import com.github.esgoet.backend.dto.NewBookDto;
+import com.github.esgoet.backend.dto.BookDto;
 import com.github.esgoet.backend.models.Book;
 import com.github.esgoet.backend.models.BookNotFoundException;
 import com.github.esgoet.backend.models.Genre;
@@ -76,16 +76,16 @@ void getBook_Test_whenBookDoesNotExists_thenThrow() {
     @Test
     void addABookTest_whenNewBookAsInput_thenReturnNewBook() {
         // GIVEN
-        NewBookDto newBookDto = new NewBookDto("J. K. Rowling", "Harry Potter", Genre.FANTASY, "this is a description", "123456isbn", "https://linkToCover", localDate);
-        Book bookToSave = new Book("1", newBookDto.author(), newBookDto.title(), newBookDto.genre(), newBookDto.description(), newBookDto.isbn(), newBookDto.cover(), newBookDto.publicationDate());
+        BookDto bookDto = new BookDto("J. K. Rowling", "Harry Potter", Genre.FANTASY, "this is a description", "123456isbn", "https://linkToCover", localDate);
+        Book bookToSave = new Book("1", bookDto.author(), bookDto.title(), bookDto.genre(), bookDto.description(), bookDto.isbn(), bookDto.cover(), bookDto.publicationDate());
         when(bookRepo.save(bookToSave)).thenReturn(bookToSave);
         when(idService.randomId()).thenReturn(bookToSave.id());
 
         // WHEN
-        Book actual = bookService.saveBook(newBookDto);
+        Book actual = bookService.saveBook(bookDto);
 
         // THEN
-        Book expected = new Book("1", newBookDto.author(), newBookDto.title(), newBookDto.genre(), newBookDto.description(), newBookDto.isbn(), newBookDto.cover(), newBookDto.publicationDate());
+        Book expected = new Book("1", bookDto.author(), bookDto.title(), bookDto.genre(), bookDto.description(), bookDto.isbn(), bookDto.cover(), bookDto.publicationDate());
         verify(bookRepo).save(bookToSave);
         verify(idService).randomId();
         assertEquals(expected, actual);
@@ -104,7 +104,7 @@ void testUpdateBook_Success() {
         // Given
         String id = "1";
         Book existingBook = new Book(id, "author1", "title1", Genre.THRILLER, "description1", "12345678", "cover1", localDate);
-        Book updatedBook = new Book(id, "author2", "title2", Genre.FICTION, "description2", "23456789", "cover2", localDate);
+        BookDto updatedBook = new BookDto("author2", "title2", Genre.FICTION, "description2", "23456789", "cover2", localDate);
 
         // When
         when(bookRepo.findById(id)).thenReturn(Optional.of(existingBook));
@@ -130,7 +130,7 @@ void testUpdateBook_BookNotFound() {
 
         // Given
         String id = "1";
-        Book updatedBook = new Book(id, "author", "title", Genre.FICTION, "description", "isbn", "cover", localDate);
+        BookDto updatedBook = new BookDto("author", "title", Genre.FICTION, "description", "isbn", "cover", localDate);
 
         //When
         when(bookRepo.findById(id)).thenReturn(Optional.empty());

From db3b930e0eae207a85eb3c926fb12e287d66a563 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Fri, 16 Aug 2024 11:18:16 +0200
Subject: [PATCH 10/12] add inputfields to add book form and edit book form

---
 frontend/src/App.tsx                          | 25 ++++---
 frontend/src/components/editForm/EditForm.tsx | 71 +++++++++++++++----
 .../bookDetailsPage/BookDetailsPage.tsx       |  4 +-
 .../components/addBookButton/AddBookForm.tsx  | 41 ++++++++++-
 frontend/src/types/types.ts                   |  4 ++
 5 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b8e6298..ed028d0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,10 +9,9 @@ import AddBookForm from "./pages/BookGalleryPage/components/addBookButton/AddBoo
 import Header from "./components/header/Header.tsx";
 
 
+export default function App() {
 
-function App() {
-
-    const[data, setData] = useState<Book[]>([])
+    const [data, setData] = useState<Book[]>([])
 
     const fetchBooks = () => {
         axios.get("/api/books")
@@ -38,16 +37,16 @@ function App() {
 
 
     return (
-    <>
-        <Header />
-        <Link to={"/books"}>All Books</Link>
-        <Routes>
-            <Route path={"/books"} element={<BookGalleryPage data={data}/>}/>
-            <Route path={"/books/add"} element={<AddBookForm fetchBooks={fetchBooks}/>}/>
-            <Route path={"/books/:id"} element={<BookDetailsPage deleteBook={deleteBook}/>}/>
-        </Routes>
-    </>
+        <>
+            <Header/>
+            <Link to={"/books"}>All Books</Link>
+            <Routes>
+                <Route path={"/books"} element={<BookGalleryPage data={data}/>}/>
+                <Route path={"/books/add"} element={<AddBookForm fetchBooks={fetchBooks}/>}/>
+                <Route path={"/books/:id"} element={<BookDetailsPage deleteBook={deleteBook}/>}/>
+            </Routes>
+        </>
     )
 }
 
-export default App
+
diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
index a254130..b2c6527 100644
--- a/frontend/src/components/editForm/EditForm.tsx
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -38,19 +38,66 @@ export default function EditForm({book}: FormData) {
 
     return (
         <form onSubmit={onSubmit}>
-            <label>Title: <input placeholder={book.title} type="text" name="title" value={formData.title}
-                                 onChange={handleChange}/></label>
-            <label>Author: <input placeholder={book.author} type="text" name="author" value={formData.author}
-                                  onChange={handleChange}/></label>
+            <label>Title:
+                <input
+                    placeholder={book.title}
+                    type="text"
+                    name="title"
+                    value={formData.title}
+                    onChange={handleChange}
+                />
+            </label>
+            <label>Author:
+                <input
+                    placeholder={book.author}
+                    type="text"
+                    name="author"
+                    value={formData.author}
+                    onChange={handleChange}
+                />
+            </label>
             <label>Description: </label>
-            <textarea rows={5} cols={30} placeholder={book.description} name="description" value={formData.description}
-                      onChange={handleChange}/>
-            <label>Genre: <input placeholder={book.genre} type="text" name="genre" value={formData.genre}
-                                 onChange={handleChange}/></label>
-            <label>ISBN: <input placeholder={book.isbn} type="text" name="isbn" value={formData.isbn}
-                                onChange={handleChange}/></label>
-            <label>Cover: <input placeholder={book.cover} type="text" name="cover" value={formData.cover}
-                                 onChange={handleChange}/></label>
+            <textarea rows={5} cols={30}
+                      placeholder={book.description}
+                      name="description"
+                      value={formData.description}
+                      onChange={handleChange}
+            />
+            <label>Genre:
+                <input
+                    placeholder={book.genre}
+                    type="text"
+                    name="genre"
+                    value={formData.genre}
+                    onChange={handleChange}
+                />
+            </label>
+            <label>ISBN:
+                <input
+                    placeholder={book.isbn}
+                    type="text"
+                    name="isbn"
+                    value={formData.isbn}
+                    onChange={handleChange}
+                />
+            </label>
+            <label>Cover:
+                <input
+                    placeholder={book.cover}
+                    type="text"
+                    name="cover"
+                    value={formData.cover}
+                    onChange={handleChange}
+                />
+            </label>
+            <label>Publication Date: </label>
+            <input
+                placeholder={book.publicationDate}
+                type={"date"}
+                name="publicationDate"
+                value={formData.publicationDate}
+                onChange={handleChange}
+            />
             <div>
                 <button type={"submit"}>Submit</button>
                 <button onClick={onCancel} type={"button"}>Cancel</button>
diff --git a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
index d185f1b..801b6bc 100644
--- a/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
+++ b/frontend/src/pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx
@@ -18,7 +18,8 @@ export default function BookDetailsPage({deleteBook}: DeleteProps) {
         description: "",
         genre: "",
         isbn: "",
-        cover: ""
+        cover: "",
+        publicationDate: ""
     })
     const params = useParams();
     const navigate = useNavigate();
@@ -48,6 +49,7 @@ export default function BookDetailsPage({deleteBook}: DeleteProps) {
                 <p>Genre: {book.genre} </p>
                 <p>ISBN: {book.isbn}</p>
                 <img width={200} alt={`cover form book ${book.title}`} src={book.cover}/>
+                <p>Publication Date: {book.publicationDate}</p>
                 <Link to={"/"}>Back</Link>
                 <button onClick={() => {
                     handleDelete(book.id)
diff --git a/frontend/src/pages/BookGalleryPage/components/addBookButton/AddBookForm.tsx b/frontend/src/pages/BookGalleryPage/components/addBookButton/AddBookForm.tsx
index 85de4cc..b4fd4f1 100644
--- a/frontend/src/pages/BookGalleryPage/components/addBookButton/AddBookForm.tsx
+++ b/frontend/src/pages/BookGalleryPage/components/addBookButton/AddBookForm.tsx
@@ -7,9 +7,18 @@ type FetchProps = {
     fetchBooks: () => void;
 }
 
-export default function AddBookForm({ fetchBooks }: FetchProps) {
+export default function AddBookForm({fetchBooks}: FetchProps) {
+
+    const [book, setBook] = useState<NewBook>({
+        title: "",
+        author: "",
+        description: "",
+        genre: "",
+        isbn: "",
+        cover: "",
+        publicationDate: ""
+    });
 
-    const [book, setBook] = useState<NewBook>({title: "", author: "", genre: "", publicationDate: ""});
     const navigate = useNavigate();
 
     const genres: Genre = {
@@ -24,7 +33,7 @@ export default function AddBookForm({ fetchBooks }: FetchProps) {
         NOVEL: "Novel"
     }
 
-    function handleChange(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void {
+    function handleChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | ChangeEvent<HTMLSelectElement>): void {
         setBook({...book, [event.target.name]: event.target.value})
     }
 
@@ -66,6 +75,13 @@ export default function AddBookForm({ fetchBooks }: FetchProps) {
                 onChange={handleChange}
                 required={true}
             />
+            <label>Description: </label>
+            <textarea rows={5} cols={30}
+                      name="description"
+                      value={book.description}
+                      onChange={handleChange}
+                      required={true}
+            />
             <label>Genre</label>
             <select required={true} value={book.genre} onChange={handleChange} name={"genre"}>
                 {Object.values(genres).map((genre) => (
@@ -74,12 +90,31 @@ export default function AddBookForm({ fetchBooks }: FetchProps) {
                     </option>
                 ))}
             </select>
+            <label>ISBN:
+                <input
+                    type="text"
+                    name="isbn"
+                    value={book.isbn}
+                    onChange={handleChange}
+                    required={true}
+                />
+            </label>
+            <label>Cover:
+                <input
+                    type="text"
+                    name="cover"
+                    value={book.cover}
+                    onChange={handleChange}
+                    required={true}
+                />
+            </label>
             <label>Publication Date</label>
             <input
                 type={"date"}
                 name={"publicationDate"}
                 value={book.publicationDate}
                 onChange={handleChange}
+                required={true}
             />
             <button>Create</button>
         </form>
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index cb644ff..214af60 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -6,12 +6,16 @@ export type Book = {
     genre: string,
     isbn: string,
     cover: string
+    publicationDate: string
 }
 
 export type NewBook = {
     title: string,
     author: string,
+    description: string,
     genre: string,
+    isbn: string,
+    cover: string
     publicationDate: string
 }
 

From 69e84f6bc57f92de6c213e3534c249fd55ff256d Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Fri, 16 Aug 2024 12:00:53 +0200
Subject: [PATCH 11/12] fix integration and unit test

---
 .../backend/repositories/BookRepository.java  |  1 -
 .../BookControllerIntegrationTest.java        | 12 ++++------
 .../backend/services/BookServiceUnitTest.java | 24 ++++++++-----------
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java b/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
index fe24d1c..f8eb941 100644
--- a/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
+++ b/backend/src/main/java/com/github/esgoet/backend/repositories/BookRepository.java
@@ -6,5 +6,4 @@
 
 @Repository
 public interface BookRepository extends MongoRepository<Book, String> {
-
 }
diff --git a/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java b/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
index 8c84dfc..034f0b9 100644
--- a/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
+++ b/backend/src/test/java/com/github/esgoet/backend/controllers/BookControllerIntegrationTest.java
@@ -1,5 +1,6 @@
 package com.github.esgoet.backend.controllers;
 
+import com.github.esgoet.backend.dto.BookDto;
 import com.github.esgoet.backend.models.Book;
 import com.github.esgoet.backend.models.Genre;
 import com.github.esgoet.backend.repositories.BookRepository;
@@ -129,15 +130,12 @@ void updateBook_Test_When_IdMatches() throws Exception {
         // GIVEN
         bookRepository.save(new Book("1", "author1", "title1", Genre.FANTASY, "description1", "12345678", "cover1", localDate));
 
-        Book updatedBook = new Book("1", "author2", "title2", Genre.HISTORY, "description2", "23456789", "cover2", localDate);
-
         // WHEN
         mockMvc.perform(MockMvcRequestBuilders.put("/api/books/1/update")
                         .contentType("application/json")
                         .content("""
                                 {
-                                    "id": "1",
-                                    "author": "author2",
+                                   "author": "author2",
                                     "title": "title2",
                                     "genre": "HISTORY",
                                     "description": "description2",
@@ -149,16 +147,14 @@ void updateBook_Test_When_IdMatches() throws Exception {
                 // THEN
                 .andExpect(status().isOk())
                 .andExpect(content().json("""
-                        {
-                            "id": "1",
-                            "author": "author2",
+                        { "id": "1",
+                           "author": "author2",
                             "title": "title2",
                             "genre": "HISTORY",
                             "description": "description2",
                             "isbn": "23456789",
                             "cover": "cover2",
                             "publicationDate": "2024-08-14"
-                             
                         }
                         """));
     }
diff --git a/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java b/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
index a339ff4..1753cbe 100644
--- a/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
+++ b/backend/src/test/java/com/github/esgoet/backend/services/BookServiceUnitTest.java
@@ -104,25 +104,20 @@ void testUpdateBook_Success() {
         // Given
         String id = "1";
         Book existingBook = new Book(id, "author1", "title1", Genre.THRILLER, "description1", "12345678", "cover1", localDate);
-        BookDto updatedBook = new BookDto("author2", "title2", Genre.FICTION, "description2", "23456789", "cover2", localDate);
+        BookDto updatedBookDto = new BookDto("author2", "title2", Genre.FICTION, "description2", "23456789", "cover2", localDate);
+        Book updatedBook = new Book("1", "author2", "title2", Genre.FICTION, "description2", "23456789", "cover2", localDate);
 
         // When
         when(bookRepo.findById(id)).thenReturn(Optional.of(existingBook));
-        when(bookRepo.save(any(Book.class))).thenAnswer(invocation -> invocation.getArguments()[0]);
+        when(bookRepo.save(updatedBook)).thenReturn(updatedBook);
 
-        Book result = bookService.updateBook(updatedBook, id);
+        Book result = bookService.updateBook(updatedBookDto, id);
 
         // Then
         assertNotNull(result);
-        assertEquals(updatedBook.title(), result.title());
-        assertEquals(updatedBook.author(), result.author());
-        assertEquals(updatedBook.genre(), result.genre());
-        assertEquals(updatedBook.description(), result.description());
-        assertEquals(updatedBook.cover(), result.cover());
-        assertEquals(updatedBook.isbn(), result.isbn());
-        assertEquals(updatedBook.publicationDate(), result.publicationDate());
+        assertEquals(updatedBook, result);
         verify(bookRepo).findById(id);
-        verify(bookRepo).save(any(Book.class));
+        verify(bookRepo).save(updatedBook);
     }
 
     @Test
@@ -130,7 +125,8 @@ void testUpdateBook_BookNotFound() {
 
         // Given
         String id = "1";
-        BookDto updatedBook = new BookDto("author", "title", Genre.FICTION, "description", "isbn", "cover", localDate);
+        BookDto updatedBookDto = new BookDto("author", "title", Genre.FICTION, "description", "isbn", "cover", localDate);
+        Book updatedBook = new Book("1", "author", "title", Genre.FICTION, "description", "isbn", "cover", localDate);
 
         //When
         when(bookRepo.findById(id)).thenReturn(Optional.empty());
@@ -138,11 +134,11 @@ void testUpdateBook_BookNotFound() {
         //Then
         BookNotFoundException thrown = assertThrows(
                 BookNotFoundException.class,
-                () -> bookService.updateBook(updatedBook, id)
+                () -> bookService.updateBook(updatedBookDto, id)
         );
         assertEquals("No book found with id: " + id, thrown.getMessage());
         verify(bookRepo).findById(id);
-        verify(bookRepo, never()).save(any(Book.class));
+        verify(bookRepo, never()).save(updatedBook);
     }
 
 }
\ No newline at end of file

From 08a5516baab07e36136b70e8301834fd4fdb8304 Mon Sep 17 00:00:00 2001
From: Marcel Herr <mrclhrr@gmail.com>
Date: Fri, 16 Aug 2024 12:01:15 +0200
Subject: [PATCH 12/12] fix frontend errors

---
 frontend/src/components/editForm/EditForm.tsx | 50 +++++++++++--------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/editForm/EditForm.tsx b/frontend/src/components/editForm/EditForm.tsx
index b2c6527..5b1d79f 100644
--- a/frontend/src/components/editForm/EditForm.tsx
+++ b/frontend/src/components/editForm/EditForm.tsx
@@ -1,12 +1,24 @@
 import './EditForm.css'
 import {ChangeEvent, FormEvent, useEffect, useState} from "react";
 import axios from "axios";
-import {Book} from "../../types/types.ts";
+import {Book, Genre} from "../../types/types.ts";
 
 type FormData = {
     book: Book
 }
 
+const genres: Genre = {
+    NONE: "None",
+    FICTION: "Fiction",
+    MYSTERY: "Mystery",
+    THRILLER: "Thriller",
+    FANTASY: "Fantasy",
+    SCIENCE: "Science",
+    NON_FICTION: "Non-fiction",
+    HISTORY: "History",
+    NOVEL: "Novel"
+}
+
 export default function EditForm({book}: FormData) {
 
     const [formData, setFormData] = useState<Book>(book);
@@ -15,7 +27,7 @@ export default function EditForm({book}: FormData) {
         setFormData(book);
     }, [book]);
 
-    function handleChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    function handleChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | ChangeEvent<HTMLSelectElement>) {
         const {name, value} = event.target;
         setFormData({
             ...formData, [name]: value
@@ -32,10 +44,6 @@ export default function EditForm({book}: FormData) {
         }
     }
 
-    function onCancel() {
-        console.log("cancel")
-    }
-
     return (
         <form onSubmit={onSubmit}>
             <label>Title:
@@ -56,22 +64,23 @@ export default function EditForm({book}: FormData) {
                     onChange={handleChange}
                 />
             </label>
-            <label>Description: </label>
-            <textarea rows={5} cols={30}
-                      placeholder={book.description}
-                      name="description"
-                      value={formData.description}
-                      onChange={handleChange}
-            />
-            <label>Genre:
-                <input
-                    placeholder={book.genre}
-                    type="text"
-                    name="genre"
-                    value={formData.genre}
-                    onChange={handleChange}
+            <label>Description:
+                <textarea rows={5} cols={30}
+                          placeholder={book.description}
+                          name="description"
+                          value={formData.description}
+                          onChange={handleChange}
                 />
             </label>
+            <label>Genre:
+                <select required={true} value={formData.genre} onChange={handleChange} name={"genre"}>
+                    {Object.values(genres).map((genre) => (
+                        <option value={genre}>
+                            {genre}
+                        </option>
+                    ))}
+                </select>
+            </label>
             <label>ISBN:
                 <input
                     placeholder={book.isbn}
@@ -100,7 +109,6 @@ export default function EditForm({book}: FormData) {
             />
             <div>
                 <button type={"submit"}>Submit</button>
-                <button onClick={onCancel} type={"button"}>Cancel</button>
             </div>
         </form>