diff --git a/src/components/GroceryList/groceries/List.js b/src/components/GroceryList/groceries/List.js index 37181dd..f5e4598 100644 --- a/src/components/GroceryList/groceries/List.js +++ b/src/components/GroceryList/groceries/List.js @@ -10,6 +10,7 @@ import { useSelector, useDispatch } from 'react-redux'; import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice' import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice' import { FlatList, View } from 'react-native'; +import { TouchableOpacity } from 'react-native-gesture-handler'; export default React.memo((props) => { const items = useSelector(selectAllSortedItems) @@ -42,8 +43,8 @@ export default React.memo((props) => { {list.open && <> - setModalListVisible(true)} /> - + setModalListVisible(true)} /> + } @@ -51,7 +52,7 @@ export default React.memo((props) => { < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}> {list.open && - Add a grocery} @@ -66,8 +67,8 @@ export default React.memo((props) => { } {items.find(item => item.modalVisible) && } - - + setModalListVisible(false)} /> + ) }) \ No newline at end of file diff --git a/src/components/GroceryList/groceries/styles/list.js b/src/components/GroceryList/groceries/styles/list.js index a51028d..c508ffe 100644 --- a/src/components/GroceryList/groceries/styles/list.js +++ b/src/components/GroceryList/groceries/styles/list.js @@ -60,15 +60,17 @@ export const ListSubtitle = styled(Text)` font-size: 17px; ` -const Close = () => +const Close = (props) => export const ButtonRemoveList = styled(Close)` margin: 4px 10px 4px 0px; ` -const Edit = () => +const Edit = (props) => export const ButtonEditList = styled(Edit)` + background-color: green; + width: 50px; margin: 4px 10px 4px 0px; ` diff --git a/src/components/GroceryList/products/ProductsList.js b/src/components/GroceryList/products/ProductsList.js index 3e4df0c..812e21d 100644 --- a/src/components/GroceryList/products/ProductsList.js +++ b/src/components/GroceryList/products/ProductsList.js @@ -21,7 +21,7 @@ const ProductsList = (props) => { } + ListHeaderComponent={} ListFooterComponent={} initialNumToRender={10} maxToRenderPerBatch={10} @@ -33,7 +33,7 @@ const ProductsList = (props) => { return index.toString(); }} /> - {products.find(product => product.modalVisible) && } + {products.find(product => product.modalVisible) != undefined && } ) } diff --git a/src/components/modals/groceries/ModalAddItem.js b/src/components/modals/groceries/ModalAddItem.js index dbfcd8f..eb4cc1e 100644 --- a/src/components/modals/groceries/ModalAddItem.js +++ b/src/components/modals/groceries/ModalAddItem.js @@ -88,13 +88,13 @@ const ModalAddItem = (props) => { setAmount(text)} + onChangeText={(text) => setAmount(text)} placeholder="Amount" /> {amount ? : } setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)} value={qt} - onChange={(text) => setQt(text)} + onChangeText={(text) => setQt(text)} placeholder="Qt." /> {focusedQt && @@ -104,22 +104,22 @@ const ModalAddItem = (props) => { setPerson(text)} + onChangeText={(text) => setPerson(text)} placeholder="For" /> setDetails(text.target.value)} + onChangeText={(text) => setDetails(text.target.value)} placeholder="Additional details" /> setFocusedTag(true)} onBlur={() => setFocusedTag(false)} + onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)} value={tag} - onChange={(text) => setTag(text)} + onChangeText={(text) => setTag(text)} placeholder="Tag" /> {focusedTag && diff --git a/src/components/modals/groceries/ModalAddList.js b/src/components/modals/groceries/ModalAddList.js index 0fa68ed..9fe604a 100644 --- a/src/components/modals/groceries/ModalAddList.js +++ b/src/components/modals/groceries/ModalAddList.js @@ -2,7 +2,7 @@ import React, { useState } from 'react' //styles import { - StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck + StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, ButtonText, Wrapper } from '../styles/modal' //redux import { useDispatch } from 'react-redux'; @@ -26,28 +26,33 @@ const ModalAddList = (props) => { } } return ( - - Add a grocery list - - setListName(text.target.value)} - // onKeyDown={(event) => handleKeyDown(event)} - placeholder="List name" /> - {/* {listName ? : } */} - - - setDescription(text.target.value)} - placeholder="List description" /> - - - - - - + + + Add a grocery list + + setListName(text)} + // onKeyDown={(event) => handleKeyDown(event)} + placeholder="List name" /> + {listName ? : } + + + setDescription(text)} + placeholder="List description" /> + + + + + + + ) } diff --git a/src/components/modals/groceries/ModalAddProduct.js b/src/components/modals/groceries/ModalAddProduct.js index f7a02fd..72b9313 100644 --- a/src/components/modals/groceries/ModalAddProduct.js +++ b/src/components/modals/groceries/ModalAddProduct.js @@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown' //styles import { - StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck + StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck, Wrapper, ButtonText } from '../styles/modal' import { StyledImage, IconProduct, IconTag, IconDollar, IconLink @@ -42,49 +42,55 @@ export const ModalAddProduct = (props) => { } } return ( - - Add product - - - setProductName(text.target.value)} - // onKeyDown={(event) => handleKeyDown(event)} - placeholder="Product name" /> - {productName ? : } - - - - setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }} - type="text" - value={tag} - onChange={(text) => setTag(text.target.value)} - placeholder="Tag" /> - {tag ? : } - - {focused && - tag.tagName)} text={tag} setElement={setTag} /> - } - - - setPrice(text.target.value)} - placeholder="Price" /> - - - - setImage(text.target.value)} - placeholder="Image link" /> - - {image && } - - - - - + + + Add product + + + setProductName(text)} + // onKeyDown={(event) => handleKeyDown(event)} + placeholder="Product name" /> + {productName ? : } + + + + setFocused(true)} onEndEditing={() => setFocused(false) } + value={tag} + onChangeText={(text) => setTag(text)} + placeholder="Tag" /> + {tag ? : } + + {focused && + tag.tagName)} text={tag} setElement={setTag} /> + } + + + setPrice(text)} + placeholder="Price" /> + + + + setImage(text)} + placeholder="Image link" /> + + {image != "" && } + + + + + + ) } \ No newline at end of file diff --git a/src/components/modals/groceries/ModalEditItem.js b/src/components/modals/groceries/ModalEditItem.js index cfb70da..9b629ad 100644 --- a/src/components/modals/groceries/ModalEditItem.js +++ b/src/components/modals/groceries/ModalEditItem.js @@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown' //styles import { - StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, InputSmall + StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper, ButtonText } from '../styles/modal' import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem' import { WrapperProduct, WrapperProductInfo, TextPrice, TextTag, StyledImage } from './styles/edit' @@ -32,7 +32,7 @@ const ModalEditItem = (props) => { const [focusedTag, setFocusedTag] = React.useState(false) let product = products.find((product) => product.productName === productName); - let tagState = tags.find(t=>t.tagName===tag) + let tagState = tags.find(t => t.tagName === tag) tagState = tagState ? tagState : tags[0] const handleSubmit = async () => { let amountObj = { @@ -61,80 +61,85 @@ const ModalEditItem = (props) => { props.setVisible(false) } return ( - - - {product && product.image && } - - € {price} - {tagState.tagName} - - - - - setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }} - type="text" - value={productName} - onChange={(text) => setProductName(text.target.value)} - // onKeyDown={(event) => handleKeyDown(event)} - placeholder="Product name" /> - {productName ? : } - - {focusedProduct && - product.productName)} text={productName} setElement={handleDropdownPress} /> - } - - - setAmount(text.target.value)} - placeholder="Amount" /> - {amount ? : } - setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }} - type="text" - value={qt} - onChange={(text) => setQt(text.target.value)} - placeholder="Qt." /> - - {focusedQt && - - } - - - setPerson(text.target.value)} - placeholder="For" /> - - - - setDetails(text.target.value)} - placeholder="Additional details" /> - - - - setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }} - value={tag} - onChange={(text) => setTag(text.target.value)} - placeholder="Tag" /> - - {focusedTag && - t.tagName)} text={tag} setElement={setTag} /> - } - - - setPrice(text.target.value)} - placeholder="Price" /> - - - - + + + + {product != undefined && product.image != "" && } + + € {price} + {tagState.tagName} + + + + + setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)} + value={productName} + onChangeText={(text) => setProductName(text)} + // onKeyDown={(event) => handleKeyDown(event)} + placeholder="Product name" /> + {productName ? : } + + {focusedProduct && + product.productName)} text={productName} setElement={handleDropdownPress} /> + } + + + setAmount(text)} + placeholder="Amount" /> + {amount ? : } + setFocusedQt(true)} onEndEditing={() => { setFocusedQt(false) }} + value={qt} + onChangeText={(text) => setQt(text)} + placeholder="Qt." /> + + {focusedQt && + + } + + + setPerson(text)} + placeholder="For" /> + + + + setDetails(text)} + placeholder="Additional details" /> + + + + setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)} + value={tag} + onChangeText={(text) => setTag(text)} + placeholder="Tag" /> + + {focusedTag && + t.tagName)} text={tag} setElement={setTag} /> + } + + + setPrice(text)} + placeholder="Price" /> + + + + + ) } diff --git a/src/components/modals/groceries/ModalEditList.js b/src/components/modals/groceries/ModalEditList.js index 0ee35af..638648a 100644 --- a/src/components/modals/groceries/ModalEditList.js +++ b/src/components/modals/groceries/ModalEditList.js @@ -2,7 +2,7 @@ import React, { useState } from 'react' //styles import { - StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck + StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText } from '../styles/modal' //redux import { useDispatch, useSelector } from 'react-redux'; @@ -10,40 +10,45 @@ import { listEdited } from '../../../redux/slices/groceryList/listsSlice'; const ModalEditList = (props) => { const dispatch = useDispatch() - const list = useSelector(state => state.lists.entities.find(list=>list._id === props.id)) + const list = useSelector(state => state.lists.entities.find(list => list._id === props.id)) const [listName, setListName] = useState(list.listName); const [description, setDescription] = useState(list.listDescription); const handleSubmit = () => { if (props.visible && listName !== '') { - dispatch(listEdited({listName, _id: props.id, listDescription: description })); - props.setVisible(false) + dispatch(listEdited({ listName, _id: props.id, listDescription: description })); + props.closeModal() } else { alert('You need to give a list name'); } } return ( - props.setVisible(false)}> - Edit the list - - setListName(text.target.value)} - placeholder="List name" /> - {listName ? : } - - - setDescription(text.target.value)} - placeholder="List description" /> - - - - - - + + + Edit the list + + setListName(text)} + placeholder="List name" /> + {listName ? : } + + + setDescription(text)} + placeholder="List description" /> + + + + + + + ) } diff --git a/src/components/modals/groceries/ModalEditProduct.js b/src/components/modals/groceries/ModalEditProduct.js index 10e882b..46bcad0 100644 --- a/src/components/modals/groceries/ModalEditProduct.js +++ b/src/components/modals/groceries/ModalEditProduct.js @@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown' //styles import { - StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck + StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText } from '../styles/modal' import { IconProduct, IconTag, IconDollar, IconLink @@ -30,10 +30,10 @@ const ModalEditProduct = (props) => { if (!usedTag) { usedTag = tags[0] } - const handleSubmit = () => { + const handleSubmit = () => { if (props.visible && productName) { dispatch(productRemoved(product._id)) - dispatch(productAdded({ productName, tag: tags.find(t=>t.tagName===tag) ? tag : "uncategorized", price, image})) + dispatch(productAdded({ productName, tag: tags.find(t => t.tagName === tag) ? tag : "uncategorized", price, image })) props.setVisible(false); } @@ -46,52 +46,57 @@ const ModalEditProduct = (props) => { props.setVisible(false) } return ( - - - {image && } - - € {price} - {usedTag.tagName} - - - - - setProductName(text.target.value)} - // onKeyDown={(event) => handleKeyDown(event)} - placeholder="Product name" /> - {productName ? : } - - - - setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }} - type="text" - value={tag} - onChange={(text) => setTag(text.target.value)} - placeholder="Tag" /> - {tag ? : } - - {focused && - tag.tagName)} text={tag} setElement={setTag} /> - } - - - setPrice(text.target.value)} - placeholder="Price" /> - - - - setImage(text.target.value)} - placeholder="Image link" /> - - - - + + + + {image != "" && } + + € {price} + {usedTag.tagName} + + + + + setProductName(text)} + // onKeyDown={(event) => handleKeyDown(event)} + placeholder="Product name" /> + {productName ? : } + + + + setFocused(true)} onEndEditing={() => setFocused(false)} + value={tag} + onChangeText={(text) => setTag(text)} + placeholder="Tag" /> + {tag ? : } + + {focused && + tag.tagName)} text={tag} setElement={setTag} /> + } + + + setPrice(text)} + placeholder="Price" /> + + + + setImage(text)} + placeholder="Image link" /> + + + + + ) } diff --git a/src/components/modals/groceries/styles/addProduct.js b/src/components/modals/groceries/styles/addProduct.js index d4dba49..774ce67 100644 --- a/src/components/modals/groceries/styles/addProduct.js +++ b/src/components/modals/groceries/styles/addProduct.js @@ -13,7 +13,7 @@ export const StyledImage = styled(Image)` border-radius: 15px; ` const iconSize = 32 -export const IconProduct = () => +export const IconProduct = () => export const IconTag = () =>