Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buyankhuu/pre bug bash fix #75

Merged
merged 2 commits into from
Apr 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/app/cart/styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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`
Expand Down Expand Up @@ -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`
Expand Down
146 changes: 84 additions & 62 deletions src/app/profileScreen/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
import {
Heading2,
Body3,
Heading3,
Heading1,
Body1Bold,
Body2Bold,
Expand Down Expand Up @@ -53,6 +54,7 @@ import {
ColumnDiv,
LogOutDiv,
Fullscreen,
MessageDiv,
} from './styles';
import { signOut } from '../../api/supabase/auth/auth';
import 'react-toastify/dist/ReactToastify.css';
Expand All @@ -68,34 +70,49 @@ 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>
<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>
))}
<MessageDiv>
<Heading3>No Favorite Items</Heading3>
</MessageDiv>
</FavoritesContainer>
</main>
);
Expand All @@ -114,36 +131,39 @@ function OrderHistorySection(props: { Orders: Order[] }) {
const firstOrder = Orders.filter(
order => order.order_product_id_array.length !== 0,
)[0];
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();
Expand Down Expand Up @@ -249,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>
);
Expand All @@ -276,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>
Expand Down Expand Up @@ -381,7 +403,7 @@ export default function Profile() {
getUser();
}, []);
if (user === undefined) {
return <p>Error Loading User</p>;
return <p> Loading User</p>;
}
return (
<Fullscreen>
Expand Down
8 changes: 8 additions & 0 deletions src/app/profileScreen/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
4 changes: 1 addition & 3 deletions src/app/storefront/productButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -21,7 +20,6 @@ export default function ProductButtons(props: {
clickedButton: number;
}) {
const {
key,
value,
content,
setFiltredProducts,
Expand Down Expand Up @@ -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)
Expand Down
Loading