fix frontend errors

neuefische · Aug 16, 2024 · 08a5516 · 08a5516
1 parent 69e84f6
commit 08a5516
Showing 1 changed file with 29 additions and 21 deletions.
diff --git 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>