diff --git a/src/app/favorites/individualItem.tsx b/src/app/favorites/individualItem.tsx new file mode 100644 index 00000000..c93d7088 --- /dev/null +++ b/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 ( + + {favorite.name} + + + {favorite.name} + Category: {favorite.category} + router.push(`/${favorite.id}`)}> + View Item + + + + clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + + Remove from favorites + + + + + ); +} diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 9aad30f6..b59b39f8 100644 --- a/src/app/favorites/page.tsx +++ b/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([]); - 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 ( @@ -51,27 +31,12 @@ export default function FavoritesPage() {

Favorites

{Favorites.map(favorite => ( - - {favorite.name} - - - {favorite.name} - Category: {favorite.category} - router.push(`/${favorite.id}`)}> - View Item - - - - clickFunctions({ fav: favorite })} - > - - - + ))} diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index 1cf4c27e..b5634989 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -53,6 +53,7 @@ export const HeartIcon = styled(Heart)` height: 30px; fill: #333286; margin-right: 25px; + margin-bottom: 40px; `; export const TransparentButton = styled.button` @@ -93,3 +94,19 @@ export const Fullscreen = styled.div` flex-direction: column; align-items: center; `; + +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; +`; diff --git a/src/app/profileScreen/individualItem.tsx b/src/app/profileScreen/individualItem.tsx new file mode 100644 index 00000000..57872f9e --- /dev/null +++ b/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 ( + + {favorite.name} + + {favorite.name} + Category: {favorite.category} + + clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + + Remove from favorites + + + + + ); +} diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 5c3cc6e4..a7668c4a 100644 --- a/src/app/profileScreen/page.tsx +++ b/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 (
@@ -79,25 +68,12 @@ function FavoriteSection(props: { {Favorites.slice(0, 2).map(favorite => ( - - {favorite.name} - -

- {favorite.name} -
- Product ID: {favorite.id} -

- - clickFunctions({ fav: favorite })} - > - - - + ))}
diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 81d02884..62ef4bdf 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -108,6 +108,7 @@ export const HeartIcon = styled(Heart)` width: 25px; height: 25px; fill: #333286; + margin-bottom: 40px; `; export const BackButtonDiv = styled.div` @@ -164,3 +165,19 @@ export const MessageDiv = styled.div` align-items: center; height: 250px; `; + +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(0px, -1px); + 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; +`; diff --git a/src/schema/schema.ts b/src/schema/schema.ts index baef3f41..e4d08608 100644 --- a/src/schema/schema.ts +++ b/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 @@ -91,6 +91,6 @@ export type StorefrontButtons = { }; export type DeliveryTime = { - delivery_group: DeliveryGroup; + delivery_group: number; delivery_time: Date; -} +};