From 721c232c14fdc533c4b7e5b900ee07998874316c Mon Sep 17 00:00:00 2001
From: Buyankhuu Tsolmonkhuu <Buyankhuuts@Berkeley.edu>
Date: Mon, 8 Apr 2024 13:47:26 -0700
Subject: [PATCH 1/2] bugbashFix

---
 src/app/cart/styles.tsx               | 5 +++--
 src/app/profileScreen/page.tsx        | 1 +
 src/app/storefront/productButtons.tsx | 4 +---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
index d3364a99..9598dbd4 100644
--- a/src/app/cart/styles.tsx
+++ b/src/app/cart/styles.tsx
@@ -268,7 +268,7 @@ export const DeliveryContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
 `;
 
 export const Container = styled.div`
@@ -279,7 +279,7 @@ export const Container = styled.div`
 export const InformationContainer = styled.div`
   width: 100%;
   height: 100%;
-  margin: 40px;
+  margin-left: 25px;
 `;
 
 export const OutterDiv = styled.div`
@@ -339,6 +339,7 @@ export const BackButtonDiv = styled.div`
   text-align: left;
   width: 800px;
   margin-left: 110px;
+  margin-bottom: 40px;
 `;
 
 export const CheckoutButton = styled.button`
diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx
index e550fa2c..d8bd8add 100644
--- a/src/app/profileScreen/page.tsx
+++ b/src/app/profileScreen/page.tsx
@@ -114,6 +114,7 @@ function OrderHistorySection(props: { Orders: Order[] }) {
         const firstOrder = Orders.filter(
           order => order.order_product_id_array.length !== 0,
         )[0];
+        //handleErrorlater
         const firstOrderProductIds = firstOrder.order_product_id_array.slice(
           0,
           3,
diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx
index 399839fb..0cc824b7 100644
--- a/src/app/storefront/productButtons.tsx
+++ b/src/app/storefront/productButtons.tsx
@@ -11,7 +11,6 @@ import {
 import { Product } from '../../schema/schema';
 
 export default function ProductButtons(props: {
-  key: number;
   value: string;
   setFiltredProducts: (category: Product[]) => void;
   content: string;
@@ -21,7 +20,6 @@ export default function ProductButtons(props: {
   clickedButton: number;
 }) {
   const {
-    key,
     value,
     content,
     setFiltredProducts,
@@ -88,7 +86,7 @@ export default function ProductButtons(props: {
     <IndividualContainer>
       <Button
         $pickColor={index === clickedButton}
-        key={key}
+        key={value}
         value={value}
         onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
           applyFilter(e)

From 1d3730a8a74f9cf673e2751859905c2700b603d2 Mon Sep 17 00:00:00 2001
From: Buyankhuu Tsolmonkhuu <Buyankhuuts@Berkeley.edu>
Date: Mon, 8 Apr 2024 14:58:44 -0700
Subject: [PATCH 2/2] done

---
 src/app/profileScreen/page.tsx  | 147 ++++++++++++++++++--------------
 src/app/profileScreen/styles.ts |   8 ++
 2 files changed, 92 insertions(+), 63 deletions(-)

diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx
index d8bd8add..9cbcec11 100644
--- a/src/app/profileScreen/page.tsx
+++ b/src/app/profileScreen/page.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import {
   Heading2,
   Body3,
+  Heading3,
   Heading1,
   Body1Bold,
   Body2Bold,
@@ -53,6 +54,7 @@ import {
   ColumnDiv,
   LogOutDiv,
   Fullscreen,
+  MessageDiv,
 } from './styles';
 import { signOut } from '../../api/supabase/auth/auth';
 import 'react-toastify/dist/ReactToastify.css';
@@ -68,6 +70,39 @@ function FavoriteSection(props: {
     addOrRemoveProductFromFavorite(fav, false);
     setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
   }
+  if (Favorites.length > 0) {
+    return (
+      <main>
+        <FavoritesContainer>
+          <HeaderDiv>
+            <Heading2>Favorites</Heading2>
+            <ViewAllButton destination="./favorites" />
+          </HeaderDiv>
+          {Favorites.slice(0, 2).map(favorite => (
+            <FavoriteDiv key={favorite.id}>
+              <img
+                src={favorite.photo}
+                alt={favorite.name}
+                style={{ width: '75px', height: '75px' }}
+              />
+              <ProductNameDiv>
+                <p>
+                  {favorite.name}
+                  <br />
+                  Product ID: {favorite.id}
+                </p>
+              </ProductNameDiv>
+              <TransparentButton
+                onClick={() => clickFunctions({ fav: favorite })}
+              >
+                <HeartIcon />
+              </TransparentButton>
+            </FavoriteDiv>
+          ))}
+        </FavoritesContainer>
+      </main>
+    );
+  }
   return (
     <main>
       <FavoritesContainer>
@@ -75,27 +110,9 @@ function FavoriteSection(props: {
           <Heading2>Favorites</Heading2>
           <ViewAllButton destination="./favorites" />
         </HeaderDiv>
-        {Favorites.slice(0, 2).map(favorite => (
-          <FavoriteDiv key={favorite.id}>
-            <img
-              src={favorite.photo}
-              alt={favorite.name}
-              style={{ width: '75px', height: '75px' }}
-            />
-            <ProductNameDiv>
-              <p>
-                {favorite.name}
-                <br />
-                Product ID: {favorite.id}
-              </p>
-            </ProductNameDiv>
-            <TransparentButton
-              onClick={() => clickFunctions({ fav: favorite })}
-            >
-              <HeartIcon />
-            </TransparentButton>
-          </FavoriteDiv>
-        ))}
+        <MessageDiv>
+          <Heading3>No Favorite Items</Heading3>
+        </MessageDiv>
       </FavoritesContainer>
     </main>
   );
@@ -114,37 +131,39 @@ function OrderHistorySection(props: { Orders: Order[] }) {
         const firstOrder = Orders.filter(
           order => order.order_product_id_array.length !== 0,
         )[0];
-        //handleErrorlater
-        const firstOrderProductIds = firstOrder.order_product_id_array.slice(
-          0,
-          3,
-        );
+        // handleErrorlater
+        if (firstOrder) {
+          const firstOrderProductIds = firstOrder.order_product_id_array.slice(
+            0,
+            3,
+          );
 
-        const productIds = await Promise.all(
-          firstOrderProductIds.map(productId =>
-            fetchOrderProductById(productId).then(
-              orderproduct => orderproduct.product_id,
+          const productIds = await Promise.all(
+            firstOrderProductIds.map(productId =>
+              fetchOrderProductById(productId).then(
+                orderproduct => orderproduct.product_id,
+              ),
             ),
-          ),
-        );
+          );
 
-        const productArray = await Promise.all(
-          productIds.map(async productId =>
-            fetchProductWithQuantityById(productId).then(product => product),
-          ),
-        );
+          const productArray = await Promise.all(
+            productIds.map(async productId =>
+              fetchProductWithQuantityById(productId).then(product => product),
+            ),
+          );
 
-        setFirstOrderProducts(productArray);
+          setFirstOrderProducts(productArray);
 
-        const timestamp = firstOrder.created_at;
-        const date = new Date(timestamp);
-        const options: Intl.DateTimeFormatOptions = {
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-        };
-        const formattedDate = date.toLocaleDateString('en-US', options);
-        setFormattedDate(formattedDate);
+          const timestamp = firstOrder.created_at;
+          const date = new Date(timestamp);
+          const options: Intl.DateTimeFormatOptions = {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          };
+          const formattedDate = date.toLocaleDateString('en-US', options);
+          setFormattedDate(formattedDate);
+        }
       }
     }
     fetchFirstOrderProducts();
@@ -250,14 +269,9 @@ function OrderHistorySection(props: { Orders: Order[] }) {
           <Heading2>Order History</Heading2>
           <ViewAllButton destination="./orderHistory" />
         </HeaderDiv>
-        <div
-          style={{
-            marginTop: '20px',
-            width: '100%',
-          }}
-        >
-          <Heading4>No Current Orders to Display</Heading4>
-        </div>
+        <MessageDiv>
+          <Heading3>No Current Orders to Display</Heading3>
+        </MessageDiv>
       </OrderHistory>
     </main>
   );
@@ -277,27 +291,34 @@ function AccountDetailSectionDelivery(props: { user: User }) {
     <main>
       <AccountDetails>
         <Heading2>Account Details</Heading2>
+        <HeadingSpacing>
+          <Body2Bold>Name</Body2Bold>
+        </HeadingSpacing>
+        <TextSpacing>
+          <Body3>
+            {user?.first_name} {user?.last_name}
+          </Body3>
+        </TextSpacing>
         <HeadingSpacing>
           <Body2Bold>Email</Body2Bold>
         </HeadingSpacing>
         <TextSpacing>
           <Body3>{user?.email}</Body3>
         </TextSpacing>
+
         <HeadingSpacing>
-          <Body2>Name</Body2>
+          <Body2Bold>Phone</Body2Bold>
         </HeadingSpacing>
         <TextSpacing>
-          <Body3>
-            {user?.first_name} {user?.last_name}
-          </Body3>
+          <Body3>{user?.phone_numbers}</Body3>
         </TextSpacing>
         <HeadingSpacing>
-          <Body2>Address</Body2>
+          <Body2Bold>Address</Body2Bold>
         </HeadingSpacing>
         <TextSpacing>
-          <Body1>
+          <Body3>
             {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
-          </Body1>
+          </Body3>
         </TextSpacing>
       </AccountDetails>
     </main>
@@ -382,7 +403,7 @@ export default function Profile() {
     getUser();
   }, []);
   if (user === undefined) {
-    return <p>Error Loading User</p>;
+    return <p> Loading User</p>;
   }
   return (
     <Fullscreen>
diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts
index 46af09cd..81d02884 100644
--- a/src/app/profileScreen/styles.ts
+++ b/src/app/profileScreen/styles.ts
@@ -156,3 +156,11 @@ export const LogOutDiv = styled.div`
   width: 500px;
   height: 350px;
 `;
+
+export const MessageDiv = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: 250px;
+`;