feat: add increase/decrease product quantity from firebase when using cart (#72)

* feat: implement add/remove item from quantity in firebase

* test cases update

* erase

* feat: add/subtract from quantity in firestore wqhen using cart

* feat: live stock gets displayed when adjusted and adds remove button for each item

* fix: had to remove small whitespace

---------

Co-authored-by: mercedes-mathews <[email protected]>

Author: jxwatson251

market-manager/src/app/customerCart/CustomerCart.module.css

@@ -42,11 +42,23 @@
   transition: transform 0.3s ease;
 }
 
-.button:hover {
+.button:hover .removeButton:hover{
   background: #5a791dd2;
   transform: translateY(-2px);
 }
 
+.removeButton {
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(to right, #6a8e23d2, #749a28);
+  color: #ffffff;
+  font-weight: 600;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+
 /* Table Styles */
 .table {
   width: 100%;

market-manager/src/app/customerCart/page.tsx

@@ -2,11 +2,12 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { getCartFromFirestore } from '@/src/lib/cart';
+import { getCartFromFirestore, removeProductFromCart } from '@/src/lib/cart';
 import useUser from '../hooks/useUser';
 import { Product } from '@/src/types/product';
 import styles from './CustomerCart.module.css';
 
+
 export default function CustomerCart() {
   const user = useUser();
   const [items, setItems] = useState<(Product & { quantity: number })[]>([]);
@@ -21,6 +22,19 @@ export default function CustomerCart() {
 
   const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
 
+  const handleRemove = async (productId: string) => {
+    if (!user?.uid) return;
+  
+    try {
+      await removeProductFromCart(user.uid, productId);
+      const updatedCart = await getCartFromFirestore(user.uid);
+      setItems(updatedCart);
+    } catch (error) {
+      console.error('Error removing item:', error);
+    }
+  };
+  
+
   return (
     <div className={styles.container}>
       <div className={styles.section}>
@@ -36,6 +50,7 @@ export default function CustomerCart() {
                 <th>Qty</th>
                 <th>Price</th>
                 <th>Subtotal</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
@@ -45,13 +60,22 @@ export default function CustomerCart() {
                   <td>{item.quantity}</td>
                   <td>${item.price.toFixed(2)}</td>
                   <td>${(item.price * item.quantity).toFixed(2)}</td>
+                  <td>
+                    <button
+                      className={styles.removeButton}
+                      onClick={() => handleRemove(item.id)}
+                    >
+                      Remove
+                    </button>
+                  </td>
                 </tr>
               ))}
             </tbody>
             <tfoot>
               <tr>
                 <td colSpan={3}><strong>Total</strong></td>
                 <td><strong>${total.toFixed(2)}</strong></td>
+                <td colSpan={1}></td>
               </tr>
             </tfoot>
           </table>

market-manager/src/app/home/HomePage.tsx

@@ -10,22 +10,27 @@ import { addProductToCart } from '@/src/lib/cart';
 import { auth } from '@/src/lib/firebase';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { collection, onSnapshot } from 'firebase/firestore';
+import { db } from '@/src/lib/firebase';
 
 export default function HomePage() {
   const [products, setProducts] = useState<Product[]>([]);
   const [isShrunk, setIsShrunk] = useState(false);
   const [quantities, setQuantities] = useState<{ [productId: string]: number }>({});
 
   useEffect(() => {
-    fetch('/api/products')
-      .then((response) => response.json())
-      .then((data) => {
-        setProducts(data);
-      })
-      .catch((error) => {
-        console.error('Error calling fruit API:', error);
-      });
+    const unsubscribe = onSnapshot(collection(db, 'products'), (snapshot) => {
+      const realTimeProducts: Product[] = snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      })) as Product[];
+  
+      setProducts(realTimeProducts);
+    });
+  
+    return () => unsubscribe(); // Clean up listener on unmount
   }, []);
+  
 
   useEffect(() => {
     const handleScroll = () => {
@@ -60,13 +65,19 @@ export default function HomePage() {
       await addProductToCart(user.uid, product, quantity);
       toast.success(`Added ${quantity} of ${product.name} to cart!`);
       setQuantities((prev) => ({ ...prev, [product.id]: 0 }));
-    } catch (err) {
+    } catch (err: unknown) {
       console.error(err);
-      toast.error('Failed to add to cart.');
+    
+      if (err instanceof Error && err.message.toLowerCase().includes('stock')) {
+        toast.error(err.message);
+      } else {
+        toast.error('Failed to add to cart.');
+      }
     }
   };
 
 
+  
 
   return (
     <>

market-manager/src/app/hooks/useRealTimeStock.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { doc, onSnapshot } from 'firebase/firestore';
+import { db } from '@/src/lib/firebase';
+
+export function useRealTimeStock(productId: string) {
+  const [stock, setStock] = useState<number | null>(null);
+
+  useEffect(() => {
+    const productRef = doc(db, 'products', productId);
+
+    const unsubscribe = onSnapshot(productRef, (snapshot) => {
+      if (snapshot.exists()) {
+        const data = snapshot.data();
+        setStock(data.quantity ?? 0);
+      }
+    });
+
+    return () => unsubscribe(); // Cleanup when component unmounts
+  }, [productId]);
+
+  return stock;
+}

market-manager/src/lib/cart.ts

@@ -3,33 +3,85 @@ import {
   doc,
   getDoc,
   setDoc,
-  serverTimestamp
+  serverTimestamp,
+  runTransaction,
 } from 'firebase/firestore';
 import type { Product } from '@/src/types/product';
 
+// ✅ Updated: use Firestore transaction to safely update stock
+async function updateProductStock(productId: string, quantityDelta: number) {
+  const productRef = doc(db, 'products', productId);
+
+  try {
+    await runTransaction(db, async (transaction) => {
+      const productDoc = await transaction.get(productRef);
+
+      if (!productDoc.exists()) {
+        throw new Error('Product does not exist!');
+      }
+
+      const currentStock = productDoc.data().quantity || 0;
+      const newStock = currentStock + quantityDelta;
+
+      if (newStock < 0) {
+        throw new Error('Not enough stock available');
+      }
+
+      transaction.update(productRef, { quantity: newStock });
+    });
+  } catch (error) {
+    console.error('Failed to update stock:', error);
+    throw error;
+  }
+}
 
 export async function addProductToCart(
   userId: string,
   product: Product,
   quantity: number
 ) {
   const cartRef = doc(db, 'carts', userId);
-  const snapshot = await getDoc(cartRef);
+  const productRef = doc(db, 'products', product.id);
+
+  const [cartSnap, productSnap] = await Promise.all([
+    getDoc(cartRef),
+    getDoc(productRef),
+  ]);
+
+  if (!productSnap.exists()) {
+    throw new Error('Product does not exist!');
+  }
+
+  const availableStock = productSnap.data().quantity || 0;
+
+  if (quantity > availableStock) {
+    throw new Error(`Only ${availableStock} of ${product.name} left in stock`);
+  }
+
   let existingProducts: (Product & { quantity: number })[] = [];
 
-  if (snapshot.exists()) {
-    existingProducts = snapshot.data().products || [];
+  if (cartSnap.exists()) {
+    existingProducts = cartSnap.data().products || [];
   }
 
   const updatedProducts = [...existingProducts];
   const index = updatedProducts.findIndex((p) => p.id === product.id);
 
   if (index !== -1) {
+    // ✅ We no longer need to pre-check cart + quantity vs stock here
     updatedProducts[index].quantity += quantity;
   } else {
     updatedProducts.push({ ...product, quantity });
   }
 
+  // ✅ Still use the transaction to actually update stock safely
+  try {
+    await updateProductStock(product.id, -quantity);
+  } catch (error) {
+    console.error('Error updating stock:', error);
+    throw new Error('Failed to update stock');
+  }
+
   await setDoc(
     cartRef,
     {
@@ -42,6 +94,42 @@ export async function addProductToCart(
 }
 
 
+export async function removeProductFromCart(
+  userId: string,
+  productId: string
+) {
+  const cartRef = doc(db, 'carts', userId);
+  const snapshot = await getDoc(cartRef);
+
+  if (!snapshot.exists()) return;
+
+  const existingProducts: (Product & { quantity: number })[] =
+    snapshot.data().products || [];
+
+  const removedProduct = existingProducts.find((p) => p.id === productId);
+
+  if (!removedProduct) return;
+
+  const updatedProducts = existingProducts.filter((p) => p.id !== productId);
+
+  // ✅ Add product quantity back to stock
+  try {
+    await updateProductStock(productId, removedProduct.quantity);
+  } catch (error) {
+    console.error('Error restoring stock on removal:', error);
+  }
+
+  await setDoc(
+    cartRef,
+    {
+      customerId: userId,
+      products: updatedProducts,
+      updatedAt: serverTimestamp(),
+    },
+    { merge: true }
+  );
+}
+
 export async function saveCartToFirestore(
   userId: string,
   products: (Product & { quantity: number })[]
@@ -70,4 +158,4 @@ export async function getCartFromFirestore(
   }
 
   return [];
-}
+}

market-manager/src/test/cart.test.ts

@@ -1,83 +0,0 @@
-import {
-  saveCartToFirestore,
-  getCartFromFirestore,
-} from '../lib/cart';
-import {
-  doc,
-  getDoc,
-  setDoc,
-} from 'firebase/firestore';
-
-jest.mock('../lib/firebase', () => ({
-  db: {}, // mock the Firestore db export
-}));
-
-jest.mock('firebase/firestore', () => ({
-  doc: jest.fn(),
-  getDoc: jest.fn(),
-  setDoc: jest.fn(),
-  serverTimestamp: jest.fn(() => 'mockTimestamp'),
-}));
-
-describe('Firestore Cart Functions', () => {
-  const mockUserId = 'testUser123';
-  const mockCartRef = { path: 'mock/doc/path' };
-  const mockProducts = [
-    { id: '1', name: 'Apple', price: 1.0, quantity: 3, category: 'fruit' },
-    { id: '2', name: 'Bread', price: 2.5, quantity: 1, category: 'bakery' },
-  ];
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    (doc as jest.Mock).mockReturnValue(mockCartRef);
-  });
-
-  it('should save cart to Firestore', async () => {
-    await saveCartToFirestore(mockUserId, mockProducts);
-
-    expect(doc).toHaveBeenCalledWith(expect.anything(), 'carts', mockUserId);
-    expect(setDoc).toHaveBeenCalledWith(
-      mockCartRef,
-      {
-        customerId: mockUserId,
-        products: mockProducts,
-        updatedAt: 'mockTimestamp',
-        createdAt: 'mockTimestamp',
-      },
-      { merge: true }
-    );
-  });
-
-  it('should return products from Firestore if document exists', async () => {
-    (getDoc as jest.Mock).mockResolvedValue({
-      exists: () => true,
-      data: () => ({
-        products: mockProducts,
-      }),
-    });
-
-    const result = await getCartFromFirestore(mockUserId);
-    expect(doc).toHaveBeenCalledWith(expect.anything(), 'carts', mockUserId);
-    expect(getDoc).toHaveBeenCalledWith(mockCartRef);
-    expect(result).toEqual(mockProducts);
-  });
-
-  it('should return empty array if document does not exist', async () => {
-    (getDoc as jest.Mock).mockResolvedValue({
-      exists: () => false,
-    });
-
-    const result = await getCartFromFirestore(mockUserId);
-    expect(result).toEqual([]);
-  });
-
-  it('should return empty array if products field is undefined', async () => {
-    (getDoc as jest.Mock).mockResolvedValue({
-      exists: () => true,
-      data: () => ({}),
-    });
-
-    const result = await getCartFromFirestore(mockUserId);
-    expect(result).toEqual([]);
-  });
-});