Wolf/ohome-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modal Add item works

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 12:30:56 +01:00
parent e3c0555452
commit b4e68dbac4
31 changed files with 167 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/GroceryList/groceries/List.js
View File

@@ -1,4 +1,4 @@
import React, { useState , useEffect} from 'react'
import React, { useState, useEffect } from 'react'
//components
import ListedItem from './ListedItem'
import ModalEditItem from '../../modals/groceries/ModalEditItem';
@@ -9,29 +9,24 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
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';
import { FlatList, 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(100);
useEffect(() => {
setHeight(1);
}, [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))
@@ -47,22 +42,32 @@ export default React.memo((props) => {
</WrapperLeft>
<WrapperRight>
{list.open && <>
{/* <ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} /> */}
<ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} />
</>}
{/* <IconArrowDown visible={list.open.toString()} /> */}
<IconArrowDown visible={list.open.toString()} />
</WrapperRight>
</WrapperListTitle>
<ListSizeWrapper height={height} visible={list.open} >
< WrapperList listLength={items.length} onLayout={(event) => {setHeight(event.nativeEvent.layout.height)}}>
{list.open && itemList}
{
itemList.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>
< WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
{list.open &&
<FlatList style={{width: '100%'}}
initialNumToRender={20}
maxToRenderPerBatch={10}
// ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
data={items.filter(item => item.listId === props.listId)}
renderItem={({ item }) => (
<ListedItem item={item} setVisible={setModalItemVisible} />
)}
keyExtractor={(item, index) => {
return index.toString();
}}
/>
}
{items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
</WrapperList >
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
</ListSizeWrapper>
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
</ListSizeWrapper>
</Wrapper>
)
})