Merge pull request #96 from calblueprint/buyankhuu/fixesFromFinalHack

Buyankhuu/fixes from final hack
calblueprint · Apr 22, 2024 · bdf7aea · bdf7aea
2 parents e53f38b + e102c9c
commit bdf7aea
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 70 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]/Buttons.tsx b/src/app/[productId]/Buttons.tsx
@@ -11,9 +11,12 @@ import {
 
 import { addToCart } from '../../api/supabase/queries/cart_queries';
 
-export default function Buttons(props: { productNumber: number }) {
+export default function Buttons(props: {
+  productNumber: number;
+  setTotal: (val: number) => void;
+}) {
   const [quantity, setQuantity] = useState<number>(1);
-  const { productNumber } = props;
+  const { productNumber, setTotal } = props;
 
   const increaseQuantity = () => {
     setQuantity(quantity + 1);
@@ -28,6 +31,7 @@ export default function Buttons(props: { productNumber: number }) {
   // used hyphen instead of dash for display
   const changeCart = () => {
     addToCart(productNumber, quantity);
+    setTotal(productNumber + quantity);
     if (quantity <= 1) {
       toast(`you have added ${quantity} item to the cart!`);
     } else {

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({
@@ -35,6 +38,7 @@ export default function ItemDisplay({
   const [Item, setItem] = useState<Product>();
   const [IsFavorite, setIsFavorite] = useState(false);
   const [FilteredProducts, setFilteredProducts] = useState<Product[]>([]);
+  const [total, setTotal] = useState(0);
 
   useEffect(() => {
     async function fetchProducts() {
@@ -44,8 +48,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 +63,7 @@ export default function ItemDisplay({
     }
 
     fetchProducts();
-  }, [params.productId]);
+  }, []);
 
   async function handleFavorite() {
     await addOrRemoveProductFromFavorite(
@@ -102,7 +109,7 @@ export default function ItemDisplay({
           <Body1 style={{ fontWeight: 'normal', paddingTop: '5px' }}>
             <b>Category:</b> {Item?.category}
           </Body1>
-          <Buttons productNumber={params.productId} />
+          <Buttons productNumber={params.productId} setTotal={setTotal} />
           <Body2Bold style={{ paddingTop: '40px' }}>Product Details:</Body2Bold>
           <Body2Light style={{ paddingTop: '20px' }}>
             {Item?.description}

diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx
@@ -41,7 +41,6 @@ import {
 
 import { Product, User, Address } from '../../schema/schema';
 import { Body1Bold } from '../orderPage/styles';
-import { BackButtonDiv } from '../orderConfirmationPickUp/styles';
 
 export default function OrderConfirmationDelivery() {
   const [Cart, setCart] = useState<Product[]>([]);
@@ -93,7 +92,8 @@ export default function OrderConfirmationDelivery() {
       'November',
       'December',
     ];
-    const dateStr = `${months[parseInt(date[1], 10)]} ${date[2]}, ${date[0]}`;
+
+    const dateStr = `${months[Number(date[1]) - 1]} ${date[2]}, ${date[0]}`;
     return `${dateStr}`;
   }
 
@@ -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 {
@@ -36,35 +35,32 @@ import {
   TextDiv,
 } from './styles';
 
-import { Product, User, Pickup } from '../../schema/schema';
+import { Product, Pickup } from '../../schema/schema';
 import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries';
 
 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/orderPage/page.tsx b/src/app/orderPage/page.tsx
@@ -67,15 +67,6 @@ function formatDate(date: string | undefined): string {
   return `${month} ${day}, ${year}`;
 }
 
-function formatTime(date: string | undefined): string {
-  if (!date) return '';
-
-  const hour = date.substring(11, 13);
-  const minute = date.substring(14, 16);
-
-  return `${hour}:${minute}`;
-}
-
 export default function OrderPage() {
   const [orders, setOrders] = useState<ProductWithQuantity[]>([]);
   const [pickupTime, setPickupTime] = useState<Pickup>();

diff --git a/src/app/orderPageDelivery/page.tsx b/src/app/orderPageDelivery/page.tsx
@@ -5,7 +5,7 @@ import {
   fetchUser,
   fetchCurrentUserAddress,
 } from '@/api/supabase/queries/user_queries';
-
+import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
 import {
   Body1,
   Body2,
@@ -82,7 +82,16 @@ export default function OrderPageDelivery() {
         currOrderId,
       )) as ProductWithQuantity[];
       const currOrder = await getOrderById(currOrderId);
-      setOrders(data);
+      const mapCategories = await Promise.all(
+        data.map(async product => {
+          const updateCategory = await convertButtonNumberToCategory(
+            product.category,
+          );
+          return { ...product, category: updateCategory };
+        }),
+      );
+
+      setOrders(mapCategories);
       setOrder(currOrder);
     }
 

diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx
@@ -39,7 +39,6 @@ import {
   AccountDetailsDeliv,
   AccountDetailsPickUp,
   HeadingBack,
-  Spacing,
   HeadingSpacing,
   TextSpacing,
   OrderHistory,
@@ -345,7 +344,7 @@ function LogoutSection() {
     });
     setTimeout(() => {
       router.push('/login');
-    }, 3000);
+    }, 2000);
   };
 
   return (
@@ -399,7 +398,7 @@ export default function Profile() {
       <NavBarMovedUP />
       <ToastContainer
         position="top-center"
-        autoClose={500}
+        autoClose={3000}
         limit={1}
         hideProgressBar
       />

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