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.")) {
            const result = await bc.clearGarden();
            if (result.err) {
                setError(result.err);
            } else {
                setPlantsInGarden([]);
            }
        }
    }

    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;