#15 when filter option is selected, the page is reloaded; added button to clear the garden

growbros-frontend/src/pages/Garten.tsx

-import PlantsOverview from "../components/PlantsOverview";
+import {useState, useEffect} from "react";
+import PlantCard from "../components/PlantCard.tsx";
+import DropDownFilter from "../components/DropDownFilter.tsx";
 
 function Garten() {
-  return (
-    <div>
-      <h2>Dein Garten</h2>
-      <PlantsOverview />
-    </div>
-  );
+
+    const [plants, setPlants] = useState<any[]>([]);
+    const [error, setError] = useState();
+
+    const token: String = "";
+
+    const [currentSort, setCurrentSort] = useState<string>("")
+
+    useEffect(() => {
+        fetch("http://localhost:8080/api/v1/garden?" + new URLSearchParams({sort: currentSort}),
+            {
+                method: 'GET',
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+            })
+            .then((res) => res.json())
+            .then((plants) => setPlants(plants))
+            .catch((err) => setError(err));
+    }, [setPlants, currentSort]);
+
+    const handleClearGarden = async () => {
+        if (confirm("Möchtest du wirklich alle Pflanzen aus deinem Garten entfernen?" + "\n" +
+            "Diese Aktion kann nicht rückgängig gemacht werden.")) {
+            useEffect(() => {
+                fetch("http://localhost:8080/api/v1/garden/remove/all",
+                    {
+                        method: 'GET',
+                        headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${token}`,
+                        },
+                    })
+                    .then((res) => res.json())
+                    .then((plants) => setPlants(plants))
+                    .catch((err) => setError(err));
+            }, [setPlants]);
+        }
+    }
+
+    const handleSortOptions = async (selectedOption: string) => {
+        switch (selectedOption) {
+            case "neueste zuerst":
+                setCurrentSort("createdAt");
+                break;
+            case "als nächstes anpflanzbar":
+                setCurrentSort("plantDate");
+                break;
+            case "als nächstes erntbar":
+                setCurrentSort("harvestDate");
+                break;
+            default:
+                setCurrentSort("");
+        }
+    }
+
+
+
+    return (
+        <>
+            <div>
+                <h2>Deine Wunschliste</h2>
+                <DropDownFilter
+                    topic={"Sortierung der Pflanzen im Garten"}
+                    options={[
+                        "neueste zuerst",
+                        "als nächstes anpflanzbar",
+                        "als nächstes erntbar",
+                    ]}
+                    filterOnChange={handleSortOptions}
+                />
+                <button onClick={handleClearGarden}>Garten leeren</button>
+            </div>
+            {error ? (
+                <p>Error fetching data</p>
+            ) : (
+                <ul style={{display: "flex", gap: "1rem", width: "100%"}}>
+                    {plants?.map((plant) => (
+                        <PlantCard plant={plant} key={plant.id}/>
+                    ))}
+                </ul>
+            )}
+        </>
+    );
 }
 
 export default Garten;

growbros-frontend/src/pages/Wunschliste.tsx

@@ -28,7 +28,17 @@ function Wunschliste() {
         if (confirm("Möchtest du wirklich alle Pflanzen aus deiner Wunschliste entfernen?" + "\n" +
             "Diese Aktion kann nicht rückgängig gemacht werden.")) {
             useEffect(() => {
-                fetch("http://localhost:8080/api/v1/wishlist/remove/all")
+                fetch("http://localhost:8080/api/v1/wishlist/remove/all",
+                    {
+                        method: 'GET',
+                        headers:
+                            {
+                                "Content-Type":
+                                    "application/json",
+                                Authorization:
+                                    `Bearer ${token}`,
+                            },
+                    })
                     .then((res) => res.json())
                     .then((plants) => setPlants(plants))
                     .catch((err) => setError(err));
@@ -47,7 +57,8 @@ function Wunschliste() {
             case "jetzt anpflanzbar":
                 setCurrentSort("currentPlantable");
                 break;
-            default: setCurrentSort("");
+            default:
+                setCurrentSort("");
         }
     }
 
@@ -81,5 +92,4 @@ function Wunschliste() {
 }
 
 
-export default Wunschliste;
-
+export default Wunschliste;
\ No newline at end of file