remake app ohome setup /notworking

src/components/recipes/addRecipe/Buttons.js

@@ -0,0 +1,51 @@
+import { useState } from "react"
+
+import {
+    WrapperAddRecipe, IconPlus,
+    WrapperOptions, IconOptions, WrapperOptionButtons, IconRemove, IconEdit
+} from "./styles/buttons"
+import { useDispatch } from "react-redux"
+import { removeRecipe } from "../../../redux/slices/recipesSlice"
+
+import { PlusIcon, WrapperAddItem } from "../../GroceryList/groceries/styles/buttons"
+import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"
+
+export const AddRecipeButton = () => {
+    return (
+        // < Link to="/recipes/addRecipe">
+            <WrapperAddRecipe>
+                <IconPlus />
+            </WrapperAddRecipe>
+        // </Link>
+    )
+}
+
+export const AddIngredientsButton = (props) => {
+    const [visible, setVisible] = useState(false)
+    return (<>
+        <WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}>
+            <PlusIcon />
+        </WrapperAddItem>
+        <ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />
+    </>
+    )
+}
+
+export const OptionsButtonRecipe = (props) => {
+    const dispatch = useDispatch()
+    const [toggled, setToggled] = useState(false)
+    const handleRemove = () => {
+        if (window.confirm("Do you really want to remove this recipe?")) {
+            dispatch(removeRecipe(props.id))
+        }
+    }
+    return (
+        <WrapperOptions toggled={toggled} >
+            <IconOptions toggled={toggled} onClick={() => setToggled(!toggled)} />
+            <WrapperOptionButtons toggled={toggled}>
+                <IconRemove onClick={() => handleRemove()} />
+                {/* <IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} /> */}
+            </WrapperOptionButtons>
+        </WrapperOptions>
+    )
+}