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<object>();
    const [currentSort, setCurrentSort] = useState<string>("")

    const bc: IBackendConnector = useGrowbrosFetcher();

    useEffect(() => {
        (async () => {
            const result = await bc.getGardenEntries(currentSort);
            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 {
                setError(undefined);
                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;
            case "alphabetisch sortiert":
            default:
                setCurrentSort("");
        }
    }

    return (
        <>
            <div style={{padding: "20px"}}>
                <h2>Dein Garten</h2>
                <DropDownFilter
                    filterOnChange={handleSortOptions}
                    topic={"Sortierung der Pflanzen im Garten"}
                    options={[
                        "alphabetisch sortiert",
                        "neueste zuerst",
                        "als nächstes anpflanzbar",
                        "als nächstes erntbar",
                    ]}
                />
                <button onClick={handleClearGarden}>Garten leeren</button>
            </div>
            {error && (
                <div style={{padding: "20px"}}>Es ist ein Fehler aufgetreten...</div>
            )}
            <PlantsOverview plants={plants} quickActions={["REMOVE_FROM_GARDEN"]}/>
        </>
    );
}

export default Garten;