darkmode - page

backend/src/main/java/ropold/backend/exception/GlobalExceptionHandler.java

@@ -50,7 +50,7 @@ public Map<String, String> handleMethodArgumentNotValidException(MethodArgumentN
     @ExceptionHandler(ImageDeletionException.class)
     @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR) // HTTP 500 für Serverfehler
     public RoomError handleImageDeletionException(ImageDeletionException e) {
-        return new RoomError(e.getMessage()); // Fehlermeldung aus der Exception
+        return new RoomError(e.getMessage());
     }
 
 }

backend/src/main/resources/application.properties

@@ -8,3 +8,5 @@ app.url=${APP_URL}
 
 CLOUDINARY_URL=${CLOUDINARY_URL}
 mapboxy=${MAPBOXY}
+
+spring.servlet.multipart.max-file-size=10MB

frontend/src/App.tsx

@@ -23,6 +23,11 @@ export default function App() {
     const [rooms, setRooms] = useState<RoomModel[]>([]);
     const [activeRooms, setActiveRooms] = useState<RoomModel[]>([]);
     const [showSearch, setShowSearch] = useState<boolean>(false);
+    const [currentPage, setCurrentPage] = useState<number>(1);
+
+    const resetCurrentPage = () => {
+        setCurrentPage(1);
+    };
 
     const location = useLocation();
 
@@ -129,22 +134,42 @@ export default function App() {
     }, [location]);
 
     return (
-            <>
-
-            <NavBar user={user} getUser={getUser} getAllActiveRooms={getAllActiveRooms} getAllRooms={getAllRooms} toggleSearchBar={toggleSearchBar} showSearch={showSearch}/>
+        <>
+            <NavBar
+                user={user}
+                getUser={getUser}
+                getAllActiveRooms={getAllActiveRooms}
+                getAllRooms={getAllRooms}
+                toggleSearchBar={toggleSearchBar}
+                showSearch={showSearch}
+                resetCurrentPage={resetCurrentPage}
+            />
             <Routes>
                 <Route path="*" element={<NotFound />} />
-                <Route path="/" element={<Home favorites={favorites} user={user} toggleFavorite={toggleFavorite} activeRooms={activeRooms} showSearch={showSearch}/>}/>
+                <Route
+                    path="/"
+                    element={
+                        <Home
+                            favorites={favorites}
+                            user={user}
+                            toggleFavorite={toggleFavorite}
+                            activeRooms={activeRooms}
+                            showSearch={showSearch}
+                            currentPage={currentPage}
+                            paginate={setCurrentPage}
+                        />
+                    }
+                />
                 <Route path="/room/:id" element={<Details favorites={favorites} user={user} toggleFavorite={toggleFavorite} />} />
-                <Route path="/mapbox-all" element={<MapBoxAll favorites={favorites} activeRooms={activeRooms} toggleFavorite={toggleFavorite}/>} />
+                <Route path="/mapbox-all" element={<MapBoxAll favorites={favorites} activeRooms={activeRooms} toggleFavorite={toggleFavorite} />} />
                 <Route element={<ProtectedRoute user={user} />}>
-                    <Route path="/favorites/" element={<Favorites favorites={favorites} user={user} toggleFavorite={toggleFavorite}/>} />
-                    <Route path={"/my-rooms/"} element={<MyRooms favorites={favorites} user={user} toggleFavorite={toggleFavorite} rooms={rooms} userDetails={userDetails} setRooms={setRooms}/>} />
-                    <Route path={"/add-room/"} element={<AddRoom user={user} handleSubmit={handleNewRoomSubmit} userDetails={userDetails}/>} />
-                    <Route path={"/profile"} element={<Profile userDetails={userDetails}/>} />
+                    <Route path="/favorites/" element={<Favorites favorites={favorites} user={user} toggleFavorite={toggleFavorite} />} />
+                    <Route path="/my-rooms/" element={<MyRooms favorites={favorites} user={user} toggleFavorite={toggleFavorite} rooms={rooms} userDetails={userDetails} setRooms={setRooms} />} />
+                    <Route path="/add-room/" element={<AddRoom user={user} handleSubmit={handleNewRoomSubmit} userDetails={userDetails} />} />
+                    <Route path="/profile" element={<Profile userDetails={userDetails} />} />
                 </Route>
             </Routes>
-            <Footer/>
-            </>
-  )
+            <Footer />
+        </>
+    );
 }

frontend/src/components/Home/Home.tsx

@@ -1,4 +1,3 @@
-import "../styles/Home.css";
 import { RoomModel } from "../model/RoomModel.ts";
 import { useEffect, useState } from "react";
 import SearchBar from "./SearchBar.tsx";
@@ -10,19 +9,20 @@ type HomeProps = {
     toggleFavorite: (roomId: string) => void;
     activeRooms: RoomModel[];
     showSearch: boolean;
+    currentPage: number;
+    paginate: (pageNumber: number) => void;
 };
 
 export default function Home(props: Readonly<HomeProps>) {
     const [searchQuery, setSearchQuery] = useState<string>("");
     const [filteredRooms, setFilteredRooms] = useState<RoomModel[]>([]);
-    const [currentPage, setCurrentPage] = useState<number>(1);
     const [filterType, setFilterType] = useState<"name" | "address" | "category" | "all">("name"); // Filtertyp
     const [selectedCategory, setSelectedCategory] = useState<RoomModel["category"] | "">(""); // Kategorie
     const roomsPerPage = 9;
 
     useEffect(() => {
         if (!props.showSearch) {
-            setSearchQuery("");  // Setzt den searchQuery zurück
+            setSearchQuery("");
         }
     }, [props.showSearch]);
 
@@ -31,15 +31,11 @@ export default function Home(props: Readonly<HomeProps>) {
         setFilteredRooms(filtered);
     }, [props.activeRooms, searchQuery, filterType, selectedCategory]);
 
