updated SearchPage and added fetching randomPlants from Endpoint #12

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) {

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 } 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>
     </>
   );
 }