connected PlantDetails Page to backend and fixed link in plantcard #14

growbros-frontend/src/App.tsx

@@ -16,7 +16,7 @@ function App() {
                 <Route path="/garten" element={<Garten/>}/>
                 <Route path="/wunschliste" element={<Wunschliste/>}/>
                 <Route path="/suchen" element={<Suche/>}/>
-                <Route path="/pflanze/:plantId" element={<PlantDetails/>}/>
+                <Route path="/pflanze/:id" element={<PlantDetails/>}/>
             </Routes>
         </div>
     );

growbros-frontend/src/components/PlantCard.tsx

@@ -4,10 +4,10 @@ import { Plant } from "../utils/schemas";
 
 export default function PlantCard(props: any) {
   const plant: Plant = props.plant;
-  
+
   return (
     <>
-      <Link to={ `/pflanze/${plant.id}`} className="plantCardLink">
+      <Link to={`/pflanze/${plant.id}`} className="plantCardLink">
         <li className="plantCard shadow-light">
           <h2>{plant.name}</h2>
           <img src={plant.imageUrl} />

growbros-frontend/src/components/PlantDetails.tsx

@@ -3,79 +3,98 @@ import "font-awesome/css/font-awesome.min.css";
 import { useEffect, useState } from "react";
 import { Plant, PlantSchema } from "../utils/schemas";
 import { useParams } from "react-router";
+import { IBackendConnector } from "../utils/IBackendConnector";
+import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
 //TODO translateEnums fixen
 
 function PlantDetails() {
-  const { plantId } = useParams();
-  
+  const { id } = useParams();
+  console.log(id);
 
-  const  plant:Plant =  JSON.parse("")
+  const [plant, setPlant] = useState<Plant | null>(null);
+  const [error, setError] = useState({});
 
-  return (
-    <>
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        <div className="plantDetails">
-          <h1>{plant.name}</h1>
-          <img src={plant.imageUrl}></img>
-          <div className="lateinischerName infoBox">
-            <div className="title">Lateinischer Name</div>{" "}
-            <p>{plant.latinName}</p>
-          </div>
-          <div className="Beschreibung infoBox">
-            <div className="title">Beschreibung</div> <p>{plant.description}</p>
-          </div>
-          <div className="infoBox">
-            <div className="title">Herkunft</div>
-            <p>{plant.origin}</p>
-          </div>
-          <div className="infoBox">
-            <div className="title">Anbautipps</div> <p>{plant.growingTips}</p>
-          </div>
-          <div className="infoBox">
-            <div className="title">Anbauzeitraum</div>
-            <p>
-              Von Kalenderwoche {plant.plantWeekStart} bis Kalenderwoche{" "}
-              {plant.plantWeekEnd}
-            </p>
-          </div>
-          <div className="infoBox">
-            <div className="title">Erntezeitraum</div>
-            <p>
-              Von Kalenderwoche {plant.harvestWeekStart} bis Kalenderwoche{" "}
-              {plant.harvestWeekEnd}
-            </p>
-          </div>
-          <div className="infoBox">
-            <div className="title">Bodentyp</div>
-            {plant.groundType}
-          </div>
-          <div className="infoBox">
-            <div className="title">Nährstoffbedarf</div>
-            {plant.nutrientDemand}
-          </div>
-          <div className="infoBox">
-            <div className="title">Wasserbedarf</div>
-            <p>{plant.waterDemand}</p>
+  const bc: IBackendConnector = useGrowbrosFetcher();
+
+  useEffect(() => {
+    (async () => {
+      const result = await bc.getSinglePlant(parseInt(id!, 10));
+      console.log(result);
+      if (result.err) {
+        setError(result.err);
+      } else {
+        setPlant(result.value!);
+      }
+    })();
+  }, []);
+
+  if (plant)
+    return (
+      <>
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <div className="plantDetails">
+            <h1>{plant.name}</h1>
+            <img src={plant.imageUrl}></img>
+            <div className="lateinischerName infoBox">
+              <div className="title">Lateinischer Name</div>{" "}
+              <p>{plant.latinName}</p>
+            </div>
+            <div className="Beschreibung infoBox">
+              <div className="title">Beschreibung</div>{" "}
+              <p>{plant.description}</p>
+            </div>
+            <div className="infoBox">
+              <div className="title">Herkunft</div>
+              <p>{plant.origin}</p>
+            </div>
+            <div className="infoBox">
+              <div className="title">Anbautipps</div> <p>{plant.growingTips}</p>
+            </div>
+            <div className="infoBox">
+              <div className="title">Anbauzeitraum</div>
+              <p>
+                Von Kalenderwoche {plant.plantWeekStart} bis Kalenderwoche{" "}
+                {plant.plantWeekEnd}
+              </p>
+            </div>
+            <div className="infoBox">
+              <div className="title">Erntezeitraum</div>
+              <p>
+                Von Kalenderwoche {plant.harvestWeekStart} bis Kalenderwoche{" "}
+                {plant.harvestWeekEnd}
+              </p>
+            </div>
+            <div className="infoBox">
+              <div className="title">Bodentyp</div>
+              {plant.groundType}
+            </div>
+            <div className="infoBox">
+              <div className="title">Nährstoffbedarf</div>
+              {plant.nutrientDemand}
+            </div>
+            <div className="infoBox">
+              <div className="title">Wasserbedarf</div>
+              <p>{plant.waterDemand}</p>
+            </div>
+            <div className="infoBox">
+              <div className="title">Lichtbedarf</div>
+              <p>{plant.lightingDemand}</p>
+            </div>
           </div>
-          <div className="infoBox">
-            <div className="title">Lichtbedarf</div>
-            <p>{plant.lightingDemand}</p>
+          <div
+            className="buttons"
+            style={{
+              display: "flex",
+              justifyContent: "space-around",
+              margin: "0 0 40px 0",
+            }}
+          >
+            <ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
+            <ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
           </div>
         </div>
-        <div
-          className="buttons"
-          style={{
-            display: "flex",
-            justifyContent: "space-around",
-            margin: "0 0 40px 0",
-          }}
-        >
-          <ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
-          <ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
-        </div>
-      </div>
-    </>
-  );
+      </>
+    );
 }
 
 function ButtonAddToGarden({ plantId }: any) {