Monique/week 7 sprint

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;
 }

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<DeliveryTimes[]> {
+  const { data, error } = await supabase.from('delivery_times').select('*');
+
+  if (error) {
+    throw new Error(`Error fetching delivery times: ${error.message}`);
+  }
+  return data;
+}

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 })

src/api/supabase/queries/product_queries.ts

@@ -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('*')
@@ -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

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);

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 }) {
     <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>
 

src/app/[productId]/page.tsx

@@ -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';
 
@@ -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';
@@ -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() {
@@ -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);
@@ -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 />
@@ -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', objectFit: 'cover' }}
-          />
-        </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>

src/app/[productId]/styles.ts

@@ -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`
@@ -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`
@@ -71,6 +73,7 @@ export const PlusMinusButton = styled.button`
   font-size: 20px;
   color: ${COLORS.navy};
 `;
+
 export const AddToCartButton = styled.button`
   width: 265px;
   height: 50px;
@@ -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;
@@ -94,4 +136,5 @@ export const ToastPopUP = styled(ToastContainer)`
 export const Fullscreen = styled.div`
   width: 100%;
   height: 100%;
+  display: grid;
 `;