.

components/listing/ListingFilter.js

 import Image from "next/image";
 import React, { useState } from "react";
 import { Accordion, Form } from "react-bootstrap";
-import { Slider } from "antd";
+import { Dropdown, Slider } from "antd";
 import { DatePicker, Space } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { setActivityFilters } from "../../redux/actions/activityAction";
 import { TimePicker } from "antd";
 import dayjs from "dayjs";
 import { Input } from "react-bootstrap-typeahead";
+import { DownOutlined } from "@ant-design/icons";
 const format = "HH:mm";
 const suitableAgeGroups = [[2, 5], [5, 10], [10, 16], [16, 18], [18]];
 const ListingFilter = () => {
@@ -32,6 +33,33 @@ const ListingFilter = () => {
     // Can not select days before today and today
     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 (
     <>
       <div className="listing-filter">
@@ -371,20 +399,29 @@ const ListingFilter = () => {
           <div className="p-all">
             <div className="head">Suitable Age Group</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
               onChange={e => {
-                // console.log("filter 123", e);
+                console.log("filter 123", e.target.value);
                 if (e.target.value != "select") {
                   dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: e.target.value } }));
                 } else {
                   dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: null } }));
                 }
               }}
-              // onSelect={(e) => {
-              //   console.log("filter 123", e);
-              // }}
-
               aria-label="Default select example"
             >
               <option>Select</option>
@@ -392,14 +429,9 @@ const ListingFilter = () => {
               {suitableAgeGroups.map(item => {
                 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>
-          </div>
+          </div> */}
         </div>
         <div></div>
       </div>

components/listing/ListingInner.js

@@ -84,7 +84,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
     if (activityFilters.maxGroupSize > 0) {
       filters["maxGroupSize"] = activityFilters.maxGroupSize;
     }
-    if (activityFilters.minAge > 0) {
+    if (activityFilters.minAge) {
       filters["ageLowerLimit"] = activityFilters.minAge;
     }
     if (activityFilters.sorting) {
@@ -96,7 +96,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
     if (activityFilters.priceLowerLimit) {
       filters["priceLowerLimit"] = activityFilters.priceLowerLimit;
     }
-    console.log("router query", filters.category);
+    // console.log("router query", filters);
     dispatch(
       getActivitiesByFilters({
         subCategory: filters.subCategory,
@@ -116,6 +116,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
       })
     );
   }, [activityFilters]);
+  console.log("activityFilters", activityFilters);
   // useEffect(() => {
   //   dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
   // }, []);

redux/actions/activityAction.js

@@ -469,17 +469,20 @@ export const getActivitiesByFilters =
 
       // { fromDate: {$lte: "2022-07-09"}}
       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 } }];
         delete query.filters.fromDate;
         delete query.filters.toDate;
       }
       if (!(fromDate && toDate)) {
         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) {
-          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 =
       if (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) {
         query["sort"] = sortFilter;
@@ -520,7 +528,7 @@ export const getActivitiesByFilters =
       if (priceUpperLimit) {
         query.filters["pricePerPerson"] = { $lte: priceUpperLimit };
       }
-      if (priceUpperLimit) {
+      if (priceLowerLimit) {
         query.filters["pricePerPerson"] = { $gte: priceLowerLimit };
       }
       // console.log("subcategoryquery:", query);