├── src
    ├── components
    │   ├── Sum.js
    │   ├── __tests__
    │   │   ├── Sum.test.js
    │   │   └── Header.test.js
    │   ├── Contact.jsx
    │   ├── Instamart.jsx
    │   ├── About.jsx
    │   ├── Error.jsx
    │   ├── NotFound.jsx
    │   ├── Profile.jsx
    │   ├── Cart.jsx
    │   ├── Header.jsx
    │   ├── Shimmer.jsx
    │   ├── RestaurentCard.jsx
    │   ├── Footer.jsx
    │   ├── Body.jsx
    │   └── RestaurentMenu.jsx
    ├── index.css
    ├── Utils
    │   ├── UserContext.js
    │   ├── Helper.js
    │   ├── store.js
    │   ├── CartSlice.js
    │   ├── useRestaurant.js
    │   └── useOnline.js
    ├── App.js
    └── Config.js
├── assets
    ├── hiking.png
    ├── offer.png
    └── offer2.png
├── tailwind.config.js
├── README.md
├── index.html
├── package.json
└── jest.config.js


/src/components/Sum.js:
--------------------------------------------------------------------------------
1 | export const Sum = (num1,num2)=>num1 + num2;


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/assets/hiking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhatrapati295/FoodPanda-food-app/HEAD/assets/hiking.png


--------------------------------------------------------------------------------
/assets/offer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhatrapati295/FoodPanda-food-app/HEAD/assets/offer.png


--------------------------------------------------------------------------------
/assets/offer2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhatrapati295/FoodPanda-food-app/HEAD/assets/offer2.png


--------------------------------------------------------------------------------
/src/components/__tests__/Sum.test.js:
--------------------------------------------------------------------------------
1 | import { Sum } from "../Sum"
2 | 
3 | test('For sum of two numbers',()=>{
4 |     expect(Sum(2,3)).toBe(5); 
5 | })


--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
1 | const Contact = ()=>{
2 |     return(
3 |         <div className="">
4 |             <h1>This is Contact Page</h1>
5 |         </div>
6 |     )
7 | }
8 | export default Contact;


--------------------------------------------------------------------------------
/src/components/Instamart.jsx:
--------------------------------------------------------------------------------
1 | const Instamart = ()=>{
2 |     return(
3 |         <div className="">
4 |             <h1>This is Instamart Page</h1>
5 |         </div>
6 |     )
7 | }
8 | export default Instamart;


--------------------------------------------------------------------------------
/src/Utils/UserContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | const UserContext = createContext({
4 |     name : 'Chhatrapati Chauhan',
5 |     email : 'chhatrapati1511@gmail.com'
6 | })
7 | export default UserContext;


--------------------------------------------------------------------------------
/src/Utils/Helper.js:
--------------------------------------------------------------------------------
1 | export function filterData (searchText,allRestaurents){
2 |     return (allRestaurents.filter((restaurent)=>{
3 |         return restaurent?.data?.name.toLowerCase()?.includes(searchText.toLowerCase())
4 |     }))
5 |   }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./src/**/*.{html,js,ts,jsx,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [],
10 | }
11 | 
12 | 


--------------------------------------------------------------------------------
/src/Utils/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import CartSlice from "./CartSlice";
3 | 
4 | const store = configureStore({
5 |     reducer : {
6 |         cart : CartSlice
7 |     }
8 | })
9 | export default store;


--------------------------------------------------------------------------------
/src/components/About.jsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | 
 3 | const About = ()=>{
 4 |     return(
 5 |         <div className="">
 6 |             <h1>This is About Page</h1>
 7 |             <Outlet/>
 8 |         </div>
 9 |     )
10 | }
11 | export default About;


--------------------------------------------------------------------------------
/src/components/Error.jsx:
--------------------------------------------------------------------------------
 1 | import { useRouteError } from "react-router-dom";
 2 | const Error = ()=>{
 3 |     const err = useRouteError()
 4 |     return(
 5 |         <div className="">
 6 |             <h1>You made a mistake</h1>
 7 |             <h1>{err.status} : {err.statusText}</h1>
 8 |         </div>
 9 |     )
10 | }
11 | export default Error;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # FoodPanda-food-app
 2 | In this project I have used Swiggy live API to fetch all the data through CORS.
 3 | 
 4 | 🚀 React js as a UI library.
 5 |  Redux toolkit for state management.
 6 |  Parcel for bundling.
 7 |  Babel as a JavaScript transpiler.
 8 |  React router-V6 for routing.
 9 |  Tailwind CSS for styling.
10 |  Completely responsive.
11 |  React testing library with jest for unit testing and integration testing.
12 | 


--------------------------------------------------------------------------------
/src/components/NotFound.jsx:
--------------------------------------------------------------------------------
1 | const NotFound = ()=>{
2 |     return(
3 |         <div className="w-full h-96 flex flex-col gap-8 justify-center items-center">
4 |             <img className="h-48" src="https://img.freepik.com/premium-vector/website-error-flat-vector-download_9206-2759.jpg?w=740" alt="" />
5 |             <h1 className="text-lg">Internet is dissconnected</h1>
6 |         </div>
7 |     )
8 | }
9 | export default NotFound;


--------------------------------------------------------------------------------
/src/Utils/CartSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const CartSlice = createSlice({
 4 |     name : 'cart',
 5 |     initialState : {
 6 |         items : []
 7 |     },
 8 |     reducers : {
 9 |         addItem : (state,action)=>{
10 |             state.items.push(action.payload)
11 |         },
12 |         removeItem : (state,action)=>{
13 |             state.items.pop()
14 |         },
15 |         clearItem : (state,action)=>{
16 |             state.items = []
17 |         }
18 |     }
19 | })
20 | 
21 | export const{addItem , removeItem , clearItem} = CartSlice.actions;
22 | export default CartSlice.reducer;


--------------------------------------------------------------------------------
/src/Utils/useRestaurant.js:
--------------------------------------------------------------------------------
 1 | import { useState , useEffect } from "react"
 2 | 
 3 | const useRestaurant = (resId)=>{
 4 |     const[resMenu , setResMenu] = useState(null)
 5 |     useEffect(()=>{
 6 |         getMenu()
 7 |     },[])
 8 |     async function getMenu(){
 9 |         const URL = await fetch(`https://corsproxy.io/?https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=19.0759837&lng=72.8776559&restaurantId=${resId}&submitAction=ENTER`)
10 |         const json = await URL.json()
11 |         console.log(json?.data?.cards[2]?.groupedCard?.cardGroupMap?.REGULAR?.cards[2])
12 |         setResMenu(json?.data)
13 |     }
14 |     return resMenu;
15 | }
16 | export default useRestaurant;


--------------------------------------------------------------------------------
/src/Utils/useOnline.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react"
 2 | 
 3 | const UseOnline = ()=>{
 4 |     const[isOnline,setIsOnline]= useState(true)
 5 |     useEffect(()=>{
 6 |         const handleOnline = ()=>{
 7 |             setIsOnline(true)
 8 |         }
 9 |         const handleOffline = ()=>{
10 |             setIsOnline(false)
11 |         }
12 |         window.addEventListener('online',handleOnline)
13 |         window.addEventListener('offline',handleOffline)
14 |         return (()=>{
15 |             window.removeEventListener('online',handleOnline)
16 |             window.removeEventListener('offline',handleOffline)
17 |         })
18 |     },[])
19 |     return isOnline;
20 | }
21 | export default UseOnline;


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="icon" href="https://ypimagesprod.s3.ap-southeast-1.amazonaws.com/uploads/yp_business_photo/photo/453025/large_panda_head.png" />
 8 |     <title>FoodPanda | order food from best restaurants near you</title>
 9 |     <link rel="stylesheet" href="./src/index.css">
