remake app ohome setup /notworking

src/components/GroceryList/groceries/List.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from 'react'
+//components
+import ListedItem from './ListedItem'
+import ModalEditItem from '../../modals/groceries/ModalEditItem';
+import ModalEditList from '../../modals/groceries/ModalEditList';
+// Styling
+import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, ButtonRemoveList, ButtonEditList, IconArrowDown, ListSizeWrapper } from './styles/list'
+//redux
+import { useSelector, useDispatch } from 'react-redux';
+import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
+import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
+import { View } from 'react-native';
+
+export default React.memo((props) => {
+    const items = useSelector(selectAllSortedItems)
+    const list = useSelector(state => state.lists.entities.find((list) => list._id === props.listId))
+
+    const [height, setHeight] = useState(0);
+    const ref = useRef(null);
+  
+    useEffect(() => {
+        setHeight(ref.current.clientHeight);
+    }, [list.open, items]); 
+  
+    const dispatch = useDispatch()
+
+
+    const [modalItemVisible, setModalItemVisible] = useState(false);
+    const [modalListVisible, setModalListVisible] = useState(false);
+
+    const itemList = items.filter(item => item.listId === props.listId).map((item, index) => {
+        return (
+            <ListedItem key={index} item={item} setVisible={setModalItemVisible} />
+        )
+    })
+    const removeList = () => {
+        if (window.confirm("Do you really want to remove this list and the groceries within")) {
+            dispatch(itemsRemovedByList(props.listId))
+            dispatch(listRemoved(props.listId))
+        }
+    }
+    return (
+        <Wrapper >
+            <WrapperListTitle onClick={() => { dispatch(toggleOpen(props.listId)) }}>
+                <View id="left">
+                    <ListTitle>{list.listName}</ListTitle>
+                    <ListSubtitle>{list.listDescription && list.listDescription}</ListSubtitle>
+                </View>
+                <View id="right">
+                    {list.open && <>
+                        <ButtonEditList onClick={() => setModalListVisible(true)} />
+                        <ButtonRemoveList onClick={removeList} />
+                    </>}
+                    <IconArrowDown visible={list.open.toString()} />
+                </View>
+            </WrapperListTitle>
+            <ListSizeWrapper height={height} visible={list.open} >
+                < WrapperList listLength={items.length} ref={ref}>
+                    {list.open && itemList}
+                    {
+                        itemList.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>
+                    }
+                    {items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
+                </WrapperList >
+                <ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
+            </ListSizeWrapper>
+        </Wrapper>
+    )
+})