feat:added cart circle + toastify when adding to cart

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 (
     <ButtonsWrapper>
       <QuantityButton>
@@ -31,7 +35,8 @@ export default function Buttons() {
           +
         </PlusMinusButton>
       </QuantityButton>
-      <AddToCartButton>Add to cart</AddToCartButton>
+
+      <AddToCartButton onClick={notify}>Add to cart</AddToCartButton>
     </ButtonsWrapper>
   );
 }

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 (
     <main>
       <GlobalStyle />
+
       <NavBar />
+      <ToastPopUP
+        position="top-right"
+        autoClose={500}
+        limit={1}
+        hideProgressBar
+      />
       <BackButton>
         <Link href="/storefront">
           <Image

src/app/[productId]/styles.ts

@@ -76,3 +76,11 @@ export const AddToCartButton = styled.button`
   color: ${COLORS.white};
   border-color: transparent;
 `;
+
+import { ToastContainer } from 'react-toastify';
+
+export const ToastPopUP = styled(ToastContainer)`
+  position: fixed;
+
+  transform: translatey(130px);
+`;

src/app/favorites/page.tsx

@@ -15,6 +15,7 @@ import {
   Backtext,
   HeartIcon,
   TransparentButton,
+  NavBarMovedUP,
 } from '../profileScreen/style';
 
 import NavBar from '../../components/NavBar';
@@ -49,8 +50,8 @@ export default function FavoritesPage() {
 
   return (
     <div>
+      <NavBarMovedUP />
       <GlobalStyle />
-      <NavBar />
       <OutterBox>
         <BackDiv onClick={() => router.push('/profileScreen')}>
           <ArrowLeft />

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 (
     <main>
-      <NavBar />
+      <NavBarZeroIndex />
       <GlobalStyle />
       <LogOutButton onClick={() => showToastMessage()}>Log Out!</LogOutButton>
       <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
       <LogOutButton onClick={() => router.push('/favorites')}>
         Favorites
       </LogOutButton>
-
-      <Footer />
+      <FooterMoved />
     </main>
   );
 }

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;
+`;

src/app/storefront/IndividualItem.tsx

@@ -56,12 +56,11 @@ export default function IndividualItem(props: { product: Product }) {
             style={{ width: '250px', height: '250px' }}
           />
         </ItemButtons>
-
         <HeartContainer onClick={() => clickFunction()}>
           <HeartIcon isClicked={!isFavorite} />
         </HeartContainer>
       </StorefrontItem>
-      <p style={{ paddingTop: '10px' }}>{product.name}</p>
+      <p style={{ transform: 'translateY( -80px)' }}>{product.name}</p>
     </div>
   );
 }

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;
+}

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 (
     <main>
       <GlobalStyle />
-      <NavBar />
+      <NavBarZeroIndex />
       <ButtonsContainer>
         {buttons.map(type => (
           <ProductButtons

src/app/storefront/styles.ts

@@ -2,6 +2,8 @@ import styled, { createGlobalStyle } from 'styled-components';
 
 import { Heart } from 'react-feather';
 
+import NavBar from '../../components/NavBar';
+
 export const GlobalStyle = createGlobalStyle`
   body {
     background:white;
@@ -43,7 +45,6 @@ export const Label = styled.p<props>`
 
 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)<props>`
   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)``;

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 (
-    <main>
+    <main {...rest}>
       <FooterDiv>
         <ContactDiv>
           <h1>Contact Us</h1>

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 (
-    <NavBarComp>
+    <NavBarComp {...rest}>
       <Link href="../storefront">
         <Image
           src="/images/ShantiLogo.png"
@@ -18,20 +44,13 @@ export default function NavBar() {
 
       <ButtonsDiv>
         <Link href="../profileScreen">
-          <Image
-            src="/images/Profile.png"
-            alt="Profile icon"
-            width={40}
-            height={40}
-          />
+          <UserProfileIcon />
+          <p>User</p>
         </Link>
         <Link href="../checkout">
-          <Image
-            src="/images/Cart.png"
-            alt="Cart icon"
-            width={30}
-            height={40}
-          />
+          <ShoppingCartIcon />
+          <p>Cart</p>
+          <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
         </Link>
       </ButtonsDiv>
     </NavBarComp>