10 |     <script src="https://kit.fontawesome.com/0d6799dc23.js" crossorigin="anonymous"></script>
11 | </head>
12 | <body>
13 |     <div id="root"></div>
14 |     <script src="./src/App.js" type="module"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "foodpanda-main",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "test": "jest",
 7 |     "start": "parcel index.html",
 8 |     "build": "parcel build index.html"
 9 |   },
10 |   "author": "Chhatrapati chauhan",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "@reduxjs/toolkit": "^1.9.3",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-loading-skeleton": "^3.2.0",
17 |     "react-redux": "^8.0.5",
18 |     "react-router-dom": "^6.10.0"
19 |   },
20 |   "devDependencies": {
21 |     "@testing-library/react": "^14.0.0",
22 |     "jest": "^29.5.0",
23 |     "jest-environment-jsdom": "^29.5.0",
24 |     "parcel": "^2.8.3",
25 |     "postcss": "^8.4.21",
26 |     "process": "^0.11.10",
27 |     "tailwindcss": "^3.3.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/__tests__/Header.test.js:
--------------------------------------------------------------------------------
 1 | import { render } from "@testing-library/react"
 2 | import Header from '../Header'
 3 | import { Provider } from "react-redux"
 4 | import store from "../../Utils/store"
 5 | import {StaticRouter} from 'react-router-dom/server'
 6 | 
 7 | test('To load header when rendering first time',()=>{
 8 |     const header = render(
 9 |         <StaticRouter>
10 |         <Provider store={store}>
11 |         <Header/>
12 |         </Provider>
13 |         </StaticRouter>
14 |     );
15 |     // console.log(header)
16 |     const logo = header.getByTestId('logo')
17 |     expect(logo.src).toBe("https://th.bing.com/th/id/R.f6bc2b2712b5a390fee444e60d312b69?rik=qTqjtW7Nn4UiJw&riu=http%3a%2f%2fwww.gadgetsmagazine.com.ph%2fwp-content%2fuploads%2f2017%2f09%2ffoodpanda-logo.png&ehk=Jy3z435XdWQADxTy4KoiuJvyN6HyGj9DOZIzHuitbEI%3d&risl=&pid=ImgRaw&r=0")
18 | })
19 | 
20 | test('Cart item should be 0 in intital render',()=>{
21 |     const header = render(
22 |         <StaticRouter>
23 |         <Provider store={store}>
24 |         <Header/>
25 |         </Provider>
26 |         </StaticRouter>
27 |     )
28 |     const cart = header.getByTestId('cart')
29 |     expect(cart.innerHTML).toBe('0')
30 | })


--------------------------------------------------------------------------------
/src/components/Profile.jsx:
--------------------------------------------------------------------------------
 1 | import { Component } from "react";
 2 | // import UserContext from "../Utils/UserContext";
 3 | 
 4 | class Profile extends Component{
 5 |     constructor(props){
 6 |         super(props)
 7 |         this.state = {
 8 |             name : 'What',
 9 |             loc : 'where'
10 |         }
11 |     }
12 |     async componentDidMount(){
13 |         const url = await fetch('https://api.github.com/users/chhatrapati295')
14 |         const data = await url.json()
15 |         console.log(data)
16 |         this.setState({
17 |             name : data.name,
18 |             loc : data.location
19 |         })
20 | 
21 |     }
22 |     render(){
23 |         console.log('render')
24 |         return(
25 |             <>
26 |             <h1>hello</h1>
27 |                 {/* <UserContext.Consumer>
28 |                     {
29 |                         ({user})=>(
30 |                             <h1>{user.name} : {user.email}</h1>
31 |                         )
32 |                     }
33 |                 </UserContext.Consumer> */}
34 |             <h1>{this.state.name}</h1>
35 |             <h1>{this.state.loc}</h1>
36 |             </>
37 |         )
38 |     }
39 | }
40 | export default Profile;


--------------------------------------------------------------------------------
/src/components/Cart.jsx:
--------------------------------------------------------------------------------
 1 | import { useDispatch, useSelector } from "react-redux";
 2 | import { IMG_CDN } from "../Config";
 3 | import { clearItem } from "../Utils/CartSlice";
 4 | 
 5 | const Cart = ()=>{
 6 |     const cartItems = useSelector((store)=> store.cart.items)
 7 |     console.log(cartItems)
 8 |     const dispatch = useDispatch()
 9 |     function clearItemFunc (){
10 |         dispatch(clearItem())
11 |     }
12 |     return(
13 |         <div className="md:w-3/5 w-[80%]  m-auto py-4 min-h-screen ">
14 |             <div className="flex justify-between items-center mb-4">
15 |             <h1 className="text-2xl font-semibold">Cart ({cartItems.length})</h1>
16 |             <button className="text-xs font-medium bg-red-300 py-1 px-2 hover:bg-red-400 transition-all duration-300 ease-in-out rounded" onClick={()=>clearItemFunc()}>Clear Cart</button>
17 |             </div>
18 |             <div className="flex flex-col ">
19 |             {cartItems.map(item=>{
20 |                 return <CartItem key={item?.card?.info?.id} {...item?.card?.info}/>
21 |             })}
22 |             </div>
23 |         </div>
24 |     )
25 | }
26 | const CartItem = ({name,imageId,price,description})=>{
27 |     return(
28 |         <div className="my-2 border-b py-2 md:flex-row flex flex-col text-sm  gap-8">
29 |             <img
30 |                   src={
31 |                    imageId ? (IMG_CDN + imageId) : "https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/39cd5e4824e5c011ffaf56ddc39891e8"
32 |                   }
33 |                   alt=""
34 |                   className="w-32 h-20 rounded object-cover"
35 |                 />
36 |             <div className="flex flex-col">
37 |             <span className="font-semibold">{name}</span>
38 |             <span className="font-semibold">&#8377;{!price ? '250' : price/100}</span>
39 |             <span className="text-sm text-gray-500">{description}</span>
40 |             </div>
41 |         </div>
42 |     )
43 | }
44 | export default Cart;


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | // import UseOnline from "../Utils/useOnline";
 3 | import { useContext } from "react";
 4 | import UserContext from "../Utils/UserContext";
 5 | import { useSelector } from "react-redux";
 6 | // import store from "../Utils/store";
 7 | 
 8 | const Header = ()=>{
 9 |     // const isOnline = UseOnline()
10 |     const myInfo = useContext(UserContext)
11 |     const cartItems = useSelector(store => store.cart.items)
12 |     return(
13 |         <div className="flex justify-between items-center px-6 md:px-8 py-2 shadow bg-black text-white ">
14 |             <Link to="/">
15 |                 <img className="h-12" data-testid='logo' src="https://th.bing.com/th/id/R.f6bc2b2712b5a390fee444e60d312b69?rik=qTqjtW7Nn4UiJw&riu=http%3a%2f%2fwww.gadgetsmagazine.com.ph%2fwp-content%2fuploads%2f2017%2f09%2ffoodpanda-logo.png&ehk=Jy3z435XdWQADxTy4KoiuJvyN6HyGj9DOZIzHuitbEI%3d&risl=&pid=ImgRaw&r=0" alt="" />
16 |             </Link>
17 |             <ul className="flex gap-6 md:gap-12 text-sm font-medium">
18 |                 <li><Link to="/" className=" hover:text-orange-400 transition-all duration-300 ease-in-out">Home</Link></li>
19 |                 <li><Link to="/about" className=" hover:text-orange-400 transition-all duration-300 ease-in-out">About</Link></li>
20 |                 <li><Link to="/contact" className=" hover:text-orange-400 transition-all duration-300 ease-in-out">Contact</Link></li>
21 |                 <li><Link to="/cart" className="relative "><i className="fa-solid fa-cart-shopping"><span className="absolute top-[-8px] right-[-12px] bg-orange-500 w-4 p-1  h-4 rounded-full text-[10px] flex justify-center items-center" data-testid="cart">{cartItems.length}</span></i></Link></li>
22 |                 {/* <li><Link to="/instamart" className=" hover:text-orange-400 transition-all duration-300 ease-in-out">Instamart</Link></li> */}
23 |             </ul>
24 |             {/* <div className="">{isOnline ? '🟢' : '🔴'}</div> */}
25 |             {/* <span>{myInfo.name}</span> */}
26 |         </div>
27 |     )
28 | }
29 | export default Header;


--------------------------------------------------------------------------------
/src/components/Shimmer.jsx:
--------------------------------------------------------------------------------
 1 | import Skeleton from "react-loading-skeleton";
 2 | import "react-loading-skeleton/dist/skeleton.css";
 3 | 
 4 | const Shimmer = () => {
 5 |   return (
 6 |     <div className="flex flex-wrap gap-4 py-2 m-auto ">
 7 |       <ShimmerCard />
 8 |       <ShimmerCard />
 9 |       <ShimmerCard />
10 |       <ShimmerCard />
11 |       <ShimmerCard />
12 |       <ShimmerCard />
13 |       <ShimmerCard />
14 |       <ShimmerCard />
15 |     </div>
16 |   );
17 | };
18 | const ShimmerCard = () => {
19 |   return (
20 |     <div className="flex flex-col gap-1 m-auto md:m-0">
21 |       <Skeleton width={"250px"} height={"155px"} />
22 |       <Skeleton width={"250px"} height={"25px"} />
23 |       <Skeleton width={"250px"} height={"25px"} />
24 |       <Skeleton width={"250px"} height={"25px"} />
25 |     </div>
26 |   );
27 | };
28 | export const ShimmerMenu = () => {
29 |   return (
30 |     <div className="w-2/3 my-2 m-auto">
31 |       <div className="flex justify-between flex-col md:flex-row">
32 |         <div className="">
33 |           <Skeleton width={"250px"} height={"25px"} />
34 |           <Skeleton width={"250px"} height={"25px"} />
35 |           <Skeleton width={"250px"} height={"25px"} />
36 |           <Skeleton width={"250px"} height={"25px"} />
37 |         </div>
38 |         <Skeleton width={"250px"} height={"125px"} />
39 |       </div>
40 |       <div className="my-4">
41 |         <Skeleton width={"300px"} height={"35px"} />
42 |       </div>
43 |       <div className="flex justify-between mb-4 flex-col md:flex-row ">
44 |         <div className="">
45 |           <Skeleton width={"300px"} height={"25px"} />
46 |           <Skeleton width={"150px"} height={"25px"} />
47 |         </div>
48 |         <Skeleton width={"120px"} height={"70px"} />
49 |       </div>
50 |       <div className="flex justify-between mb-4 flex-col md:flex-row">
51 |         <div className="">
52 |           <Skeleton width={"300px"} height={"25px"} />
53 |           <Skeleton width={"150px"} height={"25px"} />
54 |         </div>
55 |         <Skeleton width={"120px"} height={"70px"} />
56 |       </div>
57 |     </div>
58 |   );
59 | };
60 | export default Shimmer;
61 | 


--------------------------------------------------------------------------------
/src/components/RestaurentCard.jsx:
--------------------------------------------------------------------------------
 1 | import { IMG_CDN } from "../Config";
 2 | import offerImg from "../../assets/offer2.png";
 3 | import { useContext } from "react";
 4 | import UserContext from "../Utils/UserContext";
 5 | const RestaurentCard = ({
 6 |   name,
 7 |   cuisines,
 8 |   avgRating,
 9 |   cloudinaryImageId,
10 |   slaString,
11 |   costForTwoString,
12 |   aggregatedDiscountInfo,
13 |   // user
14 | }) => {
15 |   const myInfo= useContext(UserContext)
16 |   return (
17 |     <div className="md:w-64 md:h-80 shadow-md md:shadow-none py-4 px-4 md:py-2  hover:shadow-lg rounded flex flex-col gap-1 text-[0.7rem] text-[#535665] ">
18 |       <img
19 |         src={
20 |           IMG_CDN +
21 |           (cloudinaryImageId === ""
22 |             ? "s6fhwzl0tss0vgrqvcid"
23 |             : cloudinaryImageId)
24 |         }
25 |         alt=""
26 |         className=" rounded object-cover"
27 |       />
28 |       <span className="font-medium text-base text-black">{name}</span>
29 |       <span className="">{cuisines.join(", ")}</span>
30 |       <div className="flex justify-between items-center my-2 font-medium">
31 |         <div className="flex items-center gap-1 px-1 text-white bg-green-500  font-semibold">
32 |           <i className="fa-solid fa-star text-[0.6rem]"></i>
33 |           <span className="text-[0.6rem]">
34 |             {avgRating === "--" ? "4.2" : avgRating}
35 |           </span>
36 |         </div>
37 |         <div className="w-[3px] h-[3px] rounded-full bg-black"></div>
38 |         <span className="">{slaString}</span>
39 |         <div className="w-[3px] h-[3px] rounded-full bg-black"></div>
40 |         <span className="">{costForTwoString}</span>
41 |       </div>
42 |       <div className="flex border-t pt-4 gap-2 font-semibold">
43 |         <img src={offerImg} alt="" className="h-4" />
44 |         <span className="text-[#a0522d]">
45 |           {!aggregatedDiscountInfo?.shortDescriptionList[0]?.meta
46 |             ? "40% off | Use TRYNEW"
47 |             : aggregatedDiscountInfo?.shortDescriptionList[0]?.meta}
48 |         </span>
49 |       </div>
50 |       {/* <span>{myInfo.name}</span> */}
51 |     </div>
52 |   );
53 | };
54 | export default RestaurentCard;
55 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Suspense, lazy, useState } from "react"
 2 | import ReactDOM from 'react-dom/client'
 3 | import Header from "./components/Header"
 4 | import Body from "./components/Body"
 5 | import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom"
 6 | import Error from "./components/Error"
 7 | import About from "./components/About"
 8 | import Contact from "./components/Contact"
 9 | import Footer from "./components/Footer"
