Skip to content
Snippets Groups Projects
Commit 0c715cb6 authored by Holzheu Hannah's avatar Holzheu Hannah
Browse files

added logic for buttons to add plants to garden or wishlist

parent 374d40b4
No related branches found
No related tags found
1 merge request!28Closes #40 : Custom useGrowbrosFetcher hook to make calls to the backend.
import "../stylesheets/PlantDetails.css";
import "font-awesome/css/font-awesome.min.css";
import { useParams } from "react-router-dom";
import { useState } from "react";
function PlantDetails(props: any) {
const plant = props.plant;
......@@ -64,27 +64,103 @@ function PlantDetails(props: any) {
margin: "0 0 40px 0",
}}
>
<ButtonAddToGarden></ButtonAddToGarden>
<ButtonAddToWishlist></ButtonAddToWishlist>
<ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
<ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
</div>
</div>
</>
);
}
function ButtonAddToGarden() {
function ButtonAddToGarden({ plantId }: any) {
const [status, setStatus] = useState<null | String>(null);
const token: String = "";
const handleButtonClick = async () => {
try {
const response = await fetch(
`http://localhost:8080/api/v1/garden/add/${plantId}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
}
);
if (response.status === 201) {
console.log("Pflanze wurde erfolgreich dem Garten hinzugefügt");
} else {
setStatus("Pflanze konnte nicht dem Garten hinzugefügt werden");
}
} catch (error) {
console.error("Error", error);
setStatus("Pflanze konnte nicht dem Garten hinzugefügt werden");
}
};
return (
<button>
<i className="fa fa-leaf"></i>
</button>
<>
{status && (
<div
className={`status-message ${
status.includes("erfolgreich") ? "success-message" : "error-message"
}`}
>
{status}
</div>
)}
<button onClick={handleButtonClick}>
<i className="fa fa-leaf"></i>
</button>
</>
);
}
function ButtonAddToWishlist() {
//TODO css für status message
function ButtonAddToWishlist({ plantId }: any) {
const [status, setStatus] = useState<null | String>(null);
const token: String = "";
const handleButtonClick = async () => {
try {
const response = await fetch(
`http://localhost:8080/api/v1/wishlist/add/${plantId}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
}
);
if (response.status === 201) {
console.log("Pflanze wurde erfolgreich der Wunschliste hinzugefügt");
} else {
setStatus("Pflanze konnte nicht der Wunschliste hinzugefügt werden");
}
} catch (error) {
console.error("Error", error);
setStatus("Pflanze konnte nicht der Wunschliste hinzugefügt werden");
}
};
return (
<button>
<i className="fa fa-heart"></i>
</button>
<>
{status && (
<div
className={`status-message ${
status.includes("erfolgreich") ? "success-message" : "error-message"
}`}
>
{" "}
{status}
</div>
)}
<button onClick={handleButtonClick}>
<i className="fa fa-heart"></i>
</button>
</>
);
}
......
......@@ -4,6 +4,7 @@ import PlantsOverview from "../components/PlantsOverview";
import { useState } from "react";
import FilterPage from "../components/FilterPage";
function Suche() {
return (
<>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment