// Body.
js
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
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(
"https://www.swiggy.com/dapi/restaurants/list/v5?
lat=12.9352403&lng=77.624532&is-seo-homepage-
enabled=true&page_type=DESKTOP_WEB_LISTING"
);
const json = await data.json();
const restaurants =
json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants;
console.log(restaurants);
setListOfRestaurants(restaurants);
setFilteredRestaurants(restaurants);
};
if (filteredRestaurants.length === 0) {
return <Shimmer />;
}
const handleSearch = () => {
const filtered = listOfRestaurants.filter(
(res) => res.info.name.toLowerCase().includes(searchText.toLowerCase())
);
setFilteredRestaurants(filtered);
};
const handleTopRatedFilter = () => {
const filtered = listOfRestaurants.filter(
(res) => res.info.avgRating > 4
);
setFilteredRestaurants(filtered);
};
return (
<div className="body">
<div className="filter">
<div className="search">
<input
type="text"
className="search-box"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
<button onClick={handleSearch}>Search</button>
</div>
<button className="filter-btn" onClick={handleTopRatedFilter}>
Top Rated Restaurant
</button>
</div>
<div className="res-container">
{filteredRestaurants.map((restaurant) => (
<Link
key={restaurant.info.id}
to={`/restaurants/${restaurant.info.id}`}
style={{ textDecoration: 'none' }} // Remove underline if needed
>
<RestaurantCard resData={restaurant} />
</Link>
))}
</div>
</div>
);
};
export default Body;
