diff --git a/src/components/groceryComponents/GroceryListButtons.js b/src/components/groceryComponents/GroceryListButtons.js index 862bca0..1017849 100644 --- a/src/components/groceryComponents/GroceryListButtons.js +++ b/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 ( dispatch(removeCheckedItems())}> + onPress={() => + Alert.alert( + "Warning", + "Are you sure you want to remove these items?", + [ + { text: "Cancel", }, + { text: "Remove", onPress: () => dispatch(removeCheckedItems()) } + ], + {cancelable: true,} + )}> ); diff --git a/src/components/groceryComponents/ProductButtons.js b/src/components/groceryComponents/ProductButtons.js index 3fbddc6..55c8c8b 100644 --- a/src/components/groceryComponents/ProductButtons.js +++ b/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'))}> {/* pop-up screen */} - + ); } +export const RemoveProductsButton = () => { + const dispatch = useDispatch(); + + return ( + + Alert.alert( + "Warning", + "Are you sure you want to remove these products?", + [ + { text: "Cancel", }, + { text: "Remove", onPress: () => dispatch(removeCheckedProducts()) } + ], + {cancelable: true,} + ) + }> + + {/* pop-up screen */} + + + ); +} const styles = StyleSheet.create({ buttonContainer: { @@ -38,5 +61,8 @@ const styles = StyleSheet.create({ AddNewProduct: { backgroundColor: COLORS.primary, }, + RemoveProducts: { + backgroundColor: COLORS.actionCancel + } }); \ No newline at end of file diff --git a/src/components/groceryComponents/StorageList.js b/src/components/groceryComponents/StorageList.js index 5b56b44..2c20fa8 100644 --- a/src/components/groceryComponents/StorageList.js +++ b/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); diff --git a/src/components/groceryComponents/modals/AddProductModal.js b/src/components/groceryComponents/modals/AddProductModal.js index 394d822..bdd6eae 100644 --- a/src/components/groceryComponents/modals/AddProductModal.js +++ b/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) diff --git a/src/redux/slices/groceryList/productsSlice.js b/src/redux/slices/groceryList/productsSlice.js index 873925e..f509ddb 100644 --- a/src/redux/slices/groceryList/productsSlice.js +++ b/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; \ No newline at end of file diff --git a/src/screens/storageManagement/Products.js b/src/screens/storageManagement/Products.js index b1ffdda..322234a 100644 --- a/src/screens/storageManagement/Products.js +++ b/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 ( {/* Scroll */} @@ -31,11 +31,14 @@ function Products() { return index.toString(); }} /> - {products.find(product=>product.modalVisible === true) ? : } + {products.find(product => product.modalVisible === true) ? : } {/* buttons */} + + + ); } @@ -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); \ No newline at end of file