-    // Funktion zur Filterung der Räume
     const filterRooms = (rooms: RoomModel[], query: string, filterType: string, category: string | "") => {
         const lowerQuery = query.toLowerCase();
 
         return rooms.filter((room) => {
-            // Kategorie-Filter
             const matchesCategory = category ? room.category === category : true;
-
-            // Filter für Name, Adresse oder alles
             const matchesName = filterType === "name" && room.name.toLowerCase().includes(lowerQuery);
             const matchesAddress = filterType === "address" && room.address.toLowerCase().includes(lowerQuery);
             const matchesAll =
@@ -52,12 +48,8 @@ export default function Home(props: Readonly<HomeProps>) {
         });
     };
 
-    // Berechne die Karten für die aktuelle Seite
-    const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
-
-    // Berechne die Gesamtzahl der Seiten und den aktuellen Raum-Schnitt
     const getPaginationData = (rooms: RoomModel[]) => {
-        const indexOfLastRoom = currentPage * roomsPerPage;
+        const indexOfLastRoom = props.currentPage * roomsPerPage;
         const indexOfFirstRoom = indexOfLastRoom - roomsPerPage;
         const currentRooms = rooms.slice(indexOfFirstRoom, indexOfLastRoom);
         const totalPages = Math.ceil(rooms.length / roomsPerPage);
@@ -97,13 +89,13 @@ export default function Home(props: Readonly<HomeProps>) {
                 {Array.from({ length: totalPages }, (_, index) => (
                     <button
                         key={index + 1}
-                        onClick={() => paginate(index + 1)}
-                        className={index + 1 === currentPage ? "active" : ""}
+                        onClick={() => props.paginate(index + 1)}
+                        className={index + 1 === props.currentPage ? "active" : ""}
                     >
                         {index + 1}
                     </button>
                 ))}
             </div>
         </>
     );
-}
+}

frontend/src/components/NavBar.tsx

@@ -1,5 +1,5 @@
-import "./styles/NavBar.css"
-import {useNavigate} from "react-router-dom";
+import "./styles/NavBar.css";
+import { useNavigate } from "react-router-dom";
 import axios from "axios";
 
 type NavbarProps = {
@@ -9,15 +9,15 @@ type NavbarProps = {
     getAllRooms: () => void;
     toggleSearchBar: () => void;
     showSearch: boolean;
-}
+    resetCurrentPage: () => void;
+};
 
 export default function NavBar(props: Readonly<NavbarProps>) {
     const navigate = useNavigate();
 
     function loginWithGithub() {
-        const host = window.location.host === 'localhost:5173' ? 'http://localhost:8080' : window.location.origin
-
-        window.open(host + '/oauth2/authorization/github', '_self')
+        const host = window.location.host === "localhost:5173" ? "http://localhost:8080" : window.location.origin;
+        window.open(host + "/oauth2/authorization/github", "_self");
     }
 
     function logoutFromGithub() {
@@ -38,18 +38,14 @@ export default function NavBar(props: Readonly<NavbarProps>) {
                 className="clickable-header"
                 onClick={() => {
                     props.getAllActiveRooms();
+                    props.resetCurrentPage(); // Reset der Seite auf 1
                     navigate("/");
                 }}
             >
                 <h2 className="header-title">PracticeHub</h2>
-                <img
-                    src="/PracticeHub-Logo.png"
-                    alt="PracticeHub Logo"
-                    className="logo-image"
-                />
+                <img src="/PracticeHub-Logo.png" alt="PracticeHub Logo" className="logo-image" />
             </div>
 
-
             <button
                 onClick={() => {
                     props.toggleSearchBar();
@@ -60,16 +56,19 @@ export default function NavBar(props: Readonly<NavbarProps>) {
                 {props.showSearch ? "Hide Search" : "Search"} {/* Dynamischer Text */}
             </button>
 
-            <button onClick={()=> navigate(`/mapbox-all`)} >Map</button>
+            <button onClick={() => navigate(`/mapbox-all`)}>Map</button>
 
             {props.user !== "anonymousUser" ? (
                 <>
                     <button onClick={() => navigate(`/favorites`)}>Favorites</button>
                     <button onClick={() => navigate(`/add-room`)}>Add Room</button>
-                    <button onClick={() => {
-                        props.getAllRooms();
-                        navigate(`/my-rooms`)
-                    }}>My Rooms
+                    <button
+                        onClick={() => {
+                            props.getAllRooms();
+                            navigate(`/my-rooms`);
+                        }}
+                    >
+                        My Rooms
                     </button>
                     <button onClick={() => navigate(`/profile`)}>Profile</button>
                     <button onClick={logoutFromGithub}>Logout</button>
@@ -80,4 +79,3 @@ export default function NavBar(props: Readonly<NavbarProps>) {
         </nav>
     );
 }
-