search fix

frontend/src/components/Home/Home.tsx

@@ -16,32 +16,56 @@ export default function Home(props: Readonly<HomeProps>) {
     const [searchQuery, setSearchQuery] = useState<string>("");
     const [filteredRooms, setFilteredRooms] = useState<RoomModel[]>([]);
     const [currentPage, setCurrentPage] = useState<number>(1);
-    const roomsPerPage = 9; // Anzahl der Karten pro Seite
+    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 auf einen leeren String
+            setSearchQuery("");  // Setzt den searchQuery zurück
         }
     }, [props.showSearch]);
 
     useEffect(() => {
-        const filtered = props.activeRooms.filter((room) => {
-            return room.name.toLowerCase().includes(searchQuery.toLowerCase());
-        });
+        const filtered = filterRooms(props.activeRooms, searchQuery, filterType, selectedCategory);
         setFilteredRooms(filtered);
-    }, [props.activeRooms, searchQuery]);
+    }, [props.activeRooms, searchQuery, filterType, selectedCategory]);
 
-    // Berechne die Karten für die aktuelle Seite
-    const indexOfLastRoom = currentPage * roomsPerPage;
-    const indexOfFirstRoom = indexOfLastRoom - roomsPerPage;
-    const currentRooms = filteredRooms.slice(indexOfFirstRoom, indexOfLastRoom);
+    // 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 =
+                filterType === "all" &&
+                (room.name.toLowerCase().includes(lowerQuery) ||
+                    room.address.toLowerCase().includes(lowerQuery) ||
+                    room.description.toLowerCase().includes(lowerQuery));
 
-    // Berechne die Gesamtzahl der Seiten
-    const totalPages = Math.ceil(filteredRooms.length / roomsPerPage);
+            return matchesCategory && (matchesName || matchesAddress || matchesAll);
+        });
+    };
 
-    // Funktion für die Seitenumstellung
+    // 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 indexOfFirstRoom = indexOfLastRoom - roomsPerPage;
+        const currentRooms = rooms.slice(indexOfFirstRoom, indexOfLastRoom);
+        const totalPages = Math.ceil(rooms.length / roomsPerPage);
+        return { currentRooms, totalPages };
+    };
+
+    const { currentRooms, totalPages } = getPaginationData(filteredRooms);
+
     return (
         <>
             {props.showSearch && (
@@ -50,6 +74,10 @@ export default function Home(props: Readonly<HomeProps>) {
                     onChange={setSearchQuery}
                     rooms={props.activeRooms}
                     setFilteredRooms={setFilteredRooms}
+                    filterType={filterType}
+                    setFilterType={setFilterType}
+                    selectedCategory={selectedCategory}
+                    setSelectedCategory={setSelectedCategory}
                 />
             )}
 

frontend/src/components/Home/SearchBar.tsx

@@ -1,19 +1,28 @@
-import React, { useState, useEffect, ChangeEvent } from "react";
+import React, { ChangeEvent, useEffect } from "react";
 import "../styles/SearchBar.css";
 import { RoomModel } from "../model/RoomModel.ts";
-import "../styles/SearchBar.css";
 
 type SearchBarProps = {
     value: string;
     onChange: (value: string) => void;
     rooms: RoomModel[];
     setFilteredRooms: (rooms: RoomModel[]) => void;
+    filterType: "name" | "address" | "category" | "all";
+    setFilterType: (filterType: "name" | "address" | "category" | "all") => void;
+    selectedCategory: RoomModel["category"] | "";
+    setSelectedCategory: (category: RoomModel["category"] | "") => void;
 };
 
-const SearchBar: React.FC<SearchBarProps> = ({ value, onChange, rooms, setFilteredRooms }) => {
-    const [filterType, setFilterType] = useState<"name" | "address" | "category" | "all">("name");
-    const [selectedCategory, setSelectedCategory] = useState<RoomModel["category"] | "">("");
-
+const SearchBar: React.FC<SearchBarProps> = ({
+                                                 value,
+                                                 onChange,
+                                                 rooms,
+                                                 setFilteredRooms,
+                                                 filterType,
+                                                 setFilterType,
+                                                 selectedCategory,
+                                                 setSelectedCategory
+                                             }) => {
     const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
         onChange(event.target.value);
     };
@@ -45,7 +54,6 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onChange, rooms, setFilter
             return matchesCategory && (matchesName || matchesAddress || matchesAll);
         });
 
-
         setFilteredRooms(filtered);
     }, [value, filterType, rooms, selectedCategory, setFilteredRooms]);
 
@@ -63,23 +71,26 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onChange, rooms, setFilter
                         setFilterType("name");
                     }}
                     className={filterType === "name" ? "active" : ""}
-                >Name
+                >
+                    Name
                 </button>
                 <button
                     onClick={() => {
                         setFilterType("address");
                     }}
                     className={filterType === "address" ? "active" : ""}
-                >Address
+                >
+                    Address
                 </button>
                 <button
                     onClick={() => {
                         setFilterType("all");
-                        setSelectedCategory("");
+                        setSelectedCategory(""); // Setzt die Kategorie zurück, wenn "No Filter" gewählt wird
                         onChange('');
                     }}
                     className={filterType === "all" && selectedCategory === "" ? "active" : ""}
-                >No Filter
+                >
+                    No Filter
                 </button>
                 <label>
                     <select