if no search options, get random plants

growbros-frontend/src/pages/Suche.tsx

 import "font-awesome/css/font-awesome.min.css";
 import "../stylesheets/Suche.css";
 import PlantsOverview from "../components/PlantsOverview";
-import { useState, useEffect } from "react";
+import {useEffect, useState} from "react";
 import FilterPage from "../components/FilterPage";
-import {
-  GroundType,
-  LightingDemand,
-  NutrientDemand,
-  Plant,
-  WaterDemand,
-} from "../utils/schemas";
-import { IBackendConnector } from "../utils/IBackendConnector";
+import {GroundType, LightingDemand, NutrientDemand, Plant, WaterDemand,} from "../utils/schemas";
+import {IBackendConnector} from "../utils/IBackendConnector";
 import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
 
 type SearchBarProps = {
-  setError: (value: any) => void;
-  setPlants: (value: Plant[]) => void;
+    setError: (value: any) => void;
+    setPlants: (value: Plant[]) => void;
 };
+
 function Suche() {
-  const [plants, setPlants] = useState<Plant[]>([]);
-  const [error, setError] = useState({});
-  const randomPlantsCount: number = 100;
+    const [plants, setPlants] = useState<Plant[]>([]);
+    const [error, setError] = useState({});
+    const randomPlantsCount: number = 100;
 
-  const bc: IBackendConnector = useGrowbrosFetcher();
+    const bc: IBackendConnector = useGrowbrosFetcher();
 
-  useEffect(() => {
-    (async () => {
-      const result = await bc.getRandomPlants(randomPlantsCount);
-      if (result.err) {
-        setError(result.err);
-      } else {
-        setPlants(result.value!);
-      }
-    })();
-  }, []);
+    useEffect(() => {
+        (async () => {
+            const result = await bc.getRandomPlants(randomPlantsCount);
+            if (result.err) {
+                setError(result.err);
+            } else {
+                setPlants(result.value!);
+            }
+        })();
+    }, []);
 
-  //TODO error handling+ gesuchte Pflanzen anzeigen statt random nach suche
-  return (
-    <>
-      <SearchBar setError={setError} setPlants={setPlants} />
-      <div>
-        {plants.length === 0 && (
-          <div>
-            Es wurden keine Pflanzen passend zu deiner Suchanfrage gefunden
-          </div>
-        )}
-        <PlantsOverview plants={plants} />
-      </div>
-    </>
-  );
+    return (
+        <>
+            <SearchBar setError={setError} setPlants={setPlants}/>
+            <div>
+                {plants.length === 0 && (
+                    <div>
+                        Es wurden keine Pflanzen passend zu deiner Suchanfrage gefunden
+                    </div>
+                )}
+                <PlantsOverview plants={plants}/>
+            </div>
+        </>
+    );
 }
 
