Shopping cart feature debugged and refactoring. Cart route added

Closes #30

app/cart/page.jsx

@@ -0,0 +1,51 @@
+'use client'
+import React from 'react'
+import { useContext } from 'react'
+//Components
+import { BasketContext } from '../context/BasketContext'
+import Image from 'next/image'
+import BackArrow from '@/app/components/BackArrow'
+import RemoveCartButton from '../components/RemoveCartButton'
+
+const Cart = () => {
+  const { state } = useContext(BasketContext)
+  console.log(state);
+
+  return (
+    <main>
+      <BackArrow path={'listings'} />
+      <div className='text-center mx-4 mt-10 '>
+        {state.map((product) => {
+          return (
+            <>
+              <div key={product.id}>
+                <Image
+                  src={product.image}
+                  layout='responsive'
+                  width={1000}
+                  height={700}
+                  alt='A pretty painting'
+                />
+              </div>
+              <div className='bg-secondary px-4 shadow-lg'>
+                <h2 className='py-4 text-white text-3xl'>{product.name}</h2>
+                <div className='flex gap-2 justify-center'>
+                  <p className='text-sm italic'>{product.artist}</p>
+                  <p className='text-sm italic'>{product.date}</p>
+                </div>
+                <div className='flex items-center justify-center gap-40 py-6 '>
+                  <p>
+                    <small>{product.price}</small>
+                  </p>
+                  <RemoveCartButton product={product} />
+                </div>
+              </div>
+            </>
+          )
+        })}
+      </div>
+    </main>
+  )
+}
+
+export default Cart

app/components/AddToCartButton.jsx

@@ -1,13 +1,14 @@
 'use client'
 import React, { useContext } from 'react'
-import { BasketContext } from '../context/cart.context'
+import { BasketContext } from '../context/BasketContext'
 
 const AddToCartButton = ({ product }) => {
   const { state, dispatch } = useContext(BasketContext)
-  
+
   const addToBasketHandler = (product) => {
-    dispatch({ dispatch: 'Add', article: product })
+    dispatch({ type: 'add', payload: { product } })
   }
+
   return (
     <>
       <button onClick={() => addToBasketHandler(product)} className='button-1'>

app/components/CartButton.jsx

@@ -1,19 +1,21 @@
 'use client'
 import React, { useContext } from 'react'
 import { FaShoppingCart } from 'react-icons/fa'
-import { BasketContext } from '../context/cart.context'
+import { BasketContext } from '../context/BasketContext'
+import Link from 'next/link'
 
-const CartButton = ({ id }) => {
-  const {state} = useContext(BasketContext)
-
-  console.log(state);
+const CartButton = () => {
+  const { state } = useContext(BasketContext)
 
   return (
-    <div>
-      <button className='px-5'>
-        <FaShoppingCart size={30} />
-      </button>
-    </div>
+    <Link href='/cart'>
+      <div className='flex items-center justify-center'>
+        <p>{state.length}</p>
+        <button className='px-5'>
+          <FaShoppingCart size={30} />
+        </button>
+      </div>
+    </Link>
   )
 }
 

app/components/RemoveCartButton.jsx

@@ -1,14 +1,18 @@
 'use client'
 import React, { useContext } from 'react'
-import { CartContext } from './CartProvider.jsx'
+import { BasketContext } from '../context/BasketContext'
+const RemoveCartButton = ({ product }) => {
+  const { dispatch } = useContext(BasketContext)
+  console.log(product.id);
+  const id = product.id
 
-const RemoveCartButton = ({ id }) => {
-  const { items, removeFromCart } = useContext(CartContext)
+  const onRemoveHandler = () => {
+    dispatch({ type: 'delete', payload: { id } })
+  }
 
-  console.log(items)
   return (
     <>
-      <button onClick={() => removeFromCart(id)} className='button-1'>
+      <button onClick={onRemoveHandler} className='button-1'>
         Remove from cart
       </button>
     </>

app/context/BasketContext.jsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { createContext, useReducer } from 'react'
+
+const initialBasket = []
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'add':
+      return [...state, action.payload.product]
+    case 'delete':
+      return state.filter((item) => item.id !== action.payload.id)
+    default:
+      throw new Error('No case for that type')
+  }
+}
+
+export const BasketContext = createContext({
+  state: initialBasket,
+  dispatch: () => null,
+})
+
+export const BasketContextProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialBasket)
+
+  return (
+    <BasketContext.Provider value={{ state, dispatch }}>
+      {children}
+    </BasketContext.Provider>
+  )
+}

app/layout.js

@@ -5,7 +5,7 @@ import './globals.css'
 //Components
 import Header from './components/Header'
 import Footer from './components/Footer'
-import { BasketContextProvider } from './context/cart.context'
+import { BasketContextProvider } from './context/BasketContext'
 
 const inter = Inter({
   subsets: ['latin'],

app/listings/page.js

@@ -1,7 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link.js'
 import { getAll } from '../_lib/models/listings.js'
-import AddToCartButton from '../components/AddToCartButton.jsx'
 
 export default function Page() {
   const listings = getAll()
@@ -23,7 +22,6 @@ const Listing = ({ image, artist, date, price, id }) => {
       <p>{price}</p>
       <p>{artist}</p>
       <p>{date}</p>
-      <AddToCartButton id={id} />
     </div>
   )
 }