Merge pull request #40 from neuefische/Feat/SettingsPage

add SettingsPage with Update Reading Goal function

frontend/src/App.tsx

@@ -9,11 +9,12 @@ import AddBookPage from "./pages/AddBookPage/addBookPage/AddBookPage.tsx";
 import Header from "./components/header/Header.tsx";
 import Navigation from "./components/navigation/Navigation.tsx";
 import Dashboard from "./pages/DashboardPage/dashboard/Dashboard.tsx";
+import SettingsPage from "./pages/SettingsPage/settingsPage/SettingsPage.tsx";
 
 export default function App() {
 
     const [data, setData] = useState<Book[]>([])
-    const [user, setUser] = useState<User>({id:"",userName:"",readingGoal:0, goalDate:"", readBooks: 0})
+    const [user, setUser] = useState<User>({id: "", userName: "", readingGoal: 0, goalDate: "", readBooks: 0})
 
     const fetchBooks = () => {
         axios.get("/api/books")
@@ -24,12 +25,13 @@ export default function App() {
                 alert(error)
             })
     }
+
     const fetchUser = () => {
         axios.get("/api/users/1")
-            .then((response)=> {
+            .then((response) => {
                 setUser(response.data)
             })
-            .catch((error)=>(console.log(error)))
+            .catch((error) => (console.log(error)))
     }
 
     const deleteBook = (id: string) => {
@@ -44,12 +46,11 @@ export default function App() {
             .catch((error) => console.log(error.response.data))
     }
 
-    const updateUser = (updatedProperty : string, updatedValue: number | string) => {
+    const updateUser = (updatedProperty: string, updatedValue: number | string) => {
         axios.put(`/api/users/${user.id}`, {...user, [updatedProperty]: updatedValue})
             .then((response) => response.status === 200 && fetchUser())
     }
 
-
     useEffect(() => {
         fetchBooks()
         fetchUser()
@@ -60,19 +61,18 @@ export default function App() {
     const filteredBooks: Book[] = data
         .filter((book) => book.title?.toLowerCase().includes(searchInput.toLowerCase()) ||
             book.author?.toLowerCase().includes(searchInput.toLowerCase()));
-    
+
     return (
         <>
             <Header/>
             <Navigation/>
             <main>
                 <Routes>
                     <Route path={"/"} element={<Dashboard user={user}/>}/>
-                    <Route path={"/books"} element={<BookGalleryPage
-                        filteredBooks={filteredBooks}
-                        setSearchInput={setSearchInput}/>}/>
+                    <Route path={"/books"} element={<BookGalleryPage filteredBooks={filteredBooks} setSearchInput={setSearchInput}/>}/>
                     <Route path={"/books/add"} element={<AddBookPage fetchBooks={fetchBooks} user={user} updateUser={updateUser}/>}/>
                     <Route path={"/books/:id"} element={<BookDetailsPage deleteBook={deleteBook} updateBook={updateBook} user={user} updateUser={updateUser}/>}/>
+                    <Route path={"/settings"} element={<SettingsPage user={user} updateUser={updateUser}/>}/>
                 </Routes>
             </main>
         </>

frontend/src/components/navigation/Navigation.tsx

@@ -3,18 +3,21 @@ import {Link} from "react-router-dom";
 
 export default function Navigation() {
     return (
-            <nav>
-                <ul>
-                    <li><Link to={"/"}><span className="material-symbols-outlined">
-home
-</span>Dashboard</Link></li>
-                    <li><Link to={"/books"}><span className="material-symbols-outlined">
-auto_stories
-</span>All Books</Link></li>
-                    <li><Link to={"/books/add"}><span className="material-symbols-outlined">
-add_circle
-</span>Add Book</Link></li>
-                </ul>
-            </nav>
+        <nav>
+            <ul>
+                <li>
+                    <Link to={"/"}><span className="material-symbols-outlined">home</span>Dashboard</Link>
+                </li>
+                <li>
+                    <Link to={"/books"}><span className="material-symbols-outlined">auto_stories</span>All Books</Link>
+                </li>
+                <li>
+                    <Link to={"/books/add"}><span className="material-symbols-outlined">add_circle</span>Add Book</Link>
+                </li>
+                <li>
+                    <Link to={"/settings"}><span className="material-symbols-outlined">settings</span>Settings</Link>
+                </li>
+            </ul>
+        </nav>
     )
 }

frontend/src/pages/SettingsPage/settingsPage/SettingsPage.css

@@ -0,0 +1,49 @@
+.settingsPageForm {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 10px;
+    justify-content: stretch;
+    align-content: stretch;
+}
+
+.settingsPageForm input:disabled, select:disabled, textarea:disabled {
+    background-color: transparent;
+    color: white;
+    border: none;
+}
+
+.settingsPageForm input, select, textarea {
+    background-color: #183A37;
+    padding: 8px 5px;
+    border: 1px solid rgba(93, 165, 45, 0.45);
+    border-radius: 5px;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.creator-container {
+    display: flex;
+    margin-top: 250px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.creator-names {
+    display: flex;
+    color: #747bff;
+    opacity: 0.7;
+    flex-direction: row;
+    gap: 8px;
+    flex-wrap: wrap;
+    font-size: 14px;
+}
+
+@media only screen and (min-width: 768px) {
+    .creator-container {
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}

frontend/src/pages/SettingsPage/settingsPage/SettingsPage.tsx

@@ -0,0 +1,63 @@
+import {User} from "../../../types/types.ts";
+import {ChangeEvent, FormEvent, useState} from "react";
+import './SettingsPage.css'
+
+type SettingsPageProps = {
+    user: User,
+    updateUser: (updatedProperty: string, updatedValue: string | number) => void
+}
+
+export default function SettingsPage({user, updateUser}: SettingsPageProps) {
+
+    const [formData, setFormData] = useState({
+        readingGoal: user.readingGoal,
+        goalDate: user.goalDate
+    });
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+        const {name, value} = event.target;
+        setFormData({
+            ...formData,
+            [name]: value,
+        })
+    }
+
+    function handleSubmit(event: FormEvent<HTMLFormElement>) {
+        event.preventDefault()
+        updateUser("readingGoal", formData.readingGoal);
+        updateUser("goalDate", formData.goalDate);
+    }
+
+    return (
+        <>
+            <h2>Settings</h2>
+            <h3>{user.userName}</h3>
+            <form className={"settingsPageForm"} onSubmit={handleSubmit}>
+                <label htmlFor={"readingGoal"} className={"book-label"}>Reading Goal: </label>
+                <input
+                    name="readingGoal"
+                    type="number"
+                    value={formData.readingGoal}
+                    onChange={handleChange}
+                />
+                <label htmlFor={"goalDate"} className={"book-label"}>Goal Date: </label>
+                <input
+                    type="date"
+                    name="goalDate"
+                    value={formData.goalDate}
+                    onChange={handleChange}
+                />
+                <button type={"submit"}>Update</button>
+            </form>
+            <div className={"creator-container"}>
+                <h3>Created By</h3>
+                <div className={"creator-names"}>
+                    <p>Eva Goetzke</p>
+                    <p>Marcel Herr</p>
+                    <p>Rinae Hyun</p>
+                    <p>Simon Staß</p>
+                </div>
+            </div>
+        </>
+    )
+}