10 | import RestaurentMenu from "./components/RestaurentMenu"
11 | import Profile from "./components/Profile"
12 | import Shimmer from "./components/Shimmer"
13 | import Cart from "./components/Cart"
14 | import UserContext from "./Utils/UserContext"
15 | import { Provider } from "react-redux"
16 | import store from "./Utils/store"
17 | 
18 | const Instamart = lazy(()=> import("./components/Instamart"))
19 | 
20 | const App = ()=>{
21 |     return(
22 |         <Provider store={store}>
23 |         <UserContext.Provider value={{
24 |             name : 'chhatrapati'
25 |         }}>
26 |                 <Header/>
27 |                 <Outlet/>
28 |                 <Footer/>
29 |         </UserContext.Provider>
30 |         </Provider>
31 |     )
32 | }
33 | const creatingRouter = createBrowserRouter([
34 |     {
35 |         path : '/',
36 |         element : <App/>,
37 |         errorElement : <Error/>,
38 |         children : [
39 |             {
40 |                 path : '/',
41 |                 element : <Body user={{
42 |                     name : 'Chhatrapati',
43 |                     age : 22
44 |                 }}/>,
45 |             },
46 |             {
47 |                 path : '/about',
48 |                 element : <About/>,
49 |                 children : [
50 |                     {
51 |                         path : 'profile',
52 |                         element : <Profile/>
53 |                     }
54 |                 ]
55 |             },
56 |             {
57 |                 path : '/contact',
58 |                 element : <Contact/>,
59 |             },
60 |             {
61 |                 path : '/restaurant/:id',
62 |                 element : <RestaurentMenu/>,
63 |             },
64 |             {
65 |                 path : '/cart',
66 |                 element : <Cart/>,
67 |             },
68 |             {
69 |                 path : '/instamart',
70 |                 element : (
71 |                     <Suspense fallback={<Shimmer/>}>
72 |                         <Instamart/>
73 |                     </Suspense>
74 |                 ),
75 |             },
76 |         ]
77 |     }
78 | ])
79 | 
80 | const root = ReactDOM.createRoot(document.getElementById('root'))
81 | root.render(<RouterProvider router={creatingRouter}/>)


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | const Footer = () => {
 3 |     return (
 4 |       <div className="relative top-16 flex flex-col justify-between border border-black md:flex md:flex-row  py-10 text-white bg-black">
 5 |         <div className="flex flex-1 justify-around ">
 6 |           <div className="leftFooter1">
 7 |             <span className="opacity-50 font-medium">COMPANY</span>
 8 |             <ul className="mt-4 flex flex-col gap-2">
 9 |               <a href="">
10 |                 <li className="footerItem">About us</li>
11 |               </a>
12 |               <a href="">
13 |                 <li className="footerItem">Team</li>
14 |               </a>
15 |               <a href="">
16 |                 <li className="footerItem">Careers</li>
17 |               </a>
18 |               <a href="">
19 |                 <li className="footerItem">Swiggy Blog</li>
20 |               </a>
21 |               <a href="">
22 |                 <li className="footerItem">Bug Bounty</li>
23 |               </a>
24 |               <a href="">
25 |                 <li className="footerItem">Swiggy One</li>
26 |               </a>
27 |               <a href="">
28 |                 <li className="footerItem">Swiggy Corporate</li>
29 |               </a>
30 |               <a href="">
31 |                 <li className="footerItem">Swiggy Instamart</li>
32 |               </a>
33 |               <a href="">
34 |                 <li className="footerItem">Swiggy Genie</li>
35 |               </a>
36 |             </ul>
37 |           </div>
38 |           <div className="leftFooter2">
39 |             <span className="opacity-50 font-medium">CONTACT</span>
40 |             <ul className="mt-4 flex flex-col gap-2">
41 |               <a href="">
42 |                 <li className="footerItem">Help & Support</li>
43 |               </a>
44 |               <a href="">
45 |                 <li className="footerItem">Partern with us</li>
46 |               </a>
47 |               <a href="">
48 |                 <li className="footerItem">Ride with us</li>
49 |               </a>
50 |             </ul>
51 |           </div>
52 |         </div>
53 |         <div className=" flex flex-1 justify-around md:mt-0 mt-10 ">
54 |           <div className="hidden md:block rightFooter1">
55 |             <span className="opacity-50 font-medium">LEGAL</span>
56 |             <ul className="mt-4 flex flex-col gap-2">
57 |               <a href="">
58 |                 <li className="footerItem">Terms & Conditions</li>
59 |               </a>
60 |               <a href="">
61 |                 <li className="footerItem">Refund & Cancellation</li>
62 |               </a>
63 |               <a href="">
64 |                 <li className="footerItem">Privacy Policy</li>
65 |               </a>
66 |               <a href="">
67 |                 <li className="footerItem">Cookie Policy</li>
68 |               </a>
69 |               <a href="">
70 |                 <li className="footerItem">Offer Terms</li>
71 |               </a>
72 |               <a href="">
73 |                 <li className="footerItem">Phishing & Fraud</li>
74 |               </a>
75 |             </ul>
76 |           </div>
77 |           <div className="flex flex-col gap-4">
78 |             <img
79 |             className="h-12 cursor-pointer"
80 |               alt=""
81 |               src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_200,h_65/icon-AppStore_lg30tv"
82 |             />
83 |             <img
84 |             className="h-12 cursor-pointer"
85 |               alt=""
86 |               src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_200,h_65/icon-GooglePlay_1_zixjxl"
87 |             />
88 |           </div>
89 |         </div>
90 |       </div>
91 |     );
92 |   };
93 |   export default Footer;
94 |   


