51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
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>
|
|
)
|
|
} |