From 794a03f57676e8d531dea293ad01679b26495491 Mon Sep 17 00:00:00 2001
From: Lukas Karsch <lk224@hdm-stuttgart.de>
Date: Mon, 15 Jan 2024 19:26:09 +0100
Subject: [PATCH] #54 - quick actions now working, need to refresh page after
action. adjusted styling on plant cards
---
.../components/NavbarRegistrationAndLogin.tsx | 3 +-
.../src/components/PlantCard.tsx | 6 ++--
.../src/components/PlantsOverview.tsx | 4 +--
.../src/components/QuickActionButton.tsx | 35 ++++++++++++++-----
.../src/components/QuickActions.tsx | 12 +++----
growbros-frontend/src/pages/Wunschliste.tsx | 6 +---
.../src/stylesheets/PlantCard.css | 9 ++---
7 files changed, 46 insertions(+), 29 deletions(-)
diff --git a/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx b/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx
index f8584f0..46559a3 100644
--- a/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx
+++ b/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx
@@ -1,9 +1,10 @@
import {NavLink} from "react-router-dom";
+import "../stylesheets/Navbar.css"
function NavbarRegistrationAndLogin() {
return (
<nav>
- <ul>
+ <ul className="navBarList">
<li>
<NavLink className="title" to="/">
GrowBros
diff --git a/growbros-frontend/src/components/PlantCard.tsx b/growbros-frontend/src/components/PlantCard.tsx
index e41383e..4456c1a 100644
--- a/growbros-frontend/src/components/PlantCard.tsx
+++ b/growbros-frontend/src/components/PlantCard.tsx
@@ -1,12 +1,12 @@
import "../stylesheets/PlantCard.css";
import {Link} from "react-router-dom";
import {Plant} from "../utils/schemas";
-import {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import {QuickActionButtonType} from "./QuickActionButton.tsx";
import QuickActions from "./QuickActions.tsx";
type PlantCardProps = {
plant: Plant,
- quickActions?: QuickActionButtonProps[]
+ quickActions?: QuickActionButtonType[]
}
export default function PlantCard({plant, quickActions}: PlantCardProps) {
@@ -19,7 +19,7 @@ export default function PlantCard({plant, quickActions}: PlantCardProps) {
<h2>{plant.name}</h2>
</div>
</Link>
- <QuickActions quickActions={quickActions}/>
+ <QuickActions quickActions={quickActions} plantId={plant.id}/>
</li>
</>
);
diff --git a/growbros-frontend/src/components/PlantsOverview.tsx b/growbros-frontend/src/components/PlantsOverview.tsx
index c22f163..37151cb 100644
--- a/growbros-frontend/src/components/PlantsOverview.tsx
+++ b/growbros-frontend/src/components/PlantsOverview.tsx
@@ -1,10 +1,10 @@
import PlantCard from "./PlantCard";
import {Plant} from "../utils/schemas";
-import {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import {QuickActionButtonType} from "./QuickActionButton.tsx";
type PlantsOverviewProps = {
plants: Plant[],
- quickActions?: QuickActionButtonProps[]
+ quickActions?: QuickActionButtonType[]
}
export default function PlantsOverview({plants, quickActions}: PlantsOverviewProps) {
diff --git a/growbros-frontend/src/components/QuickActionButton.tsx b/growbros-frontend/src/components/QuickActionButton.tsx
index 0967505..074f42c 100644
--- a/growbros-frontend/src/components/QuickActionButton.tsx
+++ b/growbros-frontend/src/components/QuickActionButton.tsx
@@ -1,15 +1,34 @@
import "../stylesheets/QuickActions.css"
+import useGrowbrosFetcher from "../utils/useGrowbrosFetcher.ts";
+import HeartBrokenIcon from "@mui/icons-material/HeartBroken";
+import AgricultureIcon from "@mui/icons-material/Agriculture";
export type QuickActionButtonProps = {
- iconClassName: string,
- tooltip: string,
- onClick: () => void
+ type: QuickActionButtonType,
+ plantId: number
}
-function QuickActionButton({iconClassName, onClick, tooltip}: QuickActionButtonProps) {
- return (
- <button onClick={onClick} className={iconClassName + " quickActionButton"} title={tooltip}/>
- );
+export type QuickActionButtonType = "ADD_TO_WISHLIST" | "REMOVE_FROM_WISHLIST" | "ADD_TO_GARDEN" | "REMOVE_FROM_GARDEN"
+
+function QuickActionButton({type, plantId}: QuickActionButtonProps) {
+ const bc = useGrowbrosFetcher();
+
+ switch (type) {
+ case "ADD_TO_WISHLIST":
+ return <button onClick={() => bc.addToWishlist(plantId)} className={"fa fa-heart quickActionButton"}
+ title={"Add this plant to your wishlist"}/>
+ case "ADD_TO_GARDEN":
+ return <button onClick={() => bc.addToGarden(plantId)} className={"fa fa-leaf quickActionButton"}
+ title={"Add this plant to your garden"}/>
+ case "REMOVE_FROM_WISHLIST":
+ return (<button onClick={() => bc.removeFromWishlist(plantId)} className={"quickActionButton"}
+ title={"Remove this plant from your wishlist"}><HeartBrokenIcon sx={{fontSize: 19}}/>
+ </button>)
+ case "REMOVE_FROM_GARDEN":
+ return (<button onClick={() => bc.removeFromGarden(plantId)} className={"quickActionButton"}
+ title={"Remove this plant from your garden"}><AgricultureIcon/>
+ </button>)
+ }
}
-export default QuickActionButton;
\ No newline at end of file
+export default QuickActionButton;
diff --git a/growbros-frontend/src/components/QuickActions.tsx b/growbros-frontend/src/components/QuickActions.tsx
index 39d51d1..312c99a 100644
--- a/growbros-frontend/src/components/QuickActions.tsx
+++ b/growbros-frontend/src/components/QuickActions.tsx
@@ -1,17 +1,17 @@
-import QuickActionButton, {QuickActionButtonProps} from "./QuickActionButton.tsx";
+import QuickActionButton, {QuickActionButtonType} from "./QuickActionButton.tsx";
import "../stylesheets/QuickActions.css"
type QuickActionsProps = {
- quickActions?: QuickActionButtonProps[];
+ quickActions?: QuickActionButtonType[];
+ plantId: number;
}
-function QuickActions({quickActions}: QuickActionsProps) {
+function QuickActions({quickActions, plantId}: QuickActionsProps) {
if (quickActions) {
return <div className="quickActions">{quickActions.map(
(action, index) =>
- <QuickActionButton iconClassName={action.iconClassName}
- tooltip={action.tooltip}
- onClick={action.onClick}
+ <QuickActionButton plantId={plantId}
+ type={action}
key={index}
/>
)} </div>
diff --git a/growbros-frontend/src/pages/Wunschliste.tsx b/growbros-frontend/src/pages/Wunschliste.tsx
index d0aff19..f8a4173 100644
--- a/growbros-frontend/src/pages/Wunschliste.tsx
+++ b/growbros-frontend/src/pages/Wunschliste.tsx
@@ -69,11 +69,7 @@ function Wunschliste() {
/>
<button onClick={handleClearWishList}>Wunschliste leeren</button>
</div>
- <PlantsOverview plants={plants}quickActions={[{
- iconClassName: "fa fa-heart",
- onClick: () => console.log("clicked quick action"),
- tooltip: "TOOLTIP!"
- }]}/>
+ <PlantsOverview plants={plants} quickActions={["ADD_TO_GARDEN", "REMOVE_FROM_WISHLIST"]}/>
</>
);
}
diff --git a/growbros-frontend/src/stylesheets/PlantCard.css b/growbros-frontend/src/stylesheets/PlantCard.css
index 221269c..39d237f 100644
--- a/growbros-frontend/src/stylesheets/PlantCard.css
+++ b/growbros-frontend/src/stylesheets/PlantCard.css
@@ -1,4 +1,5 @@
.plantCard {
+ color: #ececec;
position: relative;
display: flex;
flex-direction: column;
@@ -20,9 +21,9 @@
padding: 1rem;
background: linear-gradient(
to bottom,
- rgba(220, 220, 220, 0),
- rgba(220, 220, 220, 0.45),
- rgba(220, 220, 220, 0.65)
+ rgba(20, 20, 20, 0),
+ rgba(20, 20, 20, 0.3),
+ rgba(0, 0, 0, 0.5)
);
}
@@ -34,7 +35,7 @@
}
.plantCard:hover {
- color: #4d5927;
+ color: white;
border-color: black;
box-shadow: 0 12px 24px rgb(24 24 24 / 15%);
}
--
GitLab