From 00cc070ce421231652a7f34dc4593da5d1664184 Mon Sep 17 00:00:00 2001
From: Lukas Karsch <lk224@hdm-stuttgart.de>
Date: Sun, 14 Jan 2024 12:58:29 +0100
Subject: [PATCH] if no search options, get random plants
---
growbros-frontend/src/pages/Suche.tsx | 229 +++++++++++++-------------
1 file changed, 118 insertions(+), 111 deletions(-)
diff --git a/growbros-frontend/src/pages/Suche.tsx b/growbros-frontend/src/pages/Suche.tsx
index 069750c..29b9117 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;
--
GitLab