Skip to content

Commit

Permalink
Merge
Browse files Browse the repository at this point in the history
  • Loading branch information
kevinjcai committed Apr 21, 2024
2 parents 9e9f0d1 + 73ccad5 commit e422529
Show file tree
Hide file tree
Showing 33 changed files with 971 additions and 207 deletions.
1 change: 0 additions & 1 deletion src/api/supabase/queries/cart_queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,6 @@ export async function fetchCartItemsWithQuantity(): Promise<
});

const fetchedProducts = await Promise.all(productPromises);
console.log(fetchedProducts);

return fetchedProducts;
}
Expand Down
15 changes: 15 additions & 0 deletions src/api/supabase/queries/delivery_queries.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import supabase from '../createClient';

export type DeliveryTimes = {
delivery_group: number;
delivery_time: number;
};

export async function fetchDeliveryTimes(): Promise<DeliveryTimes[]> {
const { data, error } = await supabase.from('delivery_times').select('*');

if (error) {
throw new Error(`Error fetching delivery times: ${error.message}`);
}
return data;
}
2 changes: 0 additions & 2 deletions src/api/supabase/queries/order_queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand Down
2 changes: 0 additions & 2 deletions src/api/supabase/queries/product_queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export async function filterProduct(productType: string): Promise<Product[]> {
export async function convertCategoryToNumber(
productType: string,
): Promise<StorefrontButtons> {
console.log(productType);
const { data: buttonVal, error } = await supabase
.from('storefront_buttons')
.select('*')
Expand All @@ -104,7 +103,6 @@ export async function convertCategoryToNumber(
export async function fetchUnprescribedCategory(
productType: string,
): Promise<Product[]> {
console.log(productType);
const productTypeConverted = await convertCategoryToNumber(productType);

const { data: products, error } = await supabase
Expand Down
25 changes: 14 additions & 11 deletions src/api/supabase/queries/user_queries.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
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.
* @returns a user object
*/
export async function fetchUser(): Promise<User> {
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;

if (user !== null) {
const { data, error: error1 } = await supabase
.from('profiles')
Expand Down Expand Up @@ -48,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;
}
}
Expand Down Expand Up @@ -118,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:`);
}
}

Expand All @@ -141,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);
Expand Down
8 changes: 5 additions & 3 deletions src/app/[productId]/Buttons.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -37,11 +39,11 @@ export default function Buttons(props: { productNumber: number }) {
<ButtonsWrapper>
<QuantityButton>
<PlusMinusButton type="button" onClick={decreaseQuantity}>
<Minus size="20" />
</PlusMinusButton>
<span>{quantity}</span>
<Body1Bold>{quantity}</Body1Bold>
<PlusMinusButton type="button" onClick={increaseQuantity}>
+
<Plus size="20" />
</PlusMinusButton>
</QuantityButton>

Expand Down
69 changes: 49 additions & 20 deletions src/app/[productId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@

import { useEffect, useState } from 'react';
import { convertButtonNumberToCategory } from '@/api/supabase/queries/button_queries';
import { Body1, Heading1, Body2Light } 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';

Expand All @@ -13,8 +16,13 @@ import {
DescriptionContainer,
ToastPopUP,
Fullscreen,
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';
Expand All @@ -25,6 +33,8 @@ export default function ItemDisplay({
params: { productId: number };
}) {
const [Item, setItem] = useState<Product>();
const [IsFavorite, setIsFavorite] = useState(false);
const [FilteredProducts, setFilteredProducts] = useState<Product[]>([]);

useEffect(() => {
async function fetchProducts() {
Expand All @@ -33,8 +43,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);
Expand All @@ -44,6 +58,14 @@ export default function ItemDisplay({
fetchProducts();
}, [params.productId]);

async function handleFavorite() {
await addOrRemoveProductFromFavorite(
await fetchProductByID(params.productId),
!IsFavorite,
);
setIsFavorite(!IsFavorite);
}

return (
<Fullscreen>
<NavBar />
Expand All @@ -53,31 +75,38 @@ export default function ItemDisplay({
limit={1}
hideProgressBar
/>
<div style={{ marginLeft: '250px', marginTop: '50px' }}>
<BackButton destination="./storefront" />
</div>

<DescriptionContainer>
<ImageContainer>
<img
src={Item?.photo}
alt={Item?.name}
style={{ width: '400px', height: '400px' }}
/>
</ImageContainer>
<LeftColumnDiv>
<BackButton destination="./storefront" />
<ImageContainer>
<img
src={Item?.photo}
alt={Item?.name}
style={{ width: '400px', height: '400px', objectFit: 'cover' }}
/>
</ImageContainer>
</LeftColumnDiv>
<TextContainer>
<Heading1>{Item?.name}</Heading1>
<TopRightContainer>
<Heading1>{Item?.name}</Heading1>
<HeartContainer onClick={() => handleFavorite()}>
<FavoritePopup>
<Body3>
{IsFavorite ? 'Remove from favorites' : 'Add to favorites'}
</Body3>
</FavoritePopup>
<HeartIcon $favorited={IsFavorite} />
</HeartContainer>
</TopRightContainer>
<Body1 style={{ fontWeight: 'normal', paddingTop: '5px' }}>
{Item?.category}
<b>Category:</b> {Item?.category}
</Body1>
<Buttons productNumber={params.productId} />
<Body2Light style={{ paddingTop: '50px' }}>
Product ID: {Item?.id}
</Body2Light>
<Body2Bold style={{ paddingTop: '40px' }}>Product Details:</Body2Bold>
<Body2Light style={{ paddingTop: '20px' }}>
Product Details:
{Item?.description}
</Body2Light>
<Body2Light>{Item?.description}</Body2Light>
</TextContainer>
</DescriptionContainer>
</Fullscreen>
Expand Down
73 changes: 58 additions & 15 deletions src/app/[productId]/styles.ts
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
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 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 TopRightContainer = styled.div`
display: flex;
justify-content: space-between;
width: 440px;
`;

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`
Expand All @@ -46,7 +48,7 @@ export const ButtonsWrapper = styled.div`
align-items: center;
width: 450px;
height: 50px;
margin-top: 20px;
margin-top: 40px;
`;

export const QuantityButton = styled.div`
Expand All @@ -71,6 +73,7 @@ export const PlusMinusButton = styled.button`
font-size: 20px;
color: ${COLORS.navy};
`;

export const AddToCartButton = styled.button`
width: 265px;
height: 50px;
Expand All @@ -85,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;
Expand All @@ -94,4 +136,5 @@ export const ToastPopUP = styled(ToastContainer)`
export const Fullscreen = styled.div`
width: 100%;
height: 100%;
display: grid;
`;
Loading

0 comments on commit e422529

Please sign in to comment.