Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 01b03689 by jaymehta
Options

.

1 parent 9bfe74c0
Inline Side-by-side
Showing 3 changed files with 64 additions and 23 deletions
components/listing/ListingFilter.js
import Image from "next/image"; import Image from "next/image";
import React, { useState } from "react"; import React, { useState } from "react";
import { Accordion, Form } from "react-bootstrap"; import { Accordion, Form } from "react-bootstrap";
import { Slider } from "antd"; import { Dropdown, Slider } from "antd";
import { DatePicker, Space } from "antd"; import { DatePicker, Space } from "antd";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setActivityFilters } from "../../redux/actions/activityAction"; import { setActivityFilters } from "../../redux/actions/activityAction";
import { TimePicker } from "antd"; import { TimePicker } from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { Input } from "react-bootstrap-typeahead"; import { Input } from "react-bootstrap-typeahead";
import { DownOutlined } from "@ant-design/icons";
const format = "HH:mm"; const format = "HH:mm";
const suitableAgeGroups = [[2, 5], [5, 10], [10, 16], [16, 18], [18]]; const suitableAgeGroups = [[2, 5], [5, 10], [10, 16], [16, 18], [18]];
const ListingFilter = () => { const ListingFilter = () => {
...@@ -32,6 +33,33 @@ const ListingFilter = () => { ...@@ -32,6 +33,33 @@ const ListingFilter = () => {
// Can not select days before today and today // Can not select days before today and today
return current && current < dayjs(customDate).startOf("day"); return current && current < dayjs(customDate).startOf("day");
}; };
const onClick = ({ key }) => {
// message.info(`Click on item ${key}`);
console.log("key", key, suitableAgeGroups[key - 1]);
dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: suitableAgeGroups[key - 1] } }));
};
const items = [
{
label: "2 - 5",
key: "1"
},
{
label: "5 - 10",
key: "2"
},
{
label: "10 - 16",
key: "3"
},
{
label: "16 - 18",
key: "4"
},
{
label: "18+",
key: "5"
}
];
return ( return (
<> <>
<div className="listing-filter"> <div className="listing-filter">
...@@ -371,35 +399,39 @@ const ListingFilter = () => { ...@@ -371,35 +399,39 @@ const ListingFilter = () => {
<div className="p-all"> <div className="p-all">
<div className="head">Suitable Age Group</div> <div className="head">Suitable Age Group</div>
</div> </div>
<div className="inner"> <Dropdown
menu={{
items,
onClick
}}
>
<a onClick={e => e.preventDefault()}>
<Space>
Select age, Click menu item
<DownOutlined />
</Space>
</a>
</Dropdown>
{/* <div className="inner">
<Form.Select <Form.Select
onChange={e => { onChange={e => {
// console.log("filter 123", e); console.log("filter 123", e.target.value);
if (e.target.value != "select") { if (e.target.value != "select") {
dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: e.target.value } })); dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: e.target.value } }));
} else { } else {
dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: null } })); dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: null } }));
} }
}} }}
// onSelect={(e) => {
// console.log("filter 123", e);
// }}
aria-label="Default select example" aria-label="Default select example"
> >
<option>Select</option> <option>Select</option>
{suitableAgeGroups.map(item => { {suitableAgeGroups.map(item => {
return <option value={item}> {item[1] ? `${item[0]} - ${item[1]}` : `${item[0]}+`} </option>; return <option value={item}> {item[1] ? `${item[0]} - ${item[1]}` : `${item[0]}+`} </option>;
})} })}
{/* {[
{ start: 5, end: 10 },
{ start: 10, end: 20 }
].map(item => {
return <option value={item}> {item.end ? `${item.start} - ${item.end}` : `${item[0]}+`} </option>;
})} */}
</Form.Select> </Form.Select>
</div> </div> */}
</div> </div>
<div></div> <div></div>
</div> </div>
......
components/listing/ListingInner.js
...@@ -84,7 +84,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => { ...@@ -84,7 +84,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
if (activityFilters.maxGroupSize > 0) { if (activityFilters.maxGroupSize > 0) {
filters["maxGroupSize"] = activityFilters.maxGroupSize; filters["maxGroupSize"] = activityFilters.maxGroupSize;
} }
if (activityFilters.minAge > 0) { if (activityFilters.minAge) {
filters["ageLowerLimit"] = activityFilters.minAge; filters["ageLowerLimit"] = activityFilters.minAge;
} }
if (activityFilters.sorting) { if (activityFilters.sorting) {
...@@ -96,7 +96,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => { ...@@ -96,7 +96,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
if (activityFilters.priceLowerLimit) { if (activityFilters.priceLowerLimit) {
filters["priceLowerLimit"] = activityFilters.priceLowerLimit; filters["priceLowerLimit"] = activityFilters.priceLowerLimit;
} }
console.log("router query", filters.category); // console.log("router query", filters);
dispatch( dispatch(
getActivitiesByFilters({ getActivitiesByFilters({
subCategory: filters.subCategory, subCategory: filters.subCategory,
...@@ -116,6 +116,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => { ...@@ -116,6 +116,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
}) })
); );
}, [activityFilters]); }, [activityFilters]);
console.log("activityFilters", activityFilters);
// useEffect(() => { // useEffect(() => {
// dispatch(getActivitiesByFilters({ currentPage: router.query.page })); // dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
// }, []); // }, []);
......
redux/actions/activityAction.js
...@@ -469,17 +469,20 @@ export const getActivitiesByFilters = ...@@ -469,17 +469,20 @@ export const getActivitiesByFilters =
// { fromDate: {$lte: "2022-07-09"}} // { fromDate: {$lte: "2022-07-09"}}
if (fromDate && toDate) { if (fromDate && toDate) {
query.filters["$and"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }]; // query.filters["$and"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }];
query.filters["$or"] = [{ fromDate: { $eq: "2021-01-01" } }, { $and: [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }] }];
// query.filters["$or"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }]; // query.filters["$or"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }];
delete query.filters.fromDate; delete query.filters.fromDate;
delete query.filters.toDate; delete query.filters.toDate;
} }
if (!(fromDate && toDate)) { if (!(fromDate && toDate)) {
if (fromDate) { if (fromDate) {
query.filters["fromDate"] = { $gte: fromDate }; query.filters["$or"] = [{ fromDate: { $gte: fromDate } }, { fromDate: { $eq: "2021-01-01" } }];
// query.filters["fromDate"] = { $gte: fromDate };
} }
if (toDate) { if (toDate) {
query.filters["toDate"] = { $lte: toDate }; query.filters["$or"] = [{ toDate: { $lte: toDate } }, { fromDate: { $eq: "2021-01-01" } }];
// query.filters["toDate"] = { $lte: toDate };
} }
} }
...@@ -511,8 +514,13 @@ export const getActivitiesByFilters = ...@@ -511,8 +514,13 @@ export const getActivitiesByFilters =
if (maxGroupSize) { if (maxGroupSize) {
query.filters["maxGroupSize"] = { $lte: maxGroupSize }; query.filters["maxGroupSize"] = { $lte: maxGroupSize };
} }
if (ageLowerLimit) {
query.filters["ageLowerLimit"] = { $gte: ageLowerLimit }; console.log("ageLowerLimit", ageLowerLimit);
if (ageLowerLimit && ageLowerLimit[0] && ageLowerLimit[1]) {
query.filters["$and"] = [{ ageLowerLimit: { $gte: ageLowerLimit[0] } }, { ageLowerLimit: { $lte: ageLowerLimit[1] } }];
}
if (ageLowerLimit && ageLowerLimit[0] && !ageLowerLimit[1]) {
query.filters["ageLowerLimit"] = { $gte: ageLowerLimit[0] };
} }
if (sort) { if (sort) {
query["sort"] = sortFilter; query["sort"] = sortFilter;
...@@ -520,7 +528,7 @@ export const getActivitiesByFilters = ...@@ -520,7 +528,7 @@ export const getActivitiesByFilters =
if (priceUpperLimit) { if (priceUpperLimit) {
query.filters["pricePerPerson"] = { $lte: priceUpperLimit }; query.filters["pricePerPerson"] = { $lte: priceUpperLimit };
} }
if (priceUpperLimit) { if (priceLowerLimit) {
query.filters["pricePerPerson"] = { $gte: priceLowerLimit }; query.filters["pricePerPerson"] = { $gte: priceLowerLimit };
} }
// console.log("subcategoryquery:", query); // console.log("subcategoryquery:", query);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!