Merge pull request #34 from hdcola/tamara

Add search + small fixes
hdcola · Nov 4, 2024 · 03869d8 · 03869d8
2 parents 1d16c9f + 16ffdfa
commit 03869d8
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 56 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -46,8 +46,13 @@ function App() {
     const loader = 'auto';
 
     const [isInit, setIsInit] = useState<boolean>(false);
-    const [server, setServer] = useState<IServer>({});
+    const [server, setServer] = useState<IServer>({
+        isLoggedIn: false,
+        apiUrl: '',
+        authToken: '',
+    } as IServer);
     const [cartCount, setCartCount] = useState<number>(0);
+    const [searchQuery, setSearchQuery] = useState<string>('');
 
     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() {
             <CssBaseline />
             <Container sx={{ height: '100%' }} disableGutters={lessThanXL}>
                 <AppContext.Provider
-                    value={{ isInit, server, cartCount, setCartCount }}
+                    value={{
+                        isInit,
+                        server,
+                        cartCount,
+                        setCartCount,
+                        searchQuery,
+                        setSearchQuery,
+                    }}
                 >
                     <QueryClientProvider client={queryClient}>
                         <Router>
@@ -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
@@ -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
@@ -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<boolean>(false);
+
     return (
-        <Box position={'relative'} height={275}>
-            <FavoriteFab
-                itemId={cardData.item_id}
-                favorite={true}
-                size="small"
-            />
+        <Box
+            position={'relative'}
+            height={275}
+            onMouseOver={() => setShowFab(true)}
+            onMouseOut={() => setShowFab(false)}
+        >
+            {showFab && (
+                <FavoriteFab
+                    itemId={cardData.item_id}
+                    favorite={true}
+                    size="small"
+                />
+            )}
             <Card
                 variant="outlined"
                 sx={{

diff --git 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<string>('');
+    const { cartCount, setSearchQuery } = useAppContext();
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(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. */}
-            {<div hidden>{searchQuery}</div>}
             <AppBar
                 position="sticky"
                 elevation={0}
@@ -84,7 +81,7 @@ const Navbar = () => {
                             backdropFilter: 'blur(24px)',
                         }}
                     >
-                        <Link to="/">
+                        <Link to="/" onClick={() => setSearchQuery('')}>
                             <Box
                                 component="img"
                                 mt={{ xs: 0, md: -1 }}
@@ -94,6 +91,9 @@ const Navbar = () => {
                                         xs: `url(${LogoImage})`,
                                         sm: `url(${Logo})`,
                                     },
+                                    minWidth: {
+                                        xs: '50px',
+                                    },
                                     maxHeight: '50px',
                                 }}
                                 alt="Etsify Logo"
@@ -141,7 +141,7 @@ const Navbar = () => {
                                             src={picture}
                                         ></Avatar>
                                     ) : (
-                                        <Avatar>{username}</Avatar>
+                                        <Avatar>{username.charAt(0)}</Avatar>
                                     )}
                                 </IconButton>
                             ) : (

diff --git 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
@@ -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
@@ -52,6 +52,7 @@ const CartItem = ({ refreshCart, removeItem, itemData }: Props) => {
         <Card key={item.item_id} sx={{ padding: 2 }} variant="outlined">
             <Typography display={'inline-flex'} component="div" mb={1}>
                 <Avatar
+                    src={item.store.logo_url || ''}
                     children="SN"
                     sx={{
                         width: 30,

diff --git 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 (
             <Grid container spacing={2} px={1}>
                 {items?.map((item: IItem) => {
@@ -23,4 +32,5 @@ export const Home = () => {
                 })}
             </Grid>
         );
+    }
 };