PlantDetails.tsx

import "../stylesheets/PlantDetails.css";
import "font-awesome/css/font-awesome.min.css";
import {useEffect, useState} from "react";
import {Plant} from "../utils/schemas";
import {useParams} from "react-router";
import {IBackendConnector} from "../utils/IBackendConnector";
import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";

function PlantDetails() {
    const {plantId} = useParams();

    const [plant, setPlant] = useState<Plant | null>(null);
    const [error, setError] = useState<object>();

    const bc: IBackendConnector = useGrowbrosFetcher();

    useEffect(() => {
        (async () => {
            const result = await bc.getSinglePlant(Number(plantId!));
            if (result.err) {
                setError(result.err);
            } else {
                setPlant(result.value!);
            }
        })();
    }, [setPlant, setError]);

    if (plant) {
        const attributes = [
            {title: "Lateinischer Name", value: plant.latinName},
            {title: "Beschreibung", value: plant.description},
            {title: "Herkunft", value: plant.origin},
            {title: "Anbautipps", value: plant.growingTips},
            {
                title: "Anbauzeitraum",
                value: `Von Kalenderwoche ${plant.plantWeekStart} bis Kalenderwoche ${plant.plantWeekEnd}`,
            },
            {
                title: "Erntezeitraum",
                value: `Von Kalenderwoche ${plant.harvestWeekStart} bis Kalenderwoche ${plant.harvestWeekEnd}`,
            },
            {title: "Bodentyp", value: plant.groundType},
            {title: "Nährstoffbedarf", value: plant.nutrientDemand},
            {title: "Wasserbedarf", value: plant.waterDemand},
            {title: "Lichtbedarf", value: plant.lightingDemand},
        ];

        return (
            <>
                {
                    error
                        ? <p>FEHLER!</p>
                        : <div style={{display: "flex", flexDirection: "column"}}>
                            <div className="plantDetails">
                                <h1>{plant.name}</h1>
                                <img src={plant.imageUrl}></img>

                                {attributes.map(
                                    (attribute, index) =>
                                        !!attribute.value && (
                                            <div className="infoBox" key={index}>
                                                <div className="title">{attribute.title}</div>
                                                <p>{attribute.value}</p>
                                            </div>
                                        )
                                )}
                            </div>
                            <div
                                className="buttons"
                                style={{
                                    display: "flex",
                                    justifyContent: "space-around",
                                    margin: "0 0 40px 0",
                                }}
                            >
                                <ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
                                <ButtonRemoveFromGarden plantId={plant.id}></ButtonRemoveFromGarden>
                                <ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
                                <ButtonRemoveFromWishlist plantId={plant.id}></ButtonRemoveFromWishlist>
                            </div>
                        </div>
                }
            </>
        );
    }
}

function ButtonAddToGarden({plantId}: any) {
    const [status, setStatus] = useState<null | String>(null);

    const bc: IBackendConnector = useGrowbrosFetcher();

    const handleButtonClick = async () => {
        await bc.addToGarden(plantId);
    };

    return (
        <>
            {status && (
                <div
                    className={`status-message ${
                        status.includes("erfolgreich") ? "success-message" : "error-message"
                    }`}
                >
                    {status}
                </div>
            )}
            <button title="Zum Garten hinzufügen" onClick={handleButtonClick}>
                <i className="fa fa-leaf"></i>
            </button>
        </>
    );
}

function ButtonRemoveFromGarden({plantId}: any) {
    const [status, setStatus] = useState<null | String>(null);

    const bc: IBackendConnector = useGrowbrosFetcher();

    const handleButtonClick = async () => {
        await bc.removeEntryFromGarden(plantId);
    };

    return (
        <>
            {status && (
                <div
                    className={`status-message ${
                        status.includes("erfolgreich") ? "success-message" : "error-message"
                    }`}
                >
                    {status}
                </div>
            )}
            <button title="Aus dem Garten entfernen" onClick={handleButtonClick}>
                <i className="fa fa-spoon fa-rotate-180 fa-2x"></i>
            </button>
        </>
    );
}

//TODO status+error handling
//TODO css für status message
function ButtonAddToWishlist({plantId}: any) {
    const [status, setStatus] = useState<null | String>(null);

    const bc: IBackendConnector = useGrowbrosFetcher();

    const handleButtonClick = async () => {
        await bc.addToWishlist(plantId);
    };

    return (
        <>
            {status && (
                <div
                    className={`status-message ${
                        status.includes("erfolgreich") ? "success-message" : "error-message"
                    }`}
                >
                    {" "}
                    {status}
                </div>
            )}
            <button title="Zur Wunschliste hinzufügen" onClick={handleButtonClick}>
                <i className="fa fa-heart"></i>
            </button>
        </>
    );
}

function ButtonRemoveFromWishlist({plantId}: any) {
    const [status, setStatus] = useState<null | String>(null);

    const bc: IBackendConnector = useGrowbrosFetcher();

    const handleButtonClick = async () => {
        await bc.removeFromWishlist(plantId);
    };

    return (
        <>
            {status && (
                <div
                    className={`status-message ${
                        status.includes("erfolgreich") ? "success-message" : "error-message"
                    }`}
                >
                    {status}
                </div>
            )}
            <button title="Aus der Wunschliste entfernen" onClick={handleButtonClick}>
                <i className="fa-solid fa-heart-crack"></i>
            </button>
        </>
    );
}

export default PlantDetails;