completed individual item pages

src/app/[productId]/Buttons.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import {
+  ButtonsWrapper,
+  AddToCartButton,
+  QuantityButton,
+  PlusMinusButton,
+} from './styles';
+
+export default function Buttons() {
+  const [quantity, setQuantity] = useState<number>(1);
+
+  const increaseQuantity = () => {
+    setQuantity(quantity + 1);
+  };
+
+  const decreaseQuantity = () => {
+    if (quantity > 1) {
+      setQuantity(quantity - 1);
+    }
+  };
+
+  // used hyphen instead of dash for display
+  return (
+    <ButtonsWrapper>
+      <QuantityButton>
+        <PlusMinusButton type="button" onClick={decreaseQuantity}>
+          –
+        </PlusMinusButton>
+        <span>{quantity}</span>
+        <PlusMinusButton type="button" onClick={increaseQuantity}>
+          +
+        </PlusMinusButton>
+      </QuantityButton>
+      <AddToCartButton>Add to cart</AddToCartButton>
+    </ButtonsWrapper>
+  );
+}

src/app/[productId]/page.tsx

@@ -1,24 +1,19 @@
 'use client';
 
 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,
-  ButtonsContainer,
-  QuantityButton,
-  AddToCartButton,
 } from './styles';
-import {
-  GlobalStyle,
-  StickyHeader,
-  Logo,
-  NavButton,
-} from '../../styles/components';
+import { GlobalStyle } from '../../styles/components';
+import NavBar from '../../components/NavBar';
 import { Product } from '../../schema/schema';
+import Buttons from './Buttons';
 
 export default function ItemDisplay({
   params,
@@ -36,28 +31,27 @@ export default function ItemDisplay({
           setItem(response);
         }
       } catch (error) {
-        console.error(error);
+        // console.error(error);
       }
     }
 
     fetchProducts();
   }, []);
 
