Xtykutl

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