#16 restart branch for clear separation of different branches

growbros-frontend/src/components/DropDownFilter.tsx

+import React from 'react'
+import { useState } from "react";
+
+function DropDownFilter(props: PropsDropDownFilter) {
+
+    const options = props.options;
+    const topic = props.topic;
+    const [selectedOption, setSelectedOption] = useState("");
+    //todo: add another const here for holding the url and sort parameter to filter the plants
+
+    const handleOptionChange = (event: any) => {
+        setSelectedOption(event.target.value);
+        //todo: implement a fetch here to get the filtered plants
+    };
+
+    return (
+        <div >
+            <label>{topic}</label>
+            <select value={selectedOption} onChange={handleOptionChange}>
+                <option value=""></option>
+                {options.map((option, index) => (
+                    <option key={index} value={option}>
+                        {option}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+}
+
+type PropsDropDownFilter = {
+    options: Array<string>;
+    topic: string;
+};
+
+export default DropDownFilter
\ No newline at end of file

growbros-frontend/src/pages/Wunschliste.tsx

-import { useEffect, useState } from "react";
-import PlantDetails from "../components/PlantDetails";
+import {useEffect, useState} from "react";
+import PlantCard from "../components/PlantCard.tsx";
+import DropDownFilter from "../components/DropDownFilter.tsx";
 
 function Wunschliste() {
   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));
+    fetch("http://localhost:8080/api/v1/wishlist")
+        .then((res) => res.json())
+        .then((plants) => setPlants(plants))
+        .catch((err) => setError(err));
   }, [setPlants]);
 
+  const handleClearWishList = async () => {
+    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")
+            .then((res) => res.json())
+            .then((plants) => setPlants(plants))
+            .catch((err) => setError(err));
+      }, [setPlants]);
+    }
+  }
+
   return (
-    <>
-      {error ? (
-        <p>Error fetching data</p>
-      ) : (
-        <ul style={{ display: "flex", gap: "1rem", width: "100%" }}>
-          {plants?.map((plant) => (
-            <PlantDetails plant={plant} key={plant.id} />
-          ))}
-        </ul>
-      )}
-    </>
+
+      <>
+        <div>
+          <h2>Deine Wunschliste</h2>
+          <DropDownFilter
+              topic={"Sortierung der Pflanzen in der Wunschliste"}
+              options={[
+                "neueste zuerst",
+                "als nächstes anpflanzbar",
+                "jetzt anpflanzbar",
+              ]}
+          />
+          <button onClick={handleClearWishList}>Wunschliste 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 Wunschliste;
+