Adding Mock Restauants Listssss

src/App.jsx

@@ -9,6 +9,7 @@ import store from "./utils/store";
 import Cartpage from './components/Cartpage';
 import Login from './components/Login';
 import SignUp from './components/SignUp';
+import Body from './components/Body';
 
 
 
@@ -44,7 +45,7 @@ import SignUp from './components/SignUp';
                 <Header/>
 
                 <Stats />
-                <Apidata/>
+                <Body/> 
 
                 <div className="absolute z-[3] -left-1/2 top-0 w-[50%] h-[50%] rounded-full white__gradient"/>
 

src/components/Body.jsx

@@ -0,0 +1,96 @@
+import React from "react";
+// import RestaurantCard from "./RestaurantCard";
+import { useState, useEffect } from "react";
+import Shimmer from "./Shimmer";
+import { Link } from "react-router-dom";
+import { filterData } from "../utils/helper.js";
+import { ALL_RESTAURANTS_LIST } from "../mocks/mockData";
+import BodyCard from './BodyCard';
+
+function Body() {
+
+
+
+  const [allRestaurants, setAllRestaurants] = useState([]);
+  const [filteredRestaurants, setFilteredRestaurants] = useState([]);
+  const [searchText, setSearchText] = useState("");
+
+  // const { user, setUser } = useContext(UserContext);
+
+  useEffect(() => {
+    setFilteredRestaurants(ALL_RESTAURANTS_LIST);
+    //api call
+    // getRestaurants(setAllRestaurants, setFilteredRestaurants);
+  }, []);
+
+  useEffect(() => {
+    const data = filterData(searchText, ALL_RESTAURANTS_LIST);
+    // update the state - restaurants
+    setFilteredRestaurants(data);
+  }, [searchText]);
+
+  //early return
+  if (!ALL_RESTAURANTS_LIST) return null;
+
+  return ALL_RESTAURANTS_LIST?.length === 0 ? (
+    <Shimmer />
+  ) : (
+    <div className="flex flex-col">
+      <div className="p-4 text-center mt-24">
+        <input
+          data-testid="search-input"
+          type="text"
+          className="mx-3 p-2 px-2 w-96  border border-gray-300 rounded-md focus:outline-none "
+          placeholder="Search"
+          value={searchText}
+          onChange={(e) => {
+            //e.target.value is whatever i write
+            setSearchText(e.target.value);
+          }}
+        />
+
+        <button
+          data-testid="search-btn"
+          className=" p-2 px-4 bg-gray-700 text-white rounded-md hover:shadow-md max-sm:hidden"
+          onClick={() => {
+            //need to filter the data
+            const data = filterData(searchText, allRestaurants);
+            // update the state - restaurants
+            setFilteredRestaurants(data);
+          }}
+        >
+          Search
+        </button>
+      </div>
+
+      {/* <input
+        className="border"
+        onChange={(e) =>
+          setUser({
+            name: e.target.value,
+            email: "dummy@gmail.com",
+          })
+        }
+      /> */}
+
+      <div
+        className=" sm:flex flex-wrap m-0 p-0 justify-center   "
+        data-testid="res-list"
+      >
+        {filteredRestaurants.map((restaurant) => {
+          return (
+            <Link
+              to={`/restaurant/${restaurant.data.id}`}
+              key={restaurant.data.id}
+              className="res-cards "
+            >
+              <BodyCard {...restaurant.data} />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Body;

src/components/BodyCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { IMG_CDN_URL, NO_IMAGE_AVAILABLE } from "../constants";
+
+const BodyCard = ({
+  name,
+  cuisines,
+  cloudinaryImageId,
+  lastMileTravelString,
+}) => {
+  return (
+    <div className="w-56 p-4 m-3 h-72 border border-gray-100 bg-gray rounded-md  hover:shadow-lg bg-gray-50  ">
+      <img
+        className="rounded-md"
+        src={
+          !cloudinaryImageId
+            ? NO_IMAGE_AVAILABLE
+            : IMG_CDN_URL + cloudinaryImageId
+        }
+      />
+
+      <h2 className="text-xl font-semibold py-1">{name}</h2>
+      <h3 className="cuisines text-sm text-gray-500 ">{cuisines.join(", ")}</h3>
+      <h4 className="distance text-sm">📍 {lastMileTravelString} away</h4>
+    </div>
+  );
+};
+
+export default BodyCard;

src/components/constants.js

@@ -6,11 +6,12 @@ export const mainId
 // Image CDN URL for Restaurant Menu
 export const ITEM_IMG_CDN_URL =
   "https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_208,h_208,c_fit/";
-
 
+
+
 // Swiggy API to get Restaurant data with corsanywhere
-export const swiggy_api_URL =
-  "https://www.swiggy.com/dapi/restaurants/list/v5?lat=16.544893&lng=81.521241&page_type=DESKTOP_WEB_LISTING";
+export const swiggy_api_URL = "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&page_type=DESKTOP_WEB_LISTING"
+  // "https://www.swiggy.com/dapi/restaurants/list/v5?lat=16.544893&lng=81.521241&page_type=DESKTOP_WEB_LISTING";
    //  original=  "https://www.swiggy.com/dapi/restaurants/list/v5?lat=21.1702401&lng=72.83106070000001&page_type=DESKTOP_WEB_LISTING";
 
 

src/components/index.js

@@ -19,12 +19,14 @@ import CartBag  from "./CartBag";
 import ControlledCarousel  from "./ControlledCarousel";
 import RestaurantDetail  from "./RestaurantDetail";
 import Underconstruction  from "./Underconstruction";
+import Body  from "./Body";
 
 
 
 export {
 
   Navbar,
+  Body,
   ControlledCarousel,
   Aboutus,
   Header,

src/constants/index.js

@@ -1,3 +1,36 @@
+
+export const IMG_CDN_URL  =
+  "https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/";
+export const FETCH_MENU_URL =
+  "https://www.swiggy.com/dapi/menu/v4/full?lat=12.9351929&lng=77.62448069999999&menuId=";
+export const FETCH_ALL_RESTAURANTS =
+  "https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9351929&lng=77.62448069999999&page_type=DESKTOP_WEB_LISTING";
+export const SHIMMER_IMAGE_URL=
+  "https://htmlcolorcodes.com/assets/images/colors/light-gray-color-solid-background-1920x1080.png";
+export const NO_IMAGE_AVAILABLE =
+  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvHdRZDerGbZ57-ps_PwHdfI90X4p1sr8I4w&usqp=CAU";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 import { people01, people02 ,loveboy,charan, people03, facebook, instagram, linkedin, twitter, airbnb, binance, coinbase, dropbox, send, shield, star  } from "../assets";
 
 export const navLinks = [

src/mocks/dummyImage.js

@@ -0,0 +1 @@
+export default "http://localhost/dummyImage.png";