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