Skip to content

Jay Mehta / zango-frontend

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

.

1 parent 98208f30
Expand all
Inline Side-by-side
Showing 5 changed files with 30 additions and 10 deletions
components/listing/ListingFilter.js
...@@ -12,6 +12,8 @@ const format = "HH:mm"; ...@@ -12,6 +12,8 @@ const format = "HH:mm";
const suitableAgeGroups = [2, 5, 8, 10, 12, 14, 16]; const suitableAgeGroups = [2, 5, 8, 10, 12, 14, 16];
const ListingFilter = () => { const ListingFilter = () => {
const [showContent, setShowContent] = useState(false); const [showContent, setShowContent] = useState(false);
const [sliderLowerValue, setsliderLowerValue] = useState(0);
const [sliderUpperValue, setsliderUpperValue] = useState(5000);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { activityFilters } = useSelector(sate => sate.activityFilters); const { activityFilters } = useSelector(sate => sate.activityFilters);
const { subCategories, loading } = useSelector(sate => sate.subCategories); const { subCategories, loading } = useSelector(sate => sate.subCategories);
...@@ -31,7 +33,9 @@ const ListingFilter = () => { ...@@ -31,7 +33,9 @@ const ListingFilter = () => {
<a <a
onClick={e => { onClick={e => {
e.preventDefault(); e.preventDefault();
dispatch(setActivityFilters({ filters: {} })); dispatch(setActivityFilters({ filters: { priceLowerLimit: 0, priceUpperLimit: 5000 } }));
setsliderLowerValue(0);
setsliderUpperValue(5000);
}} }}
> >
Reset Reset
...@@ -48,7 +52,8 @@ const ListingFilter = () => { ...@@ -48,7 +52,8 @@ const ListingFilter = () => {
</div> </div>
<div className="inner"> <div className="inner">
<div className="price"> <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>
<div className="graph"> <div className="graph">
<Slider <Slider
...@@ -57,22 +62,30 @@ const ListingFilter = () => { ...@@ -57,22 +62,30 @@ const ListingFilter = () => {
}} }}
step={10} step={10}
onChange={e => { 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] } })); dispatch(setActivityFilters({ filters: { ...activityFilters, priceLowerLimit: e[0], priceUpperLimit: e[1] } }));
// setTimeout(() => { // setTimeout(() => {
// }, 1000); // }, 1000);
}} }}
defaultValue={[0, 1000]} defaultValue={[
activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0,
activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000
]}
value={[sliderLowerValue, sliderUpperValue]}
// min={0} // min={0}
max={1000} max={5000}
tooltip={{ tooltip={{
open: true open: true
}} }}
/> />
<div className="graph-price"> {/* <div className="graph-price">
<div className="min">$0</div> <div className="min"> ${activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0}</div>
<div className="min">$1000</div> <div className="min">${activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000}</div>
</div> </div> */}
{/* <img className="img-fluid w-100" src="/images/buget.svg" /> */} {/* <img className="img-fluid w-100" src="/images/buget.svg" /> */}
</div> </div>
</div> </div>
......
components/listing/ListingInner.js
...@@ -93,6 +93,9 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => { ...@@ -93,6 +93,9 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
if (activityFilters.priceUpperLimit) { if (activityFilters.priceUpperLimit) {
filters["priceUpperLimit"] = activityFilters.priceUpperLimit; filters["priceUpperLimit"] = activityFilters.priceUpperLimit;
} }
if (activityFilters.priceLowerLimit) {
filters["priceLowerLimit"] = activityFilters.priceLowerLimit;
}
console.log("router query", filters.category); console.log("router query", filters.category);
dispatch( dispatch(
getActivitiesByFilters({ getActivitiesByFilters({
...@@ -108,6 +111,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => { ...@@ -108,6 +111,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
ageLowerLimit: filters.ageLowerLimit, ageLowerLimit: filters.ageLowerLimit,
sort: filters.sort, sort: filters.sort,
priceUpperLimit: filters.priceUpperLimit, priceUpperLimit: filters.priceUpperLimit,
priceLowerLimit: filters.priceLowerLimit,
currentPage: router.query.page currentPage: router.query.page
}) })
); );
......
redux/actions/activityAction.js
...@@ -498,6 +498,9 @@ export const getActivitiesByFilters = ...@@ -498,6 +498,9 @@ export const getActivitiesByFilters =
if (priceUpperLimit) { if (priceUpperLimit) {
query.filters["pricePerPerson"] = { $lte: priceUpperLimit }; query.filters["pricePerPerson"] = { $lte: priceUpperLimit };
} }
if (priceUpperLimit) {
query.filters["pricePerPerson"] = { $gte: priceLowerLimit };
}
// console.log("subcategoryquery:", query); // console.log("subcategoryquery:", query);
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
......
redux/reducers/activitiesReducer.js
...@@ -130,7 +130,7 @@ export const updateActivityByIdReducer = (state = {}, action) => { ...@@ -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) { switch (action.type) {
case ACTIVITY_FILTERS_CONSTANT: case ACTIVITY_FILTERS_CONSTANT:
return { return {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!