finished

calblueprint · Apr 22, 2024 · a1738f7 · a1738f7
1 parent f53a189
commit a1738f7
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 40 deletions.
diff --git a/src/api/supabase/queries/cart_queries.ts b/src/api/supabase/queries/cart_queries.ts
@@ -246,9 +246,10 @@ export async function fetchCartItemsWithQuantityByID(
   id: string | null,
 ): Promise<ProductWithQuantity[]> {
   if (id == null) throw new Error('no cartID');
+
   const cart = await fetchCartById(id);
   const productPromises = cart.map(async (item: CartItem) => {
-    const product = await fetchProductByID(item.product_id);
+    const product = await fetchProductByID(Number(item.product_id));
     return {
       name: product.name,
       quantity: item.quantity,

diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx
@@ -6,8 +6,8 @@ import { Body1, Heading1, Body2Light, Body2Bold, Body3 } from '@/styles/fonts';
 import {
   fetchProductByID,
   fetchUserProducts,
-} from '../../api/supabase/queries/product_queries';
-import BackButton from '../../components/BackButton/BackButton';
+} from '@/api/supabase/queries/product_queries';
+import BackButton from '@/components/BackButton/BackButton';
 import 'react-toastify/dist/ReactToastify.css';
 
 import {
@@ -22,9 +22,12 @@ import {
   HeartIcon,
   TopRightContainer,
 } from './styles';
-import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
+import {
+  addOrRemoveProductFromFavorite,
+  fetchUser,
+} from '../../api/supabase/queries/user_queries';
 import NavBar from '../../components/NavBarFolder/NavBar';
-import { Product } from '../../schema/schema';
+import { Product, User } from '../../schema/schema';
 import Buttons from './Buttons';
 
 export default function ItemDisplay({
@@ -44,8 +47,11 @@ export default function ItemDisplay({
           response.category,
         );
         const data = (await fetchUserProducts()) as Product[];
-
-        setIsFavorite(!!data.find(item => item.id === params.productId));
+        const user = (await fetchUser()) as User;
+        if (user == undefined || user.fav_items == undefined) return;
+        setIsFavorite(
+          !!user.fav_items.find(item => item === Number(params.productId)),
+        );
         if (response) {
           setItem(response);
           setFilteredProducts(data);
@@ -56,7 +62,7 @@ export default function ItemDisplay({
     }
 
     fetchProducts();
-  }, [params.productId]);
+  }, []);
 
   async function handleFavorite() {
     await addOrRemoveProductFromFavorite(

diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx
@@ -105,7 +105,7 @@ export default function OrderConfirmationDelivery() {
           <BottomColumnDiv>
             <LeftColumnDiv>
               <BackButton destination="./storefront" />
-              <Heading3Bold>Your order has been submitted</Heading3Bold>
+              <Heading3Bold>Your order has been Submitted</Heading3Bold>
               <OutterFavoriteDiv>
                 <Heading4Bold>Order No. {orderIDFromSearch}</Heading4Bold>
                 <ScrollDiv>

diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useEffect } from 'react';
 
-import { fetchUser } from '@/api/supabase/queries/user_queries';
 import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries';
 import { getOrderById } from '@/api/supabase/queries/order_queries';
 import {
@@ -41,30 +40,27 @@ import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_
 
 export default function OrderConfirmationPickUp() {
   const [Cart, setCart] = useState<Product[]>([]);
-  const [user, setUser] = useState<User>();
   const [pickupTime, setPickupTime] = useState<Pickup>();
   const searchParams = useSearchParams();
   const orderIDFromSearch = searchParams.get('orderID');
 
   useEffect(() => {
     async function fetchProducts() {
       const cartItems = (await fetchCartItemsWithQuantityByID(
-        orderIDFromSearch,
+        String(orderIDFromSearch),
       )) as Product[];
       setCart(cartItems);
     }
 
     async function setUserDetails() {
-      const fetchedUser = await fetchUser();
-      setUser(fetchedUser);
       const currOrder = await getOrderById(Number(orderIDFromSearch));
       const pickup = await fetchPickupTimesByID(currOrder.pickup_time_id);
       setPickupTime(pickup);
     }
 
     fetchProducts();
     setUserDetails();
-  });
+  }, []);
 
   function organizePickupTime() {
     const startTime = pickupTime?.start_time.toLocaleString();
@@ -81,17 +77,17 @@ export default function OrderConfirmationPickUp() {
       <NavBar />
       <CenterDiv>
         <PageDiv>
-          <BackButtonDiv>
-            <BackButton destination="./storefront" />
-          </BackButtonDiv>
           <BottomColumnDiv>
             <LeftColumnDiv>
+              <BackButtonDiv>
+                <BackButton destination="./storefront" />
+              </BackButtonDiv>
               <TextDiv>
-                <Heading3Bold>Your order has been submitted</Heading3Bold>
+                <Heading3Bold>Your Order has been Submitted</Heading3Bold>
               </TextDiv>
               <OutterFavoriteDiv>
                 <TextDiv1>
-                  <Heading4Bold>Order No. {user?.cart_id}</Heading4Bold>
+                  <Heading4Bold>Order No. {orderIDFromSearch}</Heading4Bold>
                 </TextDiv1>
                 <ScrollDiv>
                   {Cart.map(cartItem => (

diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts
@@ -9,11 +9,9 @@ export const FavoriteDiv = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  width: 750px;
+  width: 100%;
   margin-bottom: 50px;
   margin-top: 30px;
-  margin-right: 20px;
-  gap: 40px;
 `;
 
 export const OutterFavoriteDiv = styled.div`
@@ -30,21 +28,21 @@ export const OutterFavoriteDiv = styled.div`
   margin-right: 60px;
   margin-left: 60px;
   padding-right: 20px;
-  padding-left: 40px;
+  padding-left: 20px;
   padding-top: 10px;
 `;
 
 export const ScrollDiv = styled.div`
   overflow: scroll;
   overflow-x: hidden;
-  max-width: 100%;
+  width: 100%;
 `;
 
 export const ImageDiv = styled.div`
   box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.08);
   width: 150px;
   height: 150px;
-  margin-left: 30px;
+  margin-left: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -225,26 +223,17 @@ export const LeftColumnDiv = styled.div`
 export const RightColumnDiv = styled.div`
   display: flex;
   flex-flow: column;
-<<<<<<< HEAD
-
-=======
->>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5
   align-items: left;
   width: 475px;
+  margin-top: 78px;
 `;
 
 export const BackButtonDiv = styled.div`
   display: flex;
   flex-direction: row;
   text-align: left;
-  width: 800px;
-<<<<<<< HEAD
-
-  margin-left: 40px;
-
-=======
-  margin-left: 40px;
->>>>>>> 0c497ffa604d1a861f8fac67277446b2133764a5
+  width: 100%;
+  margin-left: 60px;
   margin-bottom: 40px;
   margin-top: 20px;
 `;
@@ -280,7 +269,7 @@ export const BottomColumnDiv = styled.div`
 export const TextDiv = styled.div`
   display: flex;
   flex-direction: row;
-  margin-left: 20px;
+  margin-left: 55px;
   margin-top: 10px;
   margin-bottom: 10px;
 `;

diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts
@@ -40,6 +40,7 @@ export const OrderHistoryContainer = styled.div`
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   width: 800px; // Width of the outer box
   height: auto;
+  min-height: 300px;
   margin-top: 20px;
   padding-top: 10px;
 `;

diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx
@@ -107,9 +107,11 @@ export default function StoreFrontNavBar(props: {
       } else {
         newInd = ind + 4;
       }
-      setInd(newInd);
+      setInd(ind);
       changeDisplay(1, newInd);
     }
+    console.log(ind);
+    console.log(buttonCategories.length);
     setReachedEnd(ind + 5 < buttonCategories.length);
     setReachedStart(true);
   };