--------------------------------------------------------------------------------
/src/components/Body.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import RestaurentCard from "./RestaurentCard";
 3 | import { Link } from "react-router-dom";
 4 | import { filterData } from "../Utils/Helper";
 5 | import Shimmer from "./Shimmer"
 6 | import useOnline from "../Utils/useOnline";
 7 | import NotFound from "../components/NotFound"
 8 | 
 9 | const Body = ({user}) => {
10 |   const [allRestaurents, setAllRestaurents] = useState([]);
11 |   const [filteredRestaurents, setFilteredRestaurents] = useState([]);
12 |   const [searchText, setSearchText] = useState("");
13 |   useEffect(() => {
14 |     getData();
15 |   }, []);
16 |   async function getData() {
17 |     const url = await fetch(
18 |       "https://corsproxy.io/?https://www.swiggy.com/dapi/restaurants/list/v5?lat=19.0759837&lng=72.8776559&page_type=DESKTOP_WEB_LISTING"
19 |     );
20 |     const json = await url.json();
21 |     console.log(json?.data?.cards[2]?.data?.data?.cards);
22 |     setAllRestaurents(json?.data?.cards[2]?.data?.data?.cards);
23 |     setFilteredRestaurents(json?.data?.cards[2]?.data?.data?.cards);
24 |   }
25 |   // function filterData (searchText,allRestaurents){
26 |   //   return (allRestaurents.filter((restaurent)=>{
27 |   //       return restaurent?.data?.name.toLowerCase()?.includes(searchText.toLowerCase())
28 |   //   }))
29 |   // }
30 |   // const onlineStatus = ()
31 |   const onlineStatus = useOnline()
32 |   console.log(onlineStatus)
33 |   if(!onlineStatus){
34 |     return <NotFound/>
35 |   }
36 |   return (
37 |     <div className="mx-8 ">
38 |         <div className="flex flex-col justify-between items-center md:flex md:flex-row">
39 |       <div className="text-sm flex gap-2 my-4">
40 |         <input
41 |           type="text"
42 |           placeholder="Search for a restaurants"
43 |           className="w-64 text-xs border border-gray-300 focus:border-gray-500 transition-all duration-300 px-2 py-2 outline-none  rounded"
44 |           value={searchText}
45 |           onChange={(e)=>{
46 |             setSearchText(e.target.value)
47 |             const fData = filterData(searchText,allRestaurents)
48 |            setFilteredRestaurents(fData)
49 |         }}
50 |         />
51 |         <button className="text-xs font-medium shadow-md px-2 py-2 outline-none  rounded bg-orange-500 hover:bg-orange-600 transition-all duration-200 ease-in-out text-white"
52 |         onClick={()=>{
53 |            const fData = filterData(searchText,allRestaurents)
54 |            console.log(fData)
55 |            setFilteredRestaurents(fData)
56 |         }}
57 |         >
58 |           Search
59 |         </button>
60 |       </div>
61 |         <div className="flex gap-12 cursor-pointer text-xs">
62 |             <div className="flex gap-4 items-center">
63 |             <img className="h-6" alt="illustration" src="https://b.zmtcdn.com/data/o2_assets/c0bb85d3a6347b2ec070a8db694588261616149578.png?output-format=webp" loading="lazy" />
64 |                 <span className="">Delivery</span>
65 |             </div>
66 |             <div className="flex gap-4 items-center">
67 |             <img className="h-6" alt="illustration" src="https://b.zmtcdn.com/data/o2_assets/78d25215ff4c1299578ed36eefd5f39d1616149985.png?output-format=webp" loading="lazy" />
68 |                 <span className="whitespace-nowrap">Dining Out</span>
69 |             </div>
70 |             <div className="flex gap-4 items-center">
71 |             <img className="h-6" alt="illustration" src="https://b.zmtcdn.com/data/o2_assets/01040767e4943c398e38e3592bb1ba8a1616150142.png?output-format=webp" loading="lazy" />
72 |                 <span className="">Nightlife</span>
73 |             </div>
74 |         </div>
75 |         </div>
76 |       <div className="flex flex-col md:flex-row items-center md:flex-wrap gap-2 my-2 md:my-0   ">
77 |         {
78 |             filteredRestaurents?.length == 0 ? <Shimmer/> :
79 |             filteredRestaurents?.map((item) => {
80 |                 return <Link to={'/restaurant/' + item.data.id} key={item?.data?.id} >
81 |                 <RestaurentCard {...item?.data} user={user} />
82 |                 </Link>
83 |               })
84 |         }
85 |       </div>
86 |     </div>
87 |   );
88 | };
89 | export default Body;
90 | 


