remake app ohome setup /notworking

src/components/GroceryList/groceries/GroceryButtons.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+//components
+import ModalAddItem from '../../modals/groceries/ModalAddItem'
+import ModalAddList from '../../modals/groceries/ModalAddList'
+//styles
+import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperSelect, PlusIcon, MenuIcon, RemoveIcon, CheckIcon, ListIcon } from './styles/buttons'
+//redux
+import { useSelector, useDispatch } from 'react-redux'
+import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
+import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
+
+const SelectAllItemsButton = (props) => {
+    const dispatch = useDispatch()
+    const listId = useSelector(selectOpenListId)
+    const [toggleAnim, setToggleAnim] = useState(false)
+    const handlePress = () => {
+        listId && dispatch(checkAll(listId));
+        listId && setToggleAnim(!toggleAnim)
+    }
+    return (
+        <WrapperSelect toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
+            <CheckIcon />
+        </WrapperSelect>
+    )
+}
+const RemoveItemsButton = (props) => {
+    const dispatch = useDispatch()
+    const [toggleAnim, setToggleAnim] = useState(false)
+    const handlePress = () => {
+        if (window.confirm("Do you really want to remove the selected items?")) {
+            dispatch(itemsRemoved())
+            setToggleAnim(!toggleAnim)
+        }
+    }
+    return (
+        <WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
+            <RemoveIcon />
+        </WrapperRemove>
+    )
+}
+
+export const ContainerButtons = (props) => {
+    const [visible, setVisible] = useState(false);
+    return (
+        <>
+            <SelectAllItemsButton visible={visible} />
+            <RemoveItemsButton visible={visible} />
+            <WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
+                <MenuIcon />
+            </WrapperButtons >
+        </>
+    )
+}
+
+export const AddItemButton = (props) => {
+    const [visibleItem, setVisibleItem] = useState(false);
+    const [visibleList, setVisibleList] = useState(false);
+    const lists = useSelector(state => state.lists.entities)
+    if (lists.find((list) => list.open === true)) {
+        return (
+            <>
+                <WrapperAddItem toggle={visibleItem} onClick={() => setVisibleItem(true)}>
+                    <PlusIcon />
+                </WrapperAddItem>
+                <ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
+            </>
+        )
+    }
+    return (
+        <>
+            <WrapperAddList toggle={visibleList} onClick={() => setVisibleList(true)}>
+                <ListIcon />
+            </WrapperAddList>
+            <ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />
+        </>
+    )
+}