Edits + better layout

src/components/groceryComponents/GroceryListButtons.js

@@ -11,6 +11,7 @@ import AddItemModal from './modals/AddItemModal';
 import { useDispatch, useSelector } from 'react-redux';
 import { toggleVisibility } from '../../redux/slices/groceryList/toggleSlice';
 import { removeCheckedItems } from '../../redux/slices/groceryList/itemsSlice';
+import { pushItems } from '../../redux/slices/groceryList/storageSlice';
 
 
 export const AddItemButton = () => {
@@ -27,24 +28,32 @@ export const AddItemButton = () => {
 }
 export const AddNewRecipeButton = () => {
     return (
-        <TouchableOpacity style={[styles.buttonContainer, styles.AddNewProduct, { backgroundColor: COLORS.primaryVar2 }]}
+        <TouchableOpacity style={[styles.buttonContainer, styles.AddNewRecipeButton, { backgroundColor: COLORS.primaryVar2 }]}
             onPress={() => alert('hello')}>
             <MaterialCommunityIcons name="file-document-edit-outline" color={COLORS.dp00} size={40} />
         </TouchableOpacity>
     );
 }
 export const PushItemsToStorageButton = () => {
+    const dispatch = useDispatch();
+    const items = useSelector(state => state.items)
+    const products = useSelector(state => state.products)
+    const checkedItems = items.filter((item)=>item.checked && products.find((product)=>product.id === item.productId) !== undefined)
+    const dispatchAll = () =>{
+        dispatch(pushItems(checkedItems))
+        dispatch(removeCheckedItems())
+    }
     return (
-        <TouchableOpacity style={[styles.buttonContainer, styles.AddNewRecipe, { backgroundColor: COLORS.actionSend }]}
-            onPress={() => alert('lol')}>
-            <MaterialCommunityIcons name="cloud-download-outline" color={COLORS.dp00} size={40} />
+        <TouchableOpacity style={[styles.buttonContainer, styles.PushItemsToStorageButton, { backgroundColor: COLORS.actionSend }]}
+            onPress={() => dispatchAll()}>
+            <MaterialCommunityIcons name="cart-arrow-up" color={COLORS.dp00} size={40} />
         </TouchableOpacity>
     );
 }
 export const RemoveItemsButton = () => {
     const dispatch = useDispatch();
     return (
-        <TouchableOpacity style={[styles.buttonContainer, styles.downloadList, { backgroundColor: COLORS.actionCancel }]}
+        <TouchableOpacity style={[styles.buttonContainer, styles.RemoveItemsButton, { backgroundColor: COLORS.actionCancel }]}
             onPress={() => dispatch(removeCheckedItems())}>
             <MaterialCommunityIcons name="delete-forever-outline" color={COLORS.dp00} size={40} />
         </TouchableOpacity>
@@ -63,14 +72,14 @@ const styles = StyleSheet.create({
     addItem: {
         backgroundColor: COLORS.primary,
     },
-    AddNewProduct: {
+    AddNewRecipeButton: {
         backgroundColor: COLORS.primary,
     },
-    AddNewRecipe: {
+    PushItemsToStorageButton: {
         backgroundColor: COLORS.primary,
 
     },
-    downloadList: {
+    RemoveItemsButton: {
         backgroundColor: COLORS.primary,
 
     },

src/components/groceryComponents/ListedItem.js

@@ -1,42 +1,31 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, Suspense } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 //themes
 import { COLORS } from '../../themes/Colors';
+
+//components
+import EditItemModal from './modals/EditItemModal'
 //redux
 import { useDispatch, useSelector } from 'react-redux';
-import { checkToggle } from '../.././redux/slices/groceryList/itemsSlice';
+import { checkToggle, modalToggle } from '../.././redux/slices/groceryList/itemsSlice';
 
-
-export const ListedItem = (props) => {
+const ListedItem = (props) => {
 
     //redux
     const dispatch = useDispatch()
-    const products = useSelector(state => state.products)
-    const items = useSelector(state => state.items)
-    const tags = useSelector(state => state.tags)
-
-
-    let product;
-    const item = items.find((item) => item.productId === props.id);
-
-    if (products.find((product) => product.id === item.productId)) {
-        product = products.find((product) => product.id === item.productId);
-    }
-    else {
+    const item = useSelector(state => state.items.find((item) => item.productId === props.id))
+    let product = useSelector(state => state.products.find((product) => product.id === item.productId))
+    if (!product) {
         product = {
             productName: props.id,
-            tag:'no-tag',
+            tag: 'uncathegorized',
         }
-
     }
-
+    const tag = useSelector(state => state.tags.find((tag) => tag.tagName === product.tag))
     const dispatchAnim = () => {
         dispatch(checkToggle(item.productId));
     }
-
-    const tag = tags.find((tag)=>tag.tagName === product.tag);
-
     const scaleAnimValue = useRef(new Animated.Value(0)).current; // animation start value
     const colorAnimValue = useRef(new Animated.Value(0)).current; // animation start value
     const checkAnimValue = useRef(new Animated.Value(0)).current; // animation start value
@@ -106,33 +95,9 @@ export const ListedItem = (props) => {
 
 
     return (
-        <View style={{ flex: 1, paddingLeft: 8, paddingRight: 8, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }}>
-            <Animated.View style={[styles.listedItemStyle, {backgroundColor: tag.color + '33'},item.checked ? styles.listedItemChecked : {}, {
-                transform: [{
-                    scaleX: scaleAnimValue
-                },
-                {
-                    scaleY: scaleAnimValue
-                }
-                ]
-            }]} >
-                <TouchableOpacity style={{}}
-                    onPress={() => console.log(item.checked)}
-                    onLongPress={() => dispatchAnim()}>
-                    <Text style={styles.textItem}>{product.productName}</Text>
-                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end' }}>
-                        <Text style={styles.textAmount}>Amount: {item.amount}</Text>
-                        <Text style={styles.textPerson}>For: {item.person}</Text>
-                    </View>
-
-                    {item.details ? <Text style={styles.textDetails}>Details: {item.details}</Text> : <View />}
-                </TouchableOpacity>
-            </Animated.View>
-            <TouchableOpacity style={[styles.checkButton, { flex: 1 }]} onPress={() => dispatchAnim()}>
-                <Animated.View style={[styles.checkmark, item.checked ? {
-                    borderWidth: 0,
-                } : {}, {
-                    backgroundColor: interpolateColor,
+        <Suspense fallback={<Text>Loading</Text>}>
+            <View style={{ flex: 1, paddingLeft: 8, paddingRight: 8, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+                <Animated.View style={[styles.listedItemStyle, { backgroundColor: tag.color + '33' }, item.checked ? styles.listedItemChecked : {}, {
                     transform: [{
                         scaleX: scaleAnimValue
                     },
@@ -140,68 +105,119 @@ export const ListedItem = (props) => {
                         scaleY: scaleAnimValue
                     }
                     ]
-                },]} >
-                    <Animated.View style={[{
+                }]} >
+                    <TouchableOpacity style={{ flex: 1, }}
+                        onPress={() => dispatch(modalToggle(props.id))}
+                        onLongPress={() => dispatchAnim()}>
+                        <View style={styles.nameTag}>
+                            {item.person ? <Text style={styles.textPerson}>{item.person}</Text> : <View />}
+                        </View>
+                        <Text style={styles.textItem}>{product.productName}</Text>
+                        <Text style={styles.textAmount}>{item.amount}</Text>
+                        {item.details ? <Text style={styles.textDetails}>{item.details}</Text> : <View />}
+
+                    </TouchableOpacity>
+                </Animated.View>
+                <TouchableOpacity style={[styles.checkButton, { flex: 1 }]} onPress={() => dispatchAnim()}>
+                    <Animated.View style={[styles.checkmark, item.checked ? {
+                        borderWidth: 0,
+                    } : {}, {
+                        backgroundColor: interpolateColor,
                         transform: [{
-                            scaleX: checkAnimValue
+                            scaleX: scaleAnimValue
                         },
                         {
-                            scaleY: checkAnimValue
+                            scaleY: scaleAnimValue
                         }
                         ]
-                    }]}>
-                        <MaterialCommunityIcons name="check" color={COLORS.dp00} size={25} />
-                    </Animated.View>
+                    },]} >
+                        <Animated.View style={[{
+                            transform: [{
+                                scaleX: checkAnimValue
+                            },
+                            {
+                                scaleY: checkAnimValue
+                            }
+                            ]
+                        }]}>
+                            <MaterialCommunityIcons name="check" color={COLORS.dp00} size={25} />
+                        </Animated.View>
 
-                </Animated.View>
-            </TouchableOpacity>
-        </View>
+                    </Animated.View>
+                </TouchableOpacity>
+            </View>
+        </Suspense>
     );
 }
+export default React.memo(ListedItem);
+
 const height = 30;
 const styles = StyleSheet.create({
 
     listedItemStyle: {
         width: '90%',
+        minHeight: height + 30,
         marginBottom: height / 7,
 
         borderRadius: height / 2,
-        padding: 2,
-        paddingBottom: 3,
         backgroundColor: COLORS.dp03,
     },
     listedItemChecked: {
         backgroundColor: '#253f34',
     },
     textItem: {
+        width: '80%',
         flex: 1,
-        left: 8,
+        marginLeft: 10,
+        marginTop: 5,
         fontFamily: 'Roboto',
         fontSize: height * 0.65,
         color: COLORS.textW0 + 'cc',
     },
-    textAmount: {
-        flex: 1,
-        left: 30,
-        fontFamily: 'Roboto',
-        fontSize: height * 0.5,
-        color: COLORS.textW1,
-    },
-    textPerson: {
-        flex: 1,
-        left: 25,
-        fontFamily: 'Roboto',
-        fontSize: height * 0.5,
-        color: COLORS.textW1,
-    },
     textDetails: {
         flex: 1,
+        left: 10,
+
         marginBottom: 3,
-        left: 8,
         fontFamily: 'Roboto',
         fontSize: height * 0.5,
         color: COLORS.primary + 'aa',
     },
+    nameTag: {
+        backgroundColor: '#000000' + '33',
+        minWidth: '30%',
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+
+        right: 0,
+        bottom: 0,
+
+        borderTopLeftRadius: 10,
+        borderBottomRightRadius: height / 2,
+    },
+    textPerson: {
+        fontFamily: 'Roboto',
+        fontSize: height * 0.45,
+        color: COLORS.textW0 + 'cc',
+        padding: 5,
+        maxHeight: 40,
+    },
+    textAmount: {
+        position: 'absolute',
+        backgroundColor: '#000' + '3',
+        right: 5,
+        top: 5,
+        minWidth: 50,
+        borderTopRightRadius: height / 2,
+        borderRadius: height / 3,
+
+        paddingLeft: 5,
+        paddingRight: 10,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.55,
+        color: COLORS.textW0 + 'bb',
+    },
     checkmark: {
         height: 30,
         width: 30,

src/components/groceryComponents/ListedProduct.js

@@ -1,21 +1,25 @@
 import React, { useRef, useEffect } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+//components
+import EditProductModal from './modals/EditProductModal'
+
 //themes
 import { COLORS } from '../../themes/Colors';
 //redux
 import { useDispatch, useSelector } from 'react-redux';
-import { checkToggle } from '../.././redux/slices/groceryList/productsSlice';
+import { checkToggle, modalToggle } from '../.././redux/slices/groceryList/productsSlice';
 
 
 
-export const ListedProduct = (props) => {
+const ListedProduct = (props) => {
 
-    const products = useSelector(state => state.products)
-    const product = products.find((product) => product.id === props.id);
+    const product = useSelector(state => state.products.find((product) => product.id === props.id));
 
     const tags = useSelector(state => state.tags)
     const tag = tags.find((tag) => tag.tagName === product.tag);
+    //redux
+    const dispatch = useDispatch()
 
     const scaleAnimValue = useRef(new Animated.Value(0)).current; // animation start value
     const colorAnimValue = useRef(new Animated.Value(0)).current; // animation start value
@@ -78,12 +82,6 @@ export const ListedProduct = (props) => {
             ]).start()
 
     }, [product.checked])
-    //redux
-    const dispatch = useDispatch()
-
-    const dispatchAnim = () => {
-        dispatch(checkToggle(product.id));
-    }
     const interpolateColor = colorAnimValue.interpolate({
         inputRange: [0, 1],
         outputRange: ['rgb(22, 26, 30)', 'rgb(62, 131, 98)']
@@ -99,24 +97,24 @@ export const ListedProduct = (props) => {
                 }
                 ]
             }]} >
+
                 <TouchableOpacity style={[styles.listedItemButton]}
-                    onPress={() => alert('Not ready yet!!')}
-                    onLongPress={() => dispatchAnim()}>
+                    onPress={() => dispatch(modalToggle(product.id))}
+                    onLongPress={() => dispatch(checkToggle(product.id))}>
+
                     <View style={{ flex: 1 }}>
                         <Text style={styles.textItem}>{product.productName}</Text>
-                        <View style={{ flexDirection: 'row' }}>
-                            <Text style={[styles.textTags]}>Tag: </Text>
-                            <Text style={[styles.textTags, { color: tag.color, }]}>{tag.tagName}</Text>
-                        </View>
-                        <View style={{ flexDirection: 'row' }}>
-                            {product.price ? <Text style={styles.textPrice}>Price: </Text> : <View />}
-                            {product.price ? <Text style={[styles.textPrice, { color: '#C6A337', }]}>€{product.price}</Text> : <View />}
-                        </View>
+                        <Text style={[styles.textTags, { color: tag.color, }]}>{tag.tagName}</Text>
+                        {product.price ? <Text style={[styles.textPrice, { color: COLORS.price, }]}>€{product.price}</Text> : <View />}
                     </View>
                     <Image source={{ uri: product.image }} style={styles.image} />
+                    
+                    
+
                 </TouchableOpacity>
             </Animated.View>
-            <TouchableOpacity style={[styles.checkButton, { flex: 1 }]} onPress={() => dispatchAnim()}>
+
+            <TouchableOpacity style={[styles.checkButton, { flex: 1 }]} onPress={() => dispatch(checkToggle(product.id))}>
                 <Animated.View style={[styles.checkmark, product.checked ? {
                     borderWidth: 0,
                 } : {}, {
@@ -146,6 +144,7 @@ export const ListedProduct = (props) => {
         </View>
     );
 }
+export default React.memo(ListedProduct);
 
 const height = 30;
 const styles = StyleSheet.create({
@@ -192,7 +191,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         right: 0,
         top: 0,
-        bottom:0,
+        bottom: 0,
         width: 80,
         borderRadius: 15,
         opacity: 0.8,

src/components/groceryComponents/ListedStorageItem.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+//themes
+import { COLORS } from '../../themes/Colors';
+//redux
+import { useDispatch } from 'react-redux';
+import { changeAmount, removeItem } from '../../redux/slices/groceryList/storageSlice';
+
+
+const Hr = (props) => {
+    return (
+        <View style={{ backgroundColor: props.color, width: 1.0, height: props.height, borderRadius: 1, alignSelf: 'flex-end' }} />
+    )
+}
+let ListedStorageItem = ({product, storageItem, tag}) => {
+    const dispatch = useDispatch();
+    return (
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+        {/* delete button */}
+            {!storageItem.amount ? <TouchableOpacity style={[styles.deleteItem, {}]} onPress={() => dispatch(removeItem(storageItem.id))}>
+                <MaterialCommunityIcons name="window-close" color={COLORS.actionCancel + 'aa'} size={22} />
+            </TouchableOpacity> : <View style={{ width: 25 }} />}
+
+            <View style={[styles.listedItem, { backgroundColor: tag.color + '20' }]}>
+
+                <Text style={styles.textItem}>{product.productName}</Text>
+                <Text style={styles.textAmount}>{storageItem.amount}</Text>
+
+                <View style={styles.amountButtons}>
+
+                    {/* button increment amount */}
+                    <TouchableOpacity style={styles.amountIncrement} onPress={() => dispatch(changeAmount(storageItem.id, 1))}>
+                        <MaterialCommunityIcons name="plus" color={COLORS.textW0 + '77'} size={20} />
+
+                    </TouchableOpacity>
+
+                    <Hr color={COLORS.textW0 + '11'} height={'100%'} />
+                    {/* button decrement amount */}
+                    <TouchableOpacity style={styles.amountDecrement} onPress={() => storageItem.amount > 0 ? dispatch(changeAmount(product.id, -1)) : 0}
+                        onLongPress={() => dispatch(changeAmount(product.id, -storageItem.amount))}>
+                        <MaterialCommunityIcons name="minus" color={COLORS.textW0 + '77'} size={20} />
+
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>)
+
+}
+ListedStorageItem = React.memo(ListedStorageItem);
+export default ListedStorageItem;
+const height = 30;
+const styles = StyleSheet.create({
+    listedItem: {
+        borderTopLeftRadius: 15,
+        borderBottomLeftRadius: 15,
+        width: '90%',
+        paddingLeft: 8,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        marginTop: 2,
+        marginBottom: 2,
+    },
+    textItem: {
+        flex: 1,
+        left: 8,
+        marginTop: 2,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.65,
+        color: COLORS.textW0 + 'bb',
+    },
+    textAmount: {
+        width: '10%',
+        backgroundColor: '#000000' + '40',
+        paddingLeft: 3,
+        borderRadius: 6,
+        marginTop: 3,
+        marginBottom: 3,
+
+        marginRight: 3,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.6,
+        color: COLORS.textW1,
+    },
+    amountButtons: {
+        flexDirection: 'row',
+        marginTop: 3,
+        marginBottom: 3,
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
+        height: 25,
+        width: 70,
+        alignItems: 'center',
+        justifyContent: 'space-evenly',
+
+        backgroundColor: '#ffffff' + '10',
+    },
+    amountIncrement: {
+    },
+    amountDecrement: {
+    },
+    deleteItem: {
+        height: 27,
+        width: 27,
+        backgroundColor: '#ffffff' + '10',
+        borderRadius: 12.5,
+        marginLeft: 5,
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+})

src/components/groceryComponents/StorageList.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+
+//components
+import ListedStorageItem from './ListedStorageItem';
+//themes
+import { COLORS } from '../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+//redux
+import { useSelector, useDispatch } from 'react-redux';
+export default StorageList = (props) => {
+    const products = useSelector(state => state.products)
+    const storageFiltered = useSelector(state => state.storage.filter((item) => products.find((product) => product.id === item.id).tag === props.tag))
+    const tag = useSelector(state => state.tags.find((tag) => tag.tagName === props.tag))
+
+    const [visible, setVisible] = useState(false);
+
+    if (storageFiltered.length !== 0) {
+        return(
+            <View style={styles.container}>
+                <TouchableOpacity style={[styles.categoryButton]}
+                    onPress={() => setVisible(!visible)}>
+                    {visible ?
+                        <MaterialCommunityIcons name="menu-down" color={COLORS.textW3} size={28} />
+                        : <MaterialCommunityIcons name="menu-right" color={COLORS.textW3} size={28} />
+                    }
+                    <Text style={[styles.textItem, { color: tag.color + 'aa' }]}>{props.tag}</Text>
+                </TouchableOpacity>
+                <View style={[styles.list]}>
+                    {visible ? storageFiltered.map((storageItem, index) => {
+                        const product = products.find((product) => product.id === storageItem.id)
+                        return <ListedStorageItem key={index} product = {product} storageItem = {storageItem} tag = {tag}/>
+                    }) : <View />}
+                </View>
+            </View>
+        )
+    }
+    else {
+        return <View />
+    }
+}
+const height = 30;
+const styles = StyleSheet.create({
+    container: {
+        marginBottom: 5,
+    },
+    list: {
+        alignItems: 'flex-end',
+    },
+    categoryButton: {
+        flex: 1,
+        paddingLeft: 0,
+        paddingRight: 8,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+    },
+    listedItem: {
+        borderTopLeftRadius: 15,
+        borderBottomLeftRadius: 15,
+        width: '90%',
+        paddingLeft: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 2,
+        marginBottom: 2,
+    },
+    textItem: {
+        flex: 1,
+        left: 8,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.65,
+        color: COLORS.textW0 + 'bb',
+    },
+    textAmount: {
+        width: '10%',
+        backgroundColor: '#ffffff' + '10',
+        paddingLeft: 3,
+        borderRadius: 6,
+
+        marginRight: 3,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.6,
+        color: COLORS.textW1,
+    },
+    amountButtons: {
+        flexDirection: 'row',
+        marginTop: 3,
+        marginBottom: 3,
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
+        height: 25,
+        width: 70,
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        justifyContent: 'space-evenly',
+
+        backgroundColor: '#ffffff' + '10',
+    },
+    amountIncrement: {
+    },
+    amountDecrement: {
+    },
+    deleteItem: {
+        height: 27,
+        width: 27,
+        backgroundColor: '#ffffff' + '10',
+        borderRadius: 12.5,
+        marginLeft: 5,
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+})

src/components/groceryComponents/modals/AddItemModal.js

@@ -1,32 +1,32 @@
 import React, { useState } from 'react';
-import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, ScrollView, TouchableOpacityComponent } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, ScrollView , Image } from 'react-native';
 import Modal from 'react-native-modal';
 //themes 
 import { COLORS } from '../../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 //redux
 import { useDispatch, useSelector } from 'react-redux';
 import { itemAdded, amountUp } from '../../../redux/slices/groceryList/itemsSlice';
 import { toggleVisibility } from '../../../redux/slices/groceryList/toggleSlice';
 
+
 export default AddItemModal = () => {
     //redux
     const modalVisible = useSelector(state => state.toggle.addItemModalVisible);
 
     const products = useSelector(state => state.products);
-    const items = useSelector(state => state.items);
-
-    const dispatch = useDispatch();
     
+    const dispatch = useDispatch();
+
     let newProductsList = [];
     for (let i = 0; i < products.length; i++) {
         newProductsList.push(products[i].productName);
     }
 
-
     const [item, setItem] = useState('');
     const [focussed, setFocussed] = useState(false);
-    const [amount, setAmount] = useState('');
+    const [amount, setAmount] = useState();
     const [person, setPerson] = useState('');
     const [details, setDetails] = useState('');
 
@@ -47,39 +47,29 @@ export default AddItemModal = () => {
         setItem(text);
     };
     const toggleModal = () => {
-            if (modalVisible && item !== '' && amount !== '') {
-                if (products.find((product) => product.productName === item)) {     //find if item is in products , else create unregistered item
-                    const productId = products.find((product) => product.productName === item).id;
-                    if(!items.find((itemObj) => itemObj.productId === productId)){  //check if amount up needed
-                        dispatch(itemAdded(productId, amount, person, details));
-                    }
-                    else{
-                    }
-                }
-                else if (!items.find((itemObj) => itemObj.productId === item))      //unregistered item check for amount up
-                {
-                    dispatch(itemAdded(item, amount, person, details));
-                }
-                else{
-                    dispatch(amountUp(item,amount));
-                }
-                setItem('');
-                setAmount();
-                setPerson('');
-                setDetails('');
-                setProductsList(products.map((product) => product.productName));
+        if (modalVisible && item !== '' && 0 < amount) {
+            if (products.find((product) => product.productName === item)) {     //find if item is in products , else create unregistered item
+                const productId = products.find((product) => product.productName === item).id;
+                dispatch(itemAdded(productId, amount, person, details));
             }
+            else {      //unregistered
+                dispatch(itemAdded(item, amount, person, details));
+            }
+            setItem('');
+            setAmount();
+            setPerson('');
+            setDetails('');
+            setFocussed(false)
+            setProductsList(products.map((product) => product.productName));
+        }
 
-            else {
-                alert('You should give both a product and an amount');
-            }
+        else {
+            alert('You should give both a product and an amount');
+        }
         dispatch(toggleVisibility('addItemModalVisible'));
     };
     const closeModal = () => {
-        setItem('');
-        setAmount();
-        setPerson('');
-        setDetails('');
+        setFocussed(false)
         dispatch(toggleVisibility('addItemModalVisible'));
         setProductsList(products.map((product) => product.productName));
     };
@@ -96,19 +86,22 @@ export default AddItemModal = () => {
                 backgroundColor: COLORS.dp01,
 
             }}>
+                <Image source={{ uri: products.find((product) => product.productName === item) ? products.find((product) => product.productName === item).image : 'https://icons-for-free.com/iconfiles/png/512/linecon+products+round+icon-1320165923260225670.png'}}
+                    style={styles.image} />
+
                 <Text style={styles.modalHeaderText}>Add item</Text>
-                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="food" color={COLORS.textW0 + '55'} size={30} />
                     <TextInput
                         placeholder={'Product name'}
                         placeholderTextColor={'grey'}
                         style={styles.textInput}
-                        offFocus={() => setProductsList([])}
                         onChangeText={text => filterProductsList(text)}
                         value={item}
                         onFocus={() => setFocussed(true)}
                         onEndEditing={() => setFocussed(false)}
                     />
-
+                    {item ? <MaterialCommunityIcons style = {{right:15}}name="check" color={COLORS.primary} size={25} /> : <MaterialCommunityIcons style = {{right:10, bottom: 10,}}name="asterisk" color={COLORS.actionCancel + 'aa'} size={12} />}
                     <ScrollView style={styles.dropdown} keyboardShouldPersistTaps={'always'}>
 
                         {focussed ? productsList.map((product, index) =>
@@ -119,7 +112,8 @@ export default AddItemModal = () => {
 
                     </ScrollView>
                 </View>
-                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="label-percent-outline" color={COLORS.textW0 + '55'} size={30} />
                     <TextInput
                         placeholder={'Amount'}
                         placeholderTextColor={'grey'}
@@ -128,8 +122,10 @@ export default AddItemModal = () => {
                         value={amount}
                         keyboardType={'number-pad'}
                     />
+                    {amount ? <MaterialCommunityIcons style = {{right:15}}name="check" color={COLORS.primary} size={25} /> : <MaterialCommunityIcons style = {{right:10, bottom: 10,}}name="asterisk" color={COLORS.actionCancel + 'aa'} size={12} />}
                 </View>
-                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="account-supervisor-circle" color={COLORS.textW0 + '55'} size={30} />
                     <TextInput
                         placeholder={'For'}
                         placeholderTextColor={'grey'}
@@ -137,8 +133,10 @@ export default AddItemModal = () => {
                         onChangeText={text => setPerson(text)}
                         value={person}
                     />
+                    {person ? <MaterialCommunityIcons style = {{right:15}}name="check" color={COLORS.primary} size={25} /> : <View/>}
                 </View>
-                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="folder-information-outline" color={COLORS.textW0 + '55'} size={30} />
                     <TextInput
                         placeholder={'Additional details'}
                         placeholderTextColor={'grey'}
@@ -146,9 +144,10 @@ export default AddItemModal = () => {
                         onChangeText={text => setDetails(text)}
                         value={details}
                     />
+                    {details ? <MaterialCommunityIcons style = {{right:15}}name="check" color={COLORS.primary} size={25} /> : <View/>}
                 </View>
                 <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly', marginTop: 20, marginBottom: 10, }}>
-                    <TouchableOpacity title="Hide modal" style={styles.modalCloseButton} onPress={closeModal} >
+                    <TouchableOpacity onPress={closeModal} >
                         <Text style={styles.modalCloseButtonText}>Cancel</Text>
                     </TouchableOpacity>
                     <View style={{
@@ -159,7 +158,7 @@ export default AddItemModal = () => {
                         height: '80%',
 
                     }} />
-                    <TouchableOpacity title="Hide modal" style={styles.modalAddButton} onPress={toggleModal} >
+                    <TouchableOpacity onPress={toggleModal} >
                         <Text style={styles.modalAddButtonText}>Add item</Text>
                     </TouchableOpacity>
                 </View>
@@ -173,6 +172,18 @@ const styles = StyleSheet.create({
     modalAddItem: {
         margin: 0,
     },
+    image: {
+        position: 'absolute',
+        right:0,
+        top: 0,
+        bottom: 0,
+        opacity: 0.04,
+        width: 200,
+
+            
+        borderTopLeftRadius: 150,
+        borderBottomLeftRadius: 150,
+    },
     modalHeaderText: {
         opacity: 0.9,
         fontSize: 23,
@@ -187,20 +198,20 @@ const styles = StyleSheet.create({
     },
     modalAddButtonText: {
         opacity: 0.8,
-        fontSize: 16,
+        fontSize: 18,
         color: COLORS.primary,
         fontWeight: 'bold',
     },
     modalCloseButtonText: {
         opacity: 0.8,
-        fontSize: 16,
+        fontSize: 18,
         color: COLORS.primary,
         fontWeight: 'bold',
     },
     textInput: {
 
         height: 25,
-        width: '80%',
+        width: '70%',
         left: 10,
 
         borderBottomColor: COLORS.primary + 'aa',
@@ -209,12 +220,18 @@ const styles = StyleSheet.create({
         marginTop: 10,
         padding: 0,
         paddingLeft: 5,
-        paddingRight: 5,
+        paddingRight: 25,
 
         color: COLORS.textW0,
         fontSize: 18
 
     },
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start'
+    },
+
     dropdown: {
 
         zIndex: 1,
@@ -232,8 +249,8 @@ const styles = StyleSheet.create({
         zIndex: 1,
         width: 150,
         minHeight: 20,
-        borderBottomWidth: 1.2,
-        borderColor: '#666' + 'e',
+        borderBottomWidth: 1.0,
+        borderColor: '#666' + '5',
     },
     dropdownText: {
 

src/components/groceryComponents/modals/AddProductModal.js

@@ -1,10 +1,13 @@
 
 import React, { useState } from 'react';
 import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, ScrollView } from 'react-native';
+
+//dependencies
 import Modal from 'react-native-modal';
 
 //themes 
 import { COLORS } from '../../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 //redux
 import { useDispatch, useSelector } from 'react-redux';
@@ -23,14 +26,10 @@ export default AddProductModal = () => {
 
     //tags
     const tags = useSelector(state => state.tags)
-    let newTagsList = [];
-    for (let i = 0; i < tags.length; i++) {
-        newTagsList.push(tags[i].tagName);
-    }
-    const [tagsList, setTagsList] = useState(newTagsList);
-
+    const [tagsList, setTagsList] = useState(tags.map((listTag) => listTag.tagName));
     const [focussed, setFocussed] = useState(false);
 
+
     const filterTagsList = (text) => {
         let regex = new RegExp(text);
 
@@ -61,6 +60,7 @@ export default AddProductModal = () => {
         setProduct('');
         setTag('');
         setPrice();
+        setFocussed(false)
         setImage('https://icons-for-free.com/iconfiles/png/512/linecon+products+round+icon-1320165923260225670.png');
 
     };
@@ -70,7 +70,9 @@ export default AddProductModal = () => {
         setTag();
         setPrice();
         setImage('https://icons-for-free.com/iconfiles/png/512/linecon+products+round+icon-1320165923260225670.png');
+        setFocussed(false)
         dispatch(toggleVisibility('addProductModalVisible'));
+
     };
 
     return (
@@ -83,7 +85,6 @@ export default AddProductModal = () => {
                 borderRadius: 10,
                 padding: 5,
                 backgroundColor: COLORS.dp01,
-
             }}>
                 <Text style={styles.modalHeaderText}>Add product</Text>
 
@@ -108,7 +109,6 @@ export default AddProductModal = () => {
                                 placeholderTextColor={'grey'}
                                 style={[styles.textInput]}
                                 value={tag}
-                                offFocus={() => setTagsList([])}
                                 onChangeText={text => filterTagsList(text)}
                                 onFocus={() => setFocussed(true)}
                                 onEndEditing={() => setFocussed(false)}
@@ -136,7 +136,7 @@ export default AddProductModal = () => {
                                 placeholder={'Image url'}
                                 placeholderTextColor={'grey'}
                                 style={styles.textInput}
-                                onChangeText={text => { if (text !== '') { return setImage(text) } }}
+                                onChangeText={text => { if (text !== '') { return setImage(`https://www.googleapis.com/customsearch/v1?key=${product}&cx=017576662512468239146:omuauf_lfve&q=lectures`) } }}
                             />
                         </View>
                     </View>
@@ -168,7 +168,7 @@ export default AddProductModal = () => {
 
 const styles = StyleSheet.create({
     //modals
-    modalAddItem: {
+    modalAddProduct: {
         margin: 0,
     },
     modalHeaderText: {
@@ -236,7 +236,9 @@ const styles = StyleSheet.create({
 
         zIndex: 1,
         width: 150,
-        minHeight: 20
+        minHeight: 20,
+        borderBottomWidth: 1.0,
+        borderColor: '#666' + '5',
     },
     dropdownText: {
 

src/components/groceryComponents/modals/EditItemModal.js

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, FlatList, ScrollView } from 'react-native';
+//dependencies
+import Modal from 'react-native-modal';
+
+//themes 
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { COLORS } from '../../../themes/Colors';
+
+//redux
+import { useDispatch , useSelector} from 'react-redux';
+import { modalToggle, editItem } from '../../../redux/slices/groceryList/itemsSlice';
+
+export default EditItemModal = (props) => {
+
+    const item = useSelector(state => state.items.find((item) => item.modalVisible === true));
+    let product = useSelector(state => state.products.find((product) => product.id === item.productId))
+    if (!product) {
+        product = {
+            productName: props.id,
+            tag: 'uncathegorized',
+        }
+    }
+
+    const tags = useSelector(state => state.tags)
+    let tag = tags.find(tag => tag.tagName === product.tag)
+
+    const dispatch = useDispatch();
+
+    const [amount, setAmount] = useState(item.amount.toString());
+    const [person, setPerson] = useState(item.person);
+    const [details, setDetails] = useState(item.details);
+
+    const saveModal = () => {
+        dispatch(modalToggle(item.productId))
+        dispatch(editItem(item.productId, amount, person, details));
+    }
+    return (
+        <Modal isVisible={item.modalVisible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={saveModal}
+            onBackButtonPress={()=>dispatch(modalToggle(item.productId))}
+            swipeDirection={'down'}
+            onSwipeComplete={saveModal}
+            useNativeDriverForBackdrop
+            style={styles.modalEditItem} >
+            <View style={styles.container}>
+
+                <View style={{ width: '100%', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: tag.color + '22', borderRadius: 10, }}>
+                    {product.price ? <Text style={[styles.textPrice, { color: COLORS.textW0 + 'de', }]}>€{product.price}</Text> : <View />}
+                    <Image source={{ uri: product.image }}
+                        style={styles.image} />
+                    <Text style={[styles.textTags, { color: tag.color, }]}>{tag.tagName}</Text>
+                </View>
+                <Text style={styles.textItem}>{product.productName}</Text>
+
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="label-percent-outline" color={COLORS.textW0 + '55'} size={30} />
+                    <TextInput
+                        placeholder={'Amount'}
+                        placeholderTextColor={'grey'}
+                        style={[styles.textInput]}
+                        onChangeText={text => setAmount(text)}
+                        value={amount}
+                        keyboardType={'number-pad'}
+                    />
+                </View>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="account-supervisor-circle" color={COLORS.textW0 + '55'} size={30} />
+                    <TextInput
+                        placeholder={'For'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        onChangeText={text => setPerson(text)}
+                        value={person}
+                    />
+                </View>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="pencil-plus-outline" color={COLORS.textW0 + '55'} size={30} />
+                    <TextInput
+                        placeholder={'Additional details'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        onChangeText={text => setDetails(text)}
+                        value={details}
+                    />
+                </View>
+                    <TouchableOpacity style={styles.modalSaveButton} onPress={saveModal} >
+                        <Text style={styles.modalSaveButtonText}>Save</Text>
+                    </TouchableOpacity>
+            </View>
+
+
+        </Modal >
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
+        minHeight: '60%',
+        backgroundColor: COLORS.dp01,
+        alignItems: 'center',
+    },
+    modalEditItem: {
+        justifyContent: 'flex-end',
+        margin: 0,
+        padding: 0,
+        width: '100%',
+    },
+    image: {
+        marginTop: -70,
+        width: '50%',
+        height: 180,
+        alignSelf: 'flex-start',
+        borderTopRightRadius: 20,
+    },
+
+    textInput: {
+
+        height: 30,
+        width: '85%',
+        borderBottomColor: COLORS.primary + 'aa',
+        borderBottomWidth: 1,
+        borderRadius: 3,
+        marginBottom: 10,
+        padding: 0,
+        paddingLeft: 5,
+        paddingRight: 5,
+
+        color: COLORS.textW0 + 'dd',
+        fontSize: 20
+
+    },
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        width: '100%',
+        marginLeft: 5,
+    },
+    textItem: {
+        width: '100%',
+        alignSelf: 'flex-start',
+        padding: 5,
+        paddingLeft: 15,
+
+        opacity: 0.9,
+        fontSize: 24,
+        color: COLORS.textW0 + 'ff',
+        backgroundColor: '#000' + '3',
+    },
+    textPrice: {
+        paddingLeft: '52%',
+        position: 'absolute',
+        fontSize: 18,
+        color: COLORS.textW1,
+        backgroundColor: '#000' + '5',
+        padding: 5,
+        width: '100%',
+        borderTopRightRadius: 10,
+    },
+    textTags: {
+        left: 8,
+        marginTop: 35,
+        fontFamily: 'Roboto',
+        fontSize: 18,
+        color: COLORS.textW1,
+    },
+
+    modalSaveButtonText: {
+        opacity: 0.8,
+        fontSize: 20,
+        color: COLORS.primary,
+        fontWeight: 'bold',
+    },
+    modalSaveButton:{
+        marginTop: 10,
+        marginBottom: 10,
+    }
+
+
+})

src/components/groceryComponents/modals/EditProductModal.js

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, FlatList, ScrollView } from 'react-native';
+//dependencies
+import Modal from 'react-native-modal';
+
+//themes 
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { COLORS } from '../../../themes/Colors';
+
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { modalToggle, editProduct } from '../../../redux/slices/groceryList/productsSlice';
+
+export default EditProductModal = () => {
+
+    const product = useSelector(state => state.products.find((product) => product.modalVisible === true));
+    const dispatch = useDispatch();
+    const tags = useSelector(state => state.tags)
+    let tag = tags.find(tag => tag.tagName === product.tag)
+
+    const [productName, setProductName] = useState(product.productName);
+    const [tagName, setTagName] = useState(product.tag);
+    const [price, setPrice] = useState(product.price.toString());
+    const [imageURL, setImageURL] = useState(product.image);
+
+    const saveModal = () => {
+        dispatch(editProduct(product.id, productName, tagName, price, imageURL));
+        dispatch(modalToggle(product.id))
+    }
+    return (
+        <Modal isVisible={product.modalVisible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={saveModal}
+            onBackButtonPress={() => dispatch(modalToggle(product.id))}
+            swipeDirection={'down'}
+            onSwipeComplete={saveModal}
+            useNativeDriverForBackdrop
+            style={styles.modalEditItem} >
+            <View style={styles.container}>
+                <View style={{ width: '100%', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: tag.color + '22', borderRadius: 10, }}>
+                    <Image source={{ uri: product.image }}
+                        style={styles.image} />
+                </View>
+                <View style={styles.inputRow}>
+                    <TextInput
+                        placeholder={'Product'}
+                        placeholderTextColor={'grey'}
+                        style={[styles.textInput, styles.textItem]}
+                        onChangeText={text => setProductName(text)}
+                        value={productName}
+                    />
+
+                </View>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="tag-text-outline" color={COLORS.textW0 + '55'} size={30} />
+                    <TextInput
+                        placeholder={'Tag'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        onChangeText={text => setTagName(text)}
+                        value={tagName}
+                    />
+                </View>
+                <View style={styles.inputRow}>
+                    <MaterialCommunityIcons name="currency-usd" color={COLORS.textW0 + '55'} size={30} />
+                    <TextInput
+                        placeholder={'Price'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        onChangeText={text => setPrice(text)}
+                        keyboardType={'number-pad'}
+                        value={price}
+                    />
+                </View>
+                <TouchableOpacity style={styles.modalSaveButton} onPress={saveModal} >
+                    <Text style={styles.modalSaveButtonText}>Save</Text>
+                </TouchableOpacity>
+            </View>
+
+
+        </Modal >
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
+        minHeight: '60%',
+        backgroundColor: COLORS.dp01,
+        alignItems: 'center',
+    },
+    modalEditItem: {
+        justifyContent: 'flex-end',
+        margin: 0,
+        padding: 0,
+        width: '100%',
+    },
+    image: {
+        marginTop: -70,
+        width: '50%',
+        height: 180,
+        alignSelf: 'flex-start',
+        borderTopRightRadius: 20,
+    },
+
+    textInput: {
+
+        height: 30,
+        width: '85%',
+        borderBottomColor: COLORS.primary + 'aa',
+        borderBottomWidth: 1,
+        borderRadius: 3,
+        marginBottom: 10,
+        padding: 0,
+        paddingLeft: 5,
+        paddingRight: 5,
+
+        color: COLORS.textW0 + 'dd',
+        fontSize: 20
+
+    },
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        width: '100%',
+        marginLeft: 5,
+    },
+    textItem: {
+        width: '100%',
+        height: 40,
+        alignSelf: 'flex-start',
+        padding: 5,
+        paddingLeft: 15,
+
+        opacity: 0.9,
+        fontSize: 24,
+        color: COLORS.textW0 + 'ff',
+        backgroundColor: '#000' + '3',
+    },
+    textPrice: {
+        paddingLeft: '52%',
+        position: 'absolute',
+        fontSize: 18,
+        color: COLORS.textW1,
+        backgroundColor: '#000' + '5',
+        padding: 5,
+        width: '100%',
+        borderTopRightRadius: 10,
+    },
+    textTags: {
+        left: 8,
+        marginTop: 35,
+        fontFamily: 'Roboto',
+        fontSize: 18,
+        color: COLORS.textW1,
+    },
+
+    modalSaveButtonText: {
+        opacity: 0.8,
+        fontSize: 20,
+        color: COLORS.primary,
+        fontWeight: 'bold',
+    },
+    modalSaveButton: {
+        marginTop: 10,
+        marginBottom: 10,
+    }
+
+
+})