Add to cart w/ context

frontend/src/components/shared/cart/Cart.tsx

@@ -8,6 +8,10 @@ import { CartContext } from "../../../App";
 export default function Cart() {
   const [open, setOpen] = useState(false);
   const { cart, setCart } = useContext(CartContext);
+
+  React.useEffect(() => {
+    console.log(cart);
+  }, [cart]);
   return (
     <>
       <button

frontend/src/components/ui/buttons/AddToCart/AddToCart.tsx

@@ -1,15 +1,50 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import { Button } from "@mui/material";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
+import { ICartContext, ICartItem } from "../../../../types/CartTypes";
+import { CartContext } from "../../../../App";
+import { Product } from "../../../../types/types";
 
 interface IAddToCart {
-  route?: string;
+  product: Product;
+  size: string;
+  color: string;
 }
-export default function AddToCart({ route }: IAddToCart) {
+export default function AddToCart({ product, size, color }: IAddToCart) {
+  const { cart, setCart } = useContext(CartContext);
+
+  function addToCart() {
+    // Check if the cart already has the item
+    const existingCartItemIndex = cart.findIndex(
+      (item) =>
+        item.product.product_id === product.product_id &&
+        item.size === size &&
+        item.color === color
+    );
+
+    if (existingCartItemIndex >= 0) {
+      // If item exists, increase its quantity
+      const newCart = [...cart];
+      newCart[existingCartItemIndex].quantity += 1;
+      setCart(newCart);
+    } else {
+      // If item does not exist, add it to the cart
+      const newCartItem = {
+        product,
+        quantity: 1,
+        size,
+        color,
+      };
+      setCart([...cart, newCartItem]);
+    }
+  }
+
   return (
     <>
-      {route ? (
-        <Button variant="contained">Add To Cart</Button>
+      {product ? (
+        <Button variant="contained" onClick={addToCart}>
+          Add To Cart
+        </Button>
       ) : (
         <Button variant="contained">Out of Stock</Button>
       )}

frontend/src/components/ui/cards/ProductCard/ProductCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, createContext } from "react";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardActions from "@mui/material/CardActions";
@@ -9,6 +9,8 @@ import CardMedia from "@mui/material/CardMedia";
 import { CardActionArea } from "@mui/material";
 
 import { AWS_S3_BASE_URL } from "../../../../constants";
+
+
 export default function ProductCard({ product }: any) {
   return (
     <Card

frontend/src/pages/product/ProductPage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { getProductInfo } from "../../services/Product";
@@ -10,16 +10,24 @@ import { Typography } from "@mui/material";
 import { TextField, Button } from "@mui/material";
 import { AWS_S3_BASE_URL } from "../../constants";
 
+import { ICartContext, ICartItem } from "../../types/CartTypes";
+import { CartContext } from "../../App";
+import { Product } from "../../types/types";
+
 export default function ProductPage() {
   const { productID } = useParams();
-  const [productInfo, setProductInfo] = React.useState<any>();
-  const [loading, setLoading] = React.useState<boolean>(true);
+  const [productInfo, setProductInfo] = useState<Product>();
+  const [color, setColor] = useState<string>('red');
+  const [size, setSize] = useState<string>('sm');
+  const [loading, setLoading] = useState<boolean>(true);
+  const { cart, setCart } = useContext(CartContext);
 
   React.useEffect(() => {
     const fetchProduct = async () => {
       if (productID) {
         const response = await getProductInfo(productID);
-        setProductInfo(response);
+        const product = new Product(response);
+        setProductInfo(product);
         setLoading(false);
       }
     };
@@ -74,7 +82,7 @@ export default function ProductPage() {
               </div>
               <hr></hr>
               <div className="flex flex-col gap-2">
-                <AddToCart route={"/"} />
+                <AddToCart product={productInfo} size={size} color={color} />
               </div>
               <hr></hr>
               <div className="flex flex-col gap-2">

frontend/src/types/CartTypes.ts

@@ -1,10 +1,15 @@
-import React, { createContext, useState, useContext, Dispatch, SetStateAction } from 'react';
-import { IProduct } from './types';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  Dispatch,
+  SetStateAction,
+} from "react";
+import { Product } from "./types";
 
 // Define the type for the cart
 export interface ICartItem {
-  id: number;
-  product: IProduct;
+  product: Product;
   quantity: number;
   size: string;
   color: string;
@@ -14,4 +19,23 @@ export interface ICartItem {
 export interface ICartContext {
   cart: ICartItem[];
   setCart: Dispatch<SetStateAction<ICartItem[]>>;
-}
+}
+
+export class CartItem implements ICartItem {
+  product: Product;
+  quantity: number;
+  size: string;
+  color: string;
+
+  constructor(
+    product: Product,
+    quantity: number,
+    size: string,
+    color: string
+  ) {
+    this.product = product;
+    this.quantity = quantity;
+    this.size = size;
+    this.color = color;
+  }
+}

frontend/src/types/types.ts

@@ -3,39 +3,61 @@ export interface IProduct {
   product_type: string;
   product_name: string;
   price: number;
-  description: string;
+  sale_price: number;
+  blurb: string;
   stock_quantity: number;
   image_url: string;
 }
 
-export interface IOrderItem {
-    id: number;
-    order_id: number;
-    product_id: number;
-    quantity: number;
+export class Product implements IProduct {
+  product_id: string;
+  product_type: string;
+  product_name: string;
+  sale_price: number;
+  price: number;
+  blurb: string;
+  stock_quantity: number;
+  image_url: string;
+
+  constructor(product: IProduct) {
+    this.product_id = product.product_id;
+    this.product_type = product.product_type;
+    this.product_name = product.product_name;
+    this.price = product.price;
+    this.sale_price = product.sale_price;
+    this.blurb = product.blurb;
+    this.stock_quantity = product.stock_quantity;
+    this.image_url = product.image_url;
   }
-
+}
+
+export interface IOrderItem {
+  id: number;
+  order_id: number;
+  product_id: number;
+  quantity: number;
+}
+
 export interface IOrder {
-    id: number;
-    user_id: number;
-    created_at: Date;
-    items: IOrderItem[];
-  }
+  id: number;
+  user_id: number;
+  created_at: Date;
+  items: IOrderItem[];
+}
 
 export interface IReview {
-    id: number;
-    product_id: number;
-    author_id: number;
-    content: string;
-    rating: number;
+  id: number;
+  product_id: number;
+  author_id: number;
+  content: string;
+  rating: number;
 }
 
 export interface IUser {
-    id: number;
-    username: string;
-    email: string;
-    is_active?: boolean; // Optional
+  id: number;
+  username: string;
+  email: string;
+  is_active?: boolean; // Optional
 }
-
-
-export default {}
+
+export default {};