added connection to backend getRandomPlants #12

growbros-frontend/src/components/PlantDetails.tsx

 import "../stylesheets/PlantDetails.css";
 import "font-awesome/css/font-awesome.min.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Plant, PlantSchema } from "../utils/schemas";
 import { useParams } from "react-router";
 //TODO translateEnums fixen
 
 function PlantDetails() {
   const { plantId } = useParams();
-  //TODO plant holen mit id
+  
+
   const  plant:Plant =  JSON.parse("")
 
   return (

growbros-frontend/src/components/PlantsOverview.tsx

@@ -4,16 +4,6 @@ import { Plant } from "../utils/schemas";
 export default function PlantsOverview(props: any) {
   const plants: Plant[] = props.plants;
 
-  /*const [plants, setPlants] = useState<any[]>([]);
-  const [error, setError] = useState();
-
-  useEffect(() => {
-    fetch("http://localhost:8080/api/v1/plants")
-      .then((res) => res.json())
-      .then((plants) => setPlants(plants))
-      .catch((err) => setError(err));
-  }, []);*/
-
   return (
     <>
       <ul style={{ display: "flex", gap: "1rem", width: "100%" }}>

growbros-frontend/src/pages/Garten.tsx

@@ -2,6 +2,8 @@ import DropDownFilter from "../components/DropDownFilter";
 
 
 function Garten() {
+  
+  
   return (
     <div>
       <h2>Dein Garten</h2>

growbros-frontend/src/pages/Home.tsx

 import "../stylesheets/Home.css";
 import { NavLink } from "react-router-dom";
+import { BackendConnectorImpl } from "../utils/BackendConnectorImpl";
+import { BackendConnectorTestInterface } from "./BackendConnectorTestInterface";
 
 function Home() {
   return (
     <main>
+      <BackendConnectorTestInterface />
       <div className="hero">
         <img
           src="../../public/recources/images/Vegetables.jpeg"
@@ -39,7 +42,6 @@ function Home() {
           src="../../public/recources/images/Broccoli.webp"
         ></img>
       </div>
-
       <div style={{ display: "flex" }}>
         <img
           className="smallPicture"
@@ -53,7 +55,6 @@ function Home() {
           </p>
         </div>
       </div>
-
       <div style={{ display: "flex" }}>
         <div className="smallDiv">
           <p>

growbros-frontend/src/pages/Suche.tsx

@@ -4,48 +4,33 @@ import PlantsOverview from "../components/PlantsOverview";
 import { useState, useEffect } from "react";
 import FilterPage from "../components/FilterPage";
 import { Plant } from "../utils/schemas";
+import { IBackendConnector } from "../utils/IBackendConnector";
+import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
 
 function Suche() {
-  const [randomPlants, setRandomPlants] = useState<Plant[] | null>(null);
-  const [error, setError] = useState<null | String>(null);
-  const randomPlantsCount: number = 30;
-  const token: String = "";
+  const [randomPlants, setRandomPlants] = useState<Plant[]>([]);
+  const [error, setError] = useState({});
+  const randomPlantsCount: number = 50;
 
-  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");
-    }
-  };
+  const bc: IBackendConnector = useGrowbrosFetcher();
 
   useEffect(() => {
-    fetchRandomPlants();
+    (async () => {
+      const result = await bc.getRandomPlants(randomPlantsCount);
+      if (result.err) {
+        setError(result.err);
+      } else {
+        setRandomPlants(result.value!);
+      }
+    })();
   }, []);
 
+  //TODO error handling
   return (
     <>
       <SearchBar />
       <div>
-        {error ? <div>{error}</div> : <PlantsOverview plants={randomPlants} />}
+        <PlantsOverview plants={randomPlants} />
       </div>
     </>
   );

growbros-frontend/src/pages/Wunschliste.tsx

 import { useEffect, useState } from "react";
 import PlantDetails from "../components/PlantDetails";
 import { Plant } from "../utils/schemas";
+import { BackendConnectorImpl } from "../utils/BackendConnectorImpl";
 
 function Wunschliste() {
+  const bc = new BackendConnectorImpl("http://localhost:8080/api/v1");
   const [plants, setPlants] = useState<Plant[] | null>(null);
   const [error, setError] = useState();
 
   useEffect(() => {
-    fetch("http://localhost:8080/api/v1/plants")
-      .then((res) => res.json())
-      .then((plants) => setPlants(plants))
-      .catch((err) => setError(err));
+    bc.getWishlistEntries();
   }, [setPlants]);
 
   return (

growbros-frontend/src/utils/BackendConnectorImpl.ts

@@ -226,7 +226,7 @@ export class BackendConnectorImpl implements IBackendConnector {
         //TODO: get auth
         console.log("Making request to", path)
         const {method, body} = options;
-        const jwt: string = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJsdWthcy5rYXJzY2hAZ214LmRlIiwiaWF0IjoxNzAzNTA5MDUwLCJleHAiOjE3MDM1OTU0NTB9.YF7aFsv2okyXWiytpZIFfqVQ9Y76NBmRg32Hbl4q6Yo";
+        const jwt: string = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJsdWthcy5rYXJzY2hAZ214LmRlIiwiaWF0IjoxNzAzNjI2NTU4LCJleHAiOjE3MDM3MTI5NTh9.sayYITL6LhQlx-DtknVYe9lkPrE5gJFMiaosPq9KhMg";
         let headers: HeadersInit = {
             Authorization: `Bearer ${jwt}`
         };

requests.http

@@ -39,7 +39,7 @@ content-type: application/json
 
 ### SearchRequest
 GET http://localhost:8080/api/v1/plants/search
-Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJsdWthcy5rYXJzY2hAZ214LmRlIiwiaWF0IjoxNzAxNzkwMjkxLCJleHAiOjE3MDE4NzY2OTF9.8rXWM9AZzwZQLFo_79uoZ9N0-DIVIXQih4fZpbvGtzM
+Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJsdWthcy5rYXJzY2hAZ214LmRlIiwiaWF0IjoxNzAzNjIzNzAzLCJleHAiOjE3MDM3MTAxMDN9.D06wA6SdGQQzln55DK8pMO6cowbA9iL_-EfmGbVMT14
 content-type: application/json
 
 {