Product radio buttons state

jll38 · May 8, 2024 · d14f6f5 · d14f6f5
1 parent 9176b07
commit d14f6f5
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 15 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -3,7 +3,7 @@ version: "3.9"
 services:
   frontend:
     build:
-      context: ./frontend
+      context: julianlechner/ecommerce-frontend:latest
       args:
         - REACT_APP_BACKEND_URL=http://localhost/api
         - REACT_APP_AWS_S3_BASE_URL = https://jlechner-ecommerce.s3.amazonaws.com

diff --git a/frontend/src/components/shared/cart/Cart.tsx b/frontend/src/components/shared/cart/Cart.tsx
@@ -3,8 +3,10 @@ import ShoppingBagOutlinedIcon from "@mui/icons-material/ShoppingBagOutlined";
 import SideDrawer from "../modal/SideDrawer/SideDrawer";
 import { Typography, Box, Button } from "@mui/material";
 import Divider from "@mui/material/Divider";
-
+import { AWS_S3_BASE_URL } from "../../../constants";
 import { CartContext } from "../../../App";
+
+import DeleteIcon from '@mui/icons-material/Delete';
 export default function Cart() {
   const [open, setOpen] = useState(false);
   const { cart, setCart } = useContext(CartContext);
@@ -23,7 +25,20 @@ export default function Cart() {
         <ShoppingBagOutlinedIcon />
       </button>
       <SideDrawer open={open} setOpen={setOpen} title="Your Cart">
-        <Typography>Blah Blah Blah</Typography>
+        {cart.map((cartItem, i) => (
+          <div className="border p-2 flex items-center gap-2">
+            <aside>
+              <figure>
+                <img width={100} src={AWS_S3_BASE_URL + cartItem.product.image_url} />
+              </figure>
+            </aside>
+            <div>
+              <Typography>{cartItem.product.product_name}</Typography>
+              <Typography color={"gray"}>{cartItem.color} | {cartItem.size}</Typography>
+              <Typography fontWeight={600} fontSize={14}>Qty: {cartItem.quantity}</Typography>
+            </div>
+          </div>
+        ))}
         <Box
           sx={{
             padding: 4,

diff --git a/frontend/src/components/ui/buttons/AddToCart/AddToCart.tsx b/frontend/src/components/ui/buttons/AddToCart/AddToCart.tsx
@@ -14,7 +14,7 @@ export default function AddToCart({ product, size, color }: IAddToCart) {
   const { cart, setCart } = useContext(CartContext);
 
   function addToCart() {
-    // Check if the cart already has the item
+    // Check if the cart already has the exact same item with matching size and color
     const existingCartItemIndex = cart.findIndex(
       (item) =>
         item.product.product_id === product.product_id &&
@@ -23,12 +23,12 @@ export default function AddToCart({ product, size, color }: IAddToCart) {
     );
 
     if (existingCartItemIndex >= 0) {
-      // If item exists, increase its quantity
+      // If item exists with same size and color, increase its quantity
       const newCart = [...cart];
       newCart[existingCartItemIndex].quantity += 1;
       setCart(newCart);
     } else {
-      // If item does not exist, add it to the cart
+      // If item does not exist or differs in size/color, add it as a new item to the cart
       const newCartItem = {
         product,
         quantity: 1,

diff --git a/frontend/src/components/ui/buttons/RadioProduct/RadioProduct.tsx b/frontend/src/components/ui/buttons/RadioProduct/RadioProduct.tsx
@@ -2,11 +2,11 @@ import React from "react";
 
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-export default function RadioProduct({ value }: any) {
+export default function RadioProduct({ value, setState }: any) {
   const [assigned, setAssigned] = React.useState(null);
   //@ts-ignore
   const handleChange = (event, newAssigned) => {
-    setAssigned(newAssigned)
+    setState(newAssigned)
   };
   if (!value) return <></>;
   return (

diff --git a/frontend/src/pages/product/ProductPage.tsx b/frontend/src/pages/product/ProductPage.tsx
@@ -17,8 +17,8 @@ import { Product } from "../../types/types";
 export default function ProductPage() {
   const { productID } = useParams();
   const [productInfo, setProductInfo] = useState<Product>();
-  const [color, setColor] = useState<string>('red');
-  const [size, setSize] = useState<string>('sm');
+  const [color, setColor] = useState<string>("red");
+  const [size, setSize] = useState<string>("s");
   const [loading, setLoading] = useState<boolean>(true);
   const { cart, setCart } = useContext(CartContext);
 
@@ -34,7 +34,6 @@ export default function ProductPage() {
 
     fetchProduct();
   }, [productID]);
-
   return (
     <main>
       <section id="product-info" className="flex gap-[3rem] justify-evenly">
@@ -73,12 +72,12 @@ export default function ProductPage() {
               <hr></hr>
               <div className="flex flex-col gap-2">
                 <h4 className="text-sm text-black/70">Color:</h4>
-                <RadioProduct value={["Red", "Black", "Green", "White"]} />
+                <RadioProduct value={["Red", "Black", "Green", "White"]} setState={setColor} />
               </div>
               <hr></hr>
               <div className="flex flex-col gap-2">
                 <h4 className="text-sm text-black/70">Size:</h4>
-                <RadioProduct value={["SM", "MD", "LG", "XL"]} />
+                <RadioProduct value={["S", "M", "L", "XL"]} setState={setSize} />
               </div>
               <hr></hr>
               <div className="flex flex-col gap-2">

diff --git a/frontend/src/pages/product/Products.tsx b/frontend/src/pages/product/Products.tsx
@@ -23,8 +23,8 @@ export default function Products() {
   return (
     <main>
       <section id="filters">
-      <Button variant="outlined">Fit</Button>
-      <Button variant="outlined">Color</Button>
+        <Button variant="outlined">Fit</Button>
+        <Button variant="outlined">Color</Button>
         <Button variant="outlined">Price</Button>
       </section>
       <section