-  // replace the sticky header by importing
   return (
     <main>
       <GlobalStyle />
-      <StickyHeader>
-        <Logo />
-        <NavButton>
-          <Link href="/checkout">Cart</Link>
-        </NavButton>
-        <NavButton>
-          <Link href="/profileScreen">Profile</Link>
-        </NavButton>
-      </StickyHeader>
+      <NavBar />
       <BackButton>
-        <Link href="/storefront">Back</Link>
+        <Link href="/storefront">
+          <Image
+            src="/images/Arrow_Left_MD.png"
+            alt="Back Arrow"
+            width={20}
+            height={20}
+          />
+          <span style={{ marginLeft: '8px' }}>Back</span>
+        </Link>
       </BackButton>
       <DescriptionContainer>
         <ImageContainer>
@@ -69,11 +63,13 @@ export default function ItemDisplay({
         </ImageContainer>
         <TextContainer>
           <h1>{Item?.name}</h1>
-          <p>{Item?.category}</p>
-          <ButtonsContainer>
-            <QuantityButton>1</QuantityButton>
-            <AddToCartButton>Add to cart</AddToCartButton>
-          </ButtonsContainer>
+          <h4 style={{ fontWeight: 'normal', paddingTop: '5px' }}>
+            {Item?.category}
+          </h4>
+          <Buttons />
+          <p style={{ paddingTop: '50px' }}>Product ID: {Item?.product_id}</p>
+          <p style={{ paddingTop: '20px' }}>Product Details:</p>
+          <p>{Item?.description}</p>
         </TextContainer>
       </DescriptionContainer>
     </main>

src/app/[productId]/styles.ts

@@ -2,12 +2,14 @@ import styled from 'styled-components';
 import COLORS from '../../styles/colors';
 
 export const BackButton = styled.button`
-  padding-top: 210px;
+  display: flex;
+  padding-top: 230px;
   padding-left: 30px;
-  width: 70px;
+  width: 100px;
   height: 40px;
   background-color: transparent;
   border-color: transparent;
+  font-size: 15px;
 `;
 
 export const DescriptionContainer = styled.div`
@@ -30,26 +32,35 @@ export const TextContainer = styled.div`
   height: 350px;
 `;
 
-export const ButtonsContainer = styled.div`
+export const ButtonsWrapper = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 450px;
   height: 50px;
-  border-radius: 30px;
-  padding: 30px;
+  margin-top: 20px;
 `;
 
-export const QuantityButton = styled.button`
+export const QuantityButton = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
   width: 165px;
   height: 50px;
   border-radius: 8px;
   background-color: ${COLORS.white};
-  border-color: ${COLORS.navy};
-  font-family: Public Sans;
+  border: 2px solid ${COLORS.navy};
+  color: ${COLORS.navy};
+`;
+
+export const PlusMinusButton = styled.button`
+  width: 25px;
+  height: 25px;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border-color: transparent;
   font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
   color: ${COLORS.navy};
 `;
 export const AddToCartButton = styled.button`

src/app/checkout/page.tsx

@@ -1,6 +1,11 @@
+'use client';
+
+import NavBar from '../../components/NavBar';
+
 export default function Checkout() {
   return (
     <main>
+      <NavBar />
       <div>Checkout</div>
     </main>
   );

src/app/page.tsx

@@ -6,7 +6,6 @@ import {
   testFetchUserByUUID,
   testAddUserAddress,
 } from '../api/supabase/queries/tests/user_test';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {
   testFetchOrderByUUID,
   testFetchOrders,

src/app/profileScreen/page.tsx

@@ -4,9 +4,12 @@ import { LogOutButton, GlobalStyle } from './style';
 
 import { signOut } from '../../api/supabase/auth/auth';
 
+import NavBar from '../../components/NavBar';
+
 export default function Profile() {
   return (
     <main>
+      <NavBar />
       <GlobalStyle />
       <LogOutButton onClick={() => signOut()}>Sign Out</LogOutButton>
     </main>

src/app/storefront/page.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import React, { useState } from 'react';
-import Link from 'next/link';
-import StorefrontItems from './storefrontItems';
+import React, { useEffect, useState } from 'react';
+import Storefront from './storefrontItems';
 import ProductButtons from './productButtons';
-import { Product } from '../../schema/schema';
-import {
-  GlobalStyle,
-  StickyHeader,
-  Logo,
-  NavButton,
-} from '../../styles/components';
-
+import { GlobalStyle } from '../../styles/components';
+import NavBar from '../../components/NavBar';
 import { ButtonsContainer, ShopAllText } from './styles';
+import { getProduct } from './helperFunction';
+import { Product } from '../../schema/schema';
 
 // https://codesandbox.io/s/filter-with-react-button-r5x4i?file=/src/App.js
 export default function App() {
@@ -38,32 +33,37 @@ export default function App() {
       count: 3,
     },
   ];
-  const [, setFilteredProducts] = useState<null | Product[]>(null);
+  const [FilteredProducts, setFilteredProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        const data = (await getProduct()) as Product[];
+        setFilteredProducts(data);
+      } catch (error) {
+        // console.log(error);
+      }
+    }
+
+    fetchProducts();
+  }, []);
 
   return (
     <main>
       <GlobalStyle />
-      <StickyHeader>
-        <Logo />
-        <NavButton>
-          <Link href="/checkout">Cart</Link>
-        </NavButton>
-        <NavButton>
-          <Link href="/profileScreen">Profile</Link>
-        </NavButton>
-        <ButtonsContainer>
-          {buttons.map(type => (
-            <ProductButtons
-              key={type.count}
-              value={type.value}
-              setFiltredProducts={setFilteredProducts}
-              content={type.name}
-            />
-          ))}
-        </ButtonsContainer>
-      </StickyHeader>
+      <NavBar />
+      <ButtonsContainer>
+        {buttons.map(type => (
+          <ProductButtons
+            key={type.count}
+            value={type.value}
+            setFiltredProducts={setFilteredProducts}
+            content={type.name}
+          />
+        ))}
+      </ButtonsContainer>
       <ShopAllText>Shop All</ShopAllText>
-      <StorefrontItems />
+      <Storefront products={FilteredProducts} />
     </main>
   );
 }

src/app/storefront/storefrontItems.tsx

@@ -1,9 +1,7 @@
-import React, { useState, useEffect } from 'react';
-
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { StorefrontWrapper, StorefrontItem, ItemButtons } from './styles';
-
 import { getProduct } from './helperFunction';
+import { StorefrontWrapper, StorefrontItem, ItemButtons } from './styles';
 
 import { Product } from '../../schema/schema';
 

src/app/storefront/styles.ts

@@ -46,6 +46,8 @@ export const ButtonsContainer = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  position: absolute;
+  z-index: 5;
 `;
 
 export const ItemButtons = styled.button`
@@ -57,12 +59,13 @@ export const ItemButtons = styled.button`
 export const StorefrontWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
+  flex-direction: row;
   justify-content: space-evenly;
   padding: 30px;
 `;
 
 export const StorefrontItem = styled.div`
-  width: calc(25% - 30px);
+  width: calc(25% - 40px);
   margin-bottom: 50px;
 `;
 

src/components/NavBar.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+
+import { NavBarComp, ButtonsDiv } from '../styles/components';
+
+export default function NavBar() {
+  return (
+    <NavBarComp>
+      <Link href="../storefront">
+        <Image
+          src="/images/ShantiLogo.png"
+          alt="Shanti Logo"
+          width={125}
+          height={70}
+        />
+      </Link>
+
+      <ButtonsDiv>
+        <Link href="../profileScreen">
+          <Image
+            src="/images/Profile.png"
+            alt="Profile icon"
+            width={40}
+            height={40}
+          />
+        </Link>
+
+        <Link href="../checkout">
+          <Image
+            src="/images/Cart.png"
+            alt="Cart icon"
+            width={30}
+            height={40}
+          />
+        </Link>
+      </ButtonsDiv>
+    </NavBarComp>
+  );
+}