From 9f21b5bc5df32f23ccd90c53170b20d163ceed03 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 10 Apr 2024 14:52:15 -0700 Subject: [PATCH 1/6] feat: hover buttons on profile page --- src/app/favorites/individualItem.tsx | 63 ++++++++++++++++++++++++ src/app/favorites/page.tsx | 53 ++++---------------- src/app/favorites/styles.ts | 15 ++++++ src/app/profileScreen/individualItem.tsx | 49 ++++++++++++++++++ src/app/profileScreen/page.tsx | 38 +++----------- src/app/profileScreen/styles.ts | 15 ++++++ src/schema/schema.ts | 6 +-- 7 files changed, 161 insertions(+), 78 deletions(-) create mode 100644 src/app/favorites/individualItem.tsx create mode 100644 src/app/profileScreen/individualItem.tsx 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..d3a3587d 100644 --- a/src/app/favorites/styles.ts +++ b/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; +`; 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..e4bc6f4a 100644 --- a/src/app/profileScreen/styles.ts +++ b/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; +`; diff --git a/src/schema/schema.ts b/src/schema/schema.ts index e4b27497..4ef07503 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 From 803196784772010382597c8dfc55547679053a98 Mon Sep 17 00:00:00 2001 From: Ethan Auyeung Date: Wed, 10 Apr 2024 15:52:44 -0700 Subject: [PATCH 2/6] refactored delivery_group --- src/schema/schema.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/schema/schema.ts b/src/schema/schema.ts index baef3f41..98479091 100644 --- a/src/schema/schema.ts +++ b/src/schema/schema.ts @@ -1,10 +1,3 @@ -export enum DeliveryGroup { - Group1 = 'Group1', - Group2 = 'Group2', - Group3 = 'Group3', - Group4 = 'Group4', -}; - export type User = { id: string; // UUID email: string; @@ -20,7 +13,7 @@ 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: number; // When someone's order will be delivered }; export enum OrderStatus { @@ -91,6 +84,6 @@ export type StorefrontButtons = { }; export type DeliveryTime = { - delivery_group: DeliveryGroup; + delivery_group: number; delivery_time: Date; } From 972368ed93d059ee4a4963ddc57f9db0a6b3006f Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 10 Apr 2024 14:52:15 -0700 Subject: [PATCH 3/6] feat: hover buttons on profile page --- src/app/favorites/individualItem.tsx | 63 ++++++++++++++++++++++++ src/app/favorites/page.tsx | 53 ++++---------------- src/app/favorites/styles.ts | 15 ++++++ src/app/profileScreen/individualItem.tsx | 49 ++++++++++++++++++ src/app/profileScreen/page.tsx | 38 +++----------- src/app/profileScreen/styles.ts | 15 ++++++ src/schema/schema.ts | 11 ++++- 7 files changed, 167 insertions(+), 77 deletions(-) create mode 100644 src/app/favorites/individualItem.tsx create mode 100644 src/app/profileScreen/individualItem.tsx 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..d3a3587d 100644 --- a/src/app/favorites/styles.ts +++ b/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; +`; 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..e4bc6f4a 100644 --- a/src/app/profileScreen/styles.ts +++ b/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; +`; diff --git a/src/schema/schema.ts b/src/schema/schema.ts index 98479091..7976c071 100644 --- a/src/schema/schema.ts +++ b/src/schema/schema.ts @@ -1,3 +1,10 @@ +export enum DeliveryGroup { + Group1 = 'Group1', + Group2 = 'Group2', + Group3 = 'Group3', + Group4 = 'Group4', +}; + export type User = { id: string; // UUID email: string; @@ -13,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: number; // 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 From 692a0f7b799fd14565d84ec3b070a5e601e45625 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 14 Apr 2024 15:20:41 -0700 Subject: [PATCH 4/6] rebase --- src/schema/schema.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/schema/schema.ts b/src/schema/schema.ts index 1d607bfb..e4d08608 100644 --- a/src/schema/schema.ts +++ b/src/schema/schema.ts @@ -93,4 +93,4 @@ export type StorefrontButtons = { export type DeliveryTime = { delivery_group: number; delivery_time: Date; -} +}; From e6c26520f836de61d77af5c5172cafd2a7e80a02 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 17 Apr 2024 14:21:35 -0700 Subject: [PATCH 5/6] test --- src/app/storefront/productButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 0cc824b7..a3576ec7 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -9,7 +9,7 @@ import { } from '../../api/supabase/queries/product_queries'; import { Product } from '../../schema/schema'; - +/* hello */ export default function ProductButtons(props: { value: string; setFiltredProducts: (category: Product[]) => void; From 3010fa7423a79b16eed7f169534c016d3c866a1e Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Wed, 17 Apr 2024 14:43:49 -0700 Subject: [PATCH 6/6] fix --- src/app/favorites/styles.ts | 2 ++ src/app/profileScreen/styles.ts | 2 ++ src/app/storefront/productButtons.tsx | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index d3a3587d..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` @@ -96,6 +97,7 @@ export const Fullscreen = styled.div` export const Hover = styled.div<{ $ishovering?: boolean }>` visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(-10px, 0px); margin-bottom: 7px; color: black; border: none; diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index e4bc6f4a..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` @@ -167,6 +168,7 @@ export const MessageDiv = styled.div` export const Hover = styled.div<{ $ishovering?: boolean }>` visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + transform: translate(0px, -1px); margin-bottom: 7px; color: black; border: none; diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index a3576ec7..0cc824b7 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -9,7 +9,7 @@ import { } from '../../api/supabase/queries/product_queries'; import { Product } from '../../schema/schema'; -/* hello */ + export default function ProductButtons(props: { value: string; setFiltredProducts: (category: Product[]) => void;