NewestAppCode

src/components/groceryComponents/GroceryListButtons.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';
+import { StyleSheet, TouchableOpacity, Alert} from 'react-native';
 //themes 
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { COLORS } from '../../themes/Colors';
@@ -54,7 +54,16 @@ export const RemoveItemsButton = () => {
     const dispatch = useDispatch();
     return (
         <TouchableOpacity style={[styles.buttonContainer, styles.RemoveItemsButton, { backgroundColor: COLORS.actionCancel }]}
-            onPress={() => dispatch(removeCheckedItems())}>
+            onPress={() => 
+                Alert.alert(
+                    "Warning",
+                    "Are you sure you want to remove these items?",
+                    [
+                        { text: "Cancel", },
+                        { text: "Remove", onPress: () => dispatch(removeCheckedItems()) }
+                    ], 
+                    {cancelable: true,}
+                )}>
             <MaterialCommunityIcons name="delete-forever-outline" color={COLORS.dp00} size={40} />
         </TouchableOpacity>
     );

src/components/groceryComponents/ProductButtons.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, Alert } from 'react-native';
 
 //components
 import AddProductModal from './modals/AddProductModal';
@@ -11,6 +11,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 //redux
 import { useDispatch } from 'react-redux';
 import { toggleVisibility } from '../../redux/slices/groceryList/toggleSlice';
+import { removeCheckedProducts } from '../../redux/slices/groceryList/productsSlice';
 
 
 export const AddProductButton = () => {
@@ -21,10 +22,32 @@ export const AddProductButton = () => {
             onPress={() => dispatch(toggleVisibility('addProductModalVisible'))}>
             <MaterialCommunityIcons name="tag-plus-outline" color={COLORS.dp00} size={40} />
             {/* pop-up screen */}
-            <AddProductModal/>
+            <AddProductModal />
         </TouchableOpacity>
     );
 }
+export const RemoveProductsButton = () => {
+    const dispatch = useDispatch();
+
+    return (
+        <TouchableOpacity style={[styles.buttonContainer, styles.RemoveProducts]}
+            onPress={() =>
+                Alert.alert(
+                    "Warning",
+                    "Are you sure you want to remove these products?",
+                    [
+                        { text: "Cancel", },
+                        { text: "Remove", onPress: () => dispatch(removeCheckedProducts()) }
+                    ], 
+                    {cancelable: true,}
+                )
+            }>
+            <MaterialCommunityIcons name="delete-forever-outline" color={COLORS.dp00} size={40} />
+            {/* pop-up screen */}
+            <AddProductModal />
+        </TouchableOpacity >
+    );
+}
 
 const styles = StyleSheet.create({
     buttonContainer: {
@@ -38,5 +61,8 @@ const styles = StyleSheet.create({
     AddNewProduct: {
         backgroundColor: COLORS.primary,
     },
+    RemoveProducts: {
+        backgroundColor: COLORS.actionCancel
+    }
 
 });

src/components/groceryComponents/StorageList.js

@@ -10,7 +10,13 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 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 findProductTag = (item) => {
+        let product = products.find((product) => product.id === item.id)
+        let tag
+        product ? tag = product.tag : 0
+        return tag
+    }
+    const storageFiltered = useSelector(state => state.storage.filter((item) =>findProductTag(item) === props.tag))
     const tag = useSelector(state => state.tags.find((tag) => tag.tagName === props.tag))
 
     const [visible, setVisible] = useState(false);

src/components/groceryComponents/modals/AddProductModal.js

@@ -48,7 +48,7 @@ export default AddProductModal = () => {
     //tags
     const toggleModal = () => {
         if (modalVisible && product !== '' && tags.find((listTag) => listTag.tagName === tag)) {
-                dispatch(productAdded(product, tag, price, image));
+                dispatch(productAdded(product, tag, price, image? image : 'https://www.redlobster.be/en/assets/img/255x370blank.png'));
                 setTagsList(tags.map((listTag) => listTag.tagName));
                 dispatch(toggleVisibility('addProductModalVisible'));
                 setProduct('');
@@ -64,7 +64,7 @@ export default AddProductModal = () => {
     const closeModal = () => {
         setTagsList(tags.map((listTag) => listTag.tagName));
         setProduct('');
-        setTag();
+        setTag('');
         setPrice();
         setImage('');
         setFocussed(false)

src/redux/slices/groceryList/productsSlice.js

@@ -138,6 +138,9 @@ const productsSlice = createSlice({
                 }
             }
         },
+        removeCheckedProducts(state) {
+            return state.filter(product => product.checked === false)
+        },
         checkToggle: {
             reducer(state, action) {
                 let product = state.find((product) => product.id === action.payload.id)
@@ -169,6 +172,6 @@ const productsSlice = createSlice({
     },
 });
 
-export const { productAdded, editProduct, checkToggle, modalToggle } = productsSlice.actions;
+export const { productAdded, editProduct, checkToggle, modalToggle , removeCheckedProducts} = productsSlice.actions;
 
 export default productsSlice.reducer;

src/screens/storageManagement/Products.js

@@ -4,7 +4,7 @@ import { useHeaderHeight } from '@react-navigation/stack';
 
 //dependencies\
 //components
-import { AddProductButton } from '../../components/groceryComponents/ProductButtons';
+import { AddProductButton, RemoveProductsButton } from '../../components/groceryComponents/ProductButtons';
 import ListedProduct from '../../components/groceryComponents/ListedProduct';
 
 import { COLORS } from '../../themes/Colors';
@@ -14,7 +14,7 @@ import { useSelector } from 'react-redux';
 
 
 function Products() {
-    const products = useSelector(state => state.products).slice().sort((a,b)=> a.tag.localeCompare(b.tag))
+    const products = useSelector(state => state.products).slice().sort((a, b) => a.tag.localeCompare(b.tag))
     return (
         <View style={[styles.container]}>
             {/* Scroll */}
@@ -31,11 +31,14 @@ function Products() {
                     return index.toString();
                 }}
             />
-            {products.find(product=>product.modalVisible === true) ? <EditProductModal /> : <View/>}
+            {products.find(product => product.modalVisible === true) ? <EditProductModal /> : <View />}
             {/* buttons */}
             <View style={styles.addProductView} >
                 <AddProductButton />
             </View>
+            <View style={styles.removeProductsView} >
+                <RemoveProductsButton />
+            </View>
         </View>
     );
 }
@@ -55,6 +58,11 @@ const styles = StyleSheet.create({
         position: 'absolute',
         right: 8,
         bottom: 10,
+    },
+    removeProductsView:{
+        position: 'absolute',
+        left: 8,
+        bottom: 10,
     }
 });
 export default React.memo(Products);