#16 when dropDownFilter is changed, plants are fetch with the current sort parameter

growbros-frontend/src/components/DropDownFilter.tsx

 
 import { useState } from "react";
+import "../pages/Wunschliste.tsx";
 
 function DropDownFilter(props: PropsDropDownFilter) {
 
@@ -7,8 +8,10 @@ function DropDownFilter(props: PropsDropDownFilter) {
     const topic = props.topic;
     const [selectedOption, setSelectedOption] = useState("");
 
+
     const handleOptionChange = (event: any) => {
         setSelectedOption(event.target.value);
+        props.filterOnChange(event.target.value);
     };
 
     return (
@@ -29,6 +32,7 @@ function DropDownFilter(props: PropsDropDownFilter) {
 type PropsDropDownFilter = {
     options: Array<string>;
     topic: string;
+    filterOnChange: (selectedOption: string) => void;
 };
 
 export default DropDownFilter
\ No newline at end of file

growbros-frontend/src/pages/Wunschliste.tsx

@@ -3,66 +3,81 @@ import PlantCard from "../components/PlantCard.tsx";
 import DropDownFilter from "../components/DropDownFilter.tsx";
 
 function Wunschliste() {
-  const [plants, setPlants] = useState<any[]>([]);
-  const [error, setError] = useState();
+    const [plants, setPlants] = useState<any[]>([]);
+    const [error, setError] = useState();
 
-  let sort = ""
+    const token: String = "";
 
-  useEffect(() => {
-    fetch("http://localhost:8080/api/v1/wishlist",
-        {
-            method: 'GET',
-            body: sort
-        })
-        .then((res) => res.json())
-        .then((plants) => setPlants(plants))
-        .catch((err) => setError(err));
-  }, [setPlants]);
+    const [currentSort, setCurrentSort] = useState<string>("")
 
-  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")
+    useEffect(() => {
+        fetch("http://localhost:8080/api/v1/wishlist?" + 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]);
+    }, [setPlants, currentSort]);
+
+    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]);
+        }
     }
-  }
 
-  /*const handleSortOptions = async () => {
-      //sort = DropDownFilter.options.value;
-      //todo: how to get current selected option?
-  }*/
+    const handleSortOptions = async (selectedOption: string) => {
+        switch (selectedOption) {
+            case "neueste zuerst":
+                setCurrentSort("createdAt");
+                break;
+            case "als nächstes anpflanzbar":
+                setCurrentSort("plantDate");
+                break;
+            case "jetzt anpflanzbar":
+                setCurrentSort("currentPlantable");
+                break;
+            default: setCurrentSort("");
+        }
+    }
 
-  return (
+    return (
 
-      <>
-        <div>
-          <h2>Deine Wunschliste</h2>
-          <DropDownFilter
-              topic={"Sortierung der Pflanzen in der Wunschliste"}
-              options={[
-                "neueste zuerst",
-                "als nächstes anpflanzbar",
-                "jetzt anpflanzbar",
-              ]}
-              // onChange={handleSortOptions()} todo: how?s
-          />
-          <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>
-        )}
-      </>
-  );
+        <>
+            <div>
+                <h2>Deine Wunschliste</h2>
+                <DropDownFilter
+                    topic={"Sortierung der Pflanzen in der Wunschliste"}
+                    options={[
+                        "neueste zuerst",
+                        "als nächstes anpflanzbar",
+                        "jetzt anpflanzbar",
+                    ]}
+                    filterOnChange={handleSortOptions}
+                />
+                <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>
+            )}
+        </>
+    );
 }