diff --git a/public/images/Arrow_Left_MD.png b/public/images/Arrow_Left_MD.png new file mode 100644 index 00000000..82ecb97c Binary files /dev/null and b/public/images/Arrow_Left_MD.png differ 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 bf582d45..2b181bbf 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) { @@ -35,12 +35,10 @@ export async function fetchProducts(): Promise< } } -export async function fetchProductByID( - productId: string, -): Promise> { +export async function fetchProductByID(productId: number) { try { const { data: product, error } = await supabase - .from('Product') + .from('product') .select('*') .eq('product_id', productId) .single(); 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]/Buttons.tsx b/src/app/[productId]/Buttons.tsx new file mode 100644 index 00000000..0099ef9a --- /dev/null +++ b/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(1); + + const increaseQuantity = () => { + setQuantity(quantity + 1); + }; + + const decreaseQuantity = () => { + if (quantity > 1) { + setQuantity(quantity - 1); + } + }; + + // used hyphen instead of dash for display + return ( + + + + – + + {quantity} + + + + + + Add to cart + + ); +} diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx new file mode 100644 index 00000000..143426f2 --- /dev/null +++ b/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(); + + useEffect(() => { + async function fetchProducts() { + try { + const response = await fetchProductByID(params.productId); + if (response) { + setItem(response); + } + } catch (error) { + // console.error(error); + } + } + + fetchProducts(); + }, [params.productId]); + + return ( +
+ + + + + Back Arrow + Back + + + + + {Item?.name} + + +

{Item?.name}

+

+ {Item?.category} +

+ +

Product ID: {Item?.product_id}

+

Product Details:

+

{Item?.description}

+ + +
+ ); +} diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts new file mode 100644 index 00000000..6c3dd907 --- /dev/null +++ b/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; +`; diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 7a0a884d..dc80a834 100644 --- a/src/app/storefront/page.tsx +++ b/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 (
- - - - {buttons.map(type => ( - - ))} - - + + + {buttons.map(type => ( + + ))} + Shop All
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 962dca9b..7b6c18e4 100644 --- a/src/app/storefront/storefrontItems.tsx +++ b/src/app/storefront/storefrontItems.tsx @@ -1,30 +1,26 @@ import React from 'react'; - +import Link from 'next/link'; import { StorefrontWrapper, StorefrontItem, ItemButtons } from './styles'; -interface Product { - description: string; - category: string; - quantity: number; - photo: string; - product_id: number; - name: string; - updated_at: Date; -} - -export default function Storefront(props: { products: Product[] }) { - const { products } = props; +import { Product } from '../../schema/schema'; +function Storefront({ products }: { products: Product[] }) { return ( {products.map(product => ( - {product.name} + + {product.name} +

{product.name}

 @@ -32,3 +28,5 @@ export default function Storefront(props: { products: Product[] }) { ); } + +export default Storefront; diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index 6beede94..ae4f1c4a 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,25 +1,11 @@ -import styled, { createGlobalStyle } from 'styled-components'; +import styled from 'styled-components'; -export const GlobalStyle = createGlobalStyle` - body { - background:white; - } -`; interface props { isClicked: boolean; } -export const StickyHeader = styled.div` - position: fixed; - background-color: var(--Light-Periwinkle, #f4f7ff); - filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.1)); - width: 1470px; - height: 210px; -`; - export const Button = styled.button` background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')}; - border-radius: 50%; width: 50px; height: 50px; @@ -51,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; @@ -68,26 +46,8 @@ export const ButtonsContainer = styled.div` flex-direction: row; justify-content: center; align-items: center; + position: absolute; z-index: 5; - - transform: translate(0px, -180px); -`; -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` diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 151e5bcf..d448d492 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,5 +1,4 @@ import Image from 'next/image'; - import Link from 'next/link'; import React from 'react'; @@ -11,7 +10,7 @@ export default function NavBar() { logo pic @@ -21,14 +20,19 @@ export default function NavBar() { logo pic - logo pic + Cart icon 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 c9a08998..3c3a3d77 100644 --- a/src/styles/components.tsx +++ b/src/styles/components.tsx @@ -1,15 +1,46 @@ import styled, { createGlobalStyle } from 'styled-components'; - -const COMPONENTS = {}; - -export default COMPONENTS; +import COLORS from './colors'; export const GlobalStyle = createGlobalStyle` body { - background:white; + background: white; } `; +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; +`; + +export const Logo = styled.div` + background-color: yellow; + float: left; + height: 50px; + width: 110px; + margin: 20px; +`; + +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 NavBarComp = styled.nav` display: flex; flex-direction: row; @@ -18,7 +49,8 @@ export const NavBarComp = styled.nav` padding-right: 30px; height: 200px; padding-top: 20px; - + z-index: 1; + position: absolute; width: 100%; background: var(--Light-Periwinkle, #f4f7ff); box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); 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; +`;