Codecademy export

App.js

import React from 'react';
import { Inventory } from '../features/inventory/Inventory.js';
import { CurrencyFilter } from '../features/currencyFilter/CurrencyFilter.js';
import { Cart } from '../features/cart/Cart.js';

export const App = (props) => {

  const { state, dispatch } = props;

  return (
    <div>
      <CurrencyFilter
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />
      <Inventory
        inventory={state.inventory}
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />
      <Cart
        cart={state.cart}
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />
    </div>
  );
};

Cart.js

import React from 'react';
import { calculateTotal,  getCurrencySymbol } from '../../utilities/utilities.js';
import { changeItemQuantity } from "./cartSlice.js";
export const Cart = (props) => {
  const { cart, currencyFilter, dispatch } = props;

  const onInputChangeHandler = (name, input) => {
    props.dispatch(changeItemQuantity(name, Number(input)));
  };

  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) {
      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,
  };
};

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;
      const quantity = cart[name] ? cart[name].quantity + 1 : 1;
      const newItem = { price, quantity };
      return { 
        ...cart, 
        [name]: newItem 
      };
    }
    case 'cart/changeItemQuantity': {
      const { name, newQuantity } = action.payload;
      const item = { ...cart[name] };
      item.quantity = newQuantity;
      return { ...cart, [name] : item };
    }
    default: {
      return cart;
    }
  }
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app/App.js';
import { store } from "./app/store.js";

const render = () => {
  ReactDOM.render(
    <App 
      state={store.getState()}
      dispatch={store.dispatch}
    />,
    document.getElementById('root')
  )
};
render();

store.subscribe(render);

store.js

import { createStore, combineReducers } from "redux";
import { inventoryReducer } from '../features/inventory/inventorySlice.js';
import { cartReducer } from '../features/cart/cartSlice.js';
import { currencyFilterReducer } from '../features/currencyFilter/currencyFilterSlice.js';

export const store = createStore(combineReducers({ 
  inventory: inventoryReducer,
  cart: cartReducer, 
  currencyFilter: currencyFilterReducer 
}));