<file_sep>
 export const CartReducer =(state,action) =>{
      const{shoppingCart,totalPrice,qty}=state;
      let product;
      let index;
      let updatePrice;
      let updateQty;

      switch(action.type){ 
      case 'ADD_TO_CART':
            const chack=shoppingCart.find(product => product.id === action.id)
    
            if(chack){
                return  state;
            }
            else{
                product =action.product;
                product['qty']= 1;
                updateQty= qty + 1 ;
                updatePrice= totalPrice + product.price;
                return{shoppingCart:[product,...shoppingCart],totalPrice: updatePrice,qty:updateQty}
            }
            break;

  case  'INC':
    product = action.cart;
    product.qty = product.qty + 1;
    updatePrice = totalPrice + product.price;
    updateQty = qty + 1;
    index= shoppingCart.findIndex(cart => cart.id === action.id)
    shoppingCart[index] = product;
    
    return{shoppingCart:[...shoppingCart] , totalPrice:updatePrice ,qty:updateQty};  
    break;

     case 'DEC':
       product = action.cart;
       if(product.qty > 1){
           product.qty = product.qty - 1;
           updatePrice = totalPrice - product.price;
           updateQty =  qty - 1;
           index = shoppingCart.findIndex(cart => cart.id === action.id);
           shoppingCart[index] = product;
           return{shoppingCart: [...shoppingCart] , totalPrice: updatePrice , qty:updateQty};

       }
       else{
           return state;
       }
break;

    case 'DELETE':
    const filtered = shoppingCart.filter(product => product.id !== action.id)
    product = action.cart;
    updateQty = qty - product.qty;
    updatePrice = totalPrice - product.price * product.qty;
    
    return{shoppingCart: [...filtered],totalPrice: updatePrice, qty:updateQty}
    default:
   return state;
}

}
<file_sep>import React from 'react';

const  Banner = () => {
  return (
<>
<div className="banner">
<header>
    
</header>
</div>

</>
  );
}

export default Banner;
<file_sep>import React,{createContext , useState} from 'react';
import im1 from '../assets/im1.jpg';
import im2 from '../assets/im2.jpg';
import im3 from '../assets/im3.jpg';
import im4 from '../assets/im4.jpg';
import im5 from '../assets/im5.jpg';
import im6 from '../assets/im6.jpg';
import im7 from '../assets/im7.jpg';
import im8 from '../assets/im8.jpg';

export const ProductContext = createContext();

 const ProductContextProvider=(props) =>{
    const [products] =useState([{
      id:1,name:'Bast shoe',price:299,image:im1,
    },
  {id:2,name:'snaker',price:1200,image:im2,status:"new"},
  {id:3,name:'Chukka boot',price:899,image:im3},
  {id:4,name:'Derby shoe',price:999,image:im4,status:"new"},
  {id:5,name:'Diabetic shoe',price:1700,image:im5},
  {id:6,name:'Dress shoe',price:1999,image:im6},
  {id:7,name:'Duckbill shoe',price:500,image:im7},
  {id:8,name:'Driving moccasins',price:899,image:im8, status:"new"}
 ]);
  return(
   <ProductContext.Provider value={{ products: [...products]}}> 
    {props.children}
   </ProductContext.Provider>
  );
  }
   export default ProductContextProvider;<file_sep>import React, { createContext,useReducer } from 'react';
 
import { CartReducer  } from "../GobalCantext/CartReducer";

export const CartCantext=  createContext();


const CartCantextProvider=(props)=>{
    const [cart,dispatch]=useReducer(CartReducer,{shoppingCart:[]
    ,totalPrice:0,qty:0});
    return(
    <CartCantext.Provider value={{...cart,dispatch}}>
        {props.children}
    </CartCantext.Provider>
    );
}
export default CartCantextProvider;<file_sep>import React, { useContext } from 'react';
import { ProductContext} from '../../GobalCantext/ProductContex';
import { CartCantext } from "../../GobalCantext/CartCantext";

import { Link } from 'react-router-dom';

    const AProduct =()=>{
    const {products} = useContext(ProductContext);
    const {dispatch} =useContext(CartCantext);
    return(
    <>
  <div className="container">
   <div className="products">
    {products.map((product) =>{
        
        return(
        <div className="product" key={product.id}>
            <div className="cover">
            <div className="product-image">
                <Link to={`/ViewProduct/${product.id}`}>
                    <img className="img-fluid" src={product.image} alt="Not Found" />
                </Link>
                </div>
                <div className="product-Details">
        <div className="product-name">
        {product.name}
        </div>
        <div className="product-price">
            ${product.price}.00
            </div>
            </div>
            <div className="add-to-cart" onClick={()=>dispatch({type:'ADD_TO_CART',id:product.id,product})} >add to cart</div>
             {product.status === 'hot' ? <div className='hot'>hot</div> :''}
            {product.status === 'new' ? <div className='new'>new</div> : ''}
            </div>
            </div>
        )
    })}
    </div>
</div>

    </>
    );

  }
export default  AProduct;