fixed sizing and edge cases

CSCE331-Fall2024 · Dec 5, 2024 · 769ad2d · 769ad2d
1 parent 7b98e03
commit 769ad2d
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/src/app/_components/shoppingCart.tsx b/src/app/_components/shoppingCart.tsx
@@ -27,7 +27,7 @@ export default function ShoppingCart() {
 
     function removeAllItems(): void {
         // setCurrentItems([]);
-        setShoppingData({size: -1, currentPrice: 0, numEntrees: 0, cartItems: []});
+        setShoppingData({size: -1, currentPrice: 0, numEntrees: 0, cartItems: [], numSides: 0});
     }
 
     const [cart, showCart] = useState(false);
@@ -85,6 +85,9 @@ export default function ShoppingCart() {
         else if(shoppingData.cartItems[index].includes("/l") && shoppingData.cartItems[index].includes("/s")){
             setShoppingData({...shoppingData, currentPrice: shoppingData.currentPrice - 4, cartItems: [...shoppingData.cartItems.slice(0, index), ...shoppingData.cartItems.slice(index + 1)]})
         }
+        else if(shoppingData.cartItems[index].includes("/s")){
+            setShoppingData({...shoppingData, numSides: shoppingData.numSides + 1, cartItems: [...shoppingData.cartItems.slice(0, index), ...shoppingData.cartItems.slice(index + 1)]})
+        }
 
         else if(shoppingData.cartItems[index].includes("/p")){
             setShoppingData({...shoppingData, currentPrice: shoppingData.currentPrice - 1.5, cartItems: [...shoppingData.cartItems.slice(0, index), ...shoppingData.cartItems.slice(index + 1)]})
@@ -147,7 +150,7 @@ export default function ShoppingCart() {
         } catch (error) {
             console.error('Error during checkout:', error);
         }
-        setShoppingData({size: -1, currentPrice: 0, numEntrees: 0, cartItems: []});
+        removeAllItems();
         console.log("Checkout successful!");
     }
 
@@ -211,7 +214,7 @@ export default function ShoppingCart() {
             <div className={`${cart ? "" : "hidden"} fixed bg-gray-700 h-full w-96 left-0 bg-opacity-60 flex rounded-lg flex-col items-center justify-center`}>
                 <div className="relative bg-red-400 rounded-lg h-[75%] w-3/4 flex flex-col items-center justify-start">
                     <div className="text-gray-800 font-bold text-2xl">Your Items:</div>
-                    <div className="text-black flex flex-col h-full gap-y-6 w-2/3">{listCartItems()}</div>
+                    <div className="text-black flex flex-col h-4/5 gap-y-6 w-2/3 overflow-y-auto">{listCartItems()}</div>
                     <div className="absolute w-full h-10 bottom-0 rounded-lg bg-white flex flex-row justify-around items-center">
                     <div className="text-gray-800">Price:</div>
                     <div className="flex items-center">

diff --git a/src/app/_components/shoppingData.tsx b/src/app/_components/shoppingData.tsx
@@ -12,10 +12,11 @@ export interface shoppingDataInterface {
     currentPrice: number;
     cartItems: string[];
     size: number;
+    numSides: number;
 }
 
 
-export const shoppingDataContext = createContext<[shoppingDataInterface, Dispatch<SetStateAction<shoppingDataInterface>>]>([{numEntrees: 0, currentPrice: 0, cartItems: [], size: -1}, () => {}]);
+export const shoppingDataContext = createContext<[shoppingDataInterface, Dispatch<SetStateAction<shoppingDataInterface>>]>([{numEntrees: 0, currentPrice: 0, cartItems: [], size: -1, numSides: -0}, () => {}]);
 
 export function useShoppingDataContext(){
     const data = useContext(shoppingDataContext);

diff --git a/src/app/customerView/page.tsx b/src/app/customerView/page.tsx
@@ -56,16 +56,16 @@ export default function CustomerView() {
           <div key={size.size_id} className="h-[400px] w-[400px] py-10 bg-white rounded-lg shadow-lg text-gray-800 hover:scale-105 hover:duration-300 hover:bg-gray-100 text-center">
             <Link onClick={() => {
               if (size.size_id === 0){
-                changeShoppingData({...shoppingData, numEntrees: 1, currentPrice: size.price, size: size.size_id});
+                changeShoppingData({...shoppingData, numEntrees: 1, currentPrice: size.price, size: size.size_id, numSides: 1});
               }
               else if (size.size_id === 1){
-                changeShoppingData({...shoppingData, numEntrees: 2, currentPrice: size.price, size: size.size_id});
+                changeShoppingData({...shoppingData, numEntrees: 2, currentPrice: size.price, size: size.size_id, numSides: 1});
               }   
               else if (size.size_id === 2){
-                changeShoppingData({...shoppingData, numEntrees: 3, currentPrice: size.price, size: size.size_id});
+                changeShoppingData({...shoppingData, numEntrees: 3, currentPrice: size.price, size: size.size_id, numSides: 1});
               }
               else if (size.size_id === 3){
-                changeShoppingData({...shoppingData, numEntrees: 0, currentPrice: 0, size: size.size_id});
+                changeShoppingData({...shoppingData, numEntrees: 10, currentPrice: 0, size: size.size_id, numSides: 10});
               }
             }} href = "/sides">
             {/* <Image src ={"/" + size.size_name + ".png"} width = {500} height = {500} alt = "sizes" className='w-full'/> */}

diff --git a/src/app/entrees/page.tsx b/src/app/entrees/page.tsx
@@ -56,6 +56,10 @@ export default function Entrees() {
   };
 
   const handleAddToCart = () => {
+    if (shoppingData.numEntrees === 0){
+      alert('You cannot add anymore entrees to the cart');
+      return;
+    }
     if (typeof window !== 'undefined' && selectedEntree) {
       const selectedEntreeItem = entrees.find(entree => entree.food_id === selectedEntree);
       if (selectedEntreeItem?.premium && shoppingData.size === 3){

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -20,6 +20,7 @@ export default function RootLayout({
     currentPrice: 0.0,
     cartItems: [],
     size: -1,
+    numSides: 0
 
 });
   return (

diff --git a/src/app/sides/page.tsx b/src/app/sides/page.tsx
@@ -42,17 +42,21 @@ export default function Sides() {
   };
 
   const handleAddToCart = () => {
+    if (shoppingCart.numSides === 0) {
+      alert('You cannot add anymore sides to the cart');
+      return;
+    }
     if (typeof window !== 'undefined') {
       let selectedSideItem = sides.find(side => side.food_id === selectedSide);
       if (selectedSide === 101){
         selectedSideItem = sides.find(side => side.food_id === 0);
       }
       if (selectedSideItem && shoppingCart.size === 3){
-        setShoppingCart({...shoppingCart, cartItems: [...shoppingCart.cartItems, selectedSideItem.food_name + "/l/s"], currentPrice: shoppingCart.currentPrice + 4});
+        setShoppingCart({...shoppingCart, numSides: shoppingCart.numSides - 1, cartItems: [...shoppingCart.cartItems, selectedSideItem.food_name + "/l/s"], currentPrice: shoppingCart.currentPrice + 4});
       }
       else if (selectedSideItem) {
         // sessionStorage.setItem('newItem', JSON.stringify(selectedSideItem.food_name));
-        setShoppingCart({...shoppingCart, cartItems: [...shoppingCart.cartItems, selectedSideItem.food_name]});
+        setShoppingCart({...shoppingCart, numSides: shoppingCart.numSides - 1,cartItems: [...shoppingCart.cartItems, selectedSideItem.food_name + "/s"]});
       }
       setSelectedSide(null);
     }