Garten.tsx

import DropDownFilter from "../components/DropDownFilter";
import {useEffect, useState} from "react";
import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
import {Plant} from "../utils/schemas";
import {IBackendConnector} from "../utils/IBackendConnector";
import PlantsOverview from "../components/PlantsOverview";

function Garten() {
    const [plants, setPlantsInGarden] = useState<Plant[]>([]);
    const [error, setError] = useState({});
    const [currentSort, setCurrentSort] = useState<string>("")

    const bc: IBackendConnector = useGrowbrosFetcher();

    useEffect(() => {
        (async () => {
            const result = await bc.getGardenEntries();
            if (result.err) {
                setError(result.err);
            } else {
                setPlantsInGarden(result.value!);
            }
        })();
    }, [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(() => {
                (async () => {
                    const result = await bc.clearGarden();
                    if (result.err) {
                        setError(result.err);
                    } else {
                        setPlantsInGarden(result.value!);
                    }
                })();
            }, []);
        }
    }

    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 style={{padding: "20px"}}>
                <h2>Dein Garten</h2>
                <DropDownFilter
                    filterOnChange={handleSortOptions}
                    topic={"Sortierung der Pflanzen im Garten"}
                    options={[
                        "neueste zuerst",
                        "als nächstes anpflanzbar",
                        "als nächstes erntbar",
                    ]}
                />
                <button onClick={handleClearGarden}>Garten leeren</button>
            </div>
            <PlantsOverview plants={plants}/>
        </>
    );
}


    /*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;