From 2c94eb7a4d9e2dd33a964553a1ec064e28fabdc2 Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Wed, 25 Oct 2023 17:32:46 -0700 Subject: [PATCH 01/11] dynamic routing for item pags --- src/api/supabase/queries/product_queries.ts | 2 +- src/app/[productId]/page.tsx | 63 +++++++++++++++++++++ src/app/[productId]/styles.ts | 26 +++++++++ src/app/storefront/page.tsx | 24 ++------ src/app/storefront/productButtons.tsx | 11 +--- src/app/storefront/storefrontItems.tsx | 27 +++++---- src/app/storefront/styles.ts | 37 ------------ src/styles/colors.ts | 4 +- src/styles/components.tsx | 45 ++++++++++++++- 9 files changed, 157 insertions(+), 82 deletions(-) create mode 100644 src/app/[productId]/page.tsx create mode 100644 src/app/[productId]/styles.ts diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index bf582d45..2c8c7e5e 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -36,7 +36,7 @@ export async function fetchProducts(): Promise< } export async function fetchProductByID( - productId: string, + productId: number, ): Promise> { try { const { data: product, error } = await supabase diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx new file mode 100644 index 00000000..96fa2e3b --- /dev/null +++ b/src/app/[productId]/page.tsx @@ -0,0 +1,63 @@ +'use client'; + +import Link from 'next/link'; +import { useEffect, useState } from 'react'; +import { fetchProductByID } from '../../api/supabase/queries/product_queries'; +import { BackButton, ImageContainer, DescriptionContainer } from './styles'; +import COLLECTION from '../../styles/components'; +import { Product } from '../../schema/schema'; + +const { GlobalStyle, StickyHeader, Logo, NavButton } = COLLECTION; + +export default function ItemDisplay({ + params, +}: { + params: { productId: number }; +}) { + const [Item, setItem] = useState(undefined); + + useEffect(() => { + async function fetchProducts() { + try { + const response = await fetchProductByID(params.productId); + if (response) { + // not sure why it's underlined but the image does get outputted + setItem(response); + } + } catch (error) { + console.error(error); + } + } + + fetchProducts(); + }, []); + + // replace the sticky header by importing + return ( +
+ + + + + Cart + + + Profile + + + + Back + + + {Item?.name} + + +

{Item?.name}

+ +
+ ); +} diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts new file mode 100644 index 00000000..7186db72 --- /dev/null +++ b/src/app/[productId]/styles.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +export const BackButton = styled.button` + padding-top: 210px; + padding-left: 30px; + width: 70px; + height: 40px; + background-color: transparent; + border-color: transparent; +`; + +export const ImageContainer = styled.div` + margin: 50px; + display: flex; + width: 666px; + height: 666px; + justify-content: center; + align-items: center; + flex-shrink: 0; +`; + +export const DescriptionContainer = styled.div` + margin: 50px; + width: 440px; + height: 350px; +`; diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 50fededb..a1c82af5 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -4,25 +4,13 @@ import React, { useState } from 'react'; import Link from 'next/link'; import StorefrontItems from './storefrontItems'; import ProductButtons from './productButtons'; +import { Product } from '../../schema/schema'; +import COMPONENTS from '../../styles/components'; -import { - GlobalStyle, - ButtonsContainer, - NavButton, - Img, - StickyHeader, - ShopAllText, -} from './styles'; +import { ButtonsContainer, ShopAllText } from './styles'; + +const { GlobalStyle, StickyHeader, Logo, NavButton } = COMPONENTS; -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 = [ @@ -53,7 +41,7 @@ export default function App() {
- + Cart diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 320156d6..7fc9185e 100644 --- a/src/app/storefront/productButtons.tsx +++ b/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; diff --git a/src/app/storefront/storefrontItems.tsx b/src/app/storefront/storefrontItems.tsx index 3549d38a..1494b340 100644 --- a/src/app/storefront/storefrontItems.tsx +++ b/src/app/storefront/storefrontItems.tsx @@ -1,18 +1,11 @@ import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; import { StorefrontWrapper, StorefrontItem, ItemButtons } from './styles'; import { getProduct } 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'; function Storefront() { const [products, setProducts] = useState([]); @@ -35,11 +28,17 @@ function Storefront() { {products.map(product => ( - {product.name} + + {product.name} +

{product.name}

 diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index ed4343b9..3cf96fa7 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,23 +1,11 @@ import styled, { createGlobalStyle } from 'styled-components'; -export const GlobalStyle = createGlobalStyle` - body { - background:white; - } -`; interface props { isClicked: boolean; } -export const StickyHeader = styled.div` - position: fixed; - background-color: lightblue; - width: 1470px; - height: 210px; -`; export const Button = styled.button` background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')}; - border-radius: 50%; width: 50px; height: 50px; @@ -49,14 +37,6 @@ export const ItemContainer = styled.div` flex-direction: row; `; -export const Img = styled.div` - background-color: yellow; - float: left; - height: 50px; - width: 110px; - margin: 20px; -`; - export const ButtonsContainer = styled.div` margin-left: 400px; margin-right: 400px; @@ -67,23 +47,6 @@ export const ButtonsContainer = styled.div` justify-content: center; align-items: center; `; -export const NavButton = styled.button` - margin-top: 30px; - margin-right: 25px; - color: white; - text-align: center; - font-family: sans-serif; - font-size: 15px; - font-style: normal; - font-weight: normal; - line-height: normal; - width: 70px; - height: 40px; - background: black; - border: transparent; - border-radius: 5px; - float: right; -`; export const ItemButtons = styled.button` width: 290px; diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 55dbc051..b7218b53 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -2,8 +2,8 @@ const COLORS = { navy: '#1B3679', marineBlue: '#333286', babyBlue: '#C7DDFF', - perwinkle: '#DDE7FF', - lightPerwinkle: '#F4F7FF', + periwinkle: '#DDE7FF', + lightPeriwinkle: '#F4F7FF', skyBlue: '#F5FBFF', black: '#101010', darkGrey: '#656565', diff --git a/src/styles/components.tsx b/src/styles/components.tsx index 7997e34a..b1d03944 100644 --- a/src/styles/components.tsx +++ b/src/styles/components.tsx @@ -1,3 +1,46 @@ -const COMPONENTS = {}; +import styled, { createGlobalStyle } from 'styled-components'; +import COLORS from './colors'; + +const COMPONENTS = { + GlobalStyle: createGlobalStyle` + body { + background:white; + } + `, + + StickyHeader: styled.div` + position: fixed; + background-color: ${COLORS.lightPeriwinkle}; + filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.1)); + width: 1470px; + height: 180px; + `, + + Logo: styled.div` + background-color: yellow; + float: left; + height: 50px; + width: 110px; + margin: 20px; + `, + + NavButton: styled.button` + margin-top: 30px; + margin-right: 25px; + color: white; + text-align: center; + font-family: sans-serif; + font-size: 15px; + font-style: normal; + font-weight: normal; + line-height: normal; + width: 70px; + height: 40px; + background: black; + border: transparent; + border-radius: 5px; + float: right; + `, +}; export default COMPONENTS; From c3108e948e2776109bf227f6c6dab05a8d92a67d Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Wed, 25 Oct 2023 20:19:02 -0700 Subject: [PATCH 02/11] made syntax changes --- src/api/supabase/queries/order_queries.ts | 14 ++-- src/api/supabase/queries/product_queries.ts | 4 +- src/app/[productId]/page.tsx | 44 ++++++++---- src/app/[productId]/styles.ts | 51 ++++++++++++-- src/app/storefront/page.tsx | 9 ++- src/app/storefront/styles.ts | 2 +- src/styles/components.tsx | 76 ++++++++++----------- 7 files changed, 129 insertions(+), 71 deletions(-) diff --git a/src/api/supabase/queries/order_queries.ts b/src/api/supabase/queries/order_queries.ts index 2850d141..c6dd0e59 100644 --- a/src/api/supabase/queries/order_queries.ts +++ b/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> { 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> { 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) { diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index 2c8c7e5e..c21ac153 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/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) { @@ -40,7 +40,7 @@ export async function fetchProductByID( ): Promise> { try { const { data: product, error } = await supabase - .from('Product') + .from('product') .select('*') .eq('product_id', productId) .single(); diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 96fa2e3b..61eecc55 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -3,12 +3,23 @@ import Link from 'next/link'; import { useEffect, useState } from 'react'; import { fetchProductByID } from '../../api/supabase/queries/product_queries'; -import { BackButton, ImageContainer, DescriptionContainer } from './styles'; -import COLLECTION from '../../styles/components'; +import { + BackButton, + ImageContainer, + TextContainer, + DescriptionContainer, + ButtonsContainer, + QuantityButton, + AddToCartButton, +} from './styles'; +import { + GlobalStyle, + StickyHeader, + Logo, + NavButton, +} from '../../styles/components'; import { Product } from '../../schema/schema'; -const { GlobalStyle, StickyHeader, Logo, NavButton } = COLLECTION; - export default function ItemDisplay({ params, }: { @@ -21,7 +32,7 @@ export default function ItemDisplay({ try { const response = await fetchProductByID(params.productId); if (response) { - // not sure why it's underlined but the image does get outputted + // not sure why this is erroring b/c it still outputs the product? setItem(response); } } catch (error) { @@ -48,15 +59,22 @@ export default function ItemDisplay({ Back - - {Item?.name} - -

{Item?.name}

+ + {Item?.name} + + +

{Item?.name}

+

{Item?.category}

+ + 1 + Add to cart + +
); diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts index 7186db72..90627af1 100644 --- a/src/app/[productId]/styles.ts +++ b/src/app/[productId]/styles.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import COLORS from '../../styles/colors'; export const BackButton = styled.button` padding-top: 210px; @@ -9,18 +10,58 @@ export const BackButton = styled.button` border-color: transparent; `; +export const DescriptionContainer = styled.div` + display: flex; + margin: 50px; + width: 1440px; + height: 800px; +`; + export const ImageContainer = styled.div` margin: 50px; - display: flex; width: 666px; height: 666px; - justify-content: center; - align-items: center; flex-shrink: 0; `; -export const DescriptionContainer = styled.div` - margin: 50px; +export const TextContainer = styled.div` + margin-left: 70px; width: 440px; height: 350px; `; + +export const ButtonsContainer = styled.div` + display: flex; + justify-content: space-between; + width: 450px; + height: 50px; + border-radius: 30px; + padding: 30px; +`; + +export const QuantityButton = styled.button` + width: 165px; + height: 50px; + border-radius: 8px; + background-color: ${COLORS.white}; + border-color: ${COLORS.navy}; + font-family: Public Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + 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; +`; diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index a1c82af5..66eba2a4 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -5,12 +5,15 @@ import Link from 'next/link'; import StorefrontItems from './storefrontItems'; import ProductButtons from './productButtons'; import { Product } from '../../schema/schema'; -import COMPONENTS from '../../styles/components'; +import { + GlobalStyle, + StickyHeader, + Logo, + NavButton, +} from '../../styles/components'; import { ButtonsContainer, ShopAllText } from './styles'; -const { GlobalStyle, StickyHeader, Logo, NavButton } = COMPONENTS; - // https://codesandbox.io/s/filter-with-react-button-r5x4i?file=/src/App.js export default function App() { const buttons = [ diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index 3cf96fa7..54ddeb01 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,4 +1,4 @@ -import styled, { createGlobalStyle } from 'styled-components'; +import styled from 'styled-components'; interface props { isClicked: boolean; diff --git a/src/styles/components.tsx b/src/styles/components.tsx index b1d03944..b6002554 100644 --- a/src/styles/components.tsx +++ b/src/styles/components.tsx @@ -1,46 +1,42 @@ import styled, { createGlobalStyle } from 'styled-components'; import COLORS from './colors'; -const COMPONENTS = { - GlobalStyle: createGlobalStyle` - body { - background:white; - } - `, +export const GlobalStyle = createGlobalStyle` + body { + background: white; + } +`; - StickyHeader: styled.div` - position: fixed; - background-color: ${COLORS.lightPeriwinkle}; - filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.1)); - width: 1470px; - height: 180px; - `, +export const StickyHeader = styled.div` + position: fixed; + background-color: ${COLORS.lightPeriwinkle}; + filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.1)); + width: 1470px; + height: 180px; +`; - Logo: styled.div` - background-color: yellow; - float: left; - height: 50px; - width: 110px; - margin: 20px; - `, +export const Logo = styled.div` + background-color: yellow; + float: left; + height: 50px; + width: 110px; + margin: 20px; +`; - NavButton: styled.button` - margin-top: 30px; - margin-right: 25px; - color: white; - text-align: center; - font-family: sans-serif; - font-size: 15px; - font-style: normal; - font-weight: normal; - line-height: normal; - width: 70px; - height: 40px; - background: black; - border: transparent; - border-radius: 5px; - float: right; - `, -}; - -export default COMPONENTS; +export const NavButton = styled.button` + margin-top: 30px; + margin-right: 25px; + color: white; + text-align: center; + font-family: sans-serif; + font-size: 15px; + font-style: normal; + font-weight: normal; + line-height: normal; + width: 70px; + height: 40px; + background: black; + border: transparent; + border-radius: 5px; + float: right; +`; From a0841a2903fd748fa127c7676248419e277676d3 Mon Sep 17 00:00:00 2001 From: Kevin Cai Date: Wed, 1 Nov 2023 17:48:00 -0700 Subject: [PATCH 03/11] Done NEed to run checkers --- src/api/supabase/queries/tests/user_test.ts | 44 ++++---- src/api/supabase/queries/user_queries.ts | 105 +++++++++++++------- src/app/page.tsx | 17 +++- 3 files changed, 106 insertions(+), 60 deletions(-) diff --git a/src/api/supabase/queries/tests/user_test.ts b/src/api/supabase/queries/tests/user_test.ts index 37a19898..3c9e558d 100644 --- a/src/api/supabase/queries/tests/user_test.ts +++ b/src/api/supabase/queries/tests/user_test.ts @@ -4,38 +4,46 @@ import { fetchUserData, fetchUserByUUID, - addUserAddress, + fetchFavoriteItems, + addToFavorites, + removeFromFavorites, } from '../user_queries'; -export async function testFetchUserData() { +export async function runFetchUserData() { try { const result = await fetchUserData(); - console.log('Fetch Data Result:', result); + console.log('fetchUserData Result:', result); } catch (error) { - console.error('Test Fetch Data Error:', error); + console.error('Error in fetchUserData:', error); } } -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(uuid); - console.log('Fetch User by UUID Result:', result); + const result = await fetchUserByUUID(testUUID); + console.log('fetchUserByUUID Result:', result); } catch (error) { - console.error('Test Fetch User by UUID Error:', error); + console.error('Error in fetchUserByUUID:', error); } } -export async function testAddUserAddress() { - const uuid = '3b4a1317-b9ea-4cbd-95d7-e959aa80d1ea'; // Replace with a valid user ID - const newStreet = '123 New Street'; - const newCity = 'New City'; - const newZipcode = '12345'; + +export async function fullFavItemTest() { + const testUserId = '4a934844-76fa-4a1a-80d7-fa00597398e1'; + const testItemId = '10'; try { - const result = await addUserAddress(uuid, newStreet, newCity, newZipcode); - console.log('Add User Address Result:', result); + const result = await fetchUserByUUID(testUserId); + console.log('fetchUserData Result:', result); + addToFavorites(testUserId, testItemId); + let result_1 = await fetchFavoriteItems(testUserId); + console.log('fetchFavoriteItems Result:', result_1); + removeFromFavorites(testUserId, testItemId); + result_1 = await fetchFavoriteItems(testUserId); + console.log('fetchFavoriteItems Result:', result_1); + } catch (error) { - console.error('Test Add User Address Error:', error); + console.error('Error in incrementCartItemByOne:', error); } -} +} \ No newline at end of file diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index 22807404..30ae0278 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -20,7 +20,7 @@ export async function fetchUserData(): Promise< PostgrestSingleResponse | { data: never[]; error: PostgrestError } > { try { - const { data: users, error } = await supabase.from('users').select('*'); + const { data: users, error } = await supabase.from('profiles').select('*'); if (error) { console.error('Error fetching data:', error); @@ -39,7 +39,7 @@ export async function fetchUserByUUID( ): Promise> { try { const { data: user, error } = await supabase - .from('Users') + .from('profiles') .select('*') .eq('user_id', uuid) .single(); @@ -55,47 +55,76 @@ export async function fetchUserByUUID( } } -export async function addUserAddress( - uuid: string, - newStreet: string, - newCity: string, - newZipcode: string, -): Promise> { - try { - const { data: existingUser, error: selectError } = await supabase - .from('Users') - .select('street, city, zipcode') - .eq('user_id', uuid) +export async function fetchFavoriteItems(userId: string): Promise> { + // Fetch fav_items for the specified user + const { data, error } = await supabase + .from('profiles') + .select('fav_items') + .eq('user_id', userId) .single(); - if (selectError) { - console.error('Error selecting user data:', selectError); - throw selectError; - } + if (error) { + throw new Error(`An error occurred when trying to fetch favorite items: ${error.message}`); + } else if (!data) { + throw new Error("No user found with the specified user_id."); + } - // Append new values to the arrays - const updatedStreet = [...(existingUser?.street || []), newStreet]; - const updatedCity = [...(existingUser?.city || []), newCity]; - const updatedZipcode = [...(existingUser?.zipcode || []), newZipcode]; - - const { data, error } = await supabase - .from('Users') - .update({ - street: updatedStreet, - city: updatedCity, - zipcode: updatedZipcode, - }) - .eq('user_id', uuid) + return data.fav_items; +} + +export async function addToFavorites(userId: string, productId: string) { + // First, fetch the current fav_items for the user + const { data, error } = await supabase + .from('profiles') + .select('fav_items') + .eq('user_id', userId) .single(); - if (error) { - console.error('Error updating user data:', error); - throw error; - } + if (error) { + throw new Error(`An error occurred when trying to fetch the user's favorite items: ${error.message}`); + } - return { data, error: null, status: 200, statusText: 'OK', count: 1 }; - } catch (error) { - console.error('Error:', error); - throw error; + const currentFavItems = data?.fav_items || {}; + + // Add the product to fav_items or update its quantity + currentFavItems[productId] = (currentFavItems[productId] || 0); + + // Now update the user's fav_items in the database + const updateResponse = await supabase + .from('profiles') + .update({ fav_items: currentFavItems }) + .eq('user_id', userId); + + if (updateResponse.error) { + throw new Error(`An error occurred when trying to update the user's favorite items: ${updateResponse.error.message}`); } } + +// Function to remove a product from fav_items +export async function removeFromFavorites(userId: string, productId: string) { + // First, fetch the current fav_items for the user + const { data, error } = await supabase + .from('profiles') + .select('fav_items') + .eq('user_id', userId) + .single(); + + if (error) { + throw new Error(`An error occurred when trying to fetch the user's favorite items: ${error.message}`); + } + + const currentFavItems = data?.fav_items || {}; + + // Remove the product from fav_items + delete currentFavItems[productId]; + console.log(currentFavItems); + // Now update the user's fav_items in the database + const updateResponse = await supabase + .from('profiles') + .update({ fav_items: currentFavItems }) + .eq('user_id', userId); + + if (updateResponse.error) { + throw new Error(`An error occurred when trying to update the user's favorite items: ${updateResponse.error.message}`); + } +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index a2b349a5..f3ca9fa6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,12 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ +'use client'; + +import React, { useEffect } from 'react'; + import Link from 'next/link'; import { - testFetchUserData, - testFetchUserByUUID, - testAddUserAddress, + fullFavItemTest } from '../api/supabase/queries/tests/user_test'; import { testFetchOrderByUUID, @@ -24,7 +26,7 @@ import { } from '../api/supabase/queries/tests/pickup_test'; export default function Checkout() { - testFetchUserData(); + // testFetchUserData(); // testFetchUserByUUID(); // testAddUserAddress(); // testFetchOrderByUUID(); @@ -36,8 +38,15 @@ export default function Checkout() { // testFetchPickupData(); // testFetchPickupTimesByUUID(); // testUpdateAllOrdersProgressToTrue(); + useEffect(() => { + async function testEverything() { + await fullFavItemTest(); + } + testEverything(); + }); return ( +
Login
From 2ef3323543ebd80bcf8a6b573b083fbc1ce40e40 Mon Sep 17 00:00:00 2001 From: Kevin Cai Date: Wed, 1 Nov 2023 20:02:22 -0700 Subject: [PATCH 04/11] Done: --- src/api/supabase/queries/tests/user_test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/api/supabase/queries/tests/user_test.ts b/src/api/supabase/queries/tests/user_test.ts index 3c9e558d..83377f0a 100644 --- a/src/api/supabase/queries/tests/user_test.ts +++ b/src/api/supabase/queries/tests/user_test.ts @@ -37,11 +37,11 @@ export async function fullFavItemTest() { const result = await fetchUserByUUID(testUserId); console.log('fetchUserData Result:', result); addToFavorites(testUserId, testItemId); - let result_1 = await fetchFavoriteItems(testUserId); - console.log('fetchFavoriteItems Result:', result_1); + let result1 = await fetchFavoriteItems(testUserId); + console.log('fetchFavoriteItems Result:', result1); removeFromFavorites(testUserId, testItemId); - result_1 = await fetchFavoriteItems(testUserId); - console.log('fetchFavoriteItems Result:', result_1); + result1 = await fetchFavoriteItems(testUserId); + console.log('fetchFavoriteItems Result:', result1); } catch (error) { console.error('Error in incrementCartItemByOne:', error); From 33e4307b10bb07fa387accc0a3ce508bee2093c5 Mon Sep 17 00:00:00 2001 From: Kevin Cai Date: Wed, 1 Nov 2023 20:03:37 -0700 Subject: [PATCH 05/11] Done: --- src/api/supabase/queries/tests/user_test.ts | 5 +- src/api/supabase/queries/user_queries.ts | 66 ++++++++++++--------- src/app/page.tsx | 5 +- 3 files changed, 41 insertions(+), 35 deletions(-) diff --git a/src/api/supabase/queries/tests/user_test.ts b/src/api/supabase/queries/tests/user_test.ts index 83377f0a..07532473 100644 --- a/src/api/supabase/queries/tests/user_test.ts +++ b/src/api/supabase/queries/tests/user_test.ts @@ -28,8 +28,6 @@ export async function runFetchUserByUUID() { } } - - export async function fullFavItemTest() { const testUserId = '4a934844-76fa-4a1a-80d7-fa00597398e1'; const testItemId = '10'; @@ -42,8 +40,7 @@ export async function fullFavItemTest() { removeFromFavorites(testUserId, testItemId); result1 = await fetchFavoriteItems(testUserId); console.log('fetchFavoriteItems Result:', result1); - } catch (error) { console.error('Error in incrementCartItemByOne:', error); } -} \ No newline at end of file +} diff --git a/src/api/supabase/queries/user_queries.ts b/src/api/supabase/queries/user_queries.ts index 30ae0278..3bd6815b 100644 --- a/src/api/supabase/queries/user_queries.ts +++ b/src/api/supabase/queries/user_queries.ts @@ -55,18 +55,22 @@ export async function fetchUserByUUID( } } -export async function fetchFavoriteItems(userId: string): Promise> { +export async function fetchFavoriteItems( + userId: string, +): Promise> { // Fetch fav_items for the specified user const { data, error } = await supabase - .from('profiles') - .select('fav_items') - .eq('user_id', userId) - .single(); + .from('profiles') + .select('fav_items') + .eq('user_id', userId) + .single(); if (error) { - throw new Error(`An error occurred when trying to fetch favorite items: ${error.message}`); + throw new Error( + `An error occurred when trying to fetch favorite items: ${error.message}`, + ); } else if (!data) { - throw new Error("No user found with the specified user_id."); + throw new Error('No user found with the specified user_id.'); } return data.fav_items; @@ -75,28 +79,32 @@ export async function fetchFavoriteItems(userId: string): Promise Login From 76ec1e7bc8efbbffb5bec2bc6ca421e98398f61d Mon Sep 17 00:00:00 2001 From: Kevin Cai Date: Fri, 3 Nov 2023 14:49:39 -0700 Subject: [PATCH 06/11] Prettier --- src/styles/fonts.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index 417ebd83..956d3377 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,17 +1,17 @@ import styled from 'styled-components/native'; export const Heading1 = styled.Text` - font-family: public-sans; - font-size: 40px; - font-style: normal; - font-weight: 700; - line-height: normal; + font-family: public-sans; + font-size: 40px; + font-style: normal; + font-weight: 700; + line-height: normal; `; export const Heading4 = styled.Text` - font-family: public-sans; - font-size: 15px; - font-style: normal; - font-weight: 400; - line-height: normal; -`; \ No newline at end of file + font-family: public-sans; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; From 5322a3e8bccbf786f773cd78d23220cc78c126ca Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 5 Nov 2023 15:14:07 -0800 Subject: [PATCH 07/11] changed Product to PostgresSingleResponse --- src/app/[productId]/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 7c505d11..9cc0e654 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import Image from 'next/image'; import { useEffect, useState } from 'react'; +import { PostgrestSingleResponse } from '@supabase/supabase-js'; import { fetchProductByID } from '../../api/supabase/queries/product_queries'; import { BackButton, @@ -20,14 +21,13 @@ export default function ItemDisplay({ }: { params: { productId: number }; }) { - const [Item, setItem] = useState(undefined); + const [Item, setItem] = useState>(); useEffect(() => { async function fetchProducts() { try { const response = await fetchProductByID(params.productId); if (response) { - // not sure why this is erroring b/c it still outputs the product? setItem(response); } } catch (error) { From b31e2030e36e9d87210f1d2b8fd6581945afbe1f Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 5 Nov 2023 15:21:33 -0800 Subject: [PATCH 08/11] trying to see if it passes typescript compiler check --- src/api/supabase/queries/product_queries.ts | 4 +--- src/api/supabase/queries/tests/product_test.ts | 2 +- src/app/[productId]/page.tsx | 9 ++++++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index c21ac153..2b181bbf 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -35,9 +35,7 @@ export async function fetchProducts(): Promise< } } -export async function fetchProductByID( - productId: number, -): Promise> { +export async function fetchProductByID(productId: number) { try { const { data: product, error } = await supabase .from('product') diff --git a/src/api/supabase/queries/tests/product_test.ts b/src/api/supabase/queries/tests/product_test.ts index b5d502d2..98bc9637 100644 --- a/src/api/supabase/queries/tests/product_test.ts +++ b/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); diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index 9cc0e654..a6994b05 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -3,7 +3,6 @@ import Link from 'next/link'; import Image from 'next/image'; import { useEffect, useState } from 'react'; -import { PostgrestSingleResponse } from '@supabase/supabase-js'; import { fetchProductByID } from '../../api/supabase/queries/product_queries'; import { BackButton, @@ -21,7 +20,7 @@ export default function ItemDisplay({ }: { params: { productId: number }; }) { - const [Item, setItem] = useState>(); + const [Item, setItem] = useState(); useEffect(() => { async function fetchProducts() { @@ -29,6 +28,10 @@ export default function ItemDisplay({ const response = await fetchProductByID(params.productId); if (response) { setItem(response); + console.log('response'); + console.log(response); + console.log('item'); + console.log(Item); } } catch (error) { // console.error(error); @@ -36,7 +39,7 @@ export default function ItemDisplay({ } fetchProducts(); - }, []); + }, [params.productId]); return (
From aaed3f2343f92af8dd86ce6444e0d24a817a7cb9 Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 5 Nov 2023 15:33:00 -0800 Subject: [PATCH 09/11] inserted parameters for Storefront function --- src/app/storefront/storefrontItems.tsx | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/src/app/storefront/storefrontItems.tsx b/src/app/storefront/storefrontItems.tsx index 26a77d81..7b6c18e4 100644 --- a/src/app/storefront/storefrontItems.tsx +++ b/src/app/storefront/storefrontItems.tsx @@ -1,26 +1,10 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import Link from 'next/link'; -import { getProduct } from './helperFunction'; import { StorefrontWrapper, StorefrontItem, ItemButtons } from './styles'; import { Product } from '../../schema/schema'; -function Storefront() { - const [products, setProducts] = useState([]); - - useEffect(() => { - async function fetchProducts() { - try { - const productsData = (await getProduct()) as Product[]; - setProducts(productsData); - } catch (error) { - // console.error('Error fetching products:', error); - } - } - - fetchProducts(); - }, []); - +function Storefront({ products }: { products: Product[] }) { return ( {products.map(product => ( From add0a00f7d03bf1ed6806c21a53545ba5b5e31ea Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 5 Nov 2023 15:36:05 -0800 Subject: [PATCH 10/11] prettier & eslint --- src/app/[productId]/page.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx index a6994b05..143426f2 100644 --- a/src/app/[productId]/page.tsx +++ b/src/app/[productId]/page.tsx @@ -28,10 +28,6 @@ export default function ItemDisplay({ const response = await fetchProductByID(params.productId); if (response) { setItem(response); - console.log('response'); - console.log(response); - console.log('item'); - console.log(Item); } } catch (error) { // console.error(error); From 9ee55bc1552d8ffa2a5abe90365c9908d0c8283b Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 5 Nov 2023 15:44:27 -0800 Subject: [PATCH 11/11] fixed prettier and eslint issues --- src/styles/fonts.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index 417ebd83..956d3377 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,17 +1,17 @@ import styled from 'styled-components/native'; export const Heading1 = styled.Text` - font-family: public-sans; - font-size: 40px; - font-style: normal; - font-weight: 700; - line-height: normal; + font-family: public-sans; + font-size: 40px; + font-style: normal; + font-weight: 700; + line-height: normal; `; export const Heading4 = styled.Text` - font-family: public-sans; - font-size: 15px; - font-style: normal; - font-weight: 400; - line-height: normal; -`; \ No newline at end of file + font-family: public-sans; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; +`;