diff --git a/growbros-frontend/src/pages/Suche.tsx b/growbros-frontend/src/pages/Suche.tsx index 069750cc7588a6a1ff3cfe39f0c7fa692790d1ab..29b9117c4c8a0313eeaeaf3e971c7195d2dddf9e 100644 --- a/growbros-frontend/src/pages/Suche.tsx +++ b/growbros-frontend/src/pages/Suche.tsx @@ -1,132 +1,139 @@ 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;