feat: 12.CartUseReducer: back to first setup

Author: DinaTaklit

src/projects/12.CartUseReducer/CartContainer.js

@@ -3,7 +3,7 @@ import CartItem from './CartItem'
 import { useGlobalContext } from './context'
 
 const CartContainer = () => {
- const { cart, clearCart, totalPrice } = useGlobalContext()
+ const { cart } = useGlobalContext()
  if (cart.length === 0) {
  return (
  <section className='cart'>
@@ -32,12 +32,12 @@ const CartContainer = () => {
  <hr />
  <div className='cart-total'>
  <h4>
- total <span>${totalPrice}</span>
+ total <span>$0.00</span>
  </h4>
  </div>
  <button
  className='btn clear-btn'
- onClick={clearCart}
+ onClick={() => console.log('clear cart')}
  >
  clear cart
  </button>

src/projects/12.CartUseReducer/CartItem.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import { useGlobalContext } from './context'
-
 const CartItem = ({ id, img, title, price, amount }) => {
- const {updateAmount, removeItem} = useGlobalContext()
  return (
  <article className='cart-item'>
  <img src={img} alt={title} />
@@ -12,22 +10,22 @@ const CartItem = ({ id, img, title, price, amount }) => {
  {/* remove button */}
  <button
  className='remove-btn'
- onClick={() => removeItem(id)}
+ onClick={() => console.log('remove item')}
  >
  remove
  </button>
  </div>
  <div>
  {/* increase amount */}
- <button className='amount-btn' onClick={() => updateAmount(id, 1)}>
+ <button className='amount-btn' onClick={() => console.log('increase')}>
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
  <path d='M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z' />
  </svg>
  </button>
  {/* amount */}
  <p className='amount'>{amount}</p>
  {/* decrease amount */}
- <button className='amount-btn' onClick={() => updateAmount(id, -1)}>
+ <button className='amount-btn' onClick={() => console.log('decrease')}>
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
  <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
  </svg>

src/projects/12.CartUseReducer/Navbar.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useGlobalContext } from './context'
 const Navbar = () => {
- const {totalItems} = useGlobalContext()
  return (
  <nav>
  <div className='nav-center'>
@@ -11,7 +10,7 @@ const Navbar = () => {
  <path d='M16 6v2h2l2 12H0L2 8h2V6a6 6 0 1 1 12 0zm-2 0a4 4 0 1 0-8 0v2h8V6zM4 10v2h2v-2H4zm10 0v2h2v-2h-2z' />
  </svg>
  <div className='amount-container'>
- <p className='total-amount'>{totalItems}</p>
+ <p className='total-amount'>3</p>
  </div>
  </div>
  </div>

src/projects/12.CartUseReducer/context.js

@@ -2,66 +2,17 @@ import React, { useState, useContext, useReducer, useEffect } from 'react'
 import cartItems from './data'
 import reducer from './reducer'
 
-
 const url = 'https://course-api.com/react-useReducer-cart-project'
-
 const AppContext = React.createContext()
 
 const AppProvider = ({ children }) => {
  const [cart, setCart] = useState(cartItems)
- const [totalItems, setTotalItems] = useState(cart.length)
- const [totalPrice, setTotalPrice] = useState(0)
-
- // Function that clear all the items of the cart
- const clearCart = () =>{
- setCart([])
- }
-
- // Function that update the amount of items in the cart
- const updateAmount = (id, amount) => {
-
- const cartItem = cart.find(item => item.id === id) //Get the item with the given id
- const newAmount = cartItem.amount + amount // calculate the new amount
- 
- // If the number of items is 0 remove the item from the cart
- if(newAmount ===0) {
- setCart(cart.filter(item => item.id !== id))
- } else {
- setCart(cart.map(item => (item.id === id ? { ...item, amount: newAmount } : item)))
- } 
- // update the total amount of items
- setTotalItems(prevTotalItems => prevTotalItems + amount) 
- }
- 
- // Function that calculate the totlal price of the items in the cart
- const calculateTotalPrice = () => {
- let total = 0
- cart.forEach(item => total += item.price * item.amount)
- setTotalPrice(total.toFixed(2))
- }
-
- // Function that remove an item from the cart
- const removeItem = (id) => {
- const item = cart.find(item => item.id === id)
- setTotalItems(prevTotalItems => prevTotalItems - item.amount)
- setCart(cart.filter(item => item.id !== id))
- }
-
- // Use Effect to update the total price everytime the cart, total items is updated
- useEffect(() => {
- calculateTotalPrice()
- }, [cart, totalItems])
 
  return (
  <AppContext.Provider
  value={{
  cart,
- clearCart,
- totalItems,
- updateAmount,
- totalPrice,
- removeItem
- }} 
+ }}
  >
  {children}
  </AppContext.Provider>