feat: hover buttons on profile page

src/app/favorites/individualItem.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+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);
+
+  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>
+  );
+}

src/app/favorites/page.tsx

@@ -1,33 +1,19 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Body1Bold, Body2 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
 
-import {
-  arrayOfFavorites,
-  addOrRemoveProductFromFavorite,
-} from '../../api/supabase/queries/user_queries';
+import { arrayOfFavorites } from '../../api/supabase/queries/user_queries';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
-import {
-  FavoriteDiv,
-  OutterFavoriteDiv,
-  OutterBox,
-  ProductNameDiv,
-  HeartIcon,
-  TransparentButton,
-  ViewItem,
-  Fullscreen,
-} from './styles';
+import { OutterFavoriteDiv, OutterBox, Fullscreen } from './styles';
 
 import { Product } from '../../schema/schema';
+import IndividualItem from './individualItem';
 
 export default function FavoritesPage() {
   const [Favorites, setFavorites] = useState<Product[]>([]);
-  const router = useRouter();
 
   async function fetchProducts() {
     const data = (await arrayOfFavorites()) as Product[];
@@ -37,12 +23,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 />
@@ -51,27 +31,12 @@ export default function FavoritesPage() {
         <h1>Favorites</h1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
-            <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 })}
-              >
-                <HeartIcon />
-              </TransparentButton>
-            </FavoriteDiv>
+            <IndividualItem
+              key={favorite.id}
+              favorite={favorite}
+              setFavorites={setFavorites}
+              Favorites={Favorites}
+            />
           ))}
         </OutterFavoriteDiv>
       </OutterBox>

src/app/favorites/styles.ts

@@ -93,3 +93,18 @@ export const Fullscreen = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
+export const Hover = styled.div<{ $ishovering?: boolean }>`
+  visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')};
+  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;
+`;

src/app/profileScreen/individualItem.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+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);
+
+  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: '75px', height: '75px' }}
+      />
+      <ProductNameDiv>
+        <Body1Bold>{favorite.name}</Body1Bold>
+        <Body2>Category: {favorite.category}</Body2>
+      </ProductNameDiv>
+      <TransparentButton
+        onClick={() => clickFunctions({ fav: favorite })}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <Hover $ishovering={hovering}>
+          <Body3>Remove from favorites</Body3>
+        </Hover>
+        <HeartIcon />
+      </TransparentButton>
+    </FavoriteDiv>
+  );
+}

src/app/profileScreen/page.tsx

@@ -10,12 +10,9 @@ import {
   Heading1,
   Body1Bold,
   Body2Bold,
-  Body1,
   Body2,
-  Heading4,
 } from '@/styles/fonts';
 import {
-  addOrRemoveProductFromFavorite,
   arrayOfFavorites,
   fetchUser,
   fetchCurrentUserAddress,
@@ -44,9 +41,6 @@ import {
   TextSpacing,
   OrderHistory,
   FavoritesContainer,
-  ProductNameDiv,
-  FavoriteDiv,
-  HeartIcon,
   BackButtonDiv,
   BlankSpace,
   HeaderDiv,
@@ -58,18 +52,13 @@ 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 (
       <main>
@@ -79,25 +68,12 @@ function FavoriteSection(props: {
             <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>
+            <IndividualItem
+              key={favorite.id}
+              favorite={favorite}
+              setFavorites={setFavorites}
+              Favorites={Favorites}
+            />
           ))}
         </FavoritesContainer>
       </main>

src/app/profileScreen/styles.ts

@@ -164,3 +164,18 @@ export const MessageDiv = styled.div`
   align-items: center;
   height: 250px;
 `;
+
+export const Hover = styled.div<{ $ishovering?: boolean }>`
+  visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')};
+  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;
+`;

src/schema/schema.ts

@@ -3,7 +3,7 @@ export enum DeliveryGroup {
   Group2 = 'Group2',
   Group3 = 'Group3',
   Group4 = 'Group4',
-};
+}
 
 export type User = {
   id: string; // UUID
@@ -20,14 +20,14 @@ export type User = {
   num_pets: number; // Integer value containing number of pets
   phone_numbers: string; // User's phone number for pick up orders
   pet_prescription: string[]; // JSONB with pet_name as key and perscription as value
-  delivery_group: DeliveryGroup; // When someone's order will be delivered 
+  delivery_group: DeliveryGroup; // When someone's order will be delivered
 };
 
 export enum OrderStatus {
   Submitted = 'Submitted',
   Complete = 'Confirmed',
   Rejected = 'Rejected',
-};
+}
 
 export type Order = {
   id: number; // bigint generated by default as identity