Skip to content

Commit 5511ea6

Browse files
ashishMECHAashishMECHA
committed
added categories functionality
1 parent 2e2bba0 commit 5511ea6

File tree

6 files changed

+123
-100
lines changed

6 files changed

+123
-100
lines changed

‎src/components/App.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import ProfileClass from "./ProfileClass"
1212
import { Provider } from "react-redux"
1313
import store from "../utils/store"
1414
import Search from "./Search"
15-
import Carousal from "./Carousal"
15+
1616

1717

1818
const AppLayout=()=>{
@@ -45,7 +45,6 @@ const appRouter = createBrowserRouter([
4545
{
4646
path: "/",
4747
element: <Body/>,
48-
4948
},
5049
{
5150
path: "/help",

‎src/components/Body.js‎

Lines changed: 49 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,52 @@
11
import React, { useEffect,useState } from "react";
22
import RestaurantCard from "./RestaurantCard";
33
import Shimmer from "./Shimmer";
4-
import { Link, Outlet } from "react-router-dom";
5-
import useOnline from "../utils/useOnline";
4+
import { Link } from "react-router-dom";
65
import { useDispatch, useSelector } from "react-redux";
76
import { addData } from "../utils/restaurantSlice";
87
import { addItems } from "../utils/carousalSlice";
98
import Carousal from "./Carousal";
10-
import { keywords } from "./Categories";
9+
import { CATEGORIES_URL } from "./Constants";
10+
import { redirect } from "react-router-dom";
11+
import { useNavigate } from "react-router-dom";
1112

1213

1314
const Body = () => {
1415
const dispatch = useDispatch();
1516
const restaurants = useSelector((store)=>store.restaurant.allRestaurant);
16-
const[activeElement, setActiveElement]= useState("Relevance")
17-
const[restrau, setRestrau] = useState([]);
18-
const[dTRestaurants, setDTRestaurants] = useState([])
19-
const[costL2H, setCostL2H] = useState([])
20-
const[costH2L, setCostH2L] = useState([])
21-
17+
const[activeElement, setActiveElement]= useState("")
18+
const[sort, setSorts ] = useState([]);
19+
const[categoryRestaurants, setcategoryRestaurants] = useState([])
20+
const[showShimmer, setShowShimmer] = useState(false)
21+
const navigate = useNavigate();
2222

23-
const handleClick=(value)=>{
24-
setActiveElement(value);
23+
const handleClick=(value,param)=>{
24+
setShowShimmer(true)
25+
setActiveElement(value)
26+
if(param ==="RELEVANCE"){
27+
setShowShimmer(false)
28+
navigate("/")
29+
return;
30+
}
31+
getByCategoryData(param)
2532
}
26-
// console.log(restaurants[0])
33+
34+
2735
useEffect(() => {
2836
getRestaurant();
29-
getByRating();
30-
getByDeliveryTime();
31-
getByCostL2H()
32-
getByCostH2L()
3337
}, []);
3438

39+
40+
41+
42+
43+
async function getByCategoryData(param) {
44+
const data = await fetch(CATEGORIES_URL + param);
45+
const response = await data.json();
46+
setcategoryRestaurants(response?.data?.cards[0]?.data?.data?.cards);
47+
setShowShimmer(false);
48+
console.log(categoryRestaurants)
49+
}
3550

3651
async function getRestaurant() {
3752
const data = await fetch(
@@ -40,46 +55,11 @@ const Body = () => {
4055
const json = await data.json();
4156
dispatch(addData(json?.data?.cards[2]?.data?.data?.cards))
4257
dispatch(addItems(json?.data?.cards[0]?.data?.data?.cards))
43-
44-
}
45-
console.log("RESTAURANTS---->"+restaurants)
46-
async function getByRating() {
47-
const data = await fetch(
48-
"https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.7095&lng=76.7744&sortBy=RATING&page_type=DESKTOP_WEB_LISTING"
49-
);
50-
const json = await data.json();
51-
setRestrau(json?.data?.cards[0]?.data?.data?.cards);
52-
console.log("BY RATING---->"+restrau)
53-
}
54-
async function getByDeliveryTime() {
55-
const data = await fetch(
56-
"https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.7095&lng=76.7744&sortBy=DELIVERY_TIME&page_type=DESKTOP_WEB_LISTING"
57-
);
58-
const response = await data.json();
59-
setDTRestaurants(response?.data?.cards[0]?.data?.data?.cards);
60-
console.log("BY DT---->"+dTRestaurants);
58+
setSorts(json.data.sorts);
6159
}
62-
async function getByCostL2H() {
63-
const data = await fetch(
64-
"https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.7095&lng=76.7744&sortBy=COST_FOR_TWO&page_type=DESKTOP_WEB_LISTING"
65-
);
66-
const response = await data.json();
67-
setCostL2H(response?.data?.cards[0]?.data?.data?.cards);
68-
console.log("BY L2H---->"+costL2H);
69-
}
70-
async function getByCostH2L() {
71-
const data = await fetch(
72-
"https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.7095&lng=76.7744&sortBy=COST_FOR_TWO_H2L&page_type=DESKTOP_WEB_LISTING"
73-
);
74-
const response = await data.json();
75-
setCostH2L(response?.data?.cards[0]?.data?.data?.cards);
76-
}
77-
78-
79-
// const online = useOnline();
80-
// if (!online) {
81-
// return <h1>Offline!! Please check your internet connection</h1>;
82-
// }
60+
61+
62+
8363
if (!restaurants) return null;
8464
return restaurants?.length === 0 ? (
8565
<Shimmer />
@@ -93,44 +73,20 @@ const Body = () => {
9373
{restaurants[0].length} restaurants
9474
</div>
9575
<div className='flex gap-x-9 text-center items-center cursor-pointer'>
96-
{
97-
keywords.map((value,i)=>(
98-
<p onClick={()=>handleClick(value)} key={i} className={activeElement === value ? 'border-b-[1px] border-b-[#161824] cursor-pointer' :'cursor-pointer hover:text-[#161824]'}>{value}</p>
99-
))
100-
}
76+
{Object.values(sort).map((category,i)=>(
77+
<p onClick={()=>handleClick(category.title,category.key)} key={category.key} className={activeElement === category.title ? 'border-b-[1px] border-b-[#161824] cursor-pointer' :'cursor-pointer hover:text-[#161824]'}>{category.title}</p>
78+
))}
10179
</div>
10280
</div>
10381

104-
{activeElement==="Rating"? <div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
105-
{restrau.map((card)=>(
106-
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
107-
<RestaurantCard {...card.data}/>
108-
</Link>
109-
))}
110-
111-
112-
</div>: activeElement==="Delivery Time"? <div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
113-
{dTRestaurants.map((card)=>(
114-
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
115-
<RestaurantCard {...card.data}/>
116-
</Link>
117-
))}
118-
119-
120-
</div> : activeElement==="Cost: Low To High"? <div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
121-
{costL2H.map((card)=>(
122-
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
123-
<RestaurantCard {...card.data}/>
124-
</Link>
125-
))}
126-
</div> : activeElement==="Cost: High To Low"? <div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
127-
{costH2L.map((card)=>(
128-
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
129-
<RestaurantCard {...card.data}/>
130-
</Link>
131-
))}
132-
</div> :
133-
82+
{/***** CARDS ****/}
83+
{activeElement? <div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
84+
{categoryRestaurants.length===0 || showShimmer?<Shimmer/>:categoryRestaurants.map((card)=>(
85+
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
86+
<RestaurantCard {...card.data}/>
87+
</Link>
88+
))}
89+
</div> :
13490
<div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
13591
{Object.values(restaurants[0]).map((card)=>(
13692
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
@@ -142,3 +98,6 @@ const Body = () => {
14298
);
14399
}
144100
export default Body;
101+
102+
103+

‎src/components/Categories.js‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,38 @@
1+
export const keywords = [
2+
"Relevance",
3+
"Delivery Time",
4+
"Rating",
5+
"Cost: Low To High",
6+
"Cost: High To Low",
7+
]
8+
9+
10+
11+
12+
13+
14+
15+
16+
17+
18+
19+
20+
21+
22+
23+
24+
25+
26+
27+
28+
29+
30+
31+
32+
33+
34+
35+
136
// import React, { useState } from 'react'
237
// import { useSelector } from 'react-redux';
338

@@ -26,10 +61,3 @@
2661
// }
2762

2863
// export default Categories
29-
export const keywords = [
30-
"Relevance",
31-
"Delivery Time",
32-
"Rating",
33-
"Cost: Low To High",
34-
"Cost: High To Low",
35-
]

‎src/components/CategoriesContent.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useState, useEffect } from "react";
2+
import { Link, useParams, useSearchParams } from "react-router-dom";
3+
import { CATEGORIES_URL} from "./Constants";
4+
import RestaurantCard from "./RestaurantCard";
5+
6+
7+
export const Category = () => {
8+
const[sortWidget, setSortWidget] = useState(false);
9+
const[categoryRestaurants, setcategoryRestaurants] = useState([])
10+
useEffect(()=>{
11+
getByCategoryData()
12+
},[])
13+
14+
const {category} = useParams()
15+
console.log("category---> "+category)
16+
17+
async function getByCategoryData() {
18+
const data = await fetch(CATEGORIES_URL + category);
19+
const response = await data.json();
20+
console.log("RESPONSE--> "+response)
21+
setcategoryRestaurants(response?.data?.cards[0]?.data?.data?.cards);
22+
console.log(categoryRestaurants)
23+
}
24+
return(
25+
<div className="flex flex-wrap pl-10 gap-x-10 text-sm gap-y-8 mb-24">
26+
{Object.values(categoryRestaurants).map((card)=>(
27+
<Link to={"/restaurant/" + card.data.id} key={card.data.id}>
28+
<RestaurantCard {...card.data}/>
29+
</Link>
30+
))}
31+
</div>
32+
)
33+
}

‎src/components/Constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ export const IMG_CDN_URL =
66
export const FETCH_MENU_URL =
77
"https://www.swiggy.com/dapi/menu/v4/full?lat=12.9351929&lng=77.62448069999999&menuId=";
88

9+
export const CATEGORIES_URL =
10+
"https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.7095&lng=76.7744&page_type=DESKTOP_WEB_LISTING&sortBy="
11+
12+
913
export const CAROUSAL_IMG_CDN =
1014
"https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_520,h_520/";
1115

‎src/components/RestaurantCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const RestaurantCard = ({name, cloudinaryImageId, cuisines, avgRating, deliveryT
2323
<div className="w-72 h-[21rem] p-5 hover:shadow-2xl">
2424
<img src={"https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_508,h_320,c_fill/"+ cloudinaryImageId} alt="" />
2525
<h2 className="pb-1 text-slate-800 font-semibold text-base pt-[6px]">{name}</h2>
26-
<h3 className="text-gray-500 text-xs w-4/5 overflow-hidden h-[32px]">{cuisines.join(', ')}</h3>
26+
<h3 className="text-gray-500 text-xs w-4/5 overflow-hidden h-[32px]">{cuisines}</h3>
2727
<div className="pt-2 flex justify-between border-b pb-4">
2828
<p className="pl-1 pr-1 text-xs flex items-center text-stone-50 gap-x-1" style={styleRating}><AiFillStar/>{avgRating}</p>
2929
<div className="text-gray-500">•</div>

0 commit comments

Comments
 (0)