Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 281ae5a0 by jaymehta
Options

.

1 parent 98208f30
Inline Side-by-side
Showing 5 changed files with 163 additions and 126 deletions
components/listing/ListingFilter.js
......@@ -12,6 +12,8 @@ const format = "HH:mm";
const suitableAgeGroups = [2, 5, 8, 10, 12, 14, 16];
const ListingFilter = () => {
const [showContent, setShowContent] = useState(false);
const [sliderLowerValue, setsliderLowerValue] = useState(0);
const [sliderUpperValue, setsliderUpperValue] = useState(5000);
const dispatch = useDispatch();
const { activityFilters } = useSelector(sate => sate.activityFilters);
const { subCategories, loading } = useSelector(sate => sate.subCategories);
......@@ -31,7 +33,9 @@ const ListingFilter = () => {
<a
onClick={e => {
e.preventDefault();
dispatch(setActivityFilters({ filters: {} }));
dispatch(setActivityFilters({ filters: { priceLowerLimit: 0, priceUpperLimit: 5000 } }));
setsliderLowerValue(0);
setsliderUpperValue(5000);
}}
>
Reset
......@@ -48,7 +52,8 @@ const ListingFilter = () => {
</div>
<div className="inner">
<div className="price">
$0 - 1000 <span className="sub-text"></span>
${activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0} - ${activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000}{" "}
<span className="sub-text"></span>
</div>
<div className="graph">
<Slider
......@@ -57,22 +62,30 @@ const ListingFilter = () => {
}}
step={10}
onChange={e => {
// console.log(e);
setsliderLowerValue(e[0]);
setsliderUpperValue(e[1]);
}}
onChangeComplete={e => {
console.log(e);
dispatch(setActivityFilters({ filters: { ...activityFilters, priceLowerLimit: e[0], priceUpperLimit: e[1] } }));
// setTimeout(() => {
// }, 1000);
}}
defaultValue={[0, 1000]}
defaultValue={[
activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0,
activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000
]}
value={[sliderLowerValue, sliderUpperValue]}
// min={0}
max={1000}
max={5000}
tooltip={{
open: true
}}
/>
<div className="graph-price">
<div className="min">$0</div>
<div className="min">$1000</div>
</div>
{/* <div className="graph-price">
<div className="min"> ${activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0}</div>
<div className="min">${activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000}</div>
</div> */}
{/* <img className="img-fluid w-100" src="/images/buget.svg" /> */}
</div>
</div>
......
components/listing/ListingInner.js
......@@ -93,6 +93,9 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
if (activityFilters.priceUpperLimit) {
filters["priceUpperLimit"] = activityFilters.priceUpperLimit;
}
if (activityFilters.priceLowerLimit) {
filters["priceLowerLimit"] = activityFilters.priceLowerLimit;
}
console.log("router query", filters.category);
dispatch(
getActivitiesByFilters({
......@@ -108,6 +111,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
ageLowerLimit: filters.ageLowerLimit,
sort: filters.sort,
priceUpperLimit: filters.priceUpperLimit,
priceLowerLimit: filters.priceLowerLimit,
currentPage: router.query.page
})
);
......
components/listing/ListingItems.js
......@@ -23,8 +23,9 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
// }, [router]);
console.log("endUser", endUser);
// console.log("router", router);
let { page, location = "" } = router.query;
page = Number(page);
const [page, setpage] = useState(1);
// let { page, location = "" } = router.query;
// page = Number(page);
let queryParams;
......@@ -37,6 +38,7 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
// We have done this to take care of keeping the search filters in the query params
// when we end up changing the page number.
setpage(pageNumber);
if (queryParams.has("page")) {
queryParams.set("page", pageNumber);
} else {
......@@ -55,7 +57,7 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
}, []);
const calculateRating = data => {
let value = 0
let value = 0;
data.map(item => {
// console.log("item", item);
value = value + item.attributes.rating;
......@@ -66,132 +68,147 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
};
return (
<>
{allActivitiesData && !allActivitiesData.data.length == 0 ? (
<div className="listing-items">
{!loading ? (
<div className="row">
{allActivitiesData &&
allActivitiesData.data.map(data => {
return (
<div className={gridClass}>
<div className="item">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
{data.attributes.rating > 100 && <div className="top-rated">Top Rated</div>}
</div>
<div className="info">
<div className="top-name">
<Link href={`/activities/${data.id}`}>
<div className="title">{data?.attributes?.name}</div>
</Link>
<div className="rating-wishlist">
{data?.attributes?.reviews.data.length > 0 && <div className="rating">
{/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
{<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>}
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
</div>
</div>
<div className="discription">
{data?.attributes.description.slice(0, 70)}
<a
onClick={() => {
// setreadMoreText(data);
// setshowModal(true);
}}
>
Read More
</a>
</div>
<div className="price">
${data?.attributes?.pricePerPerson}{" "}
<span className="off">
{data?.attributes?.off}
{/* % OFF */}
{
// allActivitiesData && !allActivitiesData.data.length == 0 ?
!loading ? (
<div className="listing-items">
{allActivitiesData && !allActivitiesData.data.length == 0 ? (
<div className="row">
{allActivitiesData &&
allActivitiesData.data.map((data, i) => {
return (
<div key={i} className={gridClass}>
<div className="item">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
{data.attributes.rating > 100 && <div className="top-rated">Top Rated</div>}
</div>
<div className="detail">
{/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button
onClick={() => {
router.push(`/activities/${data.id}`);
}}
variant="primary"
>
Explore Now
</Button>
<div className="info">
<div className="top-name">
<Link href={`/activities/${data.id}`}>
<div className="title">{data?.attributes?.name}</div>
</Link>
<div className="rating-wishlist">
{data?.attributes?.reviews.data.length > 0 && (
<div className="rating">
{/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
{<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
)}
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
</div>
</div>
<div className="discription">
{data?.attributes.description.slice(0, 70)}
<a
onClick={() => {
// setreadMoreText(data);
// setshowModal(true);
}}
>
Read More
</a>
</div>
<div className="price">
${data?.attributes?.pricePerPerson}{" "}
<span className="off">
{data?.attributes?.off}
{/* % OFF */}
</span>
</div>
<div className="detail">
{/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button
onClick={() => {
router.push(`/activities/${data.id}`);
}}
variant="primary"
>
Explore Now
</Button>
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
) : (
<div className="container">
<Empty />
</div>
// <div className="container">
// <div className="py-5">
// <div className="row">
// {[1, 2, 3, 5, 5, 5, 5, 5, 5].map((_, index) => (
// <div key={index} className="col-lg-3 col-md-3 col-sm-12 my-3">
// <div className="d-inline-flex flex-column">
// <Skeleton.Button active style={{ height: 250, width: 270 }} />
// <Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
// </div>
// </div>
// ))}
// </div>
// </div>
// </div>
)}
</div>
) : (
<div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3, 5, 5, 5, 5, 5, 5].map((_, index) => (
<div key={index} className="col-lg-3 col-md-3 col-sm-12 my-3">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 270 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
);
})}
</div>
) : (
<div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3, 5, 5, 5, 5, 5, 5].map(() => (
<div className="col-lg-3 col-md-3 col-sm-12 my-3">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 270 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
)}
</div>
) : (
<div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3, 5, 5, 5, 5, 5, 5].map(() => (
<div className="col-lg-3 col-md-3 col-sm-12 my-3">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 270 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
</div>
))}
</div>
// <div className="container">
// <Empty />
// </div>
)
}
{totalCount && (
<div className="row">
<div className="col-12">
<div className="load-more">
{/* {console.log("totalCount", totalCount)} */}
<Pagination
activePage={page}
hideNavigation={true}
itemsCountPerPage={12}
totalItemsCount={totalCount}
pageRangeDisplayed={5}
onChange={async e => {
console.log("log >", e);
await handlePagination(e);
}}
nextPageText={"›"}
prevPageText={"‹"}
firstPageText={"«"}
lastPageText={"»"}
itemClass="page-item"
linkClass="page-link"
></Pagination>
</div>
</div>
</div>
)}
<div className="row">
<div className="col-12">
<div className="load-more">
<Pagination
activePage={page}
hideNavigation={true}
itemsCountPerPage={12}
totalItemsCount={totalCount}
onChange={async e => {
console.log("log >", e);
await handlePagination(e);
}}
// nextPageText={"›"}
// prevPageText={"‹"}
// firstPageText={"«"}
// lastPageText={"»"}
itemClass="page-item"
linkClass="page-link"
></Pagination>
</div>
</div>
</div>
</>
);
};
......
redux/actions/activityAction.js
......@@ -498,6 +498,9 @@ export const getActivitiesByFilters =
if (priceUpperLimit) {
query.filters["pricePerPerson"] = { $lte: priceUpperLimit };
}
if (priceUpperLimit) {
query.filters["pricePerPerson"] = { $gte: priceLowerLimit };
}
// console.log("subcategoryquery:", query);
const queryString = qs.stringify(query, {
......
redux/reducers/activitiesReducer.js
......@@ -130,7 +130,7 @@ export const updateActivityByIdReducer = (state = {}, action) => {
}
};
export const setActivityFilterReducer = (state = { activityFilters: {} }, action) => {
export const setActivityFilterReducer = (state = { activityFilters: {priceLowerLimit: 0, priceUpperLimit: 5000} }, action) => {
switch (action.type) {
case ACTIVITY_FILTERS_CONSTANT:
return {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!