Redux State getting reset/overridden when new component loads - firebase

Question

All my cart items are held in the redux state and whenever I load a different component, the cart items are getting reset. So for example, in my cart I have 6 bananas selected for a total price of $3. I go to the Fruits page and add 2 more bananas. Instead of having 8 bananas total for a price of $4, the cart state gets reset when the Fruits component loads and I only end up with 2 bananas for $1. I think this is because in my Fruits page, I'm setting the state as I load products from Firebase and I think because from Firebase I'm setting the Bananas item, it doesn't have the quantity carried over from my redux cart.
let itemsRef = db.ref('/productInfo/0/Fruits');
class Fruits extends Component {
static navigationOptions = {
title: 'Fruits',
};
constructor(props) {
super(props);
this.state = {
items: [],
filtered: []
}
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
itemsRef.on('value', (snapshot) => {
let data = snapshot.val();
let items = Object.values(data);
this.setState({items});
this.setState({
filtered: items
});
});
}
componentWillReceiveProps(nextProps) {
this.setState({
filtered: nextProps.items
});
}
handleChange(e) {
let currentList = []
let newList = []
if (e.toString() !== "") {
currentList = this.state.items
newList = currentList.filter(item => {
const lc = item.name.toString().toLowerCase()
const filter = e.toString().toLowerCase()
return lc.includes(filter)
})
} else {
newList = this.state.items
}
this.setState({
filtered: newList
});
}
render() {
return (
<SafeAreaView style ={{flex:1, marginTop:30}}>
<Searchbar
placeholder="Search"
onChangeText= {(term) => { this.handleChange(term) }}
style = {{marginHorizontal: 20}}
/>
{
this.state.items.length > 0
? <CategoryProductsPage products={this.state.filtered} onPress={this.props.addItemToCart} width = {width}/>
: <Text></Text>
}
</SafeAreaView>
);
}
}
const mapDispatchToProps = (dispatch) => {
return {
addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART', payload: product })
}
}
export default connect(null, mapDispatchToProps)(Fruits);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Ideally, I want my redux cart state to be universal throughout my application and it shouldn't get changed unless the user increases or decreases the quantity. I'm only having this bug through the Category Components page and I believe its because of the way I'm showing the Firebase products and the code in my constructor and componentDidMount. The challenge I'm facing is being able to incorporate and import my Firebase products without changing the state.
The code for the cart:
import {ADD_TO_CART, REMOVE_FROM_CART, SUB_QUANTITY, ADD_QUANTITY} from './actions';
const initialState = {
cart: [
],
totalQuantity: 0,
total: 0.0
};
const updateDeleteProductList = (updateProduct, productList) => {
return productList.map(product => {
if (product.name === updateProduct.name) {
updateProduct.frequency -=1;
updateProduct.totalPrice = (parseFloat(updateProduct.totalPrice) - product.price).toFixed(2)
return updateProduct;
}
return product;
});
};
const updateDeleteAllProductList = (updateProduct, productList) => {
return productList.map(product => {
if (product.name === updateProduct.name) {
updateProduct.frequency = 0;
updateProduct.totalPrice = 0;
return updateProduct;
}
return product;
});
};
const updateAddProductList = (updateProduct, productList) => {
return productList.map(product => {
if (product.name === updateProduct.name) {
updateProduct.frequency +=1;
//state.totalPrice = (parseFloat(state.totalPrice) + count).toFixed(2)
updateProduct.totalPrice = (parseFloat(updateProduct.totalPrice) + product.price).toFixed(2)
return updateProduct;
}
return product;
});
};
const cartItems = (state = initialState, action) => {
switch(action.type) {
case ADD_TO_CART:
console.log("Cart product screen payload" + JSON.stringify(action.payload))
let addedItem = action.payload
//check if the action id exists in the addedItems
let existed_item= state.cart.find(item=> action.payload.name === item.name)
console.log("WHAT IS EXISTED ITEM " + JSON.stringify(existed_item))
if(existed_item)
{
// addedItem.frequency += 1
// addedItem.totalPrice = (parseFloat(addedItem.totalPrice) + action.payload.price).toFixed(2)
let updatedProductList = updateAddProductList(action.payload,state.cart);
return{
...state,
cart: updatedProductList,
total: (parseFloat(state.total) + addedItem.price).toFixed(2)
}
}
else{
addedItem.frequency = 1;
addedItem.totalPrice = (parseFloat(addedItem.totalPrice) + action.payload.price).toFixed(2)
//calculating the total
let newTotal = (parseFloat(state.total) + addedItem.price).toFixed(2)
return{
...state,
cart: [...state.cart, addedItem],
total : newTotal
}
}
case REMOVE_FROM_CART:
let itemToRemove = action.payload
console.log("REMOVE ALL" + JSON.stringify(action.payload))
let new_items = state.cart.filter(item=> action.payload.id !== item.id)
// let deletedProducts = updateDeleteAllProductList(action.payload, state.cart)
itemToRemove.totalPrice = 0
//calculating the total
let newTotal = state.total - (itemToRemove.price * itemToRemove.frequency )
//let newTotal = (parseFloat(state.total) - action.payload.totalPrice).toFixed(2)
return{
...state,
cart: new_items,
total: newTotal
}
case ADD_QUANTITY:
// let addItem = action.payload
// console.log('additem is' + JSON.stringify(addItem))
// addItem.frequency += 1
let updatedProductList = updateAddProductList(action.payload,state.cart);
let newTotalAfterAdd = (parseFloat(state.total) + action.payload.price).toFixed(2)
return{
...state,
cart: updatedProductList,
total: newTotalAfterAdd
}
case SUB_QUANTITY:
let lastItemGone = action.payload
//if the qt == 0 then it should be removed
if(action.payload.frequency === 1){
let new_items = state.cart.filter(item=> action.payload.id !== item.id)
lastItemGone.totalPrice = 0
let newTotal = (parseFloat(state.total) - action.payload.price).toFixed(2)
return{
...state,
cart: new_items,
total: newTotal
}
}
else {
// addedItem.frequency -= 1
let updatedProductList = updateDeleteProductList(action.payload,state.cart);
console.log("updatedProductlist" + JSON.stringify(updatedProductList))
// const newState = state.set( 'orderProducts', updatedProductList).set('lastOperation', action.type);
// return newState;
// let newCart = state.cart
// for (let i =0; i<newCart.length; i++){
// if(addedItem.name === newCart[i].name){
// newCart[i].frequency -=1
// }
// }
// console.log("yo new cart is" + JSON.stringify(newCart))
let newTotal = (parseFloat(state.total) - action.payload.price).toFixed(2)
return{
...state,
cart: updatedProductList,
total: newTotal
}
}
default:
return state;
}
}