fix CartPage thumbnail link problem, change from using id to slug

Author: phoenixdev0117

src/components/AddToCart/AddToCart.tsx

@@ -10,7 +10,7 @@ const AddToCart: React.FC<{ singleProduct: productDataType | {} }> = ({
 }) => {
   const { addToCart } = useCartContext()
   // need the number of stock here as well after setting up in productData array
-  const { id } = { ...singleProduct }
+  const { id, slug } = { ...singleProduct }
   const [amount, setAmount] = useState(1)
 
   // if there's stock variable, add logic to allow adding the amount === stock
@@ -33,7 +33,7 @@ const AddToCart: React.FC<{ singleProduct: productDataType | {} }> = ({
         <Link
           to='/cart'
           className='btn'
-          onClick={() => addToCart(id, amount, singleProduct)}
+          onClick={() => addToCart(id, slug, amount, singleProduct)}
         >
           add to cart
         </Link>

src/components/CartItem.tsx

@@ -7,7 +7,7 @@ import { cartType, useCartContext } from '../context/cart_context'
 import { Link } from 'react-router-dom'
 
 const CartItem: React.FC<{ cartItem: cartType }> = ({ cartItem }) => {
-  const { id, image, name, price, amount } = cartItem
+  const { id, image, name, price, amount, slug } = cartItem
 
   const { removeItem, toggleAmount } = useCartContext()
 
@@ -22,7 +22,7 @@ const CartItem: React.FC<{ cartItem: cartType }> = ({ cartItem }) => {
     <Wrapper>
       {/* item column */}
       <div className='title'>
-        <Link to={`/products/${id}`}>
+        <Link to={`/products/${slug}`}>
           <img src={image} alt={name} />
         </Link>
         <div>

src/context/cart_context.tsx

@@ -11,6 +11,7 @@ import {
 
 export type cartType = {
   id: string
+  slug: string
   name: string
   amount: number
   image: string
@@ -24,6 +25,7 @@ export type initialStateType = {
   totalAmount: number
   addToCart: (
     id: string | undefined,
+    slug: string | undefined,
     amount: number,
     singleProduct: productDataType | {}
   ) => void
@@ -58,12 +60,13 @@ export const CartProvider: React.FC = ({ children }) => {
 
   const addToCart = (
     id: string | undefined,
+    slug: string | undefined,
     amount: number,
     singleProduct: productDataType | {}
   ) => {
     dispatch({
       type: ADD_TO_CART,
-      payload: { id, amount, singleProduct },
+      payload: { id, slug, amount, singleProduct },
     })
   }
 

src/reducers/cart_reducer.tsx

@@ -12,7 +12,7 @@ const cart_reducer = (
   action: { type: any; payload?: any }
 ) => {
   if (action.type === ADD_TO_CART) {
-    const { id, amount, singleProduct } = action.payload
+    const { id, slug, amount, singleProduct } = action.payload
     const tempItem = state.cart.find(item => item.id === id)
 
     if (tempItem) {
@@ -29,6 +29,7 @@ const cart_reducer = (
     } else {
       const newItem: cartType = {
         id,
+        slug,
         name: singleProduct.name,
         amount,
         image: singleProduct.images[0],