From aaed2d9429946ba57bde0e831bb588b4a58a123f Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Mon, 13 Nov 2023 10:58:13 -0800 Subject: [PATCH] feat:added cart circle + toastify when adding to cart --- src/app/[productId]/Buttons.tsx | 7 +++- src/app/[productId]/page.tsx | 9 +++++ src/app/[productId]/styles.ts | 8 +++++ src/app/favorites/page.tsx | 3 +- src/app/profileScreen/page.tsx | 13 ++++--- src/app/profileScreen/style.ts | 23 ++++++++++++ src/app/storefront/IndividualItem.tsx | 3 +- src/app/storefront/helperFunction.jsx | 23 ++++++++++++ src/app/storefront/page.tsx | 5 ++- src/app/storefront/styles.ts | 13 ++++--- src/components/Footer.tsx | 4 +-- src/components/NavBar.tsx | 51 ++++++++++++++++++--------- src/styles/components.tsx | 34 ++++++++++++++++-- 13 files changed, 160 insertions(+), 36 deletions(-) diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx index 0099ef9a..6d6de56b 100644 --- a/src/app/[productId]/Buttons.tsx +++ b/src/app/[productId]/Buttons.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { ToastContainer, toast } from 'react-toastify'; import { ButtonsWrapper, AddToCartButton, @@ -20,6 +21,9 @@ export default function Buttons() { }; // used hyphen instead of dash for display + const notify = () => + toast('you have added ' + quantity + ' items to the cart!'); + return ( @@ -31,7 +35,8 @@ export default function Buttons() { + - Add to cart + + Add to cart ); } diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 143426f2..3a43b3f7 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -4,11 +4,13 @@ import Link from 'next/link'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import { fetchProductByID } from '../../api/supabase/queries/product_queries'; + import { BackButton, ImageContainer, TextContainer, DescriptionContainer, + ToastPopUP, } from './styles'; import { GlobalStyle } from '../../styles/components'; import NavBar from '../../components/NavBar'; @@ -40,7 +42,14 @@ export default function ItemDisplay({ return (
+ + + - router.push('/profileScreen')}> diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index ae2e3468..34eb9ab3 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -6,7 +6,13 @@ import { toast } from 'react-toastify'; import NavBar from '../../components/NavBar'; -import { LogOutButton, GlobalStyle, PopUp } from './style'; +import { + LogOutButton, + GlobalStyle, + PopUp, + NavBarZeroIndex, + FooterMoved, +} from './style'; import { signOut } from '../../api/supabase/auth/auth'; @@ -29,15 +35,14 @@ export default function Profile() { return (
- + showToastMessage()}>Log Out! router.push('/favorites')}> Favorites - -
+
); } diff --git a/src/app/profileScreen/style.ts b/src/app/profileScreen/style.ts index 84096c59..cd7c31a0 100644 --- a/src/app/profileScreen/style.ts +++ b/src/app/profileScreen/style.ts @@ -4,10 +4,16 @@ import { ToastContainer } from 'react-toastify'; import { Heart } from 'react-feather'; +import NavBar from '../../components/NavBar'; + +import Footer from '../../components/Footer'; + export const GlobalStyle = createGlobalStyle` body { background:white; color: black; + overflow: visible; + } `; @@ -24,7 +30,10 @@ export const LogOutButton = styled.button` border-radius: 5px; width: 300px; height: 50px; + z-index: 1000; + transform: translateY(200px); `; +/*transform: translateY(200px);*/ export const PopUp = styled(ToastContainer)` transform: translate(-150px, 250px); @@ -80,7 +89,21 @@ export const HeartIcon = styled(Heart)` fill: red; `; +export const NavBarZeroIndex = styled(NavBar)` + z-index: 0; + position: fixed; + margin-bottom: 100px; +`; + +export const FooterMoved = styled(Footer)` + transform: translateY(300px); +`; + export const TransparentButton = styled.button` background-color: transparent; border: transparent; `; + +export const NavBarMovedUP = styled(NavBar)` + position: static; +`; diff --git a/src/app/storefront/IndividualItem.tsx b/src/app/storefront/IndividualItem.tsx index 3163db53..217b748e 100644 --- a/src/app/storefront/IndividualItem.tsx +++ b/src/app/storefront/IndividualItem.tsx @@ -56,12 +56,11 @@ export default function IndividualItem(props: { product: Product }) { style={{ width: '250px', height: '250px' }} /> - clickFunction()}> -

{product.name}

+

{product.name}

); } diff --git a/src/app/storefront/helperFunction.jsx b/src/app/storefront/helperFunction.jsx index f7c526fa..f8c5da54 100644 --- a/src/app/storefront/helperFunction.jsx +++ b/src/app/storefront/helperFunction.jsx @@ -85,3 +85,26 @@ export async function arrayOfFavorites() { return FavArray; } + +export async function totalNumberOfItemsInCart() { + const { + data: { user }, + } = await supabase.auth.getUser(); + + const { data, error } = await supabase + .from('profiles') + .select() + .eq('user_id', user.id); + + const CurrUserCart = data[0].cart; + + const itemNumb = Object.values(CurrUserCart); + + let sum = 0; + + for (let i = 0; i < itemNumb.length; i++) { + sum = sum + itemNumb[i]; + } + + return sum; +} diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 82ff583b..1884ddb2 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -4,12 +4,11 @@ import React, { useEffect, useState } from 'react'; import Storefront from './storefrontItems'; import ProductButtons from './productButtons'; -import NavBar from '../../components/NavBar'; import Footer from '../../components/Footer'; import { GlobalStyle, ButtonsContainer, - StickyHeader, + NavBarZeroIndex, ShopAllText, } from './styles'; import { getProduct } from './helperFunction'; @@ -56,7 +55,7 @@ export default function App() { return (
- + {buttons.map(type => ( ` export const IndividualContainer = styled.div` width: 200px; - height: 100px; display: flex; flex-direction: column; align-items: center; @@ -63,10 +64,10 @@ export const ButtonsContainer = styled.div` display: flex; flex-direction: row; justify-content: center; + position: fixed; align-items: center; - position: absolute; - z-index: 5; - transform: translate(0px, -180px); + z-index: 1100; + transform: translate(0px, -30px); `; export const NavButton = styled.button` margin-top: 30px; @@ -117,10 +118,14 @@ export const HeartIcon = styled(Heart)` width: 30px; height: 30px; fill: ${props => (props.isClicked ? 'red' : '#c7ddff')}; + position: relative; `; export const HeartContainer = styled.button` transform: translate(245px, -280px); + position: relative; background-color: transparent; border: none; `; + +export const NavBarZeroIndex = styled(NavBar)``; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index e8f9134d..b810db06 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -2,9 +2,9 @@ import Location from './Location'; import { FooterDiv, ContactDiv } from '../styles/components'; -export default function Footer() { +export default function Footer({ ...rest }) { return ( -
+

Contact Us

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index f765fed4..b1cd7044 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,12 +1,38 @@ import Image from 'next/image'; import Link from 'next/link'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; -import { NavBarComp, ButtonsDiv } from '../styles/components'; +import { totalNumberOfItemsInCart } from '../app/storefront/helperFunction'; + +import { + NavBarComp, + ButtonsDiv, + CartTotalCircle, + UserProfileIcon, + ShoppingCartIcon, +} from '../styles/components'; + +export default function NavBar({ ...rest }) { + const [data, setData] = useState(0); + const [isZero, setIsZero] = useState(true); + + useEffect(() => { + const fetchData = async () => { + setData(await totalNumberOfItemsInCart()); + }; + fetchData(); + }, []); + useEffect(() => { + const changeData = async () => { + if (data > 0) { + setIsZero(false); + } + }; + changeData(); + }, [data]); -export default function NavBar() { return ( - + - Profile icon + +

User

- Cart icon + +

Cart

+ {data} diff --git a/src/styles/components.tsx b/src/styles/components.tsx index 04a285b1..77128919 100644 --- a/src/styles/components.tsx +++ b/src/styles/components.tsx @@ -1,9 +1,17 @@ import styled, { createGlobalStyle } from 'styled-components'; + import COLORS from './colors'; +import { User, ShoppingCart } from 'react-feather'; + export const GlobalStyle = createGlobalStyle` body { background: white; + color:black; + } + span{ + + color:black; } `; @@ -39,6 +47,7 @@ export const NavButton = styled.button` border: transparent; border-radius: 5px; float: right; + z-index: 101; `; export const NavBarComp = styled.nav` @@ -49,12 +58,12 @@ export const NavBarComp = styled.nav` padding-right: 30px; height: 140px; padding-top: 20px; - z-index: 1; - position: absolute; + position: fixed; + width: 100%; background: var(--Light-Periwinkle, #f4f7ff); box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); - z-index: 2; + z-index: 100; `; export const ButtonsDiv = styled.div` @@ -110,3 +119,22 @@ export const Addie = styled.p` margin-top: 30px; margin-bottom: 30px; `; + +export const CartTotalCircle = styled.div<{ $isZero?: boolean }>` + width: 20px; + height: 20px; + background: var(--Marine-Blue, #333286); + border-radius: 50%; + text-align: center; + transform: translate(19px, -58px); + color: white; + display: ${props => (props.$isZero ? 'none' : 'content')}; +`; + +export const UserProfileIcon = styled(User)` + margin-left: 5px; +`; + +export const ShoppingCartIcon = styled(ShoppingCart)` + margin-left: 3px; +`;