diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx index ec5df56..87ad11b 100644 --- a/src/layout/MainLayout.tsx +++ b/src/layout/MainLayout.tsx @@ -8,9 +8,14 @@ interface MainLayoutProps { export const MainLayout: React.FC = ({ children }) => { return ( -
- {/* */} -
{children}
+
+ + {/* Scrollable content with padding */} +
+ {children} +
+ + {/* Fixed footer on the page*/}
); diff --git a/src/pages/ExplorePage.tsx b/src/pages/ExplorePage.tsx index 0cf2d2d..33d8770 100644 --- a/src/pages/ExplorePage.tsx +++ b/src/pages/ExplorePage.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { MapContainer, TileLayer, Marker, Popup, Tooltip } from "react-leaflet"; import "leaflet/dist/leaflet.css"; -import { Input, Radio, Spin, Image } from "antd"; +import { Input, Radio, Spin, Image, Empty } from "antd"; import { InventoryService } from "../services/InventoryService"; import { useNavigate } from "react-router"; import L from "leaflet"; @@ -24,6 +24,7 @@ export function ExplorePage() { const [position, setPosition] = useState<[number, number] | null>(null); const [menu, setMenu] = useState("map"); const [items, setItems] = useState([]); + const [searchValue, setSearchValue] = useState(""); const navigate = useNavigate(); useEffect(() => { @@ -55,6 +56,23 @@ export function ExplorePage() { } }; + const searhItems = async (query:string) => { + setSearchValue(query); + if(!query || query.trim() === "") { + getItems(); + return; + } + try { + const { data } = await InventoryService.serachAndGetItems(query); + setItems(data); + // setSearchValue(""); + setMenu("list") + } + catch (error) { + alert(`Error searching items with input : ${query}. Error Message is ${error}`); + } + }; + if (!position) return (
@@ -68,7 +86,11 @@ export function ExplorePage() { Explore
- + setSearchValue(e.target.value)} + onSearch={(value) => searhItems(value)} + />
setMenu(e.target.value)} - defaultValue={menu} + value={menu} optionType="button" buttonStyle="solid" /> @@ -149,8 +171,8 @@ export function ExplorePage() { })} ) : ( -
- {items.map((item, index) => ( +
+ {items.length === 0 ? : items.map((item, index) => (
+
{/* Header */}
@@ -33,31 +33,35 @@ export function InventoryPage() { {/* Scrollable content */}
- {items.map((item, index) => ( -
navigate(`/inventory/${item.id}`)} - > -
- basic image 0 ? item.imageUrls[0] : undefined} - preview={false} - fallback="https://plus.unsplash.com/premium_vector-1731660866636-d6ee4dcd6806?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" - /> + {items.length === 0 ? ( + + ) : ( + items.map((item, index) => ( +
navigate(`/inventory/${item.id}`)} + > +
+ basic image 0 ? item.imageUrls[0] : undefined} + preview={false} + fallback="https://plus.unsplash.com/premium_vector-1731660866636-d6ee4dcd6806?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + /> +
+
+

{item.name}

+

{item.description}

+
+
{item.quantity}
-
-

{item.name}

-

{item.description}

-
-
{item.quantity}
-
- ))} + )) + )}
-
+
+ )} {/* Cancel claim button */} {myClaim && ( diff --git a/src/services/InventoryService.ts b/src/services/InventoryService.ts index e688845..8ba1516 100644 --- a/src/services/InventoryService.ts +++ b/src/services/InventoryService.ts @@ -16,6 +16,13 @@ export const InventoryService = { method: "get", }); }, + serachAndGetItems: (query:string): Promise> => { + return service({ + url: "/api/v1/items/search", + params: {searchText: query}, + method: "get", + }); + }, getMyItems: (): Promise> => { return service({ url: "/api/v1/items/my-items",