Skip to content
Snippets Groups Projects
Commit 45cb2bcf authored by Blersch Lara's avatar Blersch Lara
Browse files

#15 merged main into wishlist-frontend and combined changes from both branches

parent 5a21cf76
No related branches found
No related tags found
1 merge request!41Wishlist frontend
Hide whitespace changes
Inline Side-by-side
growbros-frontend/src/components/DropDownFilter.tsx
+ 3
− 42
View file @ 45cb2bcf
import { useState } from "react";
import { propsDropDownFilter } from "../utils/commonTypes";
import "../stylesheets/DropDownFilter.css";
import "../pages/Wunschliste.tsx";
function DropDownFilter(props: PropsDropDownFilter) {
const options = props.options;
......@@ -9,7 +10,7 @@ function DropDownFilter(props: PropsDropDownFilter) {
const handleOptionChange = (event: any) => {
setSelectedOption(event.target.value);
props.filterOnChange!(event.target.value);
props.filterOnChange(event.target.value);
};
return (
......@@ -27,50 +28,10 @@ function DropDownFilter(props: PropsDropDownFilter) {
);
}
//TODO filteronchange ? weg wenn lara Garten fertig
type PropsDropDownFilter = {
options: Array<string>;
topic: string;
filterOnChange?: (selectedOption: string) => void;
};
export default DropDownFilter;
import { useState } from "react";
import "../pages/Wunschliste.tsx";
function DropDownFilter(props: PropsDropDownFilter) {
const options = props.options;
const topic = props.topic;
const [selectedOption, setSelectedOption] = useState("");
const handleOptionChange = (event: any) => {
setSelectedOption(event.target.value);
props.filterOnChange(event.target.value);
};
return (
<div >
<label>{topic}</label>
<select value={selectedOption} onChange={handleOptionChange}>
<option value=""></option>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
</div>
);
}
type PropsDropDownFilter = {
options: Array<string>;
topic: string;
filterOnChange: (selectedOption: string) => void;
};
export default DropDownFilter
\ No newline at end of file
export default DropDownFilter;
\ No newline at end of file
growbros-frontend/src/pages/Garten.tsx
+ 45
− 68
View file @ 45cb2bcf
......@@ -4,80 +4,39 @@ import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
import {Plant} from "../utils/schemas";
import {IBackendConnector} from "../utils/IBackendConnector";
import PlantsOverview from "../components/PlantsOverview";
import {useState, useEffect} from "react";
import PlantCard from "../components/PlantCard.tsx";
import DropDownFilter from "../components/DropDownFilter.tsx";
function Garten() {
const [plants, setPlantsInGarden] = useState<Plant[]>([]);
const [error, setError] = useState({});
const bc: IBackendConnector = useGrowbrosFetcher();
useEffect(() => {
(async () => {
const result = await bc.getGardenEntries();
if (result.err) {
setError(result.err);
} else {
setPlantsInGarden(result.value!);
}
})();
}, []);
return (
<>
<div style={{padding: "20px"}}>
<h2>Dein Garten</h2>
<DropDownFilter
topic={"Sortierung der Pflanzen im Garten"}
options={[
"neueste zuerst",
"als nächstes anpflanzbar",
"als nächstes erntbar",
]}
/>
</div>
<PlantsOverview plants={plants} />
</>
);
const [plants, setPlants] = useState<any[]>([]);
const [error, setError] = useState();
const token: String = "";
const [plants, setPlantsInGarden] = useState<Plant[]>([]);
const [error, setError] = useState({});
const [currentSort, setCurrentSort] = useState<string>("")
const bc: IBackendConnector = useGrowbrosFetcher();
useEffect(() => {
fetch("http://localhost:8080/api/v1/garden?" + new URLSearchParams({sort: currentSort}),
{
method: 'GET',
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
})
.then((res) => res.json())
.then((plants) => setPlants(plants))
.catch((err) => setError(err));
}, [setPlants, currentSort]);
(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(() => {
fetch("http://localhost:8080/api/v1/garden/remove/all",
{
method: 'GET',
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
})
.then((res) => res.json())
.then((plants) => setPlants(plants))
.catch((err) => setError(err));
}, [setPlants]);
(async () => {
const result = await bc.clearGarden();
if (result.err) {
setError(result.err);
} else {
setPlantsInGarden(result.value!);
}
})();
}, []);
}
}
......@@ -97,9 +56,28 @@ function Garten() {
}
}
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 (
/*return (
<>
<div>
<h2>Deine Wunschliste</h2>
......@@ -124,7 +102,6 @@ function Garten() {
</ul>
)}
</>
);
}
);*/
export default Garten;
export default Garten;
\ No newline at end of file
growbros-frontend/src/pages/Wunschliste.tsx
+ 46
− 85
View file @ 45cb2bcf
......@@ -6,52 +6,37 @@ import PlantsOverview from "../components/PlantsOverview";
import DropDownFilter from "../components/DropDownFilter";
function Wunschliste() {
const [plants, setPlantsInWishlist] = useState<Plant[]>([]);
console.log(plants);
const [error, setError] = useState({});
const [currentSort, setCurrentSort] = useState<string>("");
const bc: IBackendConnector = useGrowbrosFetcher();
const [plants, setPlants] = useState<any[]>([]);
const [error, setError] = useState();
const token: String = "";
const [plants, setPlantsInWishlist] = useState<Plant[]>([]);
console.log(plants);
const [error, setError] = useState({});
const [currentSort, setCurrentSort] = useState<string>("")
const bc: IBackendConnector = useGrowbrosFetcher();
useEffect(() => {
fetch("http://localhost:8080/api/v1/wishlist?" + new URLSearchParams({sort: currentSort}),
{
method: 'GET',
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
})
.then((res) => res.json())
.then((plants) => setPlants(plants))
.catch((err) => setError(err));
}, [setPlants, currentSort]);
(async () => {
const result = await bc.getWishlistEntries(currentSort);
if (result.err) {
setError(result.err);
} else {
setPlantsInWishlist(result.value!);
}
})();
}, [currentSort]);
const handleClearWishList = async () => {
if (confirm("Möchtest du wirklich alle Pflanzen aus deiner Wunschliste entfernen?" + "\n" +
"Diese Aktion kann nicht rückgängig gemacht werden.")) {
useEffect(() => {
fetch("http://localhost:8080/api/v1/wishlist/remove/all",
{
method: 'GET',
headers:
{
"Content-Type":
"application/json",
Authorization:
`Bearer ${token}`,
},
})
.then((res) => res.json())
.then((plants) => setPlants(plants))
.catch((err) => setError(err));
}, [setPlants]);
(async () => {
const result = await bc.clearWishlist();
if (result.err) {
setError(result.err);
} else {
setPlantsInWishlist(result.value!);
}
})();
}, []);
}
}
......@@ -63,58 +48,34 @@ function Wunschliste() {
case "als nächstes anpflanzbar":
setCurrentSort("plantDate");
break;
case "jetzt anpflanzbar":
case "als nächstes erntbar":
setCurrentSort("currentPlantable");
break;
default:
setCurrentSort("");
}
}
useEffect(() => {
(async () => {
const result = await bc.getWishlistEntries(currentSort);
if (result.err) {
setError(result.err);
} else {
setPlantsInWishlist(result.value!);
}
})();
}, [currentSort]);
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("currentPlantable");
break;
default:
setCurrentSort("");
}
};
};
return (
<>
<div style={{padding: "20px"}}>
<h2>Deine Wunschliste</h2>
<DropDownFilter
filterOnChange={handleSortOptions}
options={[
"neueste zuerst",
"als nächstes anpflanzbar",
"gerade anpflanzbar",
]}
topic={"Sortierung der Pflanzen in der Wunschliste"}
/>
</div>
<PlantsOverview plants={plants} />
</>
);
return (
<>
<div style={{padding: "20px"}}>
<h2>Deine Wunschliste</h2>
<DropDownFilter
filterOnChange={handleSortOptions}
topic={"Sortierung der Pflanzen in der Wunschliste"}
options={[
"neueste zuerst",
"als nächstes anpflanzbar",
"gerade anpflanzbar",
]}
/>
<button onClick={handleClearWishList}>Wunschliste leeren</button>
</div>
<PlantsOverview plants={plants}/>
</>
);
}
/*return (
<>
<div>
......@@ -141,6 +102,6 @@ function Wunschliste() {
)}
</>
);
}
}*/
export default Wunschliste;
export default Wunschliste;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment