110 lines
4.5 KiB
JavaScript
110 lines
4.5 KiB
JavaScript
import React, { useState, useEffect } 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, WrapperRight, WrapperLeft } 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 { Alert, Platform, UIManager, FlatList, LayoutAnimation } from 'react-native';
|
|
|
|
if (
|
|
Platform.OS === "android" &&
|
|
UIManager.setLayoutAnimationEnabledExperimental
|
|
) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
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 dispatch = useDispatch()
|
|
const filteredItems = items.filter(item => item.listId === props.listId)
|
|
|
|
// if list gets opened
|
|
useEffect(() => {
|
|
if (list.open === true) {
|
|
setHeight(0.5)
|
|
}
|
|
if (list.open === true && filteredItems.length === 0) {
|
|
setHeight(0.5)
|
|
}
|
|
}, [list.open]);
|
|
// if item is added or removed
|
|
useEffect(() => {
|
|
if (list.open === true) {
|
|
setHeight(height + 1)
|
|
}
|
|
}, [items.length]);
|
|
|
|
|
|
const [modalItemVisible, setModalItemVisible] = useState(false);
|
|
const [modalListVisible, setModalListVisible] = useState(false);
|
|
|
|
const HandleAnimation = (event) => {
|
|
const height = event.nativeEvent.layout.height
|
|
LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
|
|
setHeight(height)
|
|
// console.log(height)
|
|
}
|
|
|
|
const removeList = () => {
|
|
Alert.alert(
|
|
"Warning",
|
|
"Are you sure you want to remove this list and the groceries within?",
|
|
[
|
|
{ text: "Cancel", },
|
|
{
|
|
text: "Remove", onPress: () => {
|
|
dispatch(itemsRemovedByList(props.listId))
|
|
dispatch(listRemoved(props.listId))
|
|
}
|
|
}
|
|
],
|
|
{ cancelable: true, }
|
|
)
|
|
}
|
|
return (
|
|
<Wrapper >
|
|
<WrapperListTitle onPress={() => { dispatch(toggleOpen(props.listId)) }}>
|
|
<WrapperLeft>
|
|
<ListTitle>{list.listName}</ListTitle>
|
|
<ListSubtitle>{list.listDescription && list.listDescription}</ListSubtitle>
|
|
</WrapperLeft>
|
|
<WrapperRight>
|
|
{list.open && <>
|
|
<ButtonEditList pressFunc={() => setModalListVisible(true)} />
|
|
<ButtonRemoveList pressFunc={removeList} />
|
|
</>}
|
|
<IconArrowDown visible={list.open.toString()} />
|
|
</WrapperRight>
|
|
</WrapperListTitle>
|
|
<ListSizeWrapper height={height} visible={list.open} >
|
|
< WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}>
|
|
{list.open &&
|
|
<FlatList style={{ width: '100%' }}
|
|
initialNumToRender={10}
|
|
maxToRenderPerBatch={5}
|
|
ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22, width: '100%', height: 30, alignSelf: 'center' }} >Add a grocery</ListSubtitle>}
|
|
data={filteredItems}
|
|
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} closeModal={() => setModalListVisible(false)} />
|
|
</ListSizeWrapper>
|
|
</Wrapper>
|
|
)
|
|
}) |