Core Redux API Codecademy Store project - quantity input not working

I’ve followed all 15 steps in the Redux API Codecademy Store project, and watched the video walkthrough, however the final project specification (to be able to modify the quantity input from the dropdown) is not working. (Though the quantity does increase if you click “add to cart” button multiple times).

@siba1983 has posted they have this issue too, however there hasn’t been a response to them.

Thanks for any help you can provide. I’m new to Redux, and this is my first project using it.

Here is my gist for all the code.

The most relevant files for this bit of the project are:

Cart.js

import React from 'react';
import {
  calculateTotal,
  getCurrencySymbol,
} from '../../utilities/utilities.js';

// Import the changeItemQuantity() action creator.
import {changeItemQuantity} from './cartSlice.js';

export const Cart = (props) => {
  const { cart, currencyFilter, dispatch } = props;

  const onInputChangeHandler = (name, input) => {
    // If the user enters a bad value...
    if (input === '') {
      return;
    }

    // Otherwise, convert the input into a number and pass it along as the newQuantity.
    const newQuantity = Number(input);

    // Dispatch an action to change the quantity of the given name and quantity.
    dipatch(changeInputQuantity(name, newQuantity));

  };

  // Use the cart and currencyFilter slices to render their data.
  const cartElements = Object.keys(cart).map(createCartItem);

  const total =  calculateTotal(cart, currencyFilter);

  return (
    <div id="cart-container">
      <ul id="cart-items">{cartElements}</ul>
      <h3 className="total">
        Total{' '}
        <span className="total-value">
          {getCurrencySymbol(currencyFilter)}{total} {currencyFilter}
        </span>
      </h3>
    </div>
  );

  function createCartItem(name) {
    const item = cart[name];

    if (item.quantity === 0) {
      return;
    }

    return (
      <li key={name}>
        <p>{name}</p>
        <select
          className="item-quantity"
          value={item.quantity}
          onChange={(e) => {
            onInputChangeHandler(name, e.target.value);
          }}
        >
          {[...Array(100).keys()].map((_, index) => (
            <option key={index} value={index}>
              {index}
            </option>
          ))}
        </select>
      </li>
    );
  }
};

cartSlice.js

export const addItem = (itemToAdd) => {
  return {
    type: 'cart/addItem',
    payload: itemToAdd,
  };
};

// Create your changeItemQuantity action creator here.
export const changeItemQuantity = (name, newQuantity) => {
  return {
  type: 'cart/changeItemQuantity',
  payload: {name, newQuantity},
  };
};


const initialCart = {};
export const cartReducer = (cart = initialCart, action) => {
  switch (action.type) {
    case 'cart/addItem': {
      const { name, price } = action.payload;

      // if the item already exists, increase the quantity by 1, otherwise set it to 1
      const quantity = cart[name] ? cart[name].quantity + 1 : 1;
      const newItem = { price, quantity };

      // Add the new item to the cart (or replace it if it existed already)
      return { 
        ...cart, 
        [name]: newItem 
      };
    }
    case 'cart/changeItemQuantity': {
      const { name, newQuantity } = action.payload;
      const itemToUpdate = cart[name];

      // Create a copy of itemToUpdate and update the quantity prop.
    const updatedItem = {
      ...itemToUpdate,  
      quantity: newQuantity
      }
      // Return a copy of the cart with the updatedItem included.
      return {
        ...cart, 
        [name]: updatedItem
    };
  }
    default: {
      return cart;
    }
  }
};

I haven’t followed Redux, so I can’t help on the details. However, just out curiosity reviewing your code:

// Dispatch an action to change the quantity of the given name and quantity.
dipatch(changeInputQuantity(name, newQuantity));

Does it change anything correcting the typo on dispatch function?

Thanks for picking that up! I have fixed it, however unfortunately it has not resolved the issue.

This is an exercise done in the codecademy UI, so my next troubleshooting step will be to recreate the code on my own local environment, which has access to better debugging tools.

Looks like you have the wrong name for the action creator that you are passing it to dispatch:

    // Dispatch an action to change the quantity of the given name and quantity.
    dipatch(changeInputQuantity(name, newQuantity));

It is called changeItemQuantity and that is what you import from the cartSlice so see if it helps to fix that.

Lol. I just worked that out the harder way (created a local install so I could get the better error messages, came here to update the fix, but you beat me to it! ), when all it needed was better proofreading! Thanks so much for your keen eyes spotting this. I think it’s time I visited an optometrist!

1 Like

Seems I had two typo errors here - the dipatch (dispatch), and changeInputQuantity (should have been changeItemQuantity). :sweat_smile:

1 Like