From 67a0b4dcd1aa1af0f238a487f0aef928c26f102c Mon Sep 17 00:00:00 2001
From: Hannah Holzheu <hh062@hdm-stuttgart.de>
Date: Fri, 15 Dec 2023 21:14:37 +0100
Subject: [PATCH] updated SearchPage and added fetching randomPlants from
Endpoint #12
---
.../src/components/PlantDetails.tsx | 1 +
growbros-frontend/src/pages/Suche.tsx | 41 ++++++++++++++++++-
2 files changed, 40 insertions(+), 2 deletions(-)
diff --git a/growbros-frontend/src/components/PlantDetails.tsx b/growbros-frontend/src/components/PlantDetails.tsx
index 7c6ea0d..a9e21b9 100644
--- a/growbros-frontend/src/components/PlantDetails.tsx
+++ b/growbros-frontend/src/components/PlantDetails.tsx
@@ -92,6 +92,7 @@ function ButtonAddToGarden({ plantId }: any) {
if (response.status === 201) {
console.log("Pflanze wurde erfolgreich dem Garten hinzugefügt");
} else {
+ console.log("Unexpected response status:", response.status);
setStatus("Pflanze konnte nicht dem Garten hinzugefügt werden");
}
} catch (error) {
diff --git a/growbros-frontend/src/pages/Suche.tsx b/growbros-frontend/src/pages/Suche.tsx
index a3f068f..f4fc97b 100644
--- a/growbros-frontend/src/pages/Suche.tsx
+++ b/growbros-frontend/src/pages/Suche.tsx
@@ -1,14 +1,51 @@
import "font-awesome/css/font-awesome.min.css";
import "../stylesheets/Suche.css";
import PlantsOverview from "../components/PlantsOverview";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import FilterPage from "../components/FilterPage";
function Suche() {
+ const [randomPlants, setRandomPlants] = useState<plant[] | null>(null);
+ const [error, setError] = useState<null | String>(null);
+ const randomPlantsCount: number = 30;
+ const token: String = "";
+
+ const fetchRandomPlants = async () => {
+ try {
+ const response = await fetch(
+ `http://localhost:8080/api/v1/plants/randomPlants/${randomPlantsCount}`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ if (response.status == 200) {
+ const data = await response.json();
+ setRandomPlants(data);
+ console.log("Succesfully fetched data");
+ } else {
+ console.log("Unexpected response status:", response.status);
+ setError("Error fetching data");
+ }
+ } catch (error) {
+ console.error("Error", error);
+ setError("Error fetching data");
+ }
+ };
+
+ useEffect(() => {
+ fetchRandomPlants();
+ }, []);
+
return (
<>
<SearchBar />
- <PlantsOverview />
+ <div>
+ {error ? <div>{error}</div> : <PlantsOverview plants={randomPlants} />}
+ </div>
</>
);
}
--
GitLab