--------------------------------------------------------------------------------
/src/components/RestaurentMenu.jsx:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom";
  2 | import { ShimmerMenu } from "./Shimmer";
  3 | import { IMG_CDN } from "../Config";
  4 | import useRestaurant from "../Utils/useRestaurant";
  5 | import { useDispatch } from "react-redux";
  6 | import { addItem } from "../Utils/CartSlice";
  7 | 
  8 | const RestaurentMenu = () => {
  9 |   const resId = useParams();
 10 |   const { id } = resId;
 11 |   const resMenu = useRestaurant(id);
 12 |   const dispatch = useDispatch();
 13 |   function addItemFunc(item) {
 14 |     dispatch(addItem(item));
 15 |   }
 16 |   return !resMenu ? (
 17 |     <ShimmerMenu />
 18 |   ) : (
 19 |     <div className="flex flex-col w-[80%] md:w-2/3 p-4 border m-auto">
 20 |       <div className="flex flex-col justify-between pb-4 border-b md:flex-row gap-3">
 21 |         <div className="flex flex-col text-xs text-[#535665] font-medium gap-1">
 22 |           <span className="text-xl font-bold text-black">
 23 |             {resMenu?.cards[0]?.card?.card?.info?.name}
 24 |           </span>
 25 |           <span className="">
 26 |             {resMenu?.cards[0]?.card?.card?.info?.cuisines.join(", ")}
 27 |           </span>
 28 |           <span className="">
 29 |             {resMenu?.cards[0]?.card?.card?.info?.areaName},{" "}
 30 |             {resMenu?.cards[0]?.card?.card?.info?.city}{" "}
 31 |             <i className="text-blue-600 fa-solid fa-location-dot"></i>
 32 |           </span>
 33 |           <span className="">
 34 |             {resMenu?.cards[0]?.card?.card?.info?.avgRating}{" "}
 35 |             <i className="text-green-600 fa-solid fa-star"></i> |{" "}
 36 |             {resMenu?.cards[0]?.card?.card?.info?.totalRatingsString}
 37 |           </span>
 38 |           <span className="">
 39 |             {resMenu?.cards[0]?.card?.card?.info?.feeDetails?.message}
 40 |           </span>
 41 |         </div>
 42 |         <img
 43 |           className="w-56 h-36 rounded"
 44 |           src={IMG_CDN + resMenu?.cards[0]?.card?.card?.info?.cloudinaryImageId}
 45 |           alt=""
 46 |         />
 47 |       </div>
 48 |       <div className="flex gap-8 items-center border-b py-3 text-sm md:text-base">
 49 |         <div className="flex items-center gap-2 font-semibold">
 50 |           <svg
 51 |             className="RestaurantTimeCost_icon__8UdT4"
 52 |             width="18"
 53 |             height="18"
 54 |             viewBox="0 0 18 18"
 55 |             xmlns="http://www.w3.org/2000/svg"
 56 |             fill="none"
 57 |           >
 58 |             <circle
 59 |               r="8.35"
 60 |               transform="matrix(-1 0 0 1 9 9)"
 61 |               stroke="#3E4152"
 62 |               strokeWidth="1.3"
 63 |             ></circle>
 64 |             <path
 65 |               d="M3 15.2569C4.58666 16.9484 6.81075 18 9.273 18C14.0928 18 18 13.9706 18 9C18 4.02944 14.0928 0 9.273 0C9.273 2.25 9.273 9 9.273 9C6.36399 12 5.63674 12.75 3 15.2569Z"
 66 |               fill="#3E4152"
 67 |             ></path>
 68 |           </svg>
 69 |           <span className="">
 70 |             {resMenu?.cards[0]?.card?.card?.info?.sla?.slaString}
 71 |           </span>
 72 |         </div>
 73 |         <div className="flex items-center gap-2 font-semibold">
 74 |           <svg
 75 |             className="RestaurantTimeCost_icon__8UdT4"
 76 |             width="18"
 77 |             height="18"
 78 |             viewBox="0 0 18 18"
 79 |             xmlns="http://www.w3.org/2000/svg"
 80 |             fill="none"
 81 |           >
 82 |             <circle
 83 |               cx="9"
 84 |               cy="9"
 85 |               r="8.25"
 86 |               stroke="#3E4152"
 87 |               strokeWidth="1.5"
 88 |             ></circle>
 89 |             <path
 90 |               d="M12.8748 4.495H5.6748V6.04H7.9698C8.7948 6.04 9.4248 6.43 9.6198 7.12H5.6748V8.125H9.6048C9.3798 8.8 8.7648 9.22 7.9698 9.22H5.6748V10.765H7.3098L9.5298 14.5H11.5548L9.1098 10.57C10.2048 10.39 11.2698 9.58 11.4498 8.125H12.8748V7.12H11.4348C11.3148 6.475 10.9698 5.905 10.4298 5.5H12.8748V4.495Z"
 91 |               fill="#3E4152"
 92 |             ></path>
 93 |           </svg>
 94 |           <span className="">
 95 |             {resMenu?.cards[0]?.card?.card?.info?.costForTwoMessage}
 96 |           </span>
 97 |         </div>
 98 |       </div>
 99 |       <h1 className="font-bold mt-4 mb-10">
100 |         Recommended (
101 |         {
102 |           resMenu?.cards[resMenu?.cards.length -1]?.groupedCard?.cardGroupMap?.REGULAR?.cards[2]?.card
103 |             ?.card?.itemCards?.length
104 |         }
105 |         )
106 |       </h1>
107 |       <div className="">
108 |         {(resMenu?.cards[resMenu?.cards.length -1]?.groupedCard?.cardGroupMap?.REGULAR?.cards[2]?.card?.card?.itemCards).map(
109 |           (item) => {
110 |             return (
111 |               <div
112 |                 className="flex flex-col justify-between border-b pb-6 mb-4 gap-6 md:flex-row"
113 |                 key={item?.card?.info?.id}
114 |               >
115 |                 <div className="flex flex-col gap-2 w-full md:w-3/4">
116 |                   <span className="font-semibold">
117 |                     {item?.card?.info?.name}
118 |                   </span>
119 |                   <div className="flex items-center gap-2">
120 |                     <span className="font-semibold">
121 |                       &#8377;
122 |                       {item?.card?.info?.price
123 |                         ? item?.card?.info?.price / 100
124 |                         : 150}
125 |                     </span>
126 |                     {item?.card?.info?.offerTags && (
127 |                       <span className="text-[10px] font-medium px-[6px] bg-red-100 text-orange-500">
128 |                         {item?.card?.info?.offerTags[0]?.title} |{" "}
129 |                         {item?.card?.info?.offerTags[0]?.subTitle}
130 |                       </span>
131 |                     )}
132 |                   </div>
133 |                   <p className="text-xs text-[#535665] ">
134 |                     {item?.card?.info?.description}
135 |                   </p>
136 |                 </div>
137 |                 <div className=" flex flex-col gap-1 relative md:w-1/4 w-auto">
138 |                   <img
139 |                     src={
140 |                       item?.card?.info?.imageId
141 |                         ? IMG_CDN + item?.card?.info?.imageId
142 |                         : "https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/39cd5e4824e5c011ffaf56ddc39891e8"
143 |                     }
144 |                     alt=""
145 |                     className="w-32 h-20 rounded self-center object-cover"
146 |                   />
147 |                   <button
148 |                     className="absolute bottom-[-8px] bg-white shadow-md border self-center text-[10px] py-1 px-4 font-medium rounded  active:scale-90 hover:bg-green-300 transition-all duration-300 ease-in-out"
149 |                     onClick={() => addItemFunc(item)}
150 |                   >
151 |                     ADD TO CART
152 |                   </button>
153 |                 </div>
154 |               </div>
155 |             );
156 |           }
157 |         )}
158 |       </div>
159 |     </div>
160 |   );
161 | };
162 | export default RestaurentMenu;
163 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * For a detailed explanation regarding each configuration property, visit:
  3 |  * https://jestjs.io/docs/configuration
  4 |  */
  5 | 
  6 | module.exports = {
  7 |   // All imported modules in your tests should be mocked automatically
  8 |   // automock: false,
  9 | 
 10 |   // Stop running tests after `n` failures
 11 |   // bail: 0,
 12 | 
 13 |   // The directory where Jest should store its cached dependency information
 14 |   // cacheDirectory: "C:\\Users\\Chhatrapati chauhan\\AppData\\Local\\Temp\\jest",
 15 | 
 16 |   // Automatically clear mock calls, instances, contexts and results before every test
 17 |   clearMocks: true,
 18 | 
 19 |   // Indicates whether the coverage information should be collected while executing the test
 20 |   collectCoverage: true,
 21 | 
 22 |   // An array of glob patterns indicating a set of files for which coverage information should be collected
 23 |   // collectCoverageFrom: undefined,
 24 | 
 25 |   // The directory where Jest should output its coverage files
 26 |   coverageDirectory: "coverage",
 27 | 
 28 |   // An array of regexp pattern strings used to skip coverage collection
 29 |   // coveragePathIgnorePatterns: [
 30 |   //   "\\\\node_modules\\\\"
 31 |   // ],
 32 | 
 33 |   // Indicates which provider should be used to instrument code for coverage
 34 |   // coverageProvider: "babel",
 35 | 
 36 |   // A list of reporter names that Jest uses when writing coverage reports
 37 |   // coverageReporters: [
 38 |   //   "json",
 39 |   //   "text",
 40 |   //   "lcov",
 41 |   //   "clover"
 42 |   // ],
 43 | 
 44 |   // An object that configures minimum threshold enforcement for coverage results
 45 |   // coverageThreshold: undefined,
 46 | 
 47 |   // A path to a custom dependency extractor
 48 |   // dependencyExtractor: undefined,
 49 | 
 50 |   // Make calling deprecated APIs throw helpful error messages
 51 |   // errorOnDeprecated: false,
 52 | 
 53 |   // The default configuration for fake timers
 54 |   // fakeTimers: {
 55 |   //   "enableGlobally": false
 56 |   // },
 57 | 
 58 |   // Force coverage collection from ignored files using an array of glob patterns
 59 |   // forceCoverageMatch: [],
 60 | 
 61 |   // A path to a module which exports an async function that is triggered once before all test suites
 62 |   // globalSetup: undefined,
 63 | 
 64 |   // A path to a module which exports an async function that is triggered once after all test suites
 65 |   // globalTeardown: undefined,
 66 | 
 67 |   // A set of global variables that need to be available in all test environments
 68 |   // globals: {},
 69 | 
 70 |   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
 71 |   // maxWorkers: "50%",
 72 | 
 73 |   // An array of directory names to be searched recursively up from the requiring module's location
 74 |   // moduleDirectories: [
 75 |   //   "node_modules"
 76 |   // ],
 77 | 
 78 |   // An array of file extensions your modules use
 79 |   // moduleFileExtensions: [
 80 |   //   "js",
 81 |   //   "mjs",
 82 |   //   "cjs",
 83 |   //   "jsx",
 84 |   //   "ts",
 85 |   //   "tsx",
 86 |   //   "json",
 87 |   //   "node"
 88 |   // ],
 89 | 
 90 |   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
 91 |   // moduleNameMapper: {},
 92 | 
 93 |   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
 94 |   // modulePathIgnorePatterns: [],
 95 | 
 96 |   // Activates notifications for test results
 97 |   // notify: false,
 98 | 
 99 |   // An enum that specifies notification mode. Requires { notify: true }
100 |   // notifyMode: "failure-change",
101 | 
102 |   // A preset that is used as a base for Jest's configuration
103 |   // preset: undefined,
104 | 
105 |   // Run tests from one or more projects
106 |   // projects: undefined,
107 | 
108 |   // Use this configuration option to add custom reporters to Jest
109 |   // reporters: undefined,
110 | 
111 |   // Automatically reset mock state before every test
112 |   // resetMocks: false,
113 | 
114 |   // Reset the module registry before running each individual test
115 |   // resetModules: false,
116 | 
117 |   // A path to a custom resolver
118 |   // resolver: undefined,
119 | 
120 |   // Automatically restore mock state and implementation before every test
121 |   // restoreMocks: false,
122 | 
123 |   // The root directory that Jest should scan for tests and modules within
124 |   // rootDir: undefined,
125 | 
126 |   // A list of paths to directories that Jest should use to search for files in
127 |   // roots: [
128 |   //   "<rootDir>"
129 |   // ],
130 | 
131 |   // Allows you to use a custom runner instead of Jest's default test runner
132 |   // runner: "jest-runner",
133 | 
134 |   // The paths to modules that run some code to configure or set up the testing environment before each test
135 |   // setupFiles: [],
136 | 
137 |   // A list of paths to modules that run some code to configure or set up the testing framework before each test
138 |   // setupFilesAfterEnv: [],
139 | 
140 |   // The number of seconds after which a test is considered as slow and reported as such in the results.
141 |   // slowTestThreshold: 5,
142 | 
143 |   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
144 |   // snapshotSerializers: [],
145 | 
146 |   // The test environment that will be used for testing
147 |   testEnvironment: "jsdom",
148 | 
149 |   // Options that will be passed to the testEnvironment
150 |   // testEnvironmentOptions: {},
151 | 
152 |   // Adds a location field to test results
153 |   // testLocationInResults: false,
154 | 
155 |   // The glob patterns Jest uses to detect test files
156 |   // testMatch: [
157 |   //   "**/__tests__/**/*.[jt]s?(x)",
158 |   //   "**/?(*.)+(spec|test).[tj]s?(x)"
159 |   // ],
160 | 
161 |   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
162 |   // testPathIgnorePatterns: [
163 |   //   "\\\\node_modules\\\\"
164 |   // ],
165 | 
166 |   // The regexp pattern or array of patterns that Jest uses to detect test files
167 |   // testRegex: [],
168 | 
169 |   // This option allows the use of a custom results processor
170 |   // testResultsProcessor: undefined,
171 | 
172 |   // This option allows use of a custom test runner
173 |   // testRunner: "jest-circus/runner",
174 | 
175 |   // A map from regular expressions to paths to transformers
176 |   // transform: undefined,
177 | 
178 |   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
179 |   // transformIgnorePatterns: [
180 |   //   "\\\\node_modules\\\\",
181 |   //   "\\.pnp\\.[^\\\\]+$"
182 |   // ],
183 | 
184 |   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
185 |   // unmockedModulePathPatterns: undefined,
186 | 
187 |   // Indicates whether each individual test should be reported during the run
188 |   // verbose: undefined,
189 | 
190 |   // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
191 |   // watchPathIgnorePatterns: [],
192 | 
193 |   // Whether to use watchman for file crawling
194 |   // watchman: true,
195 | };
196 | 


