From 1d0b511825f80fe4a8da759c0ad20586868c0846 Mon Sep 17 00:00:00 2001 From: Tamara Plante <0631064@johnabbottcollege.net> Date: Mon, 4 Nov 2024 05:08:09 -0500 Subject: [PATCH 1/6] Fix cartcount when logged out --- src/App.tsx | 28 +++++++++++++++++----------- src/hooks/useCartCount.ts | 26 ++++++++++---------------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3fb1c77..3ef62cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,7 +45,11 @@ function App() { const loader = 'auto'; const [isInit, setIsInit] = useState(false); - const [server, setServer] = useState({}); + const [server, setServer] = useState({ + isLoggedIn: false, + apiUrl: '', + authToken: '', + } as IServer); const [cartCount, setCartCount] = useState(0); const { authToken, logout, isLoggedIn } = useLoginStore(); @@ -57,7 +61,9 @@ function App() { if (typeof error === 'object' && error && 'status' in error) { if (error.status === 403) { console.log('<< Unauthorized >>'); - logout(); + if (isLoggedIn) { + logout(); + } } } }, @@ -66,14 +72,13 @@ function App() { // Setup server useLayoutEffect(() => { - if (isLoggedIn) { - setServer({ - apiUrl: import.meta.env.VITE_API_URL, - authToken: authToken, - }); - } else { + setServer({ + apiUrl: import.meta.env.VITE_API_URL, + authToken: authToken, + isLoggedIn: isLoggedIn || false, + }); + if (!isLoggedIn) { setCartCount(0); - setServer({ apiUrl: server.apiUrl }); } setIsInit(true); }, [isLoggedIn]); @@ -139,8 +144,9 @@ function App() { } interface IServer { - apiUrl?: string; - authToken?: string; + apiUrl: string; + authToken: string; + isLoggedIn: boolean; } export default App; diff --git a/src/hooks/useCartCount.ts b/src/hooks/useCartCount.ts index 388b2e0..1a38918 100644 --- a/src/hooks/useCartCount.ts +++ b/src/hooks/useCartCount.ts @@ -3,27 +3,21 @@ import axios from "axios"; import { useQuery } from "@tanstack/react-query"; function useCartCount() { - const { server, isInit, cartCount, setCartCount } = useAppContext(); + const { server, setCartCount } = useAppContext(); useQuery({ queryKey: ['cartCount'], queryFn: async () => { - if (server.authToken !== '') { - return axios.get(`${server.apiUrl}/api/carts/count`, { - headers: { Authorization: `Bearer ${server.authToken}` }, - }).then(res => { - if (res.status === 200) { - setCartCount(res.data); - return res.data; - } - }); - } - else { - setCartCount(0); - } - return cartCount; + return axios.get(`${server.apiUrl}/api/carts/count`, { + headers: { Authorization: `Bearer ${server.authToken}` }, + }).then(res => { + if (res.status === 200) { + setCartCount(res.data); + return res.data; + } + }); }, - enabled: isInit + enabled: server.isLoggedIn }); } From b8a13a91400958db513a0d7bc605bef283446eb6 Mon Sep 17 00:00:00 2001 From: Tamara Plante <0631064@johnabbottcollege.net> Date: Mon, 4 Nov 2024 05:11:28 -0500 Subject: [PATCH 2/6] Add store logo in cart --- src/pages/Cart.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Cart.tsx b/src/pages/Cart.tsx index 0ce3dd6..d74a325 100644 --- a/src/pages/Cart.tsx +++ b/src/pages/Cart.tsx @@ -52,6 +52,7 @@ const CartItem = ({ refreshCart, removeItem, itemData }: Props) => { Date: Mon, 4 Nov 2024 05:13:30 -0500 Subject: [PATCH 3/6] Update non-pic avatar to have single letter --- src/components/Navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 8cee082..815875a 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -141,7 +141,7 @@ const Navbar = () => { src={picture} > ) : ( - {username} + {username.charAt(0)} )} ) : ( From 6331829d120818fcbeb5f74e8620a1497b5e5786 Mon Sep 17 00:00:00 2001 From: Tamara Plante <0631064@johnabbottcollege.net> Date: Mon, 4 Nov 2024 05:20:08 -0500 Subject: [PATCH 4/6] Fix site logo mobile --- src/components/Navbar.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 815875a..7a36223 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -94,6 +94,9 @@ const Navbar = () => { xs: `url(${LogoImage})`, sm: `url(${Logo})`, }, + minWidth: { + xs: '50px', + }, maxHeight: '50px', }} alt="Etsify Logo" From 4b330dd0bea3f58dd9c30c2344699582ab1195a8 Mon Sep 17 00:00:00 2001 From: Tamara Plante <0631064@johnabbottcollege.net> Date: Mon, 4 Nov 2024 05:34:02 -0500 Subject: [PATCH 5/6] Toggle favorite on cardItem --- src/components/CardItem.tsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx index fd7f640..e10d408 100644 --- a/src/components/CardItem.tsx +++ b/src/components/CardItem.tsx @@ -9,19 +9,29 @@ import { import { Link } from 'react-router-dom'; import FavoriteFab from './FavoriteFab'; import type { IItem } from '../api/useGetItems'; +import { useState } from 'react'; interface Props { cardData: IItem; } const CardItem = ({ cardData }: Props) => { + const [showFab, setShowFab] = useState(false); + return ( - - + setShowFab(true)} + onMouseOut={() => setShowFab(false)} + > + {showFab && ( + + )} Date: Mon, 4 Nov 2024 06:36:48 -0500 Subject: [PATCH 6/6] Plug in search --- src/App.tsx | 10 +++++++++- src/api/useGetItems.ts | 20 ++++++++------------ src/components/Navbar.tsx | 7 ++----- src/components/SearchBar.tsx | 2 +- src/pages/Home.tsx | 16 +++++++++++++--- 5 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3603996..84b668c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,6 +52,7 @@ function App() { authToken: '', } as IServer); const [cartCount, setCartCount] = useState(0); + const [searchQuery, setSearchQuery] = useState(''); const { authToken, logout, isLoggedIn } = useLoginStore(); @@ -89,7 +90,14 @@ function App() { diff --git a/src/api/useGetItems.ts b/src/api/useGetItems.ts index 2e40edb..a3cdfd9 100644 --- a/src/api/useGetItems.ts +++ b/src/api/useGetItems.ts @@ -19,20 +19,16 @@ interface IStore { logo_url: string; } -const fetchItems = async () => { +const fetchItems = async (searchQuery: string) => { const apiUrl = import.meta.env.VITE_API_URL; const { authToken } = useLoginStore.getState(); - /* return axios.get(`${server.apiUrl}/api/items`, { - headers: { Authorization: `Bearer ${server.authToken}` }, - }).then((res) => { - return { items: res.data as IItem[] }; - }).catch((err) => { - throw new Error('Failed to fetch items'); - }); */ - + let url = `${apiUrl}/api/items`; + if (searchQuery !== '') { + url += `?query=${searchQuery}` + } - const res = await axios.get(`${apiUrl}/api/items`, { + const res = await axios.get(url, { headers: { Authorization: `Bearer ${authToken}` }, }); if (res.status === 200) { @@ -41,10 +37,10 @@ const fetchItems = async () => { throw new Error('Failed to fetch cart items'); } -const useGetItems = (enabled: boolean) => { +const useGetItems = (enabled: boolean, searchQuery: string) => { return useQuery({ queryKey: ['getItems'], - queryFn: fetchItems, + queryFn: () => fetchItems(searchQuery || ''), enabled }) } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7a36223..5c1edac 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -33,8 +33,7 @@ import { useAppContext } from '../App'; import useCartCount from '../hooks/useCartCount'; const Navbar = () => { - const { cartCount } = useAppContext(); - const [searchQuery, setSearchQuery] = useState(''); + const { cartCount, setSearchQuery } = useAppContext(); const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const { isLoggedIn, logout, username, picture } = useLoginStore(); @@ -64,8 +63,6 @@ const Navbar = () => { return ( <> - {/* TODO: Workaround until actual functionality is plugged in. */} - {} { backdropFilter: 'blur(24px)', }} > - + setSearchQuery('')}> { event.preventDefault(); console.log(searchString); setSearchQuery(searchString); - setSearchString(''); + //setSearchString(''); }; return ( diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 697f1ce..3921d5d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,12 +3,21 @@ import { useAppContext } from '../App'; import useGetItems from '../api/useGetItems'; import type { IItem } from '../api/useGetItems'; import Grid from '@mui/material/Grid2'; +import { useEffect } from 'react'; export const Home = () => { - const { isInit } = useAppContext(); - const { isLoading, data: { items } = {} } = useGetItems(isInit); + const { isInit, searchQuery } = useAppContext(); + const { + refetch, + isLoading, + data: { items } = {}, + } = useGetItems(isInit, searchQuery); - if (!isLoading) + useEffect(() => { + refetch(); + }, [searchQuery]); + + if (!isLoading) { return ( {items?.map((item: IItem) => { @@ -23,4 +32,5 @@ export const Home = () => { })} ); + } };