From b5b9d5a59ead7207ad15d97069a5d3b8da9d0e62 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Wed, 17 Apr 2024 13:44:08 -0700 Subject: [PATCH 01/19] switchBranch --- src/app/profileScreen/page.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 2e101da1..0b98511a 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -31,7 +31,7 @@ import { fetchOrderProductById, fetchProductWithQuantityById, } from '@/api/supabase/queries/order_queries'; -import { Check, CheckCircle, X } from 'react-feather'; +import { Check, CheckCircle, X, Send } from 'react-feather'; import BackButton from '../../components/BackButton/BackButton'; import { LogOutButton, @@ -170,7 +170,7 @@ function OrderHistorySection(props: { Orders: Order[] }) { if (firstOrderProducts.length > 0) { let backgroundColor = 'transparent'; if (Orders[0].order_status === 'Submitted') { - backgroundColor = '#CEE8BE'; + backgroundColor = 'var(--Greyish, #E6E6E6)'; } else if (Orders[0].order_status === 'Rejected') { backgroundColor = '#FFDDDD'; } else if (Orders[0].order_status === 'Confirmed') { @@ -178,7 +178,7 @@ function OrderHistorySection(props: { Orders: Order[] }) { } let icon; if (Orders[0].order_status === 'Submitted') { - icon = ; + icon = ; } else if (Orders[0].order_status === 'Rejected') { icon = ; } else if (Orders[0].order_status === 'Confirmed') { @@ -329,12 +329,7 @@ function AccountDetailSectionPickUp(props: { user: User }) {
Account Details - - Email - - - {user?.email} - + Name @@ -343,6 +338,13 @@ function AccountDetailSectionPickUp(props: { user: User }) { {user?.first_name} {user?.last_name} + + Email + + + {user?.email} + + Phone Number From f96b62c641f6069740a8202872ccc906f79fc9d7 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 17 Apr 2024 17:41:34 -0700 Subject: [PATCH 02/19] Midpoint cleanup --- src/app/[productId]/Buttons.tsx | 6 +++++- src/app/cart/cartItem.tsx | 5 ++++- src/app/cart/page.tsx | 19 +++++++++++-------- src/app/cart/styles.tsx | 15 ++++++++++++++- src/app/orderConfirmationDelivery/page.tsx | 10 ++++++++-- src/app/orderConfirmationPickUp/page.tsx | 12 +++++++----- src/app/orderConfirmationPickUp/styles.ts | 6 +++--- src/components/NavBarFolder/styles.ts | 4 ++-- 8 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx index 80bea55a..3cfe8355 100644 --- a/src/app/[productId]/Buttons.tsx +++ b/src/app/[productId]/Buttons.tsx @@ -26,7 +26,11 @@ export default function Buttons(props: { productNumber: number }) { // used hyphen instead of dash for display const changeCart = () => { addToCart(productNumber, quantity); - toast(`you have added ${quantity} items to the cart!`); + if (quantity <= 1) { + toast(`you have added ${quantity} item to the cart!`); + } else { + toast(`you have added ${quantity} items to the cart!`); + } }; return ( diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx index 375d5f11..8d461e89 100644 --- a/src/app/cart/cartItem.tsx +++ b/src/app/cart/cartItem.tsx @@ -9,6 +9,7 @@ import { TransparentButton, LabelBox, ImageBackground, + CategorySpacing, } from './styles'; import Buttons from './Buttons'; @@ -46,7 +47,9 @@ export default function CartItem(props: { {cartItemProduct.name} - Category: {cartItemProduct.category} + + Category: {cartItemProduct.category} + - - checkDelivery()} - disabled={numberOfItems === 0} - > - Check Out - + + + checkDelivery()} + disabled={numberOfItems === 0} + > + Check Out + + diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index b9cee91a..b8359c23 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -65,8 +65,9 @@ export const Backtext = styled.p` export const TrashIcon = styled(Trash2)` width: 30px; height: 30px; - color: black; + color: navy; margin-right: 30px; + margin-left: 50px; margin-top: 28px; `; @@ -102,6 +103,8 @@ export const QuantityButton = styled.div` width: 165px; height: 50px; border-radius: 8px; + font-size: 18px; + font-weight: bold; background-color: ${COLORS.white}; border: 2px solid ${COLORS.navy}; color: ${COLORS.navy}; @@ -373,3 +376,13 @@ export const CheckoutButton = styled.button` background: #0e2351; } `; + +export const CategorySpacing = styled.div` + margin-top: 15px; +`; + +export const OrderSumSectionSpacing = styled.div` + margin-left: 195px; +`; + + diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index 2d2f902d..764228d3 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -30,6 +30,7 @@ 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([]); @@ -62,6 +63,9 @@ export default function OrderConfirmationDelivery() { + + + @@ -81,8 +85,10 @@ export default function OrderConfirmationDelivery() { }} /> - {cartItem.name} - Category: {cartItem.category} +
+ Quantity: + {cartItem.quantity} +
))} diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 871a0e1e..2dd0d411 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -86,7 +86,7 @@ export default function OrderConfirmationPickUp() {
- + @@ -95,7 +95,6 @@ export default function OrderConfirmationPickUp() { Your order has been submitted - Order No. {orderIDFromSearch} @@ -116,10 +115,13 @@ export default function OrderConfirmationPickUp() { {cartItem.name}
- Category: {cartItem.category} + Category: {cartItem.category} - Quantity: {cartItem.quantity} +
+ Quantity: + {cartItem.quantity} +
))} @@ -128,7 +130,7 @@ export default function OrderConfirmationPickUp() { - Delivery Information + Pickup Information Time Slot {organizePickupTime()} (10:00 am - 12:30 pm) Location diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index d142d103..778a6208 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -242,7 +242,7 @@ export const BackButtonDiv = styled.div` text-align: left; width: 800px; margin-left: 80px; - margin-bottom: 40px; + margin-top: 40px; `; export const WhiteBackgroundDiv = styled.div` @@ -302,7 +302,7 @@ export const ShippingDetailsDiv = styled.div` padding: 36px 34px; gap: 33px; max-height: 100%; - margin-top: 93px; + margin-top: 205px; margin-bottom: 30px; margin-right: 40px; `; @@ -322,4 +322,4 @@ export const CenterDiv = styled.div` justify-content: center; width: 100%; padding: 20px; -`; +`; \ No newline at end of file diff --git a/src/components/NavBarFolder/styles.ts b/src/components/NavBarFolder/styles.ts index fe42f4de..f96c286f 100644 --- a/src/components/NavBarFolder/styles.ts +++ b/src/components/NavBarFolder/styles.ts @@ -10,8 +10,8 @@ export const CartTotalCircle = styled.div<{ $isZero?: boolean }>` height: 24px; border-radius: 50%; position: absolute; - top: -12px; - right: -12px; + top: -13px; + right: -13px; display: flex; justify-content: center; align-items: center; From 6f15259c0b757f0ecaf699d315676280aa324ba9 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Wed, 17 Apr 2024 17:46:24 -0700 Subject: [PATCH 03/19] switchBranch --- src/api/supabase/queries/user_queries.ts | 13 ++++++++++--- src/app/[productId]/page.tsx | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index 6b374796..c12ecb5d 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -10,13 +10,20 @@ import { convertButtonNumberToCategory } from './button_queries'; */ export async function fetchUser(): Promise { const { - data: { user }, + data: { session }, error, - } = await supabase.auth.getUser(); + } = await supabase.auth.getSession(); + if (error) { - throw new Error(`Error fetching user: ${error.message}`); + throw new Error(`Error fetching session: ${error.message}`); + } + + if (!session) { + throw new Error(`Session is null`); } + const user = session.user; + if (user !== null) { const { data, error: error1 } = await supabase .from('profiles') diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index f93bd3d3..3a45652a 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -62,7 +62,7 @@ export default function ItemDisplay({ {Item?.name} From 1429cd75067cf581c3a121695592f9a1b2fec054 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 17 Apr 2024 17:49:16 -0700 Subject: [PATCH 04/19] prettier --- src/app/cart/styles.tsx | 2 -- src/app/orderConfirmationDelivery/page.tsx | 23 ++++++++++++++++---- src/app/orderConfirmationPickUp/page.tsx | 25 ++++++++++++++++++---- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index b8359c23..5afb1210 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -384,5 +384,3 @@ export const CategorySpacing = styled.div` export const OrderSumSectionSpacing = styled.div` margin-left: 195px; `; - - diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index 764228d3..c82042cb 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -85,10 +85,25 @@ export default function OrderConfirmationDelivery() { }} /> -
- Quantity: - {cartItem.quantity} -
+
+ + Quantity: + + + {cartItem.quantity} + +
))} diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index 2dd0d411..c9b612ce 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -86,7 +86,7 @@ export default function OrderConfirmationPickUp() {
- + @@ -115,12 +115,29 @@ export default function OrderConfirmationPickUp() { {cartItem.name}
- Category: {cartItem.category} + + Category: {cartItem.category} +
- Quantity: - {cartItem.quantity} + + Quantity: + + + {cartItem.quantity} +
From d64d3e5b2623023e175a863b5af577e4551485c4 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 17 Apr 2024 17:53:17 -0700 Subject: [PATCH 05/19] done --- src/app/page.tsx | 110 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 82 insertions(+), 28 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 1ec1d3d6..8fec7ba4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,34 +1,88 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ - 'use client'; -import React, { useEffect } from 'react'; - -import Link from 'next/link'; -// import { fullFavItemTest } from '../api/supabase/queries/tests/user_test'; - -export default function Checkout() { - // testFetchUserData(); - // testAddUserAddress(); - // testFetchOrderByUUID(); - // testFetchOrders(); - // testGetOrderById(); - // testToggleOrderProgress(); - // testFetchProducts(); - // testFetchProductByName(); - // testFetchPickupData(); - // testFetchPickupTimesByUUID(); - // testUpdateAllOrdersProgressToTrue(); - // useEffect(() => { - // async function testEverything() { - // await arrayOfFavorites(); - // } - // testEverything(); - // }); +import { useState } from 'react'; +import Image from 'next/image'; +import supabase from '@/api/supabase/createClient'; +import { Body1, Heading1 } from '@/styles/fonts'; + +import { + Fullscreen, + LoginBox, + LoginContent, + WelcomeSign, + Button, + ErrorMessage, + EyeOffIcon, + EyeIcon, +} from './login/styles'; +import LoginForm from '@/components/LoginFormFolder/LoginForm'; + +export default function App() { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [errorMessage, setErrorMessage] = useState(''); + const [isError, setIsError] = useState(false); + const [showPassword, setShowPassword] = useState(false); + + const handleLogin = async () => { + const { error } = await supabase.auth.signInWithPassword({ + email, + password, + }); + + setErrorMessage(''); + + if (error) { + setErrorMessage('Incorrect email or password'); + setIsError(true); + } else { + window.location.href = '/storefront'; + } + }; return ( -
- Login -
+ + logo pic + + + + Welcome + + + + {showPassword ? ( + setShowPassword(false)} + style={{ cursor: 'pointer' }} + /> + ) : ( + setShowPassword(true)} + style={{ cursor: 'pointer' }} + /> + )} + + {errorMessage && {errorMessage}} + + + + ); } From e34419c77fc929a63834b9414528277b3b7b4989 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 17 Apr 2024 17:54:15 -0700 Subject: [PATCH 06/19] eslint --- src/app/page.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 8fec7ba4..1a994a9e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,6 +4,7 @@ import { useState } from 'react'; import Image from 'next/image'; import supabase from '@/api/supabase/createClient'; import { Body1, Heading1 } from '@/styles/fonts'; +import LoginForm from '@/components/LoginFormFolder/LoginForm'; import { Fullscreen, @@ -15,7 +16,7 @@ import { EyeOffIcon, EyeIcon, } from './login/styles'; -import LoginForm from '@/components/LoginFormFolder/LoginForm'; + export default function App() { const [email, setEmail] = useState(''); From c712588e78710656e05ac11f2e89988fd642a16f Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 17 Apr 2024 17:55:43 -0700 Subject: [PATCH 07/19] prettier --- src/app/orderConfirmationPickUp/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts index 778a6208..4f2e25a8 100644 --- a/src/app/orderConfirmationPickUp/styles.ts +++ b/src/app/orderConfirmationPickUp/styles.ts @@ -322,4 +322,4 @@ export const CenterDiv = styled.div` justify-content: center; width: 100%; padding: 20px; -`; \ No newline at end of file +`; From e19b13d355ca4c0932d320b8190a53d1de7d8ce0 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 17 Apr 2024 17:58:43 -0700 Subject: [PATCH 08/19] prettier --- src/app/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 1a994a9e..ad5ea152 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -17,7 +17,6 @@ import { EyeIcon, } from './login/styles'; - export default function App() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); From 5c3ec589888fd0644f7ae36f131c854aa9856b40 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Thu, 18 Apr 2024 22:16:07 -0700 Subject: [PATCH 09/19] cart view --- src/app/cart/styles.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx index 5afb1210..ee956f99 100644 --- a/src/app/cart/styles.tsx +++ b/src/app/cart/styles.tsx @@ -11,9 +11,6 @@ export const FavoriteDiv = styled.div` display: flex; flex-direction: row; align-items: center; - justify-content: space-between; - max-width: 750px; - width: 100%; `; export const ImageBackground = styled.div` @@ -30,7 +27,6 @@ export const CartItemsDiv = styled.div` flex-direction: column; align-items: center; border-radius: 10px; - width: 750px; overflow: auto; gap: 32px; margin-top: 20px; @@ -78,7 +74,7 @@ export const FooterMoved = styled(Footer)` export const TransparentButton = styled.button` background-color: transparent; border: transparent; - padding-left: 40px; + margin-left: 40px; margin-bottom: 25px; `; @@ -109,6 +105,7 @@ export const QuantityButton = styled.div` border: 2px solid ${COLORS.navy}; color: ${COLORS.navy}; cursor: pointer; + margin-left: 200px; `; export const PlusMinusButton = styled.button` @@ -128,13 +125,13 @@ export const Label = styled.p` export const LabelBox = styled.div` width: 150px; + margin-left: 50px; `; export const ContentDiv = styled.div` display: flex; flex-direction: row; justify-content: space-between; - gap: 100px; padding-left: 50px; background-color: ${COLORS.offWhite}; `; @@ -382,5 +379,5 @@ export const CategorySpacing = styled.div` `; export const OrderSumSectionSpacing = styled.div` - margin-left: 195px; + margin-left: 135px; `; From a7fe76257439a4785c180b11c83eb45739e043bb Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Sun, 21 Apr 2024 12:22:50 -0700 Subject: [PATCH 10/19] push --- src/app/favorites/styles.ts | 3 +++ src/app/orderHistory/page.tsx | 4 +++- src/app/orderHistory/styles.ts | 17 +++++++++++------ src/app/profileScreen/styles.ts | 5 +++-- src/components/BackButton/BackButton.tsx | 4 ++-- src/components/BackButton/styles.ts | 6 +++--- src/components/OrderHistory/styles.ts | 4 ++-- 7 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index b2fb6851..acd1f56c 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -43,6 +43,9 @@ export const BackDiv = styled.button` export const OutterBox = styled.div` width: 800px; height: 100%; + + margin-top: 50px; + margin-bottom: 50px; `; export const Backtext = styled.p` diff --git a/src/app/orderHistory/page.tsx b/src/app/orderHistory/page.tsx index 62b3bf77..e02c8e1e 100644 --- a/src/app/orderHistory/page.tsx +++ b/src/app/orderHistory/page.tsx @@ -30,7 +30,9 @@ function OrderHistory() { - Order History +
+ Order History +
{orderIds.length > 0 ? ( orderIds.map((orderId: number) => ( diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index 9b2e322a..cae116e2 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -3,6 +3,7 @@ import styled from 'styled-components'; import NavBar from '../../components/NavBarFolder/NavBar'; import Footer from '../../components/FooterFolder/Footer'; +import COLORS from '@/styles/colors'; export const FooterMoved = styled(Footer)` left: 0; @@ -13,8 +14,9 @@ export const NavBarMovedUP = styled(NavBar)` `; export const OutterBox = styled.div` - width: 900px; - margin: 0 auto; // This will center the OutterBox + width: 800px; + margin-top: 40px; + margin-bottom: 70px; `; export const OrderHistoryContainer = styled.div` @@ -22,13 +24,12 @@ export const OrderHistoryContainer = styled.div` flex-direction: column; align-items: center; border-radius: 10px; - background: var(--White, #fff); + background: ${COLORS.white}; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); width: 800px; // Width of the outer box - height: 700px; - overflow: scroll; + height: auto; margin-top: 10px; - padding: 0; // Ensure there's no padding pushing the internal boxes inward + padding-top: 40px; `; export const OrderHistoryBox = styled.div` @@ -46,4 +47,8 @@ export const OrderHistoryBox = styled.div` export const Fullscreen = styled.div` width: 100%; height: 100%; + display: flex; + align-items: center; + flex-direction: column; + background-color: ${COLORS.offWhite}; `; diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 884f01b1..1ee1f70b 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -77,7 +77,7 @@ export const LogOutButton = styled.button` border: transparent; border-radius: 5px; width: 405px; - height: 70px; + height: 50px; `; /* transform: translateY(200px); */ @@ -112,7 +112,8 @@ export const HeartIcon = styled(Heart)` `; export const BackButtonDiv = styled.div` - margin-bottom: 40px; + margin-bottom: 30px; + margin-top: 50px; `; export const HeaderDiv = styled.div` diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx index 11722ab4..bff2d899 100644 --- a/src/components/BackButton/BackButton.tsx +++ b/src/components/BackButton/BackButton.tsx @@ -1,4 +1,4 @@ -import { Body1 } from '@/styles/fonts'; +import { Body1Bold } from '@/styles/fonts'; import { BackLink, ArrowLeftIcon } from './styles'; export default function BackButton(props: { destination: string }) { @@ -6,7 +6,7 @@ export default function BackButton(props: { destination: string }) { return ( - Back + Back ); } diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts index 82155a18..4abb943e 100644 --- a/src/components/BackButton/styles.ts +++ b/src/components/BackButton/styles.ts @@ -10,13 +10,13 @@ export const BackLink = styled(Link)` justify-content: space-between; color: ${COLORS.black}; width: 75px; - gap: 5px; + &:hover { text-decoration: underline; } `; export const ArrowLeftIcon = styled(ArrowLeft)` - width: 24px; - height: 24px; + width: 20px; + height: 20px; `; diff --git a/src/components/OrderHistory/styles.ts b/src/components/OrderHistory/styles.ts index c321c849..fec7e6c7 100644 --- a/src/components/OrderHistory/styles.ts +++ b/src/components/OrderHistory/styles.ts @@ -165,8 +165,8 @@ export const GalleryImage = styled.img` export const RowDiv = styled.div` width: 700px; - height: 400px; - margin-bottom: 50px; + height: 300px; + margin-bottom: 20px; `; export const OrderStatusDiv = styled.div` From d0e5b51f3a1ee23c6bafcf0f32a105ccf6d59818 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Sun, 21 Apr 2024 13:24:26 -0700 Subject: [PATCH 11/19] done --- src/api/supabase/queries/user_queries.ts | 2 +- src/app/orderHistory/styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index c12ecb5d..aededc51 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -22,7 +22,7 @@ export async function fetchUser(): Promise { throw new Error(`Session is null`); } - const user = session.user; + const {user} = session; if (user !== null) { const { data, error: error1 } = await supabase diff --git a/src/app/orderHistory/styles.ts b/src/app/orderHistory/styles.ts index cae116e2..a93abdc1 100644 --- a/src/app/orderHistory/styles.ts +++ b/src/app/orderHistory/styles.ts @@ -1,9 +1,9 @@ // styles.ts (for styled-components) import styled from 'styled-components'; +import COLORS from '@/styles/colors'; import NavBar from '../../components/NavBarFolder/NavBar'; import Footer from '../../components/FooterFolder/Footer'; -import COLORS from '@/styles/colors'; export const FooterMoved = styled(Footer)` left: 0; From 4cbf0c6d2e26fd1387d09c6c514d38c2468358dd Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Sun, 21 Apr 2024 13:27:49 -0700 Subject: [PATCH 12/19] message --- src/api/supabase/queries/user_queries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index aededc51..4b70bbcb 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -22,7 +22,7 @@ export async function fetchUser(): Promise { throw new Error(`Session is null`); } - const {user} = session; + const { user } = session; if (user !== null) { const { data, error: error1 } = await supabase From dfd7df1cca03afa739ca33bdc737770819924672 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 17 Apr 2024 14:20:29 -0700 Subject: [PATCH 13/19] fixes --- src/app/[productId]/Buttons.tsx | 8 ++++--- src/app/[productId]/page.tsx | 20 ++++++++--------- src/app/[productId]/styles.ts | 26 +++++++++------------- src/app/globals.css | 6 ++++- src/app/login/styles.ts | 8 +++++-- src/app/storefront/productButtons.tsx | 1 - src/components/InputFieldsFolder/styles.ts | 6 ++--- 7 files changed, 40 insertions(+), 35 deletions(-) diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx index 3cfe8355..9cc8d802 100644 --- a/src/app/[productId]/Buttons.tsx +++ b/src/app/[productId]/Buttons.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; import { toast } from 'react-toastify'; +import { Plus, Minus } from 'react-feather'; +import { Body1Bold } from '@/styles/fonts'; import { ButtonsWrapper, AddToCartButton, @@ -37,11 +39,11 @@ export default function Buttons(props: { productNumber: number }) { - – + - {quantity} + {quantity} - + + diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 3a45652a..d892f214 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; -import { Body1, Heading1, Body2Light } from '@/styles/fonts'; +import { Body1, Heading1, Body2Light, Body2Bold } from '@/styles/fonts'; import { fetchProductByID } from '../../api/supabase/queries/product_queries'; import BackButton from '../../components/BackButton/BackButton'; import 'react-toastify/dist/ReactToastify.css'; @@ -13,6 +13,7 @@ import { DescriptionContainer, ToastPopUP, Fullscreen, + LeftColumnDiv } from './styles'; import NavBar from '../../components/NavBarFolder/NavBar'; @@ -53,11 +54,10 @@ export default function ItemDisplay({ limit={1} hideProgressBar /> -
- -
+ + + {Item?.name} - {Item?.category} + Category: {Item?.category} - - Product ID: {Item?.id} - - + Product Details: + + + {Item?.description} - {Item?.description} diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts index e96cbb27..3a68f588 100644 --- a/src/app/[productId]/styles.ts +++ b/src/app/[productId]/styles.ts @@ -2,42 +2,37 @@ import styled from 'styled-components'; import { ToastContainer } from 'react-toastify'; import COLORS from '../../styles/colors'; -export const BackButton = styled.button` + +export const LeftColumnDiv = styled.div` display: flex; - padding-top: 230px; - padding-left: 30px; - width: 100px; - height: 40px; - background-color: transparent; - border-color: transparent; - font-size: 15px; + flex-direction: column; + gap: 25px; `; export const DescriptionContainer = styled.div` display: flex; - margin-left: 50px; - margin-right: 50px; + margin-top: 50px; width: 1440px; height: 400px; + justify-content: space-around; + align-self: center; + justify-self: center; `; export const ImageContainer = styled.div` - margin: 50px; width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; - margin-left: 200px; background-color: ${COLORS.lightGrey}; `; export const TextContainer = styled.div` - margin-left: 70px; width: 440px; height: 350px; - margin-top: 50px; + margin-top: 41px; `; export const ButtonsWrapper = styled.div` @@ -46,7 +41,7 @@ export const ButtonsWrapper = styled.div` align-items: center; width: 450px; height: 50px; - margin-top: 20px; + margin-top: 40px; `; export const QuantityButton = styled.div` @@ -94,4 +89,5 @@ export const ToastPopUP = styled(ToastContainer)` export const Fullscreen = styled.div` width: 100%; height: 100%; + display: grid; `; diff --git a/src/app/globals.css b/src/app/globals.css index 4d40d22d..c241f2ec 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -84,7 +84,11 @@ body { max-width: 100vw; min-height: 100vh; } - +button{ + &:hover { + cursor: pointer; + } +} body { background: white; color: black; diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index 41968785..d94d373f 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -3,11 +3,14 @@ import styled from 'styled-components'; import COLORS from '../../styles/colors'; export const LoginBox = styled.div` + display: flex; width: 500px; height: 420px; - border: 1px solid ${COLORS.neutralGrey}; justify-self: center; align-self: center; + background-color: ${COLORS.white}; + box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.10); + border-radius: 10px; `; export const LoginContent = styled.div` @@ -15,7 +18,6 @@ export const LoginContent = styled.div` flex-direction: column; align-self: center; justify-self: center; - margin-top: 30px; text-color: ${COLORS.black}; `; @@ -78,8 +80,10 @@ export const Fullscreen = styled.div` width: 100%; height: 100vh; display: grid; + background-color: ${COLORS.lightGrey}; `; export const InputField = styled.div` position: relative; + background-color: ${COLORS.lightGrey}; `; diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 076e25a4..23b99371 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -68,7 +68,6 @@ export default function ProductButtons(props: { // Applying the filter to the categories of the product if (category !== 'All') { - console.log(category); const products = await filterUserProducts(category); if (products !== null) { setFiltredProducts(products); diff --git a/src/components/InputFieldsFolder/styles.ts b/src/components/InputFieldsFolder/styles.ts index aad7eb73..73520526 100644 --- a/src/components/InputFieldsFolder/styles.ts +++ b/src/components/InputFieldsFolder/styles.ts @@ -4,7 +4,7 @@ import COLORS from '../../styles/colors'; export const Input1 = styled.input<{ $pickColor?: boolean }>` color: ${props => (props.$pickColor ? '#203354' : COLORS.black)}; - background: ${props => (props.$pickColor ? '#ADD8E6' : COLORS.white)}; + background: ${props => (props.$pickColor ? '#ADD8E6' : COLORS.lightGrey)}; stroke-width: 1px; width: 420px; height: 40px; @@ -31,8 +31,8 @@ export const Input = styled.input<{ stroke-width: 1px; color: ${COLORS.black}; border: 1.5px solid - ${props => (props.$wrongLogin ? COLORS.darkRed : COLORS.black)}; - background: ${props => (props.$pickColor ? COLORS.lightRed : COLORS.white)}; + ${props => (props.$wrongLogin ? COLORS.darkRed : COLORS.neutralGrey)}; + background: ${props => (props.$pickColor ? COLORS.lightRed : COLORS.lightGrey)}; width: 420px; height: 40px; padding-left: 10px; From 37910e22e12143b088fad58210797440a689cc53 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 17 Apr 2024 21:07:56 -0700 Subject: [PATCH 14/19] product page finished; favorites hover button finished; login partially done --- src/api/supabase/queries/user_queries.ts | 1 + src/app/[productId]/page.tsx | 37 +++++++++-- src/app/[productId]/styles.ts | 49 ++++++++++++++- src/app/favorites/individualItem.tsx | 78 ++++++++++++++++++++++++ src/app/favorites/page.tsx | 47 +++----------- src/app/favorites/styles.ts | 25 +++++++- src/app/profileScreen/individualItem.tsx | 64 +++++++++++++++++++ src/app/profileScreen/page.tsx | 36 +++-------- src/app/profileScreen/styles.ts | 17 ++++++ 9 files changed, 278 insertions(+), 76 deletions(-) create mode 100644 src/app/favorites/individualItem.tsx create mode 100644 src/app/profileScreen/individualItem.tsx diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index 4b70bbcb..b186ec0e 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -112,6 +112,7 @@ export async function arrayOfFavorites(): Promise { return arrayOfProducts; } + /** * fetchUserAddress: Get's a user's address based on their UUID * @param uuid: String containing the uuid of the user diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index d892f214..74314a16 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'; import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; -import { Body1, Heading1, Body2Light, Body2Bold } from '@/styles/fonts'; -import { fetchProductByID } from '../../api/supabase/queries/product_queries'; +import { Body1, Heading1, Body2Light, Body2Bold, Body3 } from '@/styles/fonts'; +import { fetchProductByID, fetchUserProducts } from '../../api/supabase/queries/product_queries'; import BackButton from '../../components/BackButton/BackButton'; import 'react-toastify/dist/ReactToastify.css'; @@ -13,9 +13,13 @@ import { DescriptionContainer, ToastPopUP, Fullscreen, - LeftColumnDiv + LeftColumnDiv, + FavoritePopup, + HeartContainer, + HeartIcon, + TopRightContainer } from './styles'; - +import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; import NavBar from '../../components/NavBarFolder/NavBar'; import { Product } from '../../schema/schema'; import Buttons from './Buttons'; @@ -26,6 +30,10 @@ export default function ItemDisplay({ params: { productId: number }; }) { const [Item, setItem] = useState(); + const [IsFavorite, setIsFavorite] = useState( + false + ); + const [FilteredProducts, setFilteredProducts] = useState([]); useEffect(() => { async function fetchProducts() { @@ -34,8 +42,12 @@ export default function ItemDisplay({ response.category = await convertButtonNumberToCategory( response.category, ); + const data = (await fetchUserProducts()) as Product[]; + + setIsFavorite(!!data.find(item => item.id === params.productId)) if (response) { setItem(response); + setFilteredProducts(data); } } catch (error) { // console.error(error); @@ -45,6 +57,11 @@ export default function ItemDisplay({ fetchProducts(); }, [params.productId]); + async function handleFavorite() { + await addOrRemoveProductFromFavorite(await fetchProductByID(params.productId), !IsFavorite); + setIsFavorite(!IsFavorite); + } + return ( @@ -67,8 +84,18 @@ export default function ItemDisplay({ + {Item?.name} - + handleFavorite()}> + + + {IsFavorite ? 'Remove from favorites' : 'Add to favorites'} + + + + + + Category: {Item?.category} diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts index 3a68f588..285c5f76 100644 --- a/src/app/[productId]/styles.ts +++ b/src/app/[productId]/styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; import { ToastContainer } from 'react-toastify'; +import { Body3 } from '@/styles/fonts'; +import { Heart } from 'react-feather'; import COLORS from '../../styles/colors'; - export const LeftColumnDiv = styled.div` display: flex; flex-direction: column; @@ -19,6 +20,12 @@ export const DescriptionContainer = styled.div` justify-self: center; `; +export const TopRightContainer = styled.div` + display: flex; + justify-content: space-between; + width: 440px; +`; + export const ImageContainer = styled.div` width: 500px; height: 500px; @@ -66,6 +73,7 @@ export const PlusMinusButton = styled.button` font-size: 20px; color: ${COLORS.navy}; `; + export const AddToCartButton = styled.button` width: 265px; height: 50px; @@ -80,6 +88,45 @@ export const AddToCartButton = styled.button` border-color: transparent; `; +export const HeartIcon = styled(Heart)<{ $favorited: boolean }>` + width: 30px; + height: 30px; + color: ${props => (props.$favorited ? COLORS.marineBlue : COLORS.black)}; + fill: ${props => (props.$favorited ? COLORS.marineBlue : 'none')}; + position: relative; +`; + +export const HeartContainer = styled.button` + right: 16px; + top: 16px; + background-color: transparent; + border: none; + cursor: pointer; +`; + +export const FavoritePopup = styled.div` + position: absolute; + visibility: hidden; + width: 150px; + border-radius: 8px; + padding: 8px; + // Find better way to refactor this, it shouldn't need a calc + transform: translate(calc(-50% + 15px), -40px); + z-index: 1; + + color: ${COLORS.black}; + background: ${COLORS.lightPeriwinkle}; + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + + ${Body3} { + display: inline; + } + + ${HeartContainer}:hover & { + visibility: visible; + } +`; + export const ToastPopUP = styled(ToastContainer)` position: fixed; z-index: 100; diff --git a/src/app/favorites/individualItem.tsx b/src/app/favorites/individualItem.tsx new file mode 100644 index 00000000..7b68d6ad --- /dev/null +++ b/src/app/favorites/individualItem.tsx @@ -0,0 +1,78 @@ +import React, { useEffect, useState } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; + +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; +import { + HeartIcon, + Hover, + FavoriteDiv, + ProductNameDiv, + ViewItem, + TransparentButton, +} from './styles'; + +import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; + +import { Product } from '../../schema/schema'; + +export default function IndividualItem(props: { + favorite: Product; + setFavorites: (category: Product[]) => void; + Favorites: Product[]; +}) { + const { favorite, Favorites, setFavorites } = props; + const router = useRouter(); + const [hovering, setHovering] = useState(false); + + useEffect(() => { + async function changeCategory() { + try { + favorite.category = await convertButtonNumberToCategory( + favorite.category, + ); + } catch (error) { + // console.error(error); + } + } + + changeCategory(); + }, []); + + async function clickFunctions(props2: { fav: Product }) { + const { fav } = props2; + addOrRemoveProductFromFavorite(fav, false); + setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); + } + + return ( + + {favorite.name} + + + {favorite.name} + Category: {favorite.category} + router.push(`/${favorite.id}`)}> + View Item + + + + clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + + Remove from favorites + + + + + ); +} \ No newline at end of file diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 8c16242d..96af5abc 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -1,34 +1,26 @@ 'use client'; import { useState, useEffect } from 'react'; -import { useRouter } from 'next/navigation'; -import { Body1Bold, Body2, Heading1 } from '@/styles/fonts'; +import { Heading1 } from '@/styles/fonts'; import BackButton from '../../components/BackButton/BackButton'; import { arrayOfFavorites, - addOrRemoveProductFromFavorite, } from '../../api/supabase/queries/user_queries'; import NavBar from '../../components/NavBarFolder/NavBar'; import { - FavoriteDiv, OutterFavoriteDiv, OutterBox, - ProductNameDiv, - HeartIcon, - TransparentButton, - ViewItem, Fullscreen, - ImageLinkWrapper, } from './styles'; +import IndividualItem from './individualItem'; import { Product } from '../../schema/schema'; export default function FavoritesPage() { const [Favorites, setFavorites] = useState([]); - const router = useRouter(); async function fetchProducts() { const data = (await arrayOfFavorites()) as Product[]; @@ -38,12 +30,6 @@ export default function FavoritesPage() { fetchProducts(); }, []); - async function clickFunctions(props: { fav: Product }) { - const { fav } = props; - addOrRemoveProductFromFavorite(fav, false); - setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); - } - return ( @@ -52,29 +38,12 @@ export default function FavoritesPage() { Favorites {Favorites.map(favorite => ( - - - {favorite.name} - - - - {favorite.name} - Category: {favorite.category} - router.push(`/${favorite.id}`)}> - View Item - - - - clickFunctions({ fav: favorite })} - > - - - + ))} diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index acd1f56c..479119e8 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -43,9 +43,11 @@ export const BackDiv = styled.button` export const OutterBox = styled.div` width: 800px; height: 100%; - - margin-top: 50px; - margin-bottom: 50px; + margin-top: 40px; + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 20px; `; export const Backtext = styled.p` @@ -58,6 +60,7 @@ export const HeartIcon = styled(Heart)` height: 30px; fill: #333286; margin-right: 25px; + margin-bottom: 40px; `; export const TransparentButton = styled.button` @@ -66,6 +69,22 @@ export const TransparentButton = styled.button` cursor: pointer; `; +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(-10px, 0px); + margin-bottom: 7px; + color: black; + border: none; + width: 156px; + height: 26px; + border-radius: 8px; + background: var(--Light-Periwinkle, #f4f7ff); + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + padding-top: 6px; + position: relative; + text-align: center; +`; + export const NavBarMovedUP = styled(NavBar)` position: relative; `; diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx new file mode 100644 index 00000000..eb2d7627 --- /dev/null +++ b/src/app/profileScreen/individualItem.tsx @@ -0,0 +1,64 @@ +import React, { useEffect, useState } from 'react'; + +import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; + +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; +import { HeartIcon, Hover, FavoriteDiv, ProductNameDiv } from './styles'; + +import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; + +import { Product } from '../../schema/schema'; +import { TransparentButton } from '../favorites/styles'; + +export default function IndividualItem(props: { + favorite: Product; + setFavorites: (category: Product[]) => void; + Favorites: Product[]; +}) { + const { favorite, Favorites, setFavorites } = props; + const [hovering, setHovering] = useState(false); + + useEffect(() => { + async function changeCategory() { + try { + favorite.category = await convertButtonNumberToCategory( + favorite.category, + ); + } catch (error) { + // console.error(error); + } + } + + changeCategory(); + }, []); + + async function clickFunctions(props2: { fav: Product }) { + const { fav } = props2; + addOrRemoveProductFromFavorite(fav, false); + setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); + } + + return ( + + {favorite.name} + + {favorite.name} + Category: {favorite.category} + + clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + + Remove from favorites + + + + + ); +} \ No newline at end of file diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 0b98511a..105a1fa9 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -42,9 +42,6 @@ import { TextSpacing, OrderHistory, FavoritesContainer, - ProductNameDiv, - FavoriteDiv, - HeartIcon, BackButtonDiv, BlankSpace, HeaderDiv, @@ -56,18 +53,14 @@ import { } from './styles'; import { signOut } from '../../api/supabase/auth/auth'; import 'react-toastify/dist/ReactToastify.css'; -import { TransparentButton } from '../favorites/styles'; +import IndividualItem from './individualItem'; + function FavoriteSection(props: { Favorites: Product[]; setFavorites: (category: Product[]) => void; }) { const { Favorites, setFavorites } = props; - async function clickFunctions(props2: { fav: Product }) { - const { fav } = props2; - addOrRemoveProductFromFavorite(fav, false); - setFavorites(Favorites.filter(Prod => Prod.id !== fav.id)); - } if (Favorites.length > 0) { return (
@@ -77,25 +70,12 @@ function FavoriteSection(props: { {Favorites.slice(0, 2).map(favorite => ( - - {favorite.name} - -

- {favorite.name} -
- Product ID: {favorite.id} -

- - clickFunctions({ fav: favorite })} - > - - - + ))}
diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 1ee1f70b..1ae59176 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -109,6 +109,23 @@ export const HeartIcon = styled(Heart)` width: 25px; height: 25px; fill: #333286; + margin-bottom: 40px; +`; + +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(0px, -1px); + margin-bottom: 7px; + color: black; + border: none; + width: 156px; + height: 26px; + border-radius: 8px; + background: var(--Light-Periwinkle, #f4f7ff); + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + padding-top: 6px; + position: relative; + text-align: center; `; export const BackButtonDiv = styled.div` From c7fa3e0ecd314f4a673c7218ed297cf16663137d Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 17 Apr 2024 21:10:10 -0700 Subject: [PATCH 15/19] eslint and prettier --- src/api/supabase/queries/user_queries.ts | 1 - src/app/[productId]/page.tsx | 62 +++++++++++----------- src/app/favorites/individualItem.tsx | 22 ++++---- src/app/favorites/page.tsx | 20 +++---- src/app/globals.css | 2 +- src/app/login/styles.ts | 2 +- src/app/profileScreen/individualItem.tsx | 36 ++++++------- src/app/profileScreen/page.tsx | 12 ++--- src/components/InputFieldsFolder/styles.ts | 3 +- 9 files changed, 77 insertions(+), 83 deletions(-) diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index b186ec0e..4b70bbcb 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -112,7 +112,6 @@ export async function arrayOfFavorites(): Promise { return arrayOfProducts; } - /** * fetchUserAddress: Get's a user's address based on their UUID * @param uuid: String containing the uuid of the user diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 74314a16..55cd995a 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -3,7 +3,10 @@ import { useEffect, useState } from 'react'; import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { Body1, Heading1, Body2Light, Body2Bold, Body3 } from '@/styles/fonts'; -import { fetchProductByID, fetchUserProducts } from '../../api/supabase/queries/product_queries'; +import { + fetchProductByID, + fetchUserProducts, +} from '../../api/supabase/queries/product_queries'; import BackButton from '../../components/BackButton/BackButton'; import 'react-toastify/dist/ReactToastify.css'; @@ -17,7 +20,7 @@ import { FavoritePopup, HeartContainer, HeartIcon, - TopRightContainer + TopRightContainer, } from './styles'; import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries'; import NavBar from '../../components/NavBarFolder/NavBar'; @@ -30,9 +33,7 @@ export default function ItemDisplay({ params: { productId: number }; }) { const [Item, setItem] = useState(); - const [IsFavorite, setIsFavorite] = useState( - false - ); + const [IsFavorite, setIsFavorite] = useState(false); const [FilteredProducts, setFilteredProducts] = useState([]); useEffect(() => { @@ -44,7 +45,7 @@ export default function ItemDisplay({ ); const data = (await fetchUserProducts()) as Product[]; - setIsFavorite(!!data.find(item => item.id === params.productId)) + setIsFavorite(!!data.find(item => item.id === params.productId)); if (response) { setItem(response); setFilteredProducts(data); @@ -58,7 +59,10 @@ export default function ItemDisplay({ }, [params.productId]); async function handleFavorite() { - await addOrRemoveProductFromFavorite(await fetchProductByID(params.productId), !IsFavorite); + await addOrRemoveProductFromFavorite( + await fetchProductByID(params.productId), + !IsFavorite, + ); setIsFavorite(!IsFavorite); } @@ -74,34 +78,32 @@ export default function ItemDisplay({ - - - {Item?.name} - + + + {Item?.name} + - - {Item?.name} - handleFavorite()}> - - - {IsFavorite ? 'Remove from favorites' : 'Add to favorites'} - - - - - - + + {Item?.name} + handleFavorite()}> + + + {IsFavorite ? 'Remove from favorites' : 'Add to favorites'} + + + + + + Category: {Item?.category} - - Product Details: - + Product Details: {Item?.description} diff --git a/src/app/favorites/individualItem.tsx b/src/app/favorites/individualItem.tsx index 7b68d6ad..7b9eea0c 100644 --- a/src/app/favorites/individualItem.tsx +++ b/src/app/favorites/individualItem.tsx @@ -26,20 +26,20 @@ export default function IndividualItem(props: { const { favorite, Favorites, setFavorites } = props; const router = useRouter(); const [hovering, setHovering] = useState(false); - + useEffect(() => { async function changeCategory() { - try { - favorite.category = await convertButtonNumberToCategory( - favorite.category, - ); - } catch (error) { - // console.error(error); - } + try { + favorite.category = await convertButtonNumberToCategory( + favorite.category, + ); + } catch (error) { + // console.error(error); } + } - changeCategory(); - }, []); + changeCategory(); + }, [favorite]); async function clickFunctions(props2: { fav: Product }) { const { fav } = props2; @@ -75,4 +75,4 @@ export default function IndividualItem(props: { ); -} \ No newline at end of file +} diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 96af5abc..6c00e83a 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -4,17 +4,11 @@ import { useState, useEffect } from 'react'; import { Heading1 } from '@/styles/fonts'; import BackButton from '../../components/BackButton/BackButton'; -import { - arrayOfFavorites, -} from '../../api/supabase/queries/user_queries'; +import { arrayOfFavorites } from '../../api/supabase/queries/user_queries'; import NavBar from '../../components/NavBarFolder/NavBar'; -import { - OutterFavoriteDiv, - OutterBox, - Fullscreen, -} from './styles'; +import { OutterFavoriteDiv, OutterBox, Fullscreen } from './styles'; import IndividualItem from './individualItem'; import { Product } from '../../schema/schema'; @@ -39,11 +33,11 @@ export default function FavoritesPage() { {Favorites.map(favorite => ( + key={favorite.id} + favorite={favorite} + setFavorites={setFavorites} + Favorites={Favorites} + /> ))} diff --git a/src/app/globals.css b/src/app/globals.css index c241f2ec..5b0dbd13 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -84,7 +84,7 @@ body { max-width: 100vw; min-height: 100vh; } -button{ +button { &:hover { cursor: pointer; } diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index d94d373f..03fb0708 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -9,7 +9,7 @@ export const LoginBox = styled.div` justify-self: center; align-self: center; background-color: ${COLORS.white}; - box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.10); + box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; `; diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx index eb2d7627..f7de722e 100644 --- a/src/app/profileScreen/individualItem.tsx +++ b/src/app/profileScreen/individualItem.tsx @@ -17,20 +17,20 @@ export default function IndividualItem(props: { }) { const { favorite, Favorites, setFavorites } = props; const [hovering, setHovering] = useState(false); - + useEffect(() => { async function changeCategory() { - try { - favorite.category = await convertButtonNumberToCategory( - favorite.category, - ); - } catch (error) { - // console.error(error); - } + try { + favorite.category = await convertButtonNumberToCategory( + favorite.category, + ); + } catch (error) { + // console.error(error); } + } - changeCategory(); - }, []); + changeCategory(); + }, [favorite]); async function clickFunctions(props2: { fav: Product }) { const { fav } = props2; @@ -40,12 +40,12 @@ export default function IndividualItem(props: { return ( - {favorite.name} - + {favorite.name} + {favorite.name} Category: {favorite.category} @@ -59,6 +59,6 @@ export default function IndividualItem(props: { - + ); -} \ No newline at end of file +} diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 105a1fa9..49c95de6 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -13,7 +13,6 @@ import { Body2, } from '@/styles/fonts'; import { - addOrRemoveProductFromFavorite, arrayOfFavorites, fetchUser, fetchCurrentUserAddress, @@ -55,7 +54,6 @@ import { signOut } from '../../api/supabase/auth/auth'; import 'react-toastify/dist/ReactToastify.css'; import IndividualItem from './individualItem'; - function FavoriteSection(props: { Favorites: Product[]; setFavorites: (category: Product[]) => void; @@ -71,11 +69,11 @@ function FavoriteSection(props: { {Favorites.slice(0, 2).map(favorite => ( + key={favorite.id} + favorite={favorite} + setFavorites={setFavorites} + Favorites={Favorites} + /> ))}
diff --git a/src/components/InputFieldsFolder/styles.ts b/src/components/InputFieldsFolder/styles.ts index 73520526..2fa8ed20 100644 --- a/src/components/InputFieldsFolder/styles.ts +++ b/src/components/InputFieldsFolder/styles.ts @@ -32,7 +32,8 @@ export const Input = styled.input<{ color: ${COLORS.black}; border: 1.5px solid ${props => (props.$wrongLogin ? COLORS.darkRed : COLORS.neutralGrey)}; - background: ${props => (props.$pickColor ? COLORS.lightRed : COLORS.lightGrey)}; + background: ${props => + props.$pickColor ? COLORS.lightRed : COLORS.lightGrey}; width: 420px; height: 40px; padding-left: 10px; From 9b32140dd9c7d5b58851357fa25cf54411d3462d Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 21 Apr 2024 11:20:09 -0700 Subject: [PATCH 16/19] order details page done --- src/app/pickup/page.tsx | 26 ++++++++++++++++++-------- src/app/pickup/styles.ts | 9 +++++++++ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx index 097b878e..4e336ece 100644 --- a/src/app/pickup/page.tsx +++ b/src/app/pickup/page.tsx @@ -1,6 +1,9 @@ 'use client'; // import { GlobalStyle } from "@/styles/components"; + +import 'react-toastify/dist/ReactToastify.css'; +import { toast } from 'react-toastify'; import { ArrowLeft } from 'react-feather'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import querystring from 'querystring'; @@ -11,7 +14,7 @@ import { } from '@/api/supabase/queries/cart_queries'; import { useState, useEffect } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; -import { Heading4Bold } from '@/styles/fonts'; +import { Body1, Heading4Bold } from '@/styles/fonts'; import { fetchNRecentPickupTimes } from '@/api/supabase/queries/pickup_queries'; import { updateCartPickupId, @@ -36,8 +39,10 @@ import { PickupContent, PickupContainer, PickupTimeButton, + ToastPopUP, } from './styles'; + function DateInfoComponent(date: { date: unknown }) { const date1 = new Date(date.date as string); const daysOfWeek = [ @@ -100,6 +105,12 @@ export default function PickUp() { return (
+ router.push('/cart')}> @@ -116,10 +127,11 @@ export default function PickUp() { Phone Number {Profile?.phone_numbers} -
+
Time Slot
- +
Pick Up times: 10:00 AM - 12:00 PM
+
Location: 3170 23rd Street, San Francisco, CA 94110
{Time.map(time => ( ))}
-
Pick Up times: 10:00 AM - 12:00 PM
-
Location: 3170 23rd Street, San Francisco, CA 94110
@@ -157,12 +167,12 @@ export default function PickUp() { await updateOrderStatus(orderID, OrderStatus.Submitted); await createOrder(); const newestOrder = await fetchCartIdFromUser(); - console.log(newestOrder); await updateOrderStatus(newestOrder, OrderStatus.inProgress); const queryString = querystring.stringify({ orderID }); router.push(`/orderConfirmationPickUp?${queryString}`); - } else { - // TODO handle the case where they didn't select a time! + } + if (selectedPickupIndex === 0){ + toast(`You must select a pick-up date!`); } }} > diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts index 35365312..257579c3 100644 --- a/src/app/pickup/styles.ts +++ b/src/app/pickup/styles.ts @@ -1,11 +1,13 @@ import styled from 'styled-components'; +import { ToastContainer } from 'react-toastify'; import COLORS from '../../styles/colors'; import NavBar from '../../components/NavBarFolder/NavBar'; import Footer from '../../components/FooterFolder/Footer'; + export const PickupContainer = styled.div` width: 730px; height: 400px; @@ -263,3 +265,10 @@ export const HeaderShiftLeft = styled.h2` export const PShiftLeft = styled.p` margin-left: 15px; `; + +export const ToastPopUP = styled(ToastContainer)` + position: fixed; + z-index: 100; + transform: translatey(90px); + background-color: ${COLORS.lightRed}; +`; \ No newline at end of file From 816eb75bde6bbde7991911605601a25f606bd797 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 21 Apr 2024 11:30:25 -0700 Subject: [PATCH 17/19] changes made --- src/app/pickup/page.tsx | 20 ++++++++++++++----- src/app/pickup/styles.ts | 3 +-- .../OrderSummaryFolder/OrderSummary.tsx | 6 +++--- src/components/OrderSummaryFolder/styles.ts | 8 +++++++- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx index 4e336ece..33e43490 100644 --- a/src/app/pickup/page.tsx +++ b/src/app/pickup/page.tsx @@ -42,7 +42,6 @@ import { ToastPopUP, } from './styles'; - function DateInfoComponent(date: { date: unknown }) { const date1 = new Date(date.date as string); const daysOfWeek = [ @@ -127,11 +126,22 @@ export default function PickUp() { Phone Number {Profile?.phone_numbers} -
+
Time Slot
-
Pick Up times: 10:00 AM - 12:00 PM
-
Location: 3170 23rd Street, San Francisco, CA 94110
+
+ {' '} + Pick Up times: 10:00 AM - 12:00 PM{' '} +
+
+ Location: 3170 23rd Street, San Francisco, CA 94110 +
{Time.map(time => ( Order Summary - Product Name - Qty. + PRODUCT NAME + QTY {cart.map(cartItem => ( diff --git a/src/components/OrderSummaryFolder/styles.ts b/src/components/OrderSummaryFolder/styles.ts index e90a18ef..16fd4a3f 100644 --- a/src/components/OrderSummaryFolder/styles.ts +++ b/src/components/OrderSummaryFolder/styles.ts @@ -1,3 +1,4 @@ +import COLORS from '@/styles/colors'; import styled from 'styled-components'; export const OrderSummaryDiv = styled.div` @@ -37,6 +38,10 @@ export const WhiteBackgroundDiv = styled.div` width: 350px; padding: 20px; box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; `; export const HeaderShiftRight = styled.h2` @@ -57,7 +62,8 @@ export const OrderSummaryHeaderDiv = styled.div` justify-content: space-between; align-items: center; flex-direction: row; - margin-bottom: 10px; + margin-bottom: 15px; + color: ${COLORS.marineBlue}; `; export const ItemNameDiv = styled.div` From 27560191d56fa2139f1f961e28ae3822b344aea6 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 21 Apr 2024 12:32:56 -0700 Subject: [PATCH 18/19] order details page done --- src/api/supabase/queries/cart_queries.ts | 1 - src/api/supabase/queries/delivery_queries.ts | 15 ++++++ src/api/supabase/queries/order_queries.ts | 2 - src/api/supabase/queries/product_queries.ts | 2 - src/api/supabase/queries/user_queries.ts | 12 ++--- src/app/orderConfirmationDelivery/page.tsx | 50 ++++++++++++++++++-- src/app/orderConfirmationDelivery/styles.ts | 14 ++++-- src/app/orderConfirmationPickUp/page.tsx | 6 +-- src/app/pickup/page.tsx | 2 +- 9 files changed, 79 insertions(+), 25 deletions(-) create mode 100644 src/api/supabase/queries/delivery_queries.ts diff --git a/src/api/supabase/queries/cart_queries.ts b/src/api/supabase/queries/cart_queries.ts index 2f1bee77..c8062040 100644 --- a/src/api/supabase/queries/cart_queries.ts +++ b/src/api/supabase/queries/cart_queries.ts @@ -206,7 +206,6 @@ export async function fetchCartItemsWithQuantity(): Promise< }); const fetchedProducts = await Promise.all(productPromises); - console.log(fetchedProducts); return fetchedProducts; } diff --git a/src/api/supabase/queries/delivery_queries.ts b/src/api/supabase/queries/delivery_queries.ts new file mode 100644 index 00000000..baa88631 --- /dev/null +++ b/src/api/supabase/queries/delivery_queries.ts @@ -0,0 +1,15 @@ +import supabase from '../createClient'; + +export type DeliveryTimes = { + delivery_group: number; + delivery_time: number; +}; + +export async function fetchDeliveryTimes(): Promise { + const { data, error } = await supabase.from('delivery_times').select('*'); + + if (error) { + throw new Error(`Error fetching delivery times: ${error.message}`); + } + return data; +} diff --git a/src/api/supabase/queries/order_queries.ts b/src/api/supabase/queries/order_queries.ts index f3e44c69..e011398d 100644 --- a/src/api/supabase/queries/order_queries.ts +++ b/src/api/supabase/queries/order_queries.ts @@ -38,12 +38,10 @@ export async function createOrder() { .insert({ user_id: user.id }) .select('*') .single(); - console.log(order); if (error) { throw new Error(`Error creating order: ${error.message}`); } - console.log(order.id); await supabase .from('profiles') .update({ cart_id: order.id }) diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index 6112c195..85ec9fbb 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -88,7 +88,6 @@ export async function filterProduct(productType: string): Promise { export async function convertCategoryToNumber( productType: string, ): Promise { - console.log(productType); const { data: buttonVal, error } = await supabase .from('storefront_buttons') .select('*') @@ -104,7 +103,6 @@ export async function convertCategoryToNumber( export async function fetchUnprescribedCategory( productType: string, ): Promise { - console.log(productType); const productTypeConverted = await convertCategoryToNumber(productType); const { data: products, error } = await supabase diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index 4b70bbcb..6a6c75a8 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -1,8 +1,6 @@ -import { Lekton } from 'next/font/google'; import supabase from '../createClient'; import { User, Product } from '../../../schema/schema'; import { fetchProductByID } from './product_queries'; -import { convertButtonNumberToCategory } from './button_queries'; /** * fetchUser is a function that fetches the user data from the database and returns the user object. @@ -55,12 +53,12 @@ export async function fetchUserByUUID(uuid: string) { .single(); if (error) { - console.error('Error fetching user data:', error); + throw new Error(`Error fetching user data: ${error.message}`); } return user; } catch (error) { - console.error('Error:', error); + throw new Error(`Error`); throw error; } } @@ -125,13 +123,12 @@ export async function fetchUserAddress(uuid: string) { .single(); if (error) { - console.error('Error fetching user data:', error); + throw new Error(`Error fetching user data: ${error.message}`); } return user; } catch (error) { - console.error('Error:', error); - throw error; + throw new Error(`Error:`); } } @@ -148,7 +145,6 @@ export async function fetchCurrentUserAddress() { .eq('user_id', user.id) .limit(1) .single(); - console.log(address); if (error) { console.error('Error fetching user data:', error); diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index c82042cb..bacfca1d 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -6,8 +6,18 @@ import { fetchCurrentUserAddress, } from '@/api/supabase/queries/user_queries'; -import { Body1, Body2Light, Heading3Bold, Heading4Bold } from '@/styles/fonts'; +import { + Body1, + Body2, + Body2Light, + Heading3Bold, + Heading4Bold, +} from '@/styles/fonts'; import { useSearchParams } from 'next/navigation'; +import { + DeliveryTimes, + fetchDeliveryTimes, +} from '@/api/supabase/queries/delivery_queries'; import BackButton from '../../components/BackButton/BackButton'; import { fetchCartItemsWithQuantityByID } from '../../api/supabase/queries/cart_queries'; @@ -26,6 +36,7 @@ import { DetailsHeader, PageDiv, CenterDiv, + Quantity, } from './styles'; import { Product, User, Address } from '../../schema/schema'; @@ -38,12 +49,12 @@ export default function OrderConfirmationDelivery() { const [userAddress, setUserAddress] = useState
(); const searchParams = useSearchParams(); const orderIDFromSearch = searchParams.get('orderID'); + const [delivTimes, setDelivTimes] = useState([]); useEffect(() => { async function fetchProducts() { const cartItems = (await fetchCartItemsWithQuantityByID( orderIDFromSearch, )) as Product[]; - console.log(cartItems); setCart(cartItems); } @@ -53,11 +64,39 @@ export default function OrderConfirmationDelivery() { const address = await fetchCurrentUserAddress(); setUserAddress(address); } + async function fetchDelivTimes() { + const deliv = await fetchDeliveryTimes(); + setDelivTimes(deliv); + } fetchProducts(); setUserDetails(); + fetchDelivTimes(); }, []); + function organizeDelivTime() { + const userGrp = user?.delivery_group == null ? 1 : user?.delivery_group; + const Time = delivTimes[userGrp]?.delivery_time.toLocaleString(); + const date = + Time == null ? ['0', '0', '0'] : Time?.substring(0, 10).split('-'); + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + const dateStr = `${months[parseInt(date[1], 10)]} ${date[2]}, ${date[0]}`; + return `${dateStr}`; + } + return (
@@ -105,6 +144,11 @@ export default function OrderConfirmationDelivery() {
+ + + Quantity: {cartItem.quantity} + + ))} @@ -114,7 +158,7 @@ export default function OrderConfirmationDelivery() { Delivery Information Estimated Date - {user?.delivery_group} + {organizeDelivTime()} Location {userAddress?.street}, {userAddress?.city},{' '} diff --git a/src/app/orderConfirmationDelivery/styles.ts b/src/app/orderConfirmationDelivery/styles.ts index e72f1ef1..618a5919 100644 --- a/src/app/orderConfirmationDelivery/styles.ts +++ b/src/app/orderConfirmationDelivery/styles.ts @@ -8,11 +8,17 @@ export const FavoriteDiv = styled.div` display: flex; flex-direction: row; align-items: flex-start; - justify-content: flex-start; + justify-content: space-between; width: 100%; margin-bottom: 50px; margin-top: 30px; - gap: 120px; +`; + +export const Quantity = styled.div` + display: flex; + align-self: center; + justify-content: flex-start; + margin-right: 40px; `; export const OrderDetailsDiv = styled.div` @@ -216,16 +222,18 @@ export const OrderTotalDiv = styled.div` `; export const LeftColumnDiv = styled.div` + margin-top: 30px; display: flex; flex-flow: column; justify-content: space-evenly; align-items: space-evenly; + gap: 20px; `; export const RightColumnDiv = styled.div` display: flex; flex-flow: column; margin-left: 20px; - margin-top: 127px; + margin-top: 123px; `; export const WhiteBackgroundDiv = styled.div` diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx index c9b612ce..9a93cb72 100644 --- a/src/app/orderConfirmationPickUp/page.tsx +++ b/src/app/orderConfirmationPickUp/page.tsx @@ -4,10 +4,7 @@ import { useState, useEffect } from 'react'; import { fetchUser } from '@/api/supabase/queries/user_queries'; import { fetchPickupTimesByID } from '@/api/supabase/queries/pickup_queries'; -import { - fetchCurrentOrdersByUser, - getOrderById, -} from '@/api/supabase/queries/order_queries'; +import { getOrderById } from '@/api/supabase/queries/order_queries'; import { Body1, Body1Bold, @@ -73,7 +70,6 @@ export default function OrderConfirmationPickUp() { function organizePickupTime() { const startTime = pickupTime?.start_time.toLocaleString(); - const endTime = pickupTime?.end_time.toLocaleString(); const date = startTime == null ? ['0', '0', '0'] diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx index 33e43490..6ea5a83a 100644 --- a/src/app/pickup/page.tsx +++ b/src/app/pickup/page.tsx @@ -13,7 +13,7 @@ import { totalNumberOfItemsInCart, } from '@/api/supabase/queries/cart_queries'; import { useState, useEffect } from 'react'; -import { useRouter, useSearchParams } from 'next/navigation'; +import { useRouter } from 'next/navigation'; import { Body1, Heading4Bold } from '@/styles/fonts'; import { fetchNRecentPickupTimes } from '@/api/supabase/queries/pickup_queries'; import { From cf03702349e1f60b725cd22d3dabdfbf7a9c4a0a Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Sun, 21 Apr 2024 14:02:17 -0700 Subject: [PATCH 19/19] preRebase --- src/api/supabase/queries/product_queries.ts | 2 +- src/app/orderConfirmationDelivery/page.tsx | 4 +++- src/app/pickup/page.tsx | 1 + src/app/pickup/styles.ts | 2 +- src/app/profileScreen/individualItem.tsx | 24 ++++++++++----------- src/app/profileScreen/page.tsx | 8 +++++++ 6 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index 85ec9fbb..67396986 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -64,7 +64,7 @@ export async function fetchProductByID(productId: number): Promise { if (error) { throw new Error(`Error fetching product: ${error.message}`); } - + return product; } diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx index bacfca1d..1652742e 100644 --- a/src/app/orderConfirmationDelivery/page.tsx +++ b/src/app/orderConfirmationDelivery/page.tsx @@ -93,7 +93,9 @@ export default function OrderConfirmationDelivery() { 'November', 'December', ]; - const dateStr = `${months[parseInt(date[1], 10)]} ${date[2]}, ${date[0]}`; + const dateStr = `${months[parseInt(date[1], 10) - 1]} ${date[2]}, ${ + date[0] + }`; return `${dateStr}`; } diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx index 6ea5a83a..bd8d8ea3 100644 --- a/src/app/pickup/page.tsx +++ b/src/app/pickup/page.tsx @@ -183,6 +183,7 @@ export default function PickUp() { } if (selectedPickupIndex === 0) { toast(`You must select a pick-up date!`); + toast.clearWaitingQueue(); } }} > diff --git a/src/app/pickup/styles.ts b/src/app/pickup/styles.ts index 78adbb49..3c984c57 100644 --- a/src/app/pickup/styles.ts +++ b/src/app/pickup/styles.ts @@ -269,5 +269,5 @@ export const ToastPopUP = styled(ToastContainer)` position: fixed; z-index: 100; transform: translatey(90px); - background-color: ${COLORS.lightRed}; + `; diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx index f7de722e..457c23d4 100644 --- a/src/app/profileScreen/individualItem.tsx +++ b/src/app/profileScreen/individualItem.tsx @@ -18,19 +18,19 @@ export default function IndividualItem(props: { const { favorite, Favorites, setFavorites } = props; const [hovering, setHovering] = useState(false); - useEffect(() => { - async function changeCategory() { - try { - favorite.category = await convertButtonNumberToCategory( - favorite.category, - ); - } catch (error) { - // console.error(error); - } - } + // useEffect(() => { + // // async function changeCategory() { + // // try { + // // favorite.category = await convertButtonNumberToCategory( + // // favorite.category, + // // ); + // // } catch (error) { + // // // console.error(error); + // // } + // // } - changeCategory(); - }, [favorite]); + // // changeCategory(); + // }, []); async function clickFunctions(props2: { fav: Product }) { const { fav } = props2; diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 49c95de6..42f5a064 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -12,6 +12,7 @@ import { Body2Bold, Body2, } from '@/styles/fonts'; +import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries'; import { arrayOfFavorites, fetchUser, @@ -363,6 +364,13 @@ export default function Profile() { async function fetchProducts() { const data = (await arrayOfFavorites()) as Product[]; + data.forEach( + async product => + (product.category = await convertButtonNumberToCategory( + product.category, + )), + ); + console.log(data); setFavorites(data); }