Buyankhuu/cart circle

package.json

@@ -24,6 +24,9 @@
     "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "react-feather": "^2.0.10",
+    "react-router-dom": "^6.17.0",
+    "react-toastify": "^9.1.3",
     "styled-components": "^6.0.8"
   },
   "devDependencies": {

src/app/[productId]/Buttons.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { toast } from 'react-toastify';
 import {
   ButtonsWrapper,
   AddToCartButton,
@@ -20,6 +21,8 @@ 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 +34,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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
 import COLORS from '../../styles/colors';
 
 export const BackButton = styled.button`
@@ -76,3 +77,10 @@ export const AddToCartButton = styled.button`
   color: ${COLORS.white};
   border-color: transparent;
 `;
+
+export const ToastPopUP = styled(ToastContainer)`
+  position: fixed;
+  z-index: 100;
+
+  transform: translatey(130px);
+`;

src/app/checkout/page.tsx

@@ -7,6 +7,7 @@ import { fetchUserByUUID } from '@/api/supabase/queries/user_queries';
 import { Button } from '../login/styles';
 
 import NavBar from '../../components/NavBar';
+import Footer from '../../components/Footer';
 
 export default function Checkout() {
   const [deliveryEnabled, setDeliveryEnabled] = useState<boolean>(false);

src/app/favorites/page.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { ArrowLeft } from 'react-feather';
+
+import { useRouter } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { arrayOfFavorites, getUserInfo } from '../storefront/helperFunction';
+
+import {
+  FavoriteDiv,
+  OutterFavoriteDiv,
+  BackDiv,
+  GlobalStyle,
+  OutterBox,
+  Backtext,
+  HeartIcon,
+  TransparentButton,
+  NavBarMovedUP,
+} from '../profileScreen/style';
+
+import NavBar from '../../components/NavBar';
+
+interface Product {
+  description: string;
+  category: string;
+  quantity: number;
+  photo: string;
+  product_id: number;
+  name: string;
+  updated_at: Date;
+}
+
+export default function FavoritesPage() {
+  const [Favorites, setFavorites] = useState<Product[]>([]);
+  const router = useRouter();
+  async function fetchProducts() {
+    const data = (await arrayOfFavorites()) as Product[];
+    setFavorites(data);
+  }
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  async function clickFunctions(props: { fav: Product }) {
+    const { fav } = props;
+    getUserInfo(fav, false);
+    const data = (await arrayOfFavorites()) as Product[];
+    setFavorites(data);
+  }
+
+  return (
+    <div>
+      <NavBarMovedUP />
+      <GlobalStyle />
+      <OutterBox>
+        <BackDiv onClick={() => router.push('/profileScreen')}>
+          <ArrowLeft />
+          <Backtext>Back</Backtext>
+        </BackDiv>
+        <h1>Favorites</h1>
+        <OutterFavoriteDiv>
+          {Favorites.map(favorite => (
+            <FavoriteDiv key={favorite.product_id}>
+              <img
+                src={favorite.photo}
+                alt={favorite.name}
+                style={{ width: '150px', height: '150px' }}
+              />
+              <p>{favorite.name}</p>
+              <TransparentButton
+                onClick={() => clickFunctions({ fav: favorite })}
+              >
+                <HeartIcon />
+              </TransparentButton>
+            </FavoriteDiv>
+          ))}
+        </OutterFavoriteDiv>
+      </OutterBox>
+    </div>
+  );
+}

src/app/login/page.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useState } from 'react';
+
+import Image from 'next/image';
+
 import LoginForm from '../../components/LoginForm';
 
 import {
   GlobalStyle,
   Fullscreen,
-  Img,
   LoginBox,
   LoginContent,
   WelcomeSign,
@@ -22,7 +24,12 @@ export default function App() {
     <main>
       <GlobalStyle />
       <Fullscreen>
-        <Img />
+        <Image
+          src="/images/ShantiLogo.png"
+          alt="logo pic"
+          width={125}
+          height={70}
+        />
         <LoginBox>
           <LoginContent>
             <WelcomeSign>Welcome</WelcomeSign>

src/app/profileScreen/page.tsx

@@ -1,17 +1,48 @@
 'use client';
 
-import { LogOutButton, GlobalStyle } from './style';
+import { useRouter } from 'next/navigation';
 
-import { signOut } from '../../api/supabase/auth/auth';
+import { toast } from 'react-toastify';
 
 import NavBar from '../../components/NavBar';
 
+import {
+  LogOutButton,
+  GlobalStyle,
+  PopUp,
+  NavBarZeroIndex,
+  FooterMoved,
+} from './style';
+
+import { signOut } from '../../api/supabase/auth/auth';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+import Footer from '../../components/Footer';
+
 export default function Profile() {
+  const router = useRouter();
+
+  const showToastMessage = () => {
+    signOut();
+    toast("You've been Logged Out! Redirecting...", {
+      position: toast.POSITION.TOP_CENTER,
+    });
+    setTimeout(() => {
+      router.push('/login');
+    }, 3000);
+  };
+
   return (
     <main>
-      <NavBar />
+      <NavBarZeroIndex />
       <GlobalStyle />
-      <LogOutButton onClick={() => signOut()}>Sign Out</LogOutButton>
+      <LogOutButton onClick={() => showToastMessage()}>Log Out!</LogOutButton>
+      <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
+      <LogOutButton onClick={() => router.push('/favorites')}>
+        Favorites
+      </LogOutButton>
+      <FooterMoved />
     </main>
   );
 }