import { useState, useEffect } from "react";
import RestaurantCard from "./RestaurantCard";
import Shimmer from "./Shimmer";
const Body = () => {
const [listOfRestaurants, setListOfRestaurants] = useState([]);
const [filteredRestaurants, setFilteredRestaurants] = useState([]);
const [searchText, setSearchText] = useState("");
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const data = await fetch(
"[Link]
lat=12.9352403&lng=77.624532&is-seo-homepage-
enabled=true&page_type=DESKTOP_WEB_LISTING"
);
const json = await [Link]();
const restaurants =
json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants;
setListOfRestaurants(restaurants);
setFilteredRestaurants(restaurants); // Set the filtered list to be the same as
the original list initially
[Link](restaurants);
};
if ([Link] === 0) {
return <Shimmer />;
}
const handleSearch = () => {
const filtered = [Link](
(res) => [Link]().includes([Link]())
);
setFilteredRestaurants(filtered);
};
const handleTopRatedFilter = () => {
const filtered = [Link](
(res) => [Link] > 4
);
setFilteredRestaurants(filtered);
};
return (
<div className="body">
<div className="filter">
<div className="search">
<input
type="text"
className="search-box"
value={searchText}
onChange={(e) => setSearchText([Link])}
/>
<button onClick={handleSearch}>Search</button>
</div>
<button className="filter-btn" onClick={handleTopRatedFilter}>
Top Rated Restaurant
</button>
</div>
<div className="res-container">
{[Link]((restaurant, i) => (
<RestaurantCard key={i} resData={restaurant} />
))}
</div>
</div>
);
};
export default Body;