Codecademy export

App.js

import React from "react";

import { Inventory } from "../features/inventory/Inventory.js";
import { CurrencyFilter } from "../features/currencyFilter/CurrencyFilter.js";
// Import the Cart component here.
import { Cart } from "../features/cart/Cart.js";
import { SearchTerm } from "../features/searchTerm/SearchTerm.js";

// Render the Cart component below <Inventory />
export const App = (props) => {
  const { state, dispatch } = props;
  let inventory = state.inventory;
  if (state.searchTerm !== "") {
    inventory = state.inventory.filter((i) =>
      i.name.toLowerCase().includes(state.searchTerm.toLowerCase())
    );
  }
  return (
    <div>
      <SearchTerm searchTerm={state.searchTerm} dispatch={dispatch} />
      <CurrencyFilter
        currencyFilter={state.currencyFilter}
        dispatch={dispatch}
      />
      <Inventory
        inventory={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 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.
    dispatch(changeItemQuantity(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: name,
      newQuantity: 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;
    }
  }
};

index.js

import React from "react";
import ReactDOM from "react-dom";

import { App } from "./app/App.js";

// Import the store here.
import { store } from "./app/store.js";

// Pass state and dispatch props to the <App /> component.
const render = () => {
  ReactDOM.render(
    <App state={store.getState()} dispatch={store.dispatch} />,
    document.getElementById("root")
  );
};
render();

// Subscribe render to the store.
store.subscribe(render);

SearchTerm.js

import React from 'react';
import { setSearchTerm, clearSearchTerm } from './searchTermSlice.js';

const searchIconUrl =
  'https://static-assets.codecademy.com/Courses/Learn-Redux/Recipes-App/icons/search.svg';
const clearIconUrl =
  'https://static-assets.codecademy.com/Courses/Learn-Redux/Recipes-App/icons/clear.svg';

export const SearchTerm = (props) => {
  const { searchTerm, dispatch } = props;

  const onSearchTermChangeHandler = (e) => {
    const userInput = e.target.value;
    dispatch(setSearchTerm(userInput));
  };

  const onClearSearchTermHandler = () => {
    dispatch(clearSearchTerm());
  };

  return (
    <div id="search-container">
      <img id="search-icon" alt="" src={searchIconUrl} />
      <input
        id="search"
        type="text"
        value={searchTerm}
        onChange={onSearchTermChangeHandler}
        placeholder="Search products"
      />
      {searchTerm.length > 0 && (
        <button
          onClick={onClearSearchTermHandler}
          type="button"
          id="search-clear-button"
        >
          <img src={clearIconUrl} alt="" />
        </button>
      )}
    </div>
  );
};

searchTermSlice.js

const initialSearchTerm = "";
export const searchTermReducer = (
  searchTerm = initialSearchTerm,
  action
  ) => {
  switch (action.type) {
    case "searchTerm/setSearchTerm":
      return action.payload;
    case "searchTerm/clearSearchTerm":
      return action.payload;
    default:
      return searchTerm;
  }
};

export const clearSearchTerm = () => {
  return {
    type: "searchTerm/clearSearchTerm",
    payload: "",
  };
};

export const setSearchTerm = (term) => {
  return {
    type: "searchTerm/setSearchTerm",
    payload: term,
  };
};

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";
import { searchTermReducer } from "../features/searchTerm/searchTermSlice.js";


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