Garten.tsx

import {useState, useEffect} from "react";
import PlantCard from "../components/PlantCard.tsx";
import DropDownFilter from "../components/DropDownFilter.tsx";

function Garten() {

    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;