product page finished; favorites hover button finished; login partial…

…ly done
calblueprint · Apr 18, 2024 · 9f61fe8 · 9f61fe8
1 parent 1d57cf4
commit 9f61fe8
Show file tree

Hide file tree

Showing 9 changed files with 279 additions and 73 deletions.
diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts
@@ -105,6 +105,7 @@ export async function arrayOfFavorites(): Promise<Product[]> {
   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
@@ -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<Product>();
+  const [IsFavorite, setIsFavorite] = useState(
+    false
+  );
+  const [FilteredProducts, setFilteredProducts] = useState<Product[]>([]);
 
   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 (
     <Fullscreen>
       <NavBar />
@@ -67,8 +84,18 @@ export default function ItemDisplay({
         </ImageContainer>
         </LeftColumnDiv>
         <TextContainer>
+        <TopRightContainer>
           <Heading1>{Item?.name}</Heading1>
-          <Body1 style={{ fontWeight: 'normal', paddingTop: '5px' }}>
+          <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' }}>
             <b>Category:</b> {Item?.category}
           </Body1>
           <Buttons productNumber={params.productId} />

diff --git 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
@@ -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 (
+    <FavoriteDiv key={favorite.id}>
+      <img
+        src={favorite.photo}
+        alt={favorite.name}
+        style={{ width: '150px', height: '150px' }}
+      />
+
+      <ProductNameDiv>
+        <Body1Bold>{favorite.name}</Body1Bold>
+        <Body2>Category: {favorite.category}</Body2>
+        <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
+          <Body2>View Item</Body2>
+        </ViewItem>
+      </ProductNameDiv>
+
+      <TransparentButton
+        onClick={() => clickFunctions({ fav: favorite })}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <Hover $ishovering={hovering}>
+          <Body3>Remove from favorites</Body3>
+        </Hover>
+        <HeartIcon />
+      </TransparentButton>
+    </FavoriteDiv>
+  );
+}
diff --git 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<Product[]>([]);
-  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 (
     <Fullscreen>
       <NavBar />
@@ -52,29 +38,12 @@ export default function FavoritesPage() {
         <Heading1>Favorites</Heading1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
-            <FavoriteDiv key={favorite.id}>
-              <ImageLinkWrapper href={`${favorite.id}`}>
-                <img
-                  src={favorite.photo}
-                  alt={favorite.name}
-                  style={{ width: '100px', height: '100px' }}
-                />
-              </ImageLinkWrapper>
-
-              <ProductNameDiv>
-                <Body1Bold>{favorite.name}</Body1Bold>
-                <Body2>Category: {favorite.category}</Body2>
-                <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
-                  <Body2>View Item</Body2>
-                </ViewItem>
-              </ProductNameDiv>
-
-              <TransparentButton
-                onClick={() => clickFunctions({ fav: favorite })}
-              >
-                <HeartIcon />
-              </TransparentButton>
-            </FavoriteDiv>
+            <IndividualItem
+            key={favorite.id}
+            favorite={favorite}
+            setFavorites={setFavorites}
+            Favorites={Favorites}
+          />
           ))}
         </OutterFavoriteDiv>
       </OutterBox>

diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts
@@ -43,6 +43,11 @@ export const BackDiv = styled.button`
 export const OutterBox = styled.div`
   width: 800px;
   height: 100%;
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 20px;
 `;
 
 export const Backtext = styled.p`
@@ -55,6 +60,7 @@ export const HeartIcon = styled(Heart)`
   height: 30px;
   fill: #333286;
   margin-right: 25px;
+  margin-bottom: 40px;
 `;
 
 export const TransparentButton = styled.button`
@@ -63,6 +69,23 @@ 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;
 `;