From 467b6c92d11b4a9286762c3614b4d9550cae306b Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Fri, 8 Mar 2024 00:09:56 -0800 Subject: [PATCH 01/27] toastFix --- src/app/profileScreen/page.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 504420d4..3ad0f06d 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { toast } from 'react-toastify'; +import { toast, ToastContainer } from 'react-toastify'; import { useEffect, useState } from 'react'; import { Heading2, @@ -223,6 +223,12 @@ export default function Profile() { My Profile + {user.delivery_allowed ? ( From 1121d9055b76cbfa4e5f12b961b24c4dd228b5de Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sat, 16 Mar 2024 12:28:11 -0700 Subject: [PATCH 02/27] switchbranch --- src/api/supabase/queries/button_queries.ts | 18 ++++++ src/app/storefront/StoreFrontNavBar.tsx | 70 ++++++++++++++++++++-- src/app/storefront/productButtons.tsx | 12 ++-- src/schema/schema.ts | 7 +++ 4 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 src/api/supabase/queries/button_queries.ts diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts new file mode 100644 index 00000000..d2ae675e --- /dev/null +++ b/src/api/supabase/queries/button_queries.ts @@ -0,0 +1,18 @@ +import { StorefrontButtons } from '../../../schema/schema'; +import supabase from '../createClient'; + +export async function fetchButoonCategories(): Promise { + const { data: buttons, error } = await supabase + .from('storefront_buttons') + .select('*'); + if (error) { + throw new Error(`Error fetching buttons: ${error.message}`); + } + console.log("func tester") + console.log(buttons) + return buttons; +} + +export async function fetchButton() { + return 0 +} \ No newline at end of file diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 7ff4599e..498fba32 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -1,7 +1,9 @@ +/* eslint-disable react/button-has-type */ import Image from 'next/image'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; +import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries'; import { @@ -12,12 +14,10 @@ import { ShoppingCartIcon, } from '../../components/NavBarFolder/styles'; -import { Product } from '../../schema/schema'; +import { Product, StorefrontButtons } from '../../schema/schema'; import { ButtonsContainer } from './styles'; -import { buttons } from './buttonValues'; - import ProductButtons from './productButtons'; export default function StoreFrontNavBar(props: { @@ -26,8 +26,7 @@ export default function StoreFrontNavBar(props: { IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; }) { - const [data, setData] = useState(0); - const [isZero, setIsZero] = useState(true); + const { setFilteredProducts, setIsClickedButton, @@ -35,6 +34,15 @@ export default function StoreFrontNavBar(props: { setCategoryWord, } = props; + const [data, setData] = useState(0); + const [isZero, setIsZero] = useState(true); + const [buttonCategories, setButtonCategories] = useState([]); + const [buttonDisplay, setButtonDisplay] = useState([]); + let ind = 0; + const length = 4; + // const [reachedEnd, setReachedEnd] = useState(false); + // const [reachedStart, setReachedStart] = useState(true); + useEffect(() => { const fetchData = async () => { setData(await totalNumberOfItemsInCart()); @@ -51,6 +59,54 @@ export default function StoreFrontNavBar(props: { changeData(); }, [data]); + useEffect(() => { + const fetchButtonCat = async () => { + setButtonCategories(await fetchButoonCategories()); + }; + fetchButtonCat(); + }, []) + + useEffect(() => { + const displayedButtons = async () => { + const button = await fetchButoonCategories() + setButtonDisplay(button.slice(0, 4)); + }; + displayedButtons(); + }, []) + + const changeDisplay = (direction : number) => { + setButtonDisplay(buttonCategories.slice(ind, ind+4)); + const clicked = IsClickedButton; + for (let i = 0; i < buttonDisplay.length; i += 1) { + buttonDisplay[i].count += direction; + if (clicked[i]) { + clicked[i] = false; + clicked[i+direction] = true; + } + } + + setIsClickedButton(clicked); + + } + + const handlePrevious = () => { + console.log(ind > 0); + if (ind > 0) { + ind -= 1; + console.log(ind); + // setInd(newIndex < 0 ? length - 1 : newIndex); + changeDisplay(-1); + } + }; + + const handleNext = () => { + if (ind + 4 < buttonCategories.length) { + ind += 1; + console.log(ind); + changeDisplay(1); + } + }; + return ( @@ -62,7 +118,8 @@ export default function StoreFrontNavBar(props: { /> - {buttons.map((type, index) => ( + + {buttonDisplay.map((type, index) => ( ))} + diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 7d8976cb..80efc83a 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -2,10 +2,12 @@ import React from 'react'; +import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { Button, Label, IndividualContainer } from './styles'; import { buttons } from './buttonValues'; + import { fetchUserProducts, filterUserProducts, @@ -41,10 +43,12 @@ export default function ProductButtons(props: { const category = e.currentTarget.value; const productItem = await fetchUserProducts(); + const buttonCategories = await fetchButoonCategories(); - for (let i = 0; i < buttons.length; i += 1) { - if (buttons[i].value === category) { - const ind = buttons[i].count; + for (let i = 0; i < buttonCategories.length; i += 1) { + console.log(buttonCategories[i].value, category); + if (buttonCategories[i].value === category) { + const ind = buttonCategories[i].count; if (IsClickedButton[ind] === true) { const tempArray = [...IsClickedButton]; tempArray[ind] = !tempArray[ind]; @@ -59,7 +63,7 @@ export default function ProductButtons(props: { } const arrayOfFalse = [false, false, false, false]; arrayOfFalse[ind] = true; - setCategoryWord(buttons[i].value); + setCategoryWord(buttonCategories[i].value); setIsClickedButton(arrayOfFalse); break; diff --git a/src/schema/schema.ts b/src/schema/schema.ts index 51a028ba..5dd98d91 100644 --- a/src/schema/schema.ts +++ b/src/schema/schema.ts @@ -79,3 +79,10 @@ export type Address = { zipcode: string; user_id: number; }; + +export type StorefrontButtons = { + id: number; + name: string; + value: string; + count: number; +}; From 86b352f00618e58f1b51b9cf20052aa779a98de6 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sat, 16 Mar 2024 12:30:32 -0700 Subject: [PATCH 03/27] buyankhuu'ssmallchange --- src/app/storefront/StoreFrontNavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 49c271db..422e1f2b 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -79,7 +79,7 @@ export default function StoreFrontNavBar(props: { -

User

+

Users

From 5375ac5f49b6b87d3a956a5b552d760fe52e4e1f Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sat, 16 Mar 2024 12:30:32 -0700 Subject: [PATCH 04/27] buyankhuu'ssmallchange --- src/app/storefront/StoreFrontNavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 498fba32..e162ef70 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -137,7 +137,7 @@ export default function StoreFrontNavBar(props: { -

User

+

Users

From 9711e145e1f16dba7163463567c20bb48aa07500 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sat, 16 Mar 2024 16:39:44 -0700 Subject: [PATCH 05/27] rebase --- src/app/storefront/StoreFrontNavBar.tsx | 72 ++++++++++++++----------- src/app/storefront/page.tsx | 4 +- src/app/storefront/styles.ts | 26 ++++++++- 3 files changed, 70 insertions(+), 32 deletions(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index e162ef70..0ff5b47c 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -6,6 +6,8 @@ import React, { useEffect, useState } from 'react'; import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries'; + + import { NavBarComp, ButtonsDiv, @@ -16,7 +18,12 @@ import { import { Product, StorefrontButtons } from '../../schema/schema'; -import { ButtonsContainer } from './styles'; +import { ButtonsContainer, + FrontButton, + BackButton, + Front, + Back + } from './styles'; import ProductButtons from './productButtons'; @@ -38,11 +45,9 @@ export default function StoreFrontNavBar(props: { const [isZero, setIsZero] = useState(true); const [buttonCategories, setButtonCategories] = useState([]); const [buttonDisplay, setButtonDisplay] = useState([]); - let ind = 0; - const length = 4; - // const [reachedEnd, setReachedEnd] = useState(false); - // const [reachedStart, setReachedStart] = useState(true); - + const [ind, setInd] = useState(0); + let newInd = 0; + useEffect(() => { const fetchData = async () => { setData(await totalNumberOfItemsInCart()); @@ -73,38 +78,41 @@ export default function StoreFrontNavBar(props: { }; displayedButtons(); }, []) + - const changeDisplay = (direction : number) => { - setButtonDisplay(buttonCategories.slice(ind, ind+4)); + const changeDisplay = (direction : number, index : number) => { + setButtonDisplay(buttonCategories.slice(index, index+4)); const clicked = IsClickedButton; - for (let i = 0; i < buttonDisplay.length; i += 1) { - buttonDisplay[i].count += direction; - if (clicked[i]) { - clicked[i] = false; - clicked[i+direction] = true; - } - } - - setIsClickedButton(clicked); - + // for (let i = 0; i < buttonDisplay.length; i += 1) { + + // if (clicked[i]) { + // clicked[i] = false; + // if (i+direction >= 0 || i+direction < buttonCategories.length) { + // clicked[i+direction] = true; + // } + // } + // } + + // setIsClickedButton(clicked); + console.log(IsClickedButton); } const handlePrevious = () => { - console.log(ind > 0); if (ind > 0) { - ind -= 1; - console.log(ind); - // setInd(newIndex < 0 ? length - 1 : newIndex); - changeDisplay(-1); + newInd = ind - 1; + setInd(newInd); + changeDisplay(-1, newInd); } }; const handleNext = () => { if (ind + 4 < buttonCategories.length) { - ind += 1; - console.log(ind); - changeDisplay(1); + newInd = ind + 1; + setInd(ind+1); + changeDisplay(1, newInd); + } + }; return ( @@ -118,20 +126,24 @@ export default function StoreFrontNavBar(props: { /> - + + + {buttonDisplay.map((type, index) => ( ))} - + + + diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 6e9aed22..db9f8fea 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -20,7 +20,9 @@ export default function App() { false, false, false, - ]); + ] + + ); useEffect(() => { async function fetchAllProducts() { diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index 2afce95e..156fba6b 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Heart, User, ShoppingCart } from 'react-feather'; +import { Heart, User, ShoppingCart, ArrowLeft, ArrowRight } from 'react-feather'; import { Body1 } from '@/styles/fonts'; @@ -213,3 +213,27 @@ export const OutterDiv = styled.div` width: 300px; height: 375px; `; + +export const Front = styled(ArrowLeft)` + width: 30px; + height: 30px; + position: relative; +`; + +export const FrontButton = styled.button` + position: relative; + background-color: transparent; + border: none; +`; + +export const Back = styled(ArrowRight)` + width: 30px; + height: 30px; + position: relative; +`; + +export const BackButton = styled.button` + position: relative; + background-color: transparent; + border: none; +`; \ No newline at end of file From 6fb57ce1966f21399deb2958f485f4a2bf2784b4 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 17 Mar 2024 16:04:18 -0700 Subject: [PATCH 06/27] changed it so that it shows 4 at a time --- src/api/supabase/queries/button_queries.ts | 3 +- src/api/supabase/queries/product_queries.ts | 3 ++ src/app/storefront/StoreFrontNavBar.tsx | 38 ++++++++++----------- src/app/storefront/page.tsx | 7 +++- src/app/storefront/productButtons.tsx | 32 +++++++++-------- 5 files changed, 46 insertions(+), 37 deletions(-) diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts index d2ae675e..f9569328 100644 --- a/src/api/supabase/queries/button_queries.ts +++ b/src/api/supabase/queries/button_queries.ts @@ -8,8 +8,7 @@ export async function fetchButoonCategories(): Promise { if (error) { throw new Error(`Error fetching buttons: ${error.message}`); } - console.log("func tester") - console.log(buttons) + return buttons; } diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index ae9c44cc..a03acb70 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -105,11 +105,14 @@ export async function filterUserProducts( const products = await fetchUnprescribedCategory(productType); const user = await fetchUser(); + + const { data: prescribed, error } = await supabase .from('product') .select('*') .eq('prescribed', true) .eq('category', productType); + if (error) { throw new Error(`Error fetching products: ${error.message}`); } diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 0ff5b47c..cb33e52b 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -6,8 +6,6 @@ import React, { useEffect, useState } from 'react'; import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries'; - - import { NavBarComp, ButtonsDiv, @@ -22,7 +20,7 @@ import { ButtonsContainer, FrontButton, BackButton, Front, - Back + Back, } from './styles'; import ProductButtons from './productButtons'; @@ -32,6 +30,8 @@ export default function StoreFrontNavBar(props: { setIsClickedButton: (clicked: boolean[]) => void; IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; + clickedButton: number; + setClickedButton: (clicked: number) => void; }) { const { @@ -39,6 +39,8 @@ export default function StoreFrontNavBar(props: { setIsClickedButton, IsClickedButton, setCategoryWord, + setClickedButton, + clickedButton } = props; const [data, setData] = useState(0); @@ -82,24 +84,15 @@ export default function StoreFrontNavBar(props: { const changeDisplay = (direction : number, index : number) => { setButtonDisplay(buttonCategories.slice(index, index+4)); - const clicked = IsClickedButton; - // for (let i = 0; i < buttonDisplay.length; i += 1) { - - // if (clicked[i]) { - // clicked[i] = false; - // if (i+direction >= 0 || i+direction < buttonCategories.length) { - // clicked[i+direction] = true; - // } - // } - // } - - // setIsClickedButton(clicked); - console.log(IsClickedButton); } const handlePrevious = () => { if (ind > 0) { - newInd = ind - 1; + if (ind % 4 !== 0) { + newInd = 4 * (Math.floor(buttonCategories.length / 4) - 1); + } else { + newInd = ind - 4; + } setInd(newInd); changeDisplay(-1, newInd); } @@ -107,8 +100,13 @@ export default function StoreFrontNavBar(props: { const handleNext = () => { if (ind + 4 < buttonCategories.length) { - newInd = ind + 1; - setInd(ind+1); + const remainder = buttonCategories.length - ind - 4; + if (remainder < 4) { + newInd = buttonCategories.length - 4; + } else { + newInd = ind + 4 + } + setInd(newInd); changeDisplay(1, newInd); } @@ -139,6 +137,8 @@ export default function StoreFrontNavBar(props: { IsClickedButton={IsClickedButton} setCategoryWord={setCategoryWord} index={index+ind} + setClickedButton={setClickedButton} + clickedButton={clickedButton} /> ))} diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index db9f8fea..3dbcacc4 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -21,9 +21,12 @@ export default function App() { false, false, ] - ); + + const [clickedButton, setClickedButton] = useState(0); + + useEffect(() => { async function fetchAllProducts() { try { @@ -44,6 +47,8 @@ export default function App() { setIsClickedButton={setIsClickedButton} IsClickedButton={IsClickedButton} setCategoryWord={setCategoryWord} + clickedButton={clickedButton} + setClickedButton={setClickedButton} /> Shop {CategoryWord} diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 80efc83a..8a0495a3 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -5,9 +5,6 @@ import React from 'react'; import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { Button, Label, IndividualContainer } from './styles'; -import { buttons } from './buttonValues'; - - import { fetchUserProducts, filterUserProducts, @@ -24,6 +21,8 @@ export default function ProductButtons(props: { IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; index: number; + setClickedButton: (clicked: number) => void; + clickedButton: number; }) { const { key, @@ -34,6 +33,8 @@ export default function ProductButtons(props: { IsClickedButton, setCategoryWord, index, + setClickedButton, + clickedButton } = props; async function applyFilter( @@ -46,25 +47,26 @@ export default function ProductButtons(props: { const buttonCategories = await fetchButoonCategories(); for (let i = 0; i < buttonCategories.length; i += 1) { - console.log(buttonCategories[i].value, category); if (buttonCategories[i].value === category) { - const ind = buttonCategories[i].count; - if (IsClickedButton[ind] === true) { - const tempArray = [...IsClickedButton]; - tempArray[ind] = !tempArray[ind]; - tempArray[0] = true; + const ind = buttonCategories[i].id - 1; + if (ind === clickedButton) { + // const tempArray = [...IsClickedButton]; + // tempArray[ind] = !tempArray[ind]; + // tempArray[0] = true; setCategoryWord('All'); - setIsClickedButton(tempArray); + // setIsClickedButton(tempArray); + setClickedButton(0); if (productItem !== null) { setFiltredProducts(productItem); } return; } - const arrayOfFalse = [false, false, false, false]; - arrayOfFalse[ind] = true; + setClickedButton(ind); + // const arrayOfFalse = [false, false, false, false]; + // arrayOfFalse[ind] = true; setCategoryWord(buttonCategories[i].value); - setIsClickedButton(arrayOfFalse); + // setIsClickedButton(arrayOfFalse); break; } @@ -90,14 +92,14 @@ export default function ProductButtons(props: { return ( - {/* + {/* */} - - - - + + + ); } diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index 7a51d8e3..b090dfb7 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -85,11 +85,8 @@ export const EyeIcon = styled(Eye)` `; export const Fullscreen = styled.div` - display: flex; - justify-content: center; - align-items: center; width: 100%; - height: 870px; + height: 100%; `; export const InputField = styled.div` diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 8a6d66c4..7ff09c74 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -36,6 +36,7 @@ import { BackButtonDiv, BlankSpace, HeaderDiv, + Fullscreen, } from './styles'; import { signOut } from '../../api/supabase/auth/auth'; import 'react-toastify/dist/ReactToastify.css'; @@ -215,7 +216,7 @@ export default function Profile() { return

Error Loading User

; } return ( -
+ @@ -242,6 +243,6 @@ export default function Profile() { Favorites */} -
+ ); } diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 640722eb..323640e5 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -138,3 +138,10 @@ export const BlankSpace = styled.div` width: 250px; height: 200px; `; + +export const Fullscreen = styled.div` + + width: 100%; + height: 100%; +`; + diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 6e9aed22..55089975 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'; import Storefront from './storefrontItems'; import Footer from '../../components/FooterFolder/Footer'; -import { ShopAllText } from './styles'; +import { ShopAllText, Fullscreen } from './styles'; import { fetchUserProducts } from '../../api/supabase/queries/product_queries'; import { Product } from '../../schema/schema'; @@ -36,7 +36,7 @@ export default function App() { }, []); return ( -
+ Shop {CategoryWord}
-
+ ); } diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index 2afce95e..77719059 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -213,3 +213,10 @@ export const OutterDiv = styled.div` width: 300px; height: 375px; `; + + +export const Fullscreen = styled.div` + + width: 100%; + height: 100%; +`; \ No newline at end of file diff --git a/src/styles/components.tsx b/src/styles/components.tsx index c21ca849..a86bcc97 100644 --- a/src/styles/components.tsx +++ b/src/styles/components.tsx @@ -3,20 +3,6 @@ import styled, { createGlobalStyle } from 'styled-components'; import { User, ShoppingCart } from 'react-feather'; import COLORS from './colors'; -export const GlobalStyle = createGlobalStyle` - @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700&display=swap'); - - body { - background: ${COLORS.offWhite}; - color: ${COLORS.black}; - font-family: 'Public Sans', sans-serif; - } - span{ - - color:black; - } -`; - export const StickyHeader = styled.div` position: fixed; background-color: ${COLORS.lightPeriwinkle}; From 1a3754da1b818d36e2287d131f838365c6838416 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 17 Mar 2024 16:41:25 -0700 Subject: [PATCH 08/27] made it so the arrows disappear at start and end of category list --- src/app/storefront/StoreFrontNavBar.tsx | 12 ++++++++---- src/app/storefront/styles.ts | 14 +++++++++----- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index cb33e52b..e8a7c81c 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -49,6 +49,8 @@ export default function StoreFrontNavBar(props: { const [buttonDisplay, setButtonDisplay] = useState([]); const [ind, setInd] = useState(0); let newInd = 0; + const [reachedStart, setReachedStart] = useState(false); + const [reachedEnd, setReachedEnd] = useState(true); useEffect(() => { const fetchData = async () => { @@ -95,7 +97,9 @@ export default function StoreFrontNavBar(props: { } setInd(newInd); changeDisplay(-1, newInd); + setReachedStart(!(newInd === 0)); } + setReachedEnd(true); }; const handleNext = () => { @@ -108,9 +112,9 @@ export default function StoreFrontNavBar(props: { } setInd(newInd); changeDisplay(1, newInd); - } - + setReachedEnd(ind + 5 < buttonCategories.length); + setReachedStart(true); }; return ( @@ -124,7 +128,7 @@ export default function StoreFrontNavBar(props: { /> - + {buttonDisplay.map((type, index) => ( @@ -141,7 +145,7 @@ export default function StoreFrontNavBar(props: { clickedButton={clickedButton} /> ))} - + diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index 156fba6b..de72ff37 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Heart, User, ShoppingCart, ArrowLeft, ArrowRight } from 'react-feather'; +import { Heart, User, ShoppingCart, ChevronLeft, ChevronRight } from 'react-feather'; import { Body1 } from '@/styles/fonts'; @@ -11,6 +11,8 @@ import COLORS from '../../styles/colors'; interface props { isClicked: boolean; isHovering: boolean; + hasReachedStart: boolean; + hasReachedEnd: boolean; } export const StickyHeader = styled.div` @@ -214,26 +216,28 @@ export const OutterDiv = styled.div` height: 375px; `; -export const Front = styled(ArrowLeft)` +export const Front = styled(ChevronLeft)` width: 30px; height: 30px; position: relative; `; -export const FrontButton = styled.button` +export const FrontButton = styled.button<{ $reachedStart?: boolean }>` position: relative; background-color: transparent; border: none; + visibility: ${props => (props.$reachedStart ? 'visible' : 'hidden')}; `; -export const Back = styled(ArrowRight)` +export const Back = styled(ChevronRight)` width: 30px; height: 30px; position: relative; `; -export const BackButton = styled.button` +export const BackButton = styled.button<{ $reachedEnd?: boolean }>` position: relative; background-color: transparent; border: none; + visibility: ${props => (props.$reachedEnd ? 'visible' : 'hidden')}; `; \ No newline at end of file From ca79ef0fee973441735e82f64776546943749634 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sun, 17 Mar 2024 16:48:57 -0700 Subject: [PATCH 09/27] fix: eslint and pretteir --- src/api/supabase/queries/button_queries.ts | 20 +++++----- src/api/supabase/queries/product_queries.ts | 4 +- src/app/storefront/StoreFrontNavBar.tsx | 43 +++++++++------------ src/app/storefront/page.tsx | 12 ------ src/app/storefront/productButtons.tsx | 10 ++--- src/app/storefront/styles.ts | 10 ++++- 6 files changed, 41 insertions(+), 58 deletions(-) diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts index f9569328..77fb8038 100644 --- a/src/api/supabase/queries/button_queries.ts +++ b/src/api/supabase/queries/button_queries.ts @@ -2,16 +2,16 @@ import { StorefrontButtons } from '../../../schema/schema'; import supabase from '../createClient'; export async function fetchButoonCategories(): Promise { - const { data: buttons, error } = await supabase - .from('storefront_buttons') - .select('*'); - if (error) { - throw new Error(`Error fetching buttons: ${error.message}`); - } - - return buttons; + const { data: buttons, error } = await supabase + .from('storefront_buttons') + .select('*'); + if (error) { + throw new Error(`Error fetching buttons: ${error.message}`); + } + + return buttons; } export async function fetchButton() { - return 0 -} \ No newline at end of file + return 0; +} diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index a03acb70..96e1f470 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -105,14 +105,12 @@ export async function filterUserProducts( const products = await fetchUnprescribedCategory(productType); const user = await fetchUser(); - - const { data: prescribed, error } = await supabase .from('product') .select('*') .eq('prescribed', true) .eq('category', productType); - + if (error) { throw new Error(`Error fetching products: ${error.message}`); } diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index e8a7c81c..09e7f8f5 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -16,42 +16,40 @@ import { import { Product, StorefrontButtons } from '../../schema/schema'; -import { ButtonsContainer, +import { + ButtonsContainer, FrontButton, BackButton, Front, Back, - } from './styles'; +} from './styles'; import ProductButtons from './productButtons'; export default function StoreFrontNavBar(props: { setFilteredProducts: (category: Product[]) => void; - setIsClickedButton: (clicked: boolean[]) => void; - IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; clickedButton: number; setClickedButton: (clicked: number) => void; }) { - const { setFilteredProducts, - setIsClickedButton, - IsClickedButton, setCategoryWord, setClickedButton, - clickedButton + clickedButton, } = props; const [data, setData] = useState(0); const [isZero, setIsZero] = useState(true); - const [buttonCategories, setButtonCategories] = useState([]); + const [buttonCategories, setButtonCategories] = useState( + [], + ); const [buttonDisplay, setButtonDisplay] = useState([]); const [ind, setInd] = useState(0); let newInd = 0; const [reachedStart, setReachedStart] = useState(false); const [reachedEnd, setReachedEnd] = useState(true); - + useEffect(() => { const fetchData = async () => { setData(await totalNumberOfItemsInCart()); @@ -73,20 +71,19 @@ export default function StoreFrontNavBar(props: { setButtonCategories(await fetchButoonCategories()); }; fetchButtonCat(); - }, []) - + }, []); + useEffect(() => { const displayedButtons = async () => { - const button = await fetchButoonCategories() + const button = await fetchButoonCategories(); setButtonDisplay(button.slice(0, 4)); }; displayedButtons(); - }, []) - + }, []); - const changeDisplay = (direction : number, index : number) => { - setButtonDisplay(buttonCategories.slice(index, index+4)); - } + const changeDisplay = (direction: number, index: number) => { + setButtonDisplay(buttonCategories.slice(index, index + 4)); + }; const handlePrevious = () => { if (ind > 0) { @@ -108,7 +105,7 @@ export default function StoreFrontNavBar(props: { if (remainder < 4) { newInd = buttonCategories.length - 4; } else { - newInd = ind + 4 + newInd = ind + 4; } setInd(newInd); changeDisplay(1, newInd); @@ -129,7 +126,7 @@ export default function StoreFrontNavBar(props: { - + {buttonDisplay.map((type, index) => ( ))} - + diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 3dbcacc4..480b4a53 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -15,18 +15,8 @@ export default function App() { const [CategoryWord, setCategoryWord] = useState('All'); - const [IsClickedButton, setIsClickedButton] = useState([ - true, - false, - false, - false, - ] - ); - - const [clickedButton, setClickedButton] = useState(0); - useEffect(() => { async function fetchAllProducts() { try { @@ -44,8 +34,6 @@ export default function App() {
void; content: string; - setIsClickedButton: (clicked: boolean[]) => void; - IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; index: number; setClickedButton: (clicked: number) => void; @@ -29,12 +27,10 @@ export default function ProductButtons(props: { value, content, setFiltredProducts, - setIsClickedButton, - IsClickedButton, setCategoryWord, index, setClickedButton, - clickedButton + clickedButton, } = props; async function applyFilter( @@ -92,14 +88,14 @@ export default function ProductButtons(props: { return ( + {buttonDisplay.map((type, index) => ( ))} + diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 7d8976cb..80efc83a 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -2,10 +2,12 @@ import React from 'react'; +import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { Button, Label, IndividualContainer } from './styles'; import { buttons } from './buttonValues'; + import { fetchUserProducts, filterUserProducts, @@ -41,10 +43,12 @@ export default function ProductButtons(props: { const category = e.currentTarget.value; const productItem = await fetchUserProducts(); + const buttonCategories = await fetchButoonCategories(); - for (let i = 0; i < buttons.length; i += 1) { - if (buttons[i].value === category) { - const ind = buttons[i].count; + for (let i = 0; i < buttonCategories.length; i += 1) { + console.log(buttonCategories[i].value, category); + if (buttonCategories[i].value === category) { + const ind = buttonCategories[i].count; if (IsClickedButton[ind] === true) { const tempArray = [...IsClickedButton]; tempArray[ind] = !tempArray[ind]; @@ -59,7 +63,7 @@ export default function ProductButtons(props: { } const arrayOfFalse = [false, false, false, false]; arrayOfFalse[ind] = true; - setCategoryWord(buttons[i].value); + setCategoryWord(buttonCategories[i].value); setIsClickedButton(arrayOfFalse); break; diff --git a/src/schema/schema.ts b/src/schema/schema.ts index 51a028ba..5dd98d91 100644 --- a/src/schema/schema.ts +++ b/src/schema/schema.ts @@ -79,3 +79,10 @@ export type Address = { zipcode: string; user_id: number; }; + +export type StorefrontButtons = { + id: number; + name: string; + value: string; + count: number; +}; From e30220084a2167bb7a8977d9975033b23fb8455e Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Sat, 16 Mar 2024 12:30:32 -0700 Subject: [PATCH 13/27] buyankhuu'ssmallchange --- src/app/storefront/StoreFrontNavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 498fba32..e162ef70 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -137,7 +137,7 @@ export default function StoreFrontNavBar(props: { -

User

+

Users

From ed4f2979233348ef209e8a566be1b0ae8bec54c5 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Sat, 16 Mar 2024 14:54:25 -0700 Subject: [PATCH 14/27] donen --- src/app/storefront/StoreFrontNavBar.tsx | 28 +++++++++++++------------ 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index e162ef70..70efcd83 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -26,7 +26,6 @@ export default function StoreFrontNavBar(props: { IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; }) { - const { setFilteredProducts, setIsClickedButton, @@ -36,9 +35,12 @@ export default function StoreFrontNavBar(props: { const [data, setData] = useState(0); const [isZero, setIsZero] = useState(true); - const [buttonCategories, setButtonCategories] = useState([]); + const [buttonCategories, setButtonCategories] = useState( + [], + ); const [buttonDisplay, setButtonDisplay] = useState([]); - let ind = 0; + const [ind, setInd] = useState(0); + const length = 4; // const [reachedEnd, setReachedEnd] = useState(false); // const [reachedStart, setReachedStart] = useState(true); @@ -64,35 +66,35 @@ export default function StoreFrontNavBar(props: { setButtonCategories(await fetchButoonCategories()); }; fetchButtonCat(); - }, []) - + }, []); + useEffect(() => { const displayedButtons = async () => { - const button = await fetchButoonCategories() + const button = await fetchButoonCategories(); setButtonDisplay(button.slice(0, 4)); }; displayedButtons(); - }, []) + }, []); - const changeDisplay = (direction : number) => { - setButtonDisplay(buttonCategories.slice(ind, ind+4)); + const changeDisplay = (direction: number) => { + setButtonDisplay(buttonCategories.slice(ind, ind + 4)); const clicked = IsClickedButton; for (let i = 0; i < buttonDisplay.length; i += 1) { buttonDisplay[i].count += direction; if (clicked[i]) { clicked[i] = false; - clicked[i+direction] = true; + clicked[i + direction] = true; } } setIsClickedButton(clicked); - - } + }; const handlePrevious = () => { console.log(ind > 0); + console.log(ind); if (ind > 0) { - ind -= 1; + setInd(ind - 1); console.log(ind); // setInd(newIndex < 0 ? length - 1 : newIndex); changeDisplay(-1); From cfb7f5975f8b56b2dc7e1586875c211dc92008dd Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Mon, 18 Mar 2024 14:15:04 -0700 Subject: [PATCH 15/27] navbarmerge --- src/app/storefront/StoreFrontNavBar.tsx | 65 ++++++++++++++----------- src/app/storefront/page.tsx | 4 +- src/app/storefront/styles.ts | 26 +++++++++- 3 files changed, 64 insertions(+), 31 deletions(-) diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 70efcd83..6cdbddc3 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -16,7 +16,13 @@ import { import { Product, StorefrontButtons } from '../../schema/schema'; -import { ButtonsContainer } from './styles'; +import { + ButtonsContainer, + FrontButton, + BackButton, + Front, + Back, +} from './styles'; import ProductButtons from './productButtons'; @@ -40,10 +46,7 @@ export default function StoreFrontNavBar(props: { ); const [buttonDisplay, setButtonDisplay] = useState([]); const [ind, setInd] = useState(0); - - const length = 4; - // const [reachedEnd, setReachedEnd] = useState(false); - // const [reachedStart, setReachedStart] = useState(true); + let newInd = 0; useEffect(() => { const fetchData = async () => { @@ -76,36 +79,36 @@ export default function StoreFrontNavBar(props: { displayedButtons(); }, []); - const changeDisplay = (direction: number) => { - setButtonDisplay(buttonCategories.slice(ind, ind + 4)); + const changeDisplay = (direction: number, index: number) => { + setButtonDisplay(buttonCategories.slice(index, index + 4)); const clicked = IsClickedButton; - for (let i = 0; i < buttonDisplay.length; i += 1) { - buttonDisplay[i].count += direction; - if (clicked[i]) { - clicked[i] = false; - clicked[i + direction] = true; - } - } - - setIsClickedButton(clicked); + // for (let i = 0; i < buttonDisplay.length; i += 1) { + + // if (clicked[i]) { + // clicked[i] = false; + // if (i+direction >= 0 || i+direction < buttonCategories.length) { + // clicked[i+direction] = true; + // } + // } + // } + + // setIsClickedButton(clicked); + console.log(IsClickedButton); }; const handlePrevious = () => { - console.log(ind > 0); - console.log(ind); if (ind > 0) { - setInd(ind - 1); - console.log(ind); - // setInd(newIndex < 0 ? length - 1 : newIndex); - changeDisplay(-1); + newInd = ind - 1; + setInd(newInd); + changeDisplay(-1, newInd); } }; const handleNext = () => { if (ind + 4 < buttonCategories.length) { - ind += 1; - console.log(ind); - changeDisplay(1); + newInd = ind + 1; + setInd(ind + 1); + changeDisplay(1, newInd); } }; @@ -120,20 +123,24 @@ export default function StoreFrontNavBar(props: { /> - + + + {buttonDisplay.map((type, index) => ( ))} - + + + diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index 6e9aed22..db9f8fea 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -20,7 +20,9 @@ export default function App() { false, false, false, - ]); + ] + + ); useEffect(() => { async function fetchAllProducts() { diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index 2afce95e..156fba6b 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Heart, User, ShoppingCart } from 'react-feather'; +import { Heart, User, ShoppingCart, ArrowLeft, ArrowRight } from 'react-feather'; import { Body1 } from '@/styles/fonts'; @@ -213,3 +213,27 @@ export const OutterDiv = styled.div` width: 300px; height: 375px; `; + +export const Front = styled(ArrowLeft)` + width: 30px; + height: 30px; + position: relative; +`; + +export const FrontButton = styled.button` + position: relative; + background-color: transparent; + border: none; +`; + +export const Back = styled(ArrowRight)` + width: 30px; + height: 30px; + position: relative; +`; + +export const BackButton = styled.button` + position: relative; + background-color: transparent; + border: none; +`; \ No newline at end of file From 4152e37608b1a5158d0feb9562fac225deb557fe Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Mon, 18 Mar 2024 14:16:05 -0700 Subject: [PATCH 16/27] navbarmerge --- src/api/supabase/queries/button_queries.ts | 3 +- src/api/supabase/queries/product_queries.ts | 3 ++ src/app/storefront/StoreFrontNavBar.tsx | 34 +++++++++++---------- src/app/storefront/page.tsx | 7 ++++- src/app/storefront/productButtons.tsx | 32 ++++++++++--------- 5 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts index d2ae675e..f9569328 100644 --- a/src/api/supabase/queries/button_queries.ts +++ b/src/api/supabase/queries/button_queries.ts @@ -8,8 +8,7 @@ export async function fetchButoonCategories(): Promise { if (error) { throw new Error(`Error fetching buttons: ${error.message}`); } - console.log("func tester") - console.log(buttons) + return buttons; } diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts index ae9c44cc..a03acb70 100644 --- a/src/api/supabase/queries/product_queries.ts +++ b/src/api/supabase/queries/product_queries.ts @@ -105,11 +105,14 @@ export async function filterUserProducts( const products = await fetchUnprescribedCategory(productType); const user = await fetchUser(); + + const { data: prescribed, error } = await supabase .from('product') .select('*') .eq('prescribed', true) .eq('category', productType); + if (error) { throw new Error(`Error fetching products: ${error.message}`); } diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 6cdbddc3..c01e6174 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -31,12 +31,16 @@ export default function StoreFrontNavBar(props: { setIsClickedButton: (clicked: boolean[]) => void; IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; + clickedButton: number; + setClickedButton: (clicked: number) => void; }) { const { setFilteredProducts, setIsClickedButton, IsClickedButton, setCategoryWord, + setClickedButton, + clickedButton, } = props; const [data, setData] = useState(0); @@ -81,24 +85,15 @@ export default function StoreFrontNavBar(props: { const changeDisplay = (direction: number, index: number) => { setButtonDisplay(buttonCategories.slice(index, index + 4)); - const clicked = IsClickedButton; - // for (let i = 0; i < buttonDisplay.length; i += 1) { - - // if (clicked[i]) { - // clicked[i] = false; - // if (i+direction >= 0 || i+direction < buttonCategories.length) { - // clicked[i+direction] = true; - // } - // } - // } - - // setIsClickedButton(clicked); - console.log(IsClickedButton); }; const handlePrevious = () => { if (ind > 0) { - newInd = ind - 1; + if (ind % 4 !== 0) { + newInd = 4 * (Math.floor(buttonCategories.length / 4) - 1); + } else { + newInd = ind - 4; + } setInd(newInd); changeDisplay(-1, newInd); } @@ -106,8 +101,13 @@ export default function StoreFrontNavBar(props: { const handleNext = () => { if (ind + 4 < buttonCategories.length) { - newInd = ind + 1; - setInd(ind + 1); + const remainder = buttonCategories.length - ind - 4; + if (remainder < 4) { + newInd = buttonCategories.length - 4; + } else { + newInd = ind + 4; + } + setInd(newInd); changeDisplay(1, newInd); } }; @@ -136,6 +136,8 @@ export default function StoreFrontNavBar(props: { IsClickedButton={IsClickedButton} setCategoryWord={setCategoryWord} index={index + ind} + setClickedButton={setClickedButton} + clickedButton={clickedButton} /> ))} diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx index db9f8fea..3dbcacc4 100644 --- a/src/app/storefront/page.tsx +++ b/src/app/storefront/page.tsx @@ -21,9 +21,12 @@ export default function App() { false, false, ] - ); + + const [clickedButton, setClickedButton] = useState(0); + + useEffect(() => { async function fetchAllProducts() { try { @@ -44,6 +47,8 @@ export default function App() { setIsClickedButton={setIsClickedButton} IsClickedButton={IsClickedButton} setCategoryWord={setCategoryWord} + clickedButton={clickedButton} + setClickedButton={setClickedButton} /> Shop {CategoryWord} diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 80efc83a..8a0495a3 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -5,9 +5,6 @@ import React from 'react'; import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; import { Button, Label, IndividualContainer } from './styles'; -import { buttons } from './buttonValues'; - - import { fetchUserProducts, filterUserProducts, @@ -24,6 +21,8 @@ export default function ProductButtons(props: { IsClickedButton: boolean[]; setCategoryWord: (word: string) => void; index: number; + setClickedButton: (clicked: number) => void; + clickedButton: number; }) { const { key, @@ -34,6 +33,8 @@ export default function ProductButtons(props: { IsClickedButton, setCategoryWord, index, + setClickedButton, + clickedButton } = props; async function applyFilter( @@ -46,25 +47,26 @@ export default function ProductButtons(props: { const buttonCategories = await fetchButoonCategories(); for (let i = 0; i < buttonCategories.length; i += 1) { - console.log(buttonCategories[i].value, category); if (buttonCategories[i].value === category) { - const ind = buttonCategories[i].count; - if (IsClickedButton[ind] === true) { - const tempArray = [...IsClickedButton]; - tempArray[ind] = !tempArray[ind]; - tempArray[0] = true; + const ind = buttonCategories[i].id - 1; + if (ind === clickedButton) { + // const tempArray = [...IsClickedButton]; + // tempArray[ind] = !tempArray[ind]; + // tempArray[0] = true; setCategoryWord('All'); - setIsClickedButton(tempArray); + // setIsClickedButton(tempArray); + setClickedButton(0); if (productItem !== null) { setFiltredProducts(productItem); } return; } - const arrayOfFalse = [false, false, false, false]; - arrayOfFalse[ind] = true; + setClickedButton(ind); + // const arrayOfFalse = [false, false, false, false]; + // arrayOfFalse[ind] = true; setCategoryWord(buttonCategories[i].value); - setIsClickedButton(arrayOfFalse); + // setIsClickedButton(arrayOfFalse); break; } @@ -90,14 +92,14 @@ export default function ProductButtons(props: { return ( - {/* */} - - - -
+ {errorMessage && {errorMessage}} + + + + ); } diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index 7a51d8e3..a5f91ddd 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -5,8 +5,7 @@ import COLORS from '../../styles/colors'; export const LoginBox = styled.div` width: 500px; height: 420px; - - border: 1px solid #b3b3b3; + border: 1px solid ${COLORS.neutralGrey}; `; export const LoginContent = styled.div` @@ -15,31 +14,20 @@ export const LoginContent = styled.div` align-self: center; justify-self: center; margin-top: 30px; - text-color: black; + text-color: ${COLORS.black}; `; export const Button = styled.button` color: ${COLORS.white}; - text-align: center; - font-size: 17px; - font-style: normal; - font-weight: 600; - line-height: normal; width: 420px; height: 40px; border-radius: 8px; background: ${COLORS.navy}; border: transparent; - z-index: 1; `; export const WelcomeSign = styled.div` color: ${COLORS.navy}; - font-size: 40px; - font-style: normal; - font-weight: 600; - line-height: normal; - padding-bottom: 10px; `; export const FormHeaders = styled.p` @@ -70,8 +58,8 @@ export const EyeOffIcon = styled(EyeOff)` stroke-width: 1.5; width: 20px; height: 20px; - color: black; - margin: 20px 20px 20px 20px; + color: ${COLORS.black}; + margin: 20px; transform: translateY(-250%) translateX(1800%); `; @@ -79,8 +67,8 @@ export const EyeIcon = styled(Eye)` stroke-width: 1.5; width: 20px; height: 20px; - color: black; - margin: 20px 20px 20px 20px; + color: ${COLORS.black}; + margin: 20px; transform: translateY(-250%) translateX(1800%); `; diff --git a/src/components/InputFieldsFolder/InputFields.tsx b/src/components/InputFieldsFolder/InputFields.tsx index 3e187a6a..21625e58 100644 --- a/src/components/InputFieldsFolder/InputFields.tsx +++ b/src/components/InputFieldsFolder/InputFields.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState } from 'react'; +import { Heading4 } from '@/styles/fonts'; import { FormHeaders, Input } from './styles'; export default function InputFields(props: { @@ -38,7 +39,9 @@ export default function InputFields(props: { return (
- {text} + + {text} + ` - color: ${props => (props.$pickColor ? '#203354' : 'black')}; - background: ${props => (props.$pickColor ? '#ADD8E6' : '#FFFFFF')}; + color: ${props => (props.$pickColor ? '#203354' : COLORS.black)}; + background: ${props => (props.$pickColor ? '#ADD8E6' : COLORS.white)}; stroke-width: 1px; width: 420px; height: 40px; @@ -12,12 +12,8 @@ export const Input1 = styled.input<{ $pickColor?: boolean }>` border-color: ${COLORS.black}; `; -export const FormHeaders = styled.p` +export const FormHeaders = styled.div` color: ${COLORS.black}; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: normal; margin-top: 20px; margin-bottom: 10px; `; @@ -27,25 +23,21 @@ export const Input = styled.input<{ $wrongLogin?: boolean; }>` &:focus { - border: 1.5px solid #1b3679; - background: #f5fbff; + border: 1.5px solid ${COLORS.navy}; + background: ${COLORS.skyBlue}; outline: none; - color: #1b3679; + color: ${COLORS.navy}; } stroke-width: 1px; - color: #000000; - border: 1.5px solid ${props => (props.$wrongLogin ? '#B60000' : 'black')}; - background: ${props => (props.$pickColor ? '#ffdddd' : 'white')}; + color: ${COLORS.black}; + border: 1.5px solid + ${props => (props.$wrongLogin ? COLORS.darkRed : COLORS.black)}; + background: ${props => (props.$pickColor ? COLORS.lightRed : COLORS.white)}; width: 420px; height: 40px; padding-left: 10px; `; -export const wrong = styled.div` - color: red; - background: pink; -`; - export const EyeOffIcon = styled(EyeOff)` stroke-width: 1.5; width: 20px; From 8d2a43ebd17c63c99250d960f80ef454fe168867 Mon Sep 17 00:00:00 2001 From: Monique Cheng Date: Mon, 18 Mar 2024 16:00:54 -0700 Subject: [PATCH 23/27] fixed the issues --- src/api/supabase/queries/button_queries.ts | 2 +- src/app/storefront/StoreFrontNavBar.tsx | 19 ++++++++++--------- src/app/storefront/productButtons.tsx | 4 ++-- src/app/storefront/styles.ts | 4 ++-- 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts index 77fb8038..b749889e 100644 --- a/src/api/supabase/queries/button_queries.ts +++ b/src/api/supabase/queries/button_queries.ts @@ -1,7 +1,7 @@ import { StorefrontButtons } from '../../../schema/schema'; import supabase from '../createClient'; -export async function fetchButoonCategories(): Promise { +export async function fetchButtonCategories(): Promise { const { data: buttons, error } = await supabase .from('storefront_buttons') .select('*'); diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 4b0fd05f..52d70058 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -3,7 +3,8 @@ import Image from 'next/image'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; -import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; +import { fetchButtonCategories } from '@/api/supabase/queries/button_queries'; +import { Body2 } from '@/styles/fonts'; import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries'; import { @@ -20,8 +21,8 @@ import { ButtonsContainer, FrontButton, BackButton, - Front, - Back, + FrontArrow, + BackArrow, } from './styles'; import ProductButtons from './productButtons'; @@ -68,14 +69,14 @@ export default function StoreFrontNavBar(props: { useEffect(() => { const fetchButtonCat = async () => { - setButtonCategories(await fetchButoonCategories()); + setButtonCategories(await fetchButtonCategories()); }; fetchButtonCat(); }, []); useEffect(() => { const displayedButtons = async () => { - const button = await fetchButoonCategories(); + const button = await fetchButtonCategories(); setButtonDisplay(button.slice(0, 4)); }; displayedButtons(); @@ -126,7 +127,7 @@ export default function StoreFrontNavBar(props: { - + {buttonDisplay.map((type, index) => ( ))} - + -

Users

+ Users -

Cart

+ Cart {data} diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 0c645e74..837d6042 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -2,7 +2,7 @@ import React from 'react'; -import { fetchButoonCategories } from '@/api/supabase/queries/button_queries'; +import { fetchButtonCategories } from '@/api/supabase/queries/button_queries'; import { Button, Label, IndividualContainer } from './styles'; import { @@ -40,7 +40,7 @@ export default function ProductButtons(props: { const category = e.currentTarget.value; const productItem = await fetchUserProducts(); - const buttonCategories = await fetchButoonCategories(); + const buttonCategories = await fetchButtonCategories(); for (let i = 0; i < buttonCategories.length; i += 1) { if (buttonCategories[i].name === category) { diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts index e60ec236..0821c532 100644 --- a/src/app/storefront/styles.ts +++ b/src/app/storefront/styles.ts @@ -221,7 +221,7 @@ export const OutterDiv = styled.div` height: 375px; `; -export const Front = styled(ChevronLeft)` +export const FrontArrow = styled(ChevronLeft)` width: 30px; height: 30px; position: relative; @@ -235,7 +235,7 @@ export const FrontButton = styled.button<{ $reachedStart?: boolean }>` visibility: ${props => (props.$reachedStart ? 'visible' : 'hidden')}; `; -export const Back = styled(ChevronRight)` +export const BackArrow = styled(ChevronRight)` width: 30px; height: 30px; position: relative; From fa582f0ad4e1fc1ed4017d1069bebbdeb1369eb1 Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Mon, 18 Mar 2024 16:10:32 -0700 Subject: [PATCH 24/27] fixedFavoritesPage --- src/app/favorites/page.tsx | 15 ++++++--------- src/app/favorites/styles.ts | 16 ++++++++++++---- src/app/globals.css | 2 +- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 93975e09..9aad30f6 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; -import { Body2 } from '@/styles/fonts'; +import { Body1Bold, Body2 } from '@/styles/fonts'; import BackButton from '../../components/BackButton/BackButton'; import { @@ -20,6 +20,7 @@ import { HeartIcon, TransparentButton, ViewItem, + Fullscreen, } from './styles'; import { Product } from '../../schema/schema'; @@ -43,9 +44,8 @@ export default function FavoritesPage() { } return ( -
+ -

Favorites

@@ -59,11 +59,8 @@ export default function FavoritesPage() { /> -

- {favorite.name} -
- Product ID: {favorite.id} -

+ {favorite.name} + Category: {favorite.category} router.push(`/${favorite.id}`)}> View Item @@ -78,6 +75,6 @@ export default function FavoritesPage() { ))} -
+ ); } diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index d88971d3..1cf4c27e 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -7,7 +7,7 @@ import NavBar from '../../components/NavBarFolder/NavBar'; export const FavoriteDiv = styled.div` display: flex; flex-direction: row; - align-items: start; + align-items: center; justify-content: space-around; width: 100%; margin-bottom: 50px; @@ -22,7 +22,7 @@ export const OutterFavoriteDiv = styled.div` background: var(--White, #fff); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); width: 800px; - height: 700px; + height: 650px; overflow: scroll; margin-top: 10px; `; @@ -39,8 +39,8 @@ export const BackDiv = styled.button` `; export const OutterBox = styled.div` - width: 900px; - margin-left: 500px; + width: 800px; + height: 100%; `; export const Backtext = styled.p` @@ -85,3 +85,11 @@ export const ViewItem = styled.button` line-height: normal; border-radius: 14px; `; + +export const Fullscreen = styled.div` + width: 100vw; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +`; diff --git a/src/app/globals.css b/src/app/globals.css index 91c93ba2..021ca9f4 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -82,7 +82,7 @@ html, body { max-width: 100vw; - overflow-x: hidden; + height: 100%; } body { From 2ec67002c56962437da23d1fad535196425382ec Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Mon, 18 Mar 2024 16:19:36 -0700 Subject: [PATCH 25/27] changeToProfilePage --- src/app/profileScreen/page.tsx | 7 ++----- src/app/profileScreen/styles.ts | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 30d0e29b..38041d1f 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -66,11 +66,8 @@ function FavoriteSection(props: { style={{ width: '75px', height: '75px' }} /> -

- {favorite.name} -
- Product ID: {favorite.id} -

+ {favorite.name} + Category: {favorite.category} clickFunctions({ fav: favorite })} diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 640722eb..aab40616 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -104,7 +104,7 @@ export const NavBarMovedUP = styled(NavBar)` export const FavoriteDiv = styled.div` display: flex; flex-direction: row; - align-items: start; + align-items: center; justify-content: space-around; width: 100%; margin-bottom: 50px; From 1fa7a70643a1dd5e6091b0b26a8e4d5217ba201f Mon Sep 17 00:00:00 2001 From: Buyankhuu Tsolmonkhuu Date: Mon, 18 Mar 2024 18:12:26 -0700 Subject: [PATCH 26/27] buyankhuu'sFix --- src/app/login/styles.ts | 3 +++ src/app/storefront/IndividualItem.tsx | 5 ++--- src/app/storefront/StoreFrontNavBar.tsx | 1 + src/app/storefront/productButtons.tsx | 6 +++--- src/app/storefront/styles.ts | 21 ++++++++++----------- 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts index b6a73e48..273a4576 100644 --- a/src/app/login/styles.ts +++ b/src/app/login/styles.ts @@ -6,6 +6,8 @@ export const LoginBox = styled.div` width: 500px; height: 420px; border: 1px solid ${COLORS.neutralGrey}; + justify-self: center; + align-self: center; `; export const LoginContent = styled.div` @@ -75,6 +77,7 @@ export const EyeIcon = styled(Eye)` export const Fullscreen = styled.div` width: 100%; height: 100%; + display: grid; `; export const InputField = styled.div` diff --git a/src/app/storefront/IndividualItem.tsx b/src/app/storefront/IndividualItem.tsx index a44c13e3..e0975f53 100644 --- a/src/app/storefront/IndividualItem.tsx +++ b/src/app/storefront/IndividualItem.tsx @@ -51,15 +51,14 @@ export default function IndividualItem(props: { style={{ width: '250px', height: '250px' }} /> - clickFunction()} onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)} > - + - + {IsFavorite ? 'Remove from favorites' : 'Add to favorites'} diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx index 52d70058..2642b4a9 100644 --- a/src/app/storefront/StoreFrontNavBar.tsx +++ b/src/app/storefront/StoreFrontNavBar.tsx @@ -134,6 +134,7 @@ export default function StoreFrontNavBar(props: { key={type.id - 1} value={type.name} setFiltredProducts={setFilteredProducts} + id={type.id} content={type.name} setCategoryWord={setCategoryWord} index={index + ind} diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx index 837d6042..5e84713a 100644 --- a/src/app/storefront/productButtons.tsx +++ b/src/app/storefront/productButtons.tsx @@ -13,20 +13,20 @@ import { import { Product } from '../../schema/schema'; export default function ProductButtons(props: { - key: number; value: string; setFiltredProducts: (category: Product[]) => void; content: string; setCategoryWord: (word: string) => void; index: number; + id: number; setClickedButton: (clicked: number) => void; clickedButton: number; }) { const { - key, value, content, setFiltredProducts, + id, setCategoryWord, index, setClickedButton, @@ -89,7 +89,7 @@ export default function ProductButtons(props: {