#15 #16 added buttons to remove single plant from garden/ wishlist, icons need fix

growbros-frontend/src/components/PlantDetails.tsx

@@ -74,7 +74,9 @@ function PlantDetails() {
                                 }}
                             >
                                 <ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
+                                <ButtonRemoveFromGarden plantId={plant.id}></ButtonRemoveFromGarden>
                                 <ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
+                                <ButtonRemoveFromWishlist plantId={plant.id}></ButtonRemoveFromWishlist>
                             </div>
                         </div>
                 }
@@ -110,6 +112,33 @@ function ButtonAddToGarden({plantId}: any) {
     );
 }
 
+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) {
@@ -140,4 +169,31 @@ function ButtonAddToWishlist({plantId}: any) {
     );
 }
 
-export default PlantDetails;
+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;
\ No newline at end of file