#53 re-introduce empty options in dropdown filter for search page

growbros-frontend/src/components/DropDownFilter.tsx

@@ -4,28 +4,29 @@ import "../stylesheets/DropDownFilter.css";
 import "../pages/Wunschliste.tsx";
 
 function DropDownFilter<T extends DropdownOption>(props: PropsDropDownFilter<T>) {
-  const options = props.options;
-  const topic = props.topic;
-  const [selectedOption, setSelectedOption] = useState("");
+    const options = props.options;
+    const topic = props.topic;
+    const hasEmptyOption = props.hasEmptyOption;
+    const [selectedOption, setSelectedOption] = useState("");
 
-  const handleOptionChange = (event: any) => {
-    setSelectedOption(event.target.value);
-    props.filterOnChange(event.target.value);
-  };
+    const handleOptionChange = (event: any) => {
+        setSelectedOption(event.target.value);
+        props.filterOnChange(event.target.value);
+    };
 
-  return (
-    <div className="dropdown-filter">
-      <label>{topic}</label>
-      <select value={selectedOption} onChange={handleOptionChange}>
-
-        {options.map((option, index) => (
-          <option key={index} value={option}>
-            {option}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
+    return (
+        <div className="dropdown-filter">
+            <label>{topic}</label>
+            <select value={selectedOption} onChange={handleOptionChange}>
+                {hasEmptyOption && <option value=""/>}
+                {options.map((option, index) => (
+                    <option key={index} value={option}>
+                        {option}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
 }
 
 export default DropDownFilter;

growbros-frontend/src/components/FilterPage.tsx

-import { useState } from "react";
+import {useState} from "react";
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
 import "../stylesheets/FilterPage.css";
 import DropDownFilter from "./DropDownFilter";
-import { PropsSliderFilter } from "../utils/commonTypes";
+import {PropsSliderFilter} from "../utils/commonTypes";
 import {
   GroundType,
   GroundTypeTranslated,
@@ -11,12 +11,12 @@ import {
   LightingDemandTranslated,
   NutrientDemand,
   NutrientDemandTranslated,
-  WaterDemand,
-  WaterDemandTranslated,
   translateGroundTypeReverse,
   translateLightingDemandReverse,
   translateNutrientDemandReverse,
   translateWaterDemandReverse,
+  WaterDemand,
+  WaterDemandTranslated,
 } from "../utils/schemas";
 
 type FilterPageProps = {
@@ -55,24 +55,28 @@ function FilterPage({
       </div>
       <div>
         <DropDownFilter
-          topic={"Wasserbedarf "}
-          options={["Trocken", "Feucht", "Sehr feucht"]}
-          filterOnChange={handleWaterDemand}
+            topic={"Wasserbedarf "}
+            options={["Trocken", "Feucht", "Sehr feucht"]}
+            filterOnChange={handleWaterDemand}
+            hasEmptyOption
         />
         <DropDownFilter
-          topic={"Nährstoffbedarf "}
-          options={["Niedrig", "Mittel", "Hoch"]}
-          filterOnChange={handleNutrientDemand}
+            topic={"Nährstoffbedarf "}
+            options={["Niedrig", "Mittel", "Hoch"]}
+            filterOnChange={handleNutrientDemand}
+            hasEmptyOption
         />
         <DropDownFilter
-          topic={"Lichtbedarf "}
-          options={["Niedrig", "Mittel", "Hoch"]}
-          filterOnChange={handleLightingDemand}
+            topic={"Lichtbedarf "}
+            options={["Niedrig", "Mittel", "Hoch"]}
+            filterOnChange={handleLightingDemand}
+            hasEmptyOption
         />
         <DropDownFilter
-          topic={"Bodentyp"}
-          options={["Leicht", "Mittel", "Schwer"]}
-          filterOnChange={handleGroundType}
+            topic={"Bodentyp"}
+            options={["Leicht", "Mittel", "Schwer"]}
+            filterOnChange={handleGroundType}
+            hasEmptyOption
         />
       </div>
       <SliderFilter

growbros-frontend/src/pages/Garten.tsx

@@ -7,7 +7,7 @@ import PlantsOverview from "../components/PlantsOverview";
 
 function Garten() {
     const [plants, setPlantsInGarden] = useState<Plant[]>([]);
-    const [error, setError] = useState({});
+    const [error, setError] = useState<object>();
     const [currentSort, setCurrentSort] = useState<string>("")
 
     const bc: IBackendConnector = useGrowbrosFetcher();
@@ -31,6 +31,7 @@ function Garten() {
             if (result.err) {
                 setError(result.err);
             } else {
+                setError(undefined);
                 setPlantsInGarden([]);
             }
         }
@@ -69,9 +70,12 @@ function Garten() {
                 />
                 <button onClick={handleClearGarden}>Garten leeren</button>
             </div>
+            {error && (
+                <div style={{padding: "20px"}}>Es ist ein Fehler aufgetreten...</div>
+            )}
             <PlantsOverview plants={plants}/>
         </>
     );
 }
 
-export default Garten;
\ No newline at end of file
+export default Garten;

growbros-frontend/src/utils/commonTypes.d.ts

 export type PropsDropDownFilter<T> = {
     options: T[];
     topic: string;
-    filterOnChange?: (selectedOption: T) => void;
+    filterOnChange: (selectedOption: T) => void;
+    hasEmptyOption?: boolean
 };
 
-
 export type PropsSliderFilter = {
     topic: string;
     min: number;