Merge pull request #23 from calblueprint/celine/individual-item-pages

Individual Item Description Pages

src/api/supabase/queries/order_queries.ts

@@ -20,7 +20,7 @@ export async function fetchOrders(): Promise<
 > {
   try {
     const { data: orders, error } = await supabase
-      .from('Order') // Update to the "Order" table
+      .from('order') // Update to the "Order" table
       .select('*');
 
     if (error) {
@@ -40,7 +40,7 @@ export async function fetchOrderByUUID(
 ): Promise<PostgrestSingleResponse<Order>> {
   try {
     const { data: order, error } = await supabase
-      .from('Order') // Update to the "Order" table
+      .from('order') // Update to the "Order" table
       .select('*')
       .eq('id', uuid)
       .single();
@@ -63,7 +63,7 @@ export async function getOrdersByUserId(
 > {
   try {
     const { data: orders, error } = await supabase
-      .from('Order')
+      .from('order')
       .select('*')
       .eq('user_id', userId)
       .single();
@@ -86,7 +86,7 @@ export async function getOrderById(
 ): Promise<PostgrestSingleResponse<Order>> {
   try {
     const { data: order, error } = await supabase
-      .from('Order')
+      .from('order')
       .select('*')
       .eq('id', orderId)
       .single();
@@ -108,7 +108,7 @@ export async function toggleOrderProgress(
   try {
     // Fetch the order by ID to get its current "approved" value
     const { data: currentOrder, error: fetchError } = await supabase
-      .from('Order')
+      .from('order')
       .select('approved')
       .eq('id', orderId)
       .single();
@@ -123,7 +123,7 @@ export async function toggleOrderProgress(
 
     // Update the order with the new "approved" value
     const { data: updatedOrder, error: updateError } = await supabase
-      .from('Order')
+      .from('order')
       .update({ approved: updatedApprovedValue })
       .eq('id', orderId)
       .single();
@@ -146,7 +146,7 @@ export async function updateAllOrdersProgressToTrue(): Promise<
   try {
     // Update all orders to set "approved" to true
     const { error: updateError } = await supabase
-      .from('Order')
+      .from('order')
       .update({ approved: true });
 
     if (updateError) {

src/api/supabase/queries/product_queries.ts

@@ -20,7 +20,7 @@ export async function fetchProducts(): Promise<
 > {
   try {
     const { data: products, error } = await supabase
-      .from('Product')
+      .from('product')
       .select('*');
 
     if (error) {
@@ -35,12 +35,10 @@ export async function fetchProducts(): Promise<
   }
 }
 
-export async function fetchProductByID(
-  productId: string,
-): Promise<PostgrestSingleResponse<Product>> {
+export async function fetchProductByID(productId: number) {
   try {
     const { data: product, error } = await supabase
-      .from('Product')
+      .from('product')
       .select('*')
       .eq('product_id', productId)
       .single();

src/api/supabase/queries/tests/product_test.ts

@@ -15,7 +15,7 @@ export async function testFetchProducts() {
 
 // Test fetching a product by name
 export async function testFetchProductByName() {
-  const productId = '1'; // Replace with a valid product name
+  const productId = 1; // Replace with a valid product name
   try {
     const result = await fetchProductByID(productId);
     console.log('Fetch Product by Name Result:', result);

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

@@ -0,0 +1,76 @@
+'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,
+} from './styles';
+import { GlobalStyle } from '../../styles/components';
+import NavBar from '../../components/NavBar';
+import { Product } from '../../schema/schema';
+import Buttons from './Buttons';
+
+export default function ItemDisplay({
+  params,
+}: {
+  params: { productId: number };
+}) {
+  const [Item, setItem] = useState<Product>();
+
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        const response = await fetchProductByID(params.productId);
+        if (response) {
+          setItem(response);
+        }
+      } catch (error) {
+        // console.error(error);
+      }
+    }
+
+    fetchProducts();
+  }, [params.productId]);
+
+  return (
+    <main>
+      <GlobalStyle />
+      <NavBar />
+      <BackButton>
+        <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>
+          <img
+            src={Item?.photo}
+            alt={Item?.name}
+            style={{ width: '600px', height: '600px' }}
+          />
+        </ImageContainer>
+        <TextContainer>
+          <h1>{Item?.name}</h1>
+          <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

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+import COLORS from '../../styles/colors';
+
+export const BackButton = styled.button`
+  display: flex;
+  padding-top: 230px;
+  padding-left: 30px;
+  width: 100px;
+  height: 40px;
+  background-color: transparent;
+  border-color: transparent;
+  font-size: 15px;
+`;
+
+export const DescriptionContainer = styled.div`
+  display: flex;
+  margin: 50px;
+  width: 1440px;
+  height: 800px;
+`;
+
+export const ImageContainer = styled.div`
+  margin: 50px;
+  width: 666px;
+  height: 666px;
+  flex-shrink: 0;
+`;
+
+export const TextContainer = styled.div`
+  margin-left: 70px;
+  width: 440px;
+  height: 350px;
+`;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 450px;
+  height: 50px;
+  margin-top: 20px;
+`;
+
+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: 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;
+  color: ${COLORS.navy};
+`;
+export const AddToCartButton = styled.button`
+  width: 265px;
+  height: 50px;
+  border-radius: 8px;
+  background-color: ${COLORS.navy};
+  font-family: Public Sans;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  color: ${COLORS.white};
+  border-color: transparent;
+`;

src/app/storefront/page.tsx

@@ -3,24 +3,12 @@
 import React, { useEffect, useState } from 'react';
 import Storefront from './storefrontItems';
 import ProductButtons from './productButtons';
+import { GlobalStyle } from '../../styles/components';
 import NavBar from '../../components/NavBar';
-import {
-  GlobalStyle,
-  ButtonsContainer,
-  StickyHeader,
-  ShopAllText,
-} from './styles';
+import { ButtonsContainer, ShopAllText } from './styles';
 import { getProduct } from './helperFunction';
+import { Product } from '../../schema/schema';
 
-interface Product {
-  description: string;
-  category: string;
-  quantity: number;
-  photo: string;
-  product_id: number;
-  name: string;
-  updated_at: Date;
-}
 // https://codesandbox.io/s/filter-with-react-button-r5x4i?file=/src/App.js
 export default function App() {
   const buttons = [
@@ -63,19 +51,17 @@ export default function App() {
   return (
     <main>
       <GlobalStyle />
-      <StickyHeader>
-        <NavBar />
-        <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>
       <Storefront products={FilteredProducts} />
     </main>

src/app/storefront/productButtons.tsx

@@ -6,15 +6,8 @@ import { Button, Label, IndividualContainer } from './styles';
 
 import { getProduct, filterProduct } from './helperFunction';
 
-interface Product {
-  description: string;
-  category: string;
-  quantity: number;
-  photo: string;
-  product_id: number;
-  name: string;
-  updated_at: Date;
-}
+import { Product } from '../../schema/schema';
+
 export default function ProductButtons(props: {
   key: number;
   value: string;