{item.name}

\n {item.tags.length > 0 ? (\n

\n {item.tags.map((tag) => (\n \n ))}\n

\n ) : (\n

No tags

\n )}\n

\n );\n}\n\nexport default function Pantry() {\n const [pantryItems, setPantryItems] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const navigate = useNavigate();\n\n const filteredItems = pantryItems.filter((item) =>\n item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n item.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))\n );\n\n // Fetch pantry items on component mount\n useEffect(() => {\n fetchPantryItems();\n }, []);\n\n async function fetchPantryItems() {\n try {\n setIsLoading(true);\n const result = await apiGet(`${API_URL}/api/pantry`, navigate);\n\n if (result.error) {\n console.error(\"Error fetching pantry items:\", result.error);\n } else if (result.data) {\n setPantryItems(result.data);\n }\n } catch (error) {\n console.error(\"Error fetching pantry items:\", error);\n } finally {\n setIsLoading(false);\n }\n }\n\n function onSearchChanged(event: React.ChangeEvent) {\n setSearchQuery(event.target.value);\n }\n\n return (\n

\n \n

\n\n {/* Display pantry items */}\n

\n {isLoading ? (\n \n \n \n ) : filteredItems.length === 0 ? (\n

\n {pantryItems.length === 0 ? \"Your pantry is empty.\" : \"No pantry items match your search.\"}\n

\n ) : (\n

\n {filteredItems.map((item) => (\n \n ))}\n

\n )}\n

\n );\n}\n\n","deleted","label",[175,176,177,158],"frontend","components","pages","permalink","https://www.val.town/x/damonb/react-hono-with-react-router/code/frontend/components/pages/Pantry.tsx","extension","actionData","errors"]