Pfthb

Hi I am building a shopping cart and ran into problems on IE.(note everything works as expected on other browsers).

So my problem is for ex:
I have 5 items in a cart I click remove item on 1 item.
I refresh the page and that item is still there.
When I check my database for that item it doesn't exists anymore so it was deleted. So why am I still seeing that item that was deleted on the page?
This only happens in IE.

my component looks like this

class Cart extends Component 
 componentDidMount() 
 console.log('executed') //I get executed in the console so that works.
 this.props.fetchCart();
 

 removeItem(productId) 
 this.props.dispatch(removeItem(productId));
 

 render() 
 return (
 <ul className='list-item'>
 
 cart.items.map((item, index) => 
 return (
 <li className='list-group-item d-flex justify-content-between align-items-center' key=index>
 <img style= width: '150px', height: '100px' src=item.main_img />
 <h5>item.title</h5>
 <small>quantity item.quantity</small>
 <small>Price $item.price</small>
 <button
 onClick=() => this.removeItem(item.product_id)>Remove</button>
 </li>
 )
 )
 
 </ul>
 )
 


const mapStateToProps = (state) => 
 console.log(state.cart) //Always get 5 items instead of 4 which I should get 4 cause I deleted 1
return 
 cart: state.cart
 


const mapDispatchToProps = (dispatch) => 
 return bindActionCreators( dispatch, rmAlert , dispatch);
 

 export default connect(mapStateToProps, mapDispatchToProps)(Cart);

my saga for fetchCart:

 import call, put, takeLatest from 'redux-saga/effects';
 import FETCH_CART from '../../constants/cart';
 import fetchedCartSuccessful, fetchedCartError from 
 '../../actions/cart';
 import axios from 'axios';

 function* fetchCart() 
 try 
 const response = yield call([axios, axios.get], '/api/cart');

 yield put(fetchedCartSuccessful(response.data));
 catch (e) 
 yield put(fetchedCartError(e.response.data));
 
 

 export function* watchFetchCart() 
 yield takeLatest(FETCH_CART, fetchCart);
 

and my saga for removeItem

 import call, put, takeLatest from 'redux-saga/effects';
 import showAlert, rmAlert from '../../actions/alert';
 import REMOVE_ITEM_IN_CART from '../../constants/cart';
 import fetchCart from '../../actions/cart';
 import axios from 'axios';

function* removeItemInCart(action) 
 yield put(rmAlert());

let alert = ;

try 
 const response = yield call([axios, axios.post], '/cart/remove-item', 
 productId: action.productId
 );

 alert.alertClass = 'alert-success';
 alert.msg = response.data.success.msg;

 yield put(fetchCart());
 yield put(showAlert(alert));
 catch (e) 
 alert.alertClass = 'alert-info';
 alert.msg = e.response.data.error.msg;

 yield put(showAlert(alert));
 


export function* watchRemoveItemInCart() 
 yield takeLatest(REMOVE_ITEM_IN_CART, removeItemInCart)
 

On my back end where I grab the cart from mysql database and send it back in a response. I console.log('executing') to make sure it is executing and no console.log is shown in the console? I have no idea whats going on. Again this works as expected on chrome and Firefox.

 app.get('/api/cart', (req, res) => 
 const userId = req.signedCookies['user_cookie'];
 console.log('executing'); //no console log saying this executed ?

 const sql = `SELECT *, cart.quantity * products.price as price
 FROM cart
 LEFT JOIN products ON products.product_id = cart.product_id
 WHERE user_id='$userId'`;

 connection.query(sql, (err, result, fields) => 
 if (err) 
 return res.status(500).json(
 error: 
 msg: 'Something went wrong, couldn't GET cart'
 
 );
 

 let cart = quantity: 0, total: 0, items: ;

 result.map(item => 
 cart.quantity += item.quantity;
 cart.total += item.price;
 cart.items.push(item);
 );
 console.log(cart);
 res.setHeader('content-type', 'text/javascript');
 res.send(cart);
 );
);

how do I check how many items should be in my cart? I do that below by visiting this route

 app.get('/all-carts', (req, res) => 
 console.log(req.signedCookies['user_cookie'])
 const sql = `SELECT * FROM cart`;

 connection.query(sql, (err, results, feilds) => 
 console.log(results);
 res.setHeader('content-type', 'text/javascript');
 res.send(results);
 );
);

I visit that route and I get a response with an array of 4 items as expected cause I deleted 1. If I delete all the items I see an empty array. Yet when I view cart page I see 5 items being displayed still?

UPDATE -- when I clear browser history it shows the correct amount of items in the cart why do I have to clear browser history to see any updates on IE?

Try adding header 'pragma': 'no-cache' or 'Cache-Control': 'no-cache' to your axios get request call