Skip to content

Commit 625cf21

Browse files
DiivvuuDiivvuu
committed
search section working done,
started restaurant menu
1 parent aa01455 commit 625cf21

13 files changed

+1147
-145
lines changed

‎package-lock.json

Lines changed: 87 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@testing-library/react": "^13.4.0",
1313
"@testing-library/user-event": "^13.5.0",
1414
"lodash": "^4.17.21",
15+
"node-fetch": "^3.3.2",
1516
"react": "^18.3.1",
1617
"react-dom": "^18.3.1",
1718
"react-icons": "^5.2.1",
@@ -46,5 +47,10 @@
4647
},
4748
"devDependencies": {
4849
"tailwindcss": "^3.4.3"
49-
}
50-
}
50+
},
51+
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
52+
"main": "tailwind.config.js",
53+
"keywords": [],
54+
"author": "",
55+
"license": "ISC"
56+
}

‎src/App.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Help from "./components/Help";
1212
import SignIn from "./components/SignIn";
1313
import Cart from "./components/Cart";
1414
import Clone from "./components/Clone";
15+
import RestaurantMenu from "./components/RestaurantMenu";
1516
const AppLayout = () => {
1617
return (
1718
<div>
@@ -52,8 +53,8 @@ const appRouter = createBrowserRouter([
5253
element: <Cart />,
5354
},
5455
{
55-
path: "clone",
56-
element: <Clone />,
56+
path: "restaurant/:id",
57+
element: <RestaurantMenu />,
5758
},
5859
],
5960
},

‎src/Hooks/usePopularCuisinesData.js

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,35 @@ import { swiggySearchAPI } from "../helpers/Constant";
44
import { useSelector } from "react-redux";
55

66
const usePopularCuisinesData = () => {
7-
const locDetails = useSelector((store) => store.location.locationDetails);
8-
const [latitude, setLatitude] = useState(locDetails[0].lat);
9-
const [longitude, setLongitude] = useState(locDetails[0].lng);
10-
const [popularCuisines, setPopularCuisines] = useState([]);
11-
async function getPopularCuisines() {
12-
const data = await fetch(swiggySearchAPI(latitude, longitude));
13-
const json = await data.json();
14-
const popularCuisinesData = json?.data?.cards
15-
?.map((x) => {
16-
return x?.card?.card;
17-
})
18-
?.filter((x) => {
19-
return x["id"] === "PopularCuisinessearchpage";
20-
})
21-
?.map((x) => {
22-
return x?.gridElements?.infoWithStyle?.info;
23-
});
24-
setPopularCuisines(...popularCuisinesData);
25-
}
26-
useEffect(() => {
27-
if (locDetails && locDetails[0]) {
28-
const newLatitude = locDetails[0].lat;
29-
const newLongitude = locDetails[0].lng;
30-
setLatitude(newLatitude);
31-
setLongitude(newLongitude);
32-
getPopularCuisines(newLatitude, newLongitude);
7+
const locDetails = useSelector((store) => store.location.locationDetails);
8+
const [latitude, setLatitude] = useState(locDetails[0].lat);
9+
const [longitude, setLongitude] = useState(locDetails[0].lng);
10+
const [popularCuisines, setPopularCuisines] = useState([]);
11+
async function getPopularCuisines() {
12+
const data = await fetch(swiggySearchAPI(latitude, longitude));
13+
const json = await data.json();
14+
const popularCuisinesData = json?.data?.cards
15+
?.map((x) => {
16+
return x?.card?.card;
17+
})
18+
?.filter((x) => {
19+
return x["id"] === "PopularCuisinessearchpage";
20+
})
21+
?.map((x) => {
22+
return x?.gridElements?.infoWithStyle?.info;
23+
});
24+
setPopularCuisines(...popularCuisinesData);
3325
}
34-
}, [locDetails]);
35-
return [popularCuisines];
36-
};
26+
useEffect(() => {
27+
if (locDetails && locDetails[0]) {
28+
const newLatitude = locDetails[0].lat;
29+
const newLongitude = locDetails[0].lng;
30+
setLatitude(newLatitude);
31+
setLongitude(newLongitude);
32+
getPopularCuisines(newLatitude, newLongitude);
33+
}
34+
}, [locDetails]);
35+
return [popularCuisines];
36+
}
3737

38-
export default usePopularCuisinesData;
38+
export default usePopularCuisinesData;

‎src/Hooks/useRestaurantMenu.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { useEffect, useState } from "react";
2+
import { useSelector } from "react-redux";
3+
import { REST_API_MENU_URL } from "../helpers/Constant";
4+
5+
const useRestaurantMenu = (id) => {
6+
const locDetails = useSelector((store) => store.location.locationDetails);
7+
const [latitude, setLatitude] = useState(locDetails[0].lat);
8+
};
9+
10+
export default useRestaurantMenu;

‎src/components/RestaurantCard.js

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,69 @@ import React from "react";
22
import { RES_CARD_IMG_CDN_URL } from "../helpers/Constant";
33
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
44
import { faStar } from "@fortawesome/free-solid-svg-icons";
5+
import { Link } from "react-router-dom";
56

67
const RestaurantCard = ({
8+
id,
79
areaName,
810
avgRating,
911
name,
1012
cloudinaryImageId,
1113
aggregatedDiscountInfoV3,
1214
sla,
15+
isOpen,
1316
cuisines,
17+
locationSearchVisibility,
1418
}) => {
1519
return (
16-
<div className="cursor-pointer transition-all ease-in delay-100 hover:scale-90 hover:origin-center">
17-
<div className="relative w-72 h-48">
18-
{cloudinaryImageId && (
19-
<img
20-
className="w-full h-full object-cover rounded-2xl"
21-
src={RES_CARD_IMG_CDN_URL + cloudinaryImageId}
22-
alt={name}
23-
/>
24-
)}
20+
<div key={id} className={`${locationSearchVisibility ? "-z-10" : ""}`}>
21+
<Link
22+
to={isOpen ? "/restaurant/" + id : ""}
23+
key={id}
24+
className={`grid grid-flow-row justify-stretch h-auto transition-all ease-in delay-100 hover:scale-95 hover:origin-center ${
25+
isOpen ? "cursor-pointer" : "cursor-not-allowed"
26+
}`}
27+
>
28+
<div className="relative w-72 h-48">
29+
{cloudinaryImageId && (
30+
<img
31+
className="w-full h-full object-cover rounded-2xl"
32+
src={RES_CARD_IMG_CDN_URL + cloudinaryImageId}
33+
alt={name}
34+
/>
35+
)}
2536

26-
{aggregatedDiscountInfoV3 && (
27-
<span className="flex absolute bottom-0 w-full bg-gradient-to-t from-black to-transparent shadow-md text-white p-3 rounded-b-2xl">
28-
<h1 className="text-2xl font-extrabold">
29-
{aggregatedDiscountInfoV3?.header}
30-
{aggregatedDiscountInfoV3?.subHeader && (
31-
<span>&nbsp;{aggregatedDiscountInfoV3.subHeader}</span>
32-
)}
33-
</h1>
34-
</span>
35-
)}
36-
</div>
37+
{aggregatedDiscountInfoV3 && (
38+
<span className="flex absolute bottom-0 w-full bg-gradient-to-t from-black to-transparent shadow-md text-white p-3 rounded-b-2xl">
39+
<h1 className="text-2xl font-extrabold">
40+
{aggregatedDiscountInfoV3?.header}
41+
{aggregatedDiscountInfoV3?.subHeader && (
42+
<span>&nbsp;{aggregatedDiscountInfoV3.subHeader}</span>
43+
)}
44+
</h1>
45+
</span>
46+
)}
47+
</div>
3748

38-
<div className="px-4 pt-2">
39-
<h1 className="w-64 truncate text-[1.4rem] font-[700]" title={name}>
40-
{name}
41-
</h1>
49+
<div className="px-4 pt-2">
50+
<h1 className="w-64 truncate text-[1.4rem] font-[700]" title={name}>
51+
{name}
52+
</h1>
4253

43-
<div className="flex items-center font-semibold text-lg gap-2">
44-
<FontAwesomeIcon
45-
icon={faStar}
46-
className="bg-green-700 text-xs text-white p-1 rounded-full"
47-
/>{" "}
48-
{avgRating}
49-
{" • "}
50-
{sla.slaString}
51-
</div>
52-
<div className="truncate w-64">
53-
<p>{cuisines.join(", ")}</p>
54+
<div className="flex items-center font-semibold text-lg gap-2">
55+
<FontAwesomeIcon
56+
icon={faStar}
57+
className="bg-green-700 text-xs text-white p-1 rounded-full"
58+
/>{" "}
59+
{avgRating}
60+
{" • "}
61+
{sla.slaString}
62+
</div>
63+
<div className="truncate w-64">
64+
<p>{cuisines.join(", ")}</p>
65+
</div>
5466
</div>
55-
</div>
67+
</Link>
5668
</div>
5769
);
5870
};

‎src/components/RestaurantMenu.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import { REST_API_MENU_URL } from "../helpers/Constant";
3+
import useRestaurantMenu from "../Hooks/useRestaurantMenu";
4+
import { useSelector } from "react-redux";
5+
import { useState, useEffect } from "react";
6+
import { useParams } from "react-router-dom";
7+
8+
const RestaurantMenu = () => {
9+
const { id } = useParams();
10+
const [resDetails] = useRestaurantMenu(id);
11+
return <div></div>;
12+
};
13+
14+
export default RestaurantMenu;

0 commit comments

Comments
 (0)