-function SearchBar({ setPlants, setError }: SearchBarProps) {
-  const [isComponentVisible, setComponentVisible] = useState(false);
-  const [searchTerm, setSearchTerm] = useState<string>();
-  const [waterDemand, setWaterDemand] = useState<WaterDemand>();
-  const [nutrientDemand, setNutrientDemand] = useState<NutrientDemand>();
-  const [lightingDemand, setLightingDemand] = useState<LightingDemand>();
-  const [groundType, setGroundType] = useState<GroundType>();
-  const [plantDuration, setPlantDuration] = useState<[number, number]>();
-  const [growthDuration, setGrowthDuration] = useState<[number, number]>();
-  const bc: IBackendConnector = useGrowbrosFetcher();
+function SearchBar({setPlants, setError}: SearchBarProps) {
+    const [isComponentVisible, setComponentVisible] = useState(false);
+    const [searchTerm, setSearchTerm] = useState<string>("");
+    const [waterDemand, setWaterDemand] = useState<WaterDemand>();
+    const [nutrientDemand, setNutrientDemand] = useState<NutrientDemand>();
+    const [lightingDemand, setLightingDemand] = useState<LightingDemand>();
+    const [groundType, setGroundType] = useState<GroundType>();
+    const [plantDuration, setPlantDuration] = useState<[number, number]>();
+    const [growthDuration, setGrowthDuration] = useState<[number, number]>();
+    const bc: IBackendConnector = useGrowbrosFetcher();
+
+    const handleSearchChange = (event: any) => {
+        setSearchTerm(event.target.value);
+    };
+    const loadComponent = () => {
+        setComponentVisible(!isComponentVisible);
+    };
+
+    const handleSearchRequestSubmit = async () => {
+        let result;
+
+        if (isSearchSetToDefault()) {
+            result = await bc.getRandomPlants(100);
+        } else {
+            result = await bc.searchPlants({
+                searchTerm,
+                waterDemand,
+                nutrientDemand,
+                lightingDemand,
+                groundType,
+                growthDurationMin: growthDuration && growthDuration[0],
+                growthDurationMax: growthDuration && growthDuration[1],
+                plantWeekStart: plantDuration && plantDuration[0],
+                plantWeekEnd: plantDuration && plantDuration[1],
+            });
+        }
 
-  const handleSearchChange = (event: any) => {
-    setSearchTerm(event.target.value);
-  };
-  const loadComponent = () => {
-    setComponentVisible(!isComponentVisible);
-  };
+        if (result.err) {
+            setError(result.err);
+        } else {
+            console.log(result.value);
+            setPlants(result.value!);
+        }
+    };
 
-  const handleSearchRequestSubmit = async () => {
-    const result = await bc.searchPlants({
-      searchTerm,
-      waterDemand,
-      nutrientDemand,
-      lightingDemand,
-      groundType,
-      growthDurationMin: growthDuration && growthDuration[0],
-      growthDurationMax: growthDuration && growthDuration[1],
-      plantWeekStart: plantDuration && plantDuration[0],
-      plantWeekEnd: plantDuration && plantDuration[1],
-    });
-    if (result.err) {
-      setError(result.err);
-    } else {
-      console.log(result.value);
-      setPlants(result.value!);
+    const isSearchSetToDefault = () => {
+        return (!searchTerm || searchTerm.trim() === "") && !waterDemand && !lightingDemand && !nutrientDemand && !groundType
+            && (!plantDuration || plantDuration[0] === 1 && plantDuration[1] === 52)
+            && (!growthDuration || growthDuration[0] === 1 && growthDuration[1] === 52)
     }
-  };
 
-  return (
-    <>
-      <div className="searchBar">
-        <h2>Suche nach einer Pflanze</h2>
-        <p>
-          und füge diese dann zu deinem Garten oder zu deiner Wunschliste hinzu
-        </p>
-        <div className="searchFilter">
-          <input
-            onChange={handleSearchChange}
-            value={searchTerm}
-            type="text"
-            placeholder="Pflanze suchen..."
-          />
-          <button onClick={loadComponent} className="filter">
-            <i className="fa fa-filter" />
-          </button>
-          <button onClick={handleSearchRequestSubmit}>
-            <i className="fa fa-search"></i>
-          </button>
-        </div>
-        <div
-          style={
-            isComponentVisible ? {display: "block" } : { display: "none" }
-          }
-        >
-          <FilterPage
-            setGroundType={setGroundType}
-            setGrowthDuration={setGrowthDuration}
-            setLightingDemand={setLightingDemand}
-            setNutrientDemand={setNutrientDemand}
-            setPlantDuration={setPlantDuration}
-            setWaterDemand={setWaterDemand}
-          />
-        </div>
-      </div>
-    </>
-  );
+    return (
+        <>
+            <div className="searchBar">
+                <h2>Suche nach einer Pflanze</h2>
+                <p>
+                    und füge diese dann zu deinem Garten oder zu deiner Wunschliste hinzu
+                </p>
+                <div className="searchFilter">
+                    <input
+                        onChange={handleSearchChange}
+                        value={searchTerm}
+                        type="text"
+                        placeholder="Pflanze suchen..."
+                    />
+                    <button onClick={loadComponent} className="filter">
+                        <i className="fa fa-filter"/>
+                    </button>
+                    <button onClick={handleSearchRequestSubmit}>
+                        <i className="fa fa-search"></i>
+                    </button>
+                </div>
+                <div
+                    style={
+                        isComponentVisible ? {display: "block"} : {display: "none"}
+                    }
+                >
+                    <FilterPage
+                        setGroundType={setGroundType}
+                        setGrowthDuration={setGrowthDuration}
+                        setLightingDemand={setLightingDemand}
+                        setNutrientDemand={setNutrientDemand}
+                        setPlantDuration={setPlantDuration}
+                        setWaterDemand={setWaterDemand}
+                    />
+                </div>
+            </div>
+        </>
+    );
 }
 
 export default Suche;