--------------------------------------------------------------------------------
/src/Config.js:
--------------------------------------------------------------------------------
  1 | export const restaurentData =  [
  2 |     {
  3 |     "type": "restaurant",
  4 |     "data": {
  5 |     "type": "F",
  6 |     "id": "484553",
  7 |     "name": "Chai Point",
  8 |     "uuid": "60e27f02-f8f1-44fa-a9c0-177c53d56245",
  9 |     "city": "5",
 10 |     "area": "Bandra west",
 11 |     "totalRatingsString": "1000+ ratings",
 12 |     "cloudinaryImageId": "zno6ur1qmgaarwslcfoh",
 13 |     "cuisines": [
 14 |     "Bakery",
 15 |     "Beverages",
 16 |     "Maharashtrian",
 17 |     "Snacks",
 18 |     "Street Food",
 19 |     "South Indian",
 20 |     "Punjabi"
 21 |     ],
 22 |     "tags": [],
 23 |     "costForTwo": 15000,
 24 |     "costForTwoString": "₹150 FOR TWO",
 25 |     "deliveryTime": 44,
 26 |     "minDeliveryTime": 44,
 27 |     "maxDeliveryTime": 44,
 28 |     "slaString": "44 MINS",
 29 |     "lastMileTravel": 6,
 30 |     "slugs": {
 31 |     "restaurant": "chai-point-hill-road-bandra-west",
 32 |     "city": "mumbai"
 33 |     },
 34 |     "cityState": "5",
 35 |     "address": "Shop no 28, bandra liberty,CHS plot 98 B,hill road, bandra west,Mumbai-400050",
 36 |     "locality": "Hill road",
 37 |     "parentId": 1607,
 38 |     "unserviceable": false,
 39 |     "veg": false,
 40 |     "select": false,
 41 |     "favorite": false,
 42 |     "tradeCampaignHeaders": [],
 43 |     "aggregatedDiscountInfo": {
 44 |     "header": "40% off",
 45 |     "shortDescriptionList": [
 46 |     {
 47 |     "meta": "40% off | Use TRYNEW",
 48 |     "discountType": "Percentage",
 49 |     "operationType": "RESTAURANT"
 50 |     }
 51 |     ],
 52 |     "descriptionList": [
 53 |     {
 54 |     "meta": "40% off up to ₹80 | Use code TRYNEW",
 55 |     "discountType": "Percentage",
 56 |     "operationType": "RESTAURANT"
 57 |     }
 58 |     ],
 59 |     "subHeader": "",
 60 |     "headerType": 0,
 61 |     "superFreedel": ""
 62 |     },
 63 |     "aggregatedDiscountInfoV2": {
 64 |     "header": "40% OFF",
 65 |     "shortDescriptionList": [
 66 |     {
 67 |     "meta": "Use TRYNEW",
 68 |     "discountType": "Percentage",
 69 |     "operationType": "RESTAURANT"
 70 |     }
 71 |     ],
 72 |     "descriptionList": [
 73 |     {
 74 |     "meta": "40% off up to ₹80 | Use code TRYNEW",
 75 |     "discountType": "Percentage",
 76 |     "operationType": "RESTAURANT"
 77 |     }
 78 |     ],
 79 |     "subHeader": "",
 80 |     "headerType": 0,
 81 |     "superFreedel": ""
 82 |     },
 83 |     "ribbon": [
 84 |     {
 85 |     "type": "PROMOTED"
 86 |     }
 87 |     ],
 88 |     "chain": [],
 89 |     "feeDetails": {
 90 |     "fees": [
 91 |     {
 92 |     "name": "distance",
 93 |     "fee": 6600,
 94 |     "message": ""
 95 |     },
 96 |     {
 97 |     "name": "time",
 98 |     "fee": 0,
 99 |     "message": ""
100 |     },
101 |     {
102 |     "name": "special",
103 |     "fee": 0,
104 |     "message": ""
105 |     }
106 |     ],
107 |     "totalFees": 6600,
108 |     "message": "",
109 |     "title": "Delivery Charge",
110 |     "amount": "6600",
111 |     "icon": ""
112 |     },
113 |     "availability": {
114 |     "opened": true,
115 |     "nextOpenMessage": "",
116 |     "nextCloseMessage": ""
117 |     },
118 |     "longDistanceEnabled": 0,
119 |     "rainMode": "NONE",
120 |     "thirdPartyAddress": false,
121 |     "thirdPartyVendor": "",
122 |     "adTrackingID": "cid=6384965~p=1~eid=00000187-72fe-6309-001a-aa7f00b10120",
123 |     "badges": {
124 |     "imageBased": [],
125 |     "textBased": [],
126 |     "textExtendedBadges": []
127 |     },
128 |     "lastMileTravelString": "6 kms",
129 |     "hasSurge": false,
130 |     "sla": {
131 |     "restaurantId": "484553",
132 |     "deliveryTime": 44,
133 |     "minDeliveryTime": 44,
134 |     "maxDeliveryTime": 44,
135 |     "lastMileTravel": 6,
136 |     "lastMileDistance": 0,
137 |     "serviceability": "SERVICEABLE",
138 |     "rainMode": "NONE",
139 |     "longDistance": "NOT_LONG_DISTANCE",
140 |     "preferentialService": false,
141 |     "iconType": "EMPTY"
142 |     },
143 |     "promoted": true,
144 |     "avgRating": "4.3",
145 |     "totalRatings": 1000,
146 |     "new": false
147 |     },
148 |     "subtype": "basic"
149 |     },
150 |     {
151 |     "type": "restaurant",
152 |     "data": {
153 |     "type": "F",
154 |     "id": "651709",
155 |     "name": "Amritsari & Panjbai Paratha",
156 |     "uuid": "9898c234-f015-4aff-ad52-03a90afa0c83",
157 |     "city": "5",
158 |     "area": "Chembur",
159 |     "totalRatingsString": "Too Few Ratings",
160 |     "cloudinaryImageId": "edf7faef3a2a7cd17fa65385e3d76ed8",
161 |     "cuisines": [
162 |     "North Indian"
163 |     ],
164 |     "tags": [],
165 |     "costForTwo": 15000,
166 |     "costForTwoString": "₹150 FOR TWO",
167 |     "deliveryTime": 34,
168 |     "minDeliveryTime": 34,
169 |     "maxDeliveryTime": 34,
170 |     "slaString": "34 MINS",
171 |     "lastMileTravel": 2.799999952316284,
172 |     "slugs": {
173 |     "restaurant": "amritsari-&-panjbai-paratha-huda-city-huda-city",
174 |     "city": "mumbai"
175 |     },
176 |     "cityState": "5",
177 |     "address": "SHOP NO -85 M H B/6 BHARAT NAGAR.TILAK NAGAR ROAD NO 3 CHEMBUR GREATER MUMBAI WARD -M/W MAHARASHTRA -400089, Tilak Nagar, Greater Mumbai Ward-M/W, Greater Mumbai, Maharashtra, 400089",
178 |     "locality": "TILAK NAGAR ROAD NO 3",
179 |     "parentId": 268794,
180 |     "unserviceable": false,
181 |     "veg": false,
182 |     "select": false,
183 |     "favorite": false,
184 |     "tradeCampaignHeaders": [],
185 |     "aggregatedDiscountInfo": {
186 |     "header": "Flat ₹125 off",
187 |     "shortDescriptionList": [
188 |     {
189 |     "meta": "Flat ₹125 off on orders above ₹249",
190 |     "discountType": "Flat",
191 |     "operationType": "RESTAURANT"
192 |     }
193 |     ],
194 |     "descriptionList": [
195 |     {
196 |     "meta": "Flat ₹125 off on orders above ₹249 | Use code MATCHDEAL125",
197 |     "discountType": "Flat",
198 |     "operationType": "RESTAURANT"
199 |     }
200 |     ],
201 |     "subHeader": "",
202 |     "headerType": 0,
203 |     "superFreedel": ""
204 |     },
205 |     "aggregatedDiscountInfoV2": {
206 |     "header": "₹125 OFF",
207 |     "shortDescriptionList": [
208 |     {
209 |     "meta": "Use MATCHDEAL125",
210 |     "discountType": "Flat",
211 |     "operationType": "RESTAURANT"
212 |     }
213 |     ],
214 |     "descriptionList": [
215 |     {
216 |     "meta": "Flat ₹125 off on orders above ₹249 | Use code MATCHDEAL125",
217 |     "discountType": "Flat",
218 |     "operationType": "RESTAURANT"
219 |     }
220 |     ],
221 |     "subHeader": "",
222 |     "headerType": 0,
223 |     "superFreedel": ""
224 |     },
225 |     "chain": [],
226 |     "feeDetails": {
227 |     "fees": [
228 |     {
229 |     "name": "distance",
230 |     "fee": 3000,
231 |     "message": ""
232 |     },
233 |     {
234 |     "name": "time",
235 |     "fee": 0,
236 |     "message": ""
237 |     },
238 |     {
239 |     "name": "special",
240 |     "fee": 0,
241 |     "message": ""
242 |     }
243 |     ],
244 |     "totalFees": 3000,
245 |     "message": "",
246 |     "title": "Delivery Charge",
247 |     "amount": "3000",
248 |     "icon": ""
249 |     },
250 |     "availability": {
251 |     "opened": true,
252 |     "nextOpenMessage": "",
253 |     "nextCloseMessage": ""
254 |     },
255 |     "longDistanceEnabled": 0,
256 |     "rainMode": "NONE",
257 |     "thirdPartyAddress": false,
258 |     "thirdPartyVendor": "",
259 |     "adTrackingID": "",
260 |     "badges": {
261 |     "imageBased": [],
262 |     "textBased": [],
263 |     "textExtendedBadges": []
264 |     },
265 |     "lastMileTravelString": "2.7 kms",
266 |     "hasSurge": false,
267 |     "sla": {
268 |     "restaurantId": "651709",
269 |     "deliveryTime": 34,
270 |     "minDeliveryTime": 34,
271 |     "maxDeliveryTime": 34,
272 |     "lastMileTravel": 2.799999952316284,
273 |     "lastMileDistance": 0,
274 |     "serviceability": "SERVICEABLE",
275 |     "rainMode": "NONE",
276 |     "longDistance": "NOT_LONG_DISTANCE",
277 |     "preferentialService": false,
278 |     "iconType": "EMPTY"
279 |     },
280 |     "promoted": false,
281 |     "avgRating": "--",
282 |     "totalRatings": 0,
283 |     "new": false
284 |     },
285 |     "subtype": "basic"
286 |     },
287 |     {
288 |     "type": "restaurant",
289 |     "data": {
290 |     "type": "F",
291 |     "id": "24458",
292 |     "name": "Anna Idli",
293 |     "uuid": "86ffae7f-8b4c-4cb7-9fca-9c7190f6ac4c",
294 |     "city": "5",
295 |     "area": "Kurla",
296 |     "totalRatingsString": "10000+ ratings",
297 |     "cloudinaryImageId": "qey4uyhqmnhi4unruxa8",
298 |     "cuisines": [
299 |     "South Indian"
300 |     ],
301 |     "tags": [],
302 |     "costForTwo": 10000,
303 |     "costForTwoString": "₹100 FOR TWO",
304 |     "deliveryTime": 27,
305 |     "minDeliveryTime": 27,
306 |     "maxDeliveryTime": 27,
307 |     "slaString": "27 MINS",
308 |     "lastMileTravel": 3,
309 |     "slugs": {
310 |     "restaurant": "anna-idli-chembur-east-chembur",
311 |     "city": "mumbai"
312 |     },
313 |     "cityState": "5",
314 |     "address": "Anna Idli, Shop no. 4, building no.21, Gurukripa CHS Tilak Nagar, Chembur, Mumbai-400089",
315 |     "locality": "Tilak Nagar",
316 |     "parentId": 3790,
317 |     "unserviceable": false,
318 |     "veg": true,
319 |     "select": false,
320 |     "favorite": false,
321 |     "tradeCampaignHeaders": [],
322 |     "aggregatedDiscountInfo": {
323 |     "header": "10% off",
324 |     "shortDescriptionList": [
325 |     {
326 |     "meta": "10% off | Use TRYNEW",
327 |     "discountType": "Percentage",
328 |     "operationType": "RESTAURANT"
329 |     }
330 |     ],
331 |     "descriptionList": [
332 |     {
333 |     "meta": "10% off up to ₹40 | Use code TRYNEW",
334 |     "discountType": "Percentage",
335 |     "operationType": "RESTAURANT"
336 |     }
337 |     ],
338 |     "subHeader": "",
339 |     "headerType": 0,
340 |     "superFreedel": ""
341 |     },
342 |     "aggregatedDiscountInfoV2": {
343 |     "header": "10% OFF",
344 |     "shortDescriptionList": [
345 |     {
346 |     "meta": "Use TRYNEW",
347 |     "discountType": "Percentage",
348 |     "operationType": "RESTAURANT"
349 |     }
350 |     ],
351 |     "descriptionList": [
352 |     {
353 |     "meta": "10% off up to ₹40 | Use code TRYNEW",
354 |     "discountType": "Percentage",
355 |     "operationType": "RESTAURANT"
356 |     }
357 |     ],
358 |     "subHeader": "",
359 |     "headerType": 0,
360 |     "superFreedel": ""
361 |     },
362 |     "chain": [],
363 |     "feeDetails": {
364 |     "fees": [
365 |     {
366 |     "name": "distance",
367 |     "fee": 3600,
368 |     "message": ""
369 |     },
370 |     {
371 |     "name": "time",
372 |     "fee": 0,
373 |     "message": ""
374 |     },
375 |     {
376 |     "name": "special",
377 |     "fee": 0,
378 |     "message": ""
379 |     }
380 |     ],
381 |     "totalFees": 3600,
382 |     "message": "",
383 |     "title": "Delivery Charge",
384 |     "amount": "3600",
385 |     "icon": ""
386 |     },
387 |     "availability": {
388 |     "opened": true,
389 |     "nextOpenMessage": "",
390 |     "nextCloseMessage": ""
391 |     },
392 |     "longDistanceEnabled": 0,
393 |     "rainMode": "NONE",
394 |     "thirdPartyAddress": false,
395 |     "thirdPartyVendor": "",
396 |     "adTrackingID": "",
397 |     "badges": {
398 |     "imageBased": [],
399 |     "textBased": [],
400 |     "textExtendedBadges": []
401 |     },
402 |     "lastMileTravelString": "3 kms",
403 |     "hasSurge": false,
404 |     "sla": {
405 |     "restaurantId": "24458",
406 |     "deliveryTime": 27,
407 |     "minDeliveryTime": 27,
408 |     "maxDeliveryTime": 27,
409 |     "lastMileTravel": 3,
410 |     "lastMileDistance": 0,
411 |     "serviceability": "SERVICEABLE",
412 |     "rainMode": "NONE",
413 |     "longDistance": "NOT_LONG_DISTANCE",
414 |     "preferentialService": false,
415 |     "iconType": "EMPTY"
416 |     },
417 |     "promoted": false,
418 |     "avgRating": "3.9",
419 |     "totalRatings": 10000,
420 |     "new": false
421 |     },
422 |     "subtype": "basic"
423 |     },]
424 | 
425 | export const IMG_CDN = 'https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/'


--------------------------------------------------------------------------------