73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
// src/CafePage.js
|
|
import React, { useState } from "react";
|
|
import { useParams, useSearchParams } from "react-router-dom";
|
|
|
|
import "../App.css";
|
|
import SearchInput from "../components/SearchInput";
|
|
import ItemLister from "../components/ItemLister";
|
|
import Header from "../components/Header";
|
|
|
|
function SearchResult({ user, shopItems, sendParam }) {
|
|
const [searchParams] = useSearchParams();
|
|
const { shopId, tableId } = useParams();
|
|
sendParam({ shopId, tableId });
|
|
|
|
const [searchValue, setSearchValue] = useState(
|
|
"dwadawa vvwqd21qb13 4kfawfdwa dhawldhawr dliawbdjawndlks",
|
|
);
|
|
|
|
// Function to handle search input change
|
|
const handleSearchChange = (value) => {
|
|
setSearchValue(value);
|
|
};
|
|
|
|
const filteredItems = shopItems
|
|
.map((itemType) => {
|
|
// Filter items in the itemList based on searchValue
|
|
const filteredItemList = itemType.itemList.filter((item) =>
|
|
item.name.toLowerCase().includes(searchValue.toLowerCase()),
|
|
);
|
|
|
|
// Return itemType with only filtered items
|
|
return {
|
|
...itemType,
|
|
itemList: filteredItemList,
|
|
};
|
|
})
|
|
.filter((itemType) => itemType.itemList.length > 0); // Only include itemTypes with matching items
|
|
|
|
console.log(filteredItems);
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
<Header
|
|
HeaderText={"Search"}
|
|
shopId={shopId}
|
|
tableId={tableId}
|
|
user={user}
|
|
/>
|
|
<div style={{ marginTop: "5px" }}></div>
|
|
<SearchInput
|
|
shopId={shopId}
|
|
autofocus={true}
|
|
onSearchChange={handleSearchChange}
|
|
/>
|
|
<div style={{ marginTop: "15px" }}></div>
|
|
<div style={{ marginTop: "-13px" }}></div>
|
|
{filteredItems.map((itemType) => (
|
|
<ItemLister
|
|
shopId={shopId}
|
|
user={user}
|
|
key={itemType.itemTypeId}
|
|
itemTypeId={itemType.itemTypeId}
|
|
typeName={itemType.name}
|
|
itemList={itemType.itemList}
|
|
/>
|
|
))}
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SearchResult;
|