Merge

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/api/supabase/queries/tests/user_test.ts

@@ -8,13 +8,13 @@ import {
 
 
 
-export async function testFetchUserByUUID() {
-  const uuid = '3b4a1317-b9ea-4cbd-95d7-e959aa80d1ea'; // Replace with a valid user ID
+export async function runFetchUserByUUID() {
+  const testUUID = 'aeaf5f6c-a8bc-41b8-9850-5fb11e1b6dea';
   try {
     const result = await fetchUserByUUID();
     console.log('Fetch User by UUID Result:', result);
   } catch (error) {
-    console.error('Test Fetch User by UUID Error:', error);
+    console.error('Error in fetchUserByUUID:', error);
   }
 }
 

src/api/supabase/queries/user_queries.ts

@@ -28,6 +28,7 @@ export async function updateCart(
 
   currentCart: Record<string, number>,
 ) {
+
   const { error } = await supabase
     .from('profiles')
     .update({ cart: currentCart })
@@ -59,7 +60,7 @@ export async function decrementCartItem(
   n: number,
 ) {
 
-  const currentCart = await fetchUserCart(userId);
+  const currentCart = await fetchUserCart();
 
   if (currentCart[itemId]) {
     currentCart[itemId] -= n;
@@ -69,14 +70,14 @@ export async function decrementCartItem(
     }
   }
 
-  await updateCart(userId, currentCart);
+  await updateCart(currentCart);
 }
 
 export async function incrementCartItemByOne(userId: string, itemId: string) {
-  await incrementCartItem(userId, itemId, 1);
+  await incrementCartItem(itemId, 1);
 }
 
 export async function decrementCartItemByOne(userId: string, itemId: string) {
-  await decrementCartItem(userId, itemId, 1);
+  await decrementCartItem(itemId, 1);
 }
 

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/page.tsx

@@ -3,12 +3,30 @@
 'use client';
 
 import React, { useEffect } from 'react';
+
 import Link from 'next/link';
+import {
+  testFetchOrderByUUID,
+  testFetchOrders,
+  testGetOrderById,
+  testToggleOrderProgress,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  testUpdateAllOrdersProgressToTrue,
+} from '../api/supabase/queries/tests/order_test';
+import {
+  testFetchProducts,
+  testFetchProductByName,
+} from '../api/supabase/queries/tests/product_test';
+import {
+  testFetchPickupData,
+  testFetchPickupTimesByUUID,
+} from '../api/supabase/queries/tests/pickup_test';
+
 
 export default function Home() {
   return (
     <main>
       <Link href="/login">Login</Link>
     </main>
   );
-}
+}