diff --git a/src/App.tsx b/src/App.tsx index f64df43..84b668c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -46,8 +46,13 @@ 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 [searchQuery, setSearchQuery] = useState(''); const { authToken, logout, isLoggedIn } = useLoginStore(); @@ -58,7 +63,9 @@ function App() { if (typeof error === 'object' && error && 'status' in error) { if (error.status === 403) { console.log('<< Unauthorized >>'); - logout(); + if (isLoggedIn) { + logout(); + } } } }, @@ -67,14 +74,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]); @@ -84,7 +90,14 @@ function App() { @@ -143,8 +156,9 @@ function App() { } interface IServer { - apiUrl?: string; - authToken?: string; + apiUrl: string; + authToken: string; + isLoggedIn: boolean; } export default 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/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 && ( + + )} { - 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('')}> { xs: `url(${LogoImage})`, sm: `url(${Logo})`, }, + minWidth: { + xs: '50px', + }, maxHeight: '50px', }} alt="Etsify Logo" @@ -141,7 +141,7 @@ const Navbar = () => { src={picture} > ) : ( - {username} + {username.charAt(0)} )} ) : ( diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index bbb73aa..af5e02f 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -29,7 +29,7 @@ const SearchBar = ({ setSearchQuery }: Props) => { event.preventDefault(); console.log(searchString); setSearchQuery(searchString); - setSearchString(''); + //setSearchString(''); }; return ( 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 }); } 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) => { { - 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 = () => { })} ); + } };