breadcrumb and listing page filter by id

components/detail/Detail.js

 import React, { Fragment, useEffect, useState } from "react";
 import DetailGallery from "./DetailGallery";
 import DetailInfo from "./DetailInfo";
-import { Breadcrumb } from "react-bootstrap";
 import GuestReviews from "./GuestReviews";
 import SimilarExperiences from "./SimilarExperiences";
 import Faqs from "./Faqs";
@@ -11,6 +10,8 @@ import { getActivitiesByFilters } from "../../redux/actions/activityAction";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import DetailSchedule from "./DetailSchedule";
+import { Breadcrumb, ConfigProvider } from "antd";
+import { RightOutlined } from "@ant-design/icons";
 
 const Detail = () => {
   const router = useRouter();
@@ -26,12 +27,46 @@ const Detail = () => {
 
   // console.log("faqs=>", faqs);
   console.log("activityById", activityById);
-  console.log("loadedUser", loadedUser);
+  // console.log("loadedUser", loadedUser);
   return (
     <Fragment>
       <main>
         <section className="main-mt">
           <div className="container mt-5">
+            <div className="py-5">
+              <ConfigProvider
+                theme={{
+                  components: {
+                    Breadcrumb: {
+                      separatorMargin: 20,
+                      fontWeight: 500,
+                      fontSize: 16,
+                      fontFamily: 'Sofia Pro',
+                    }
+                  }
+                }}
+              >
+                <Breadcrumb
+                  separator={<RightOutlined />}
+                  items={[
+                    {
+                      title: 'Home',
+                      href: '/'
+                    },
+                    {
+                      title: activityById?.data?.attributes?.vendor?.data?.attributes?.city,
+                    },
+                    {
+                      title: activityById?.data?.attributes?.category?.data?.attributes?.name,
+                      href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`,
+                    },
+                    {
+                      title: activityById?.data?.attributes?.name,
+                    },
+                  ]}
+                />
+              </ConfigProvider>
+            </div>
             <div className="row hide-on-mobile">
               <div className="col-12">
                 <div className="breadcrum$eq: categoryb-container">

components/listing/LetDiscover.js

 import Image from "next/image";
 import React, { useEffect, useState } from "react";
-import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
-import { Button } from "react-bootstrap";
-
+import { zoomIn, slideFromRight } from "../animationvariants.js";
 import { Swiper, SwiperSlide } from "swiper/react";
-
 import { Navigation, Autoplay } from "swiper/modules";
 import { motion } from "framer-motion";
 // Import Swiper styles
@@ -16,7 +13,7 @@ import { useRouter } from "next/router.js";
 import { Loader } from "react-bootstrap-typeahead";
 import { useDispatch, useSelector } from "react-redux";
 import { getSubCategoriesByCategoryId } from "../../redux/actions/categoriesAction.js";
-import { setActivityFilters } from "../../redux/actions/activityAction.js";
+import { getActivitiesByFilters, setActivityFilters } from "../../redux/actions/activityAction.js";
 import SubCategoryChips from "./SubCategoryChips.js";
 const LetDiscover = ({ categories }) => {
   const { subCategories, loading } = useSelector(sate => sate.subCategories);
@@ -35,6 +32,7 @@ const LetDiscover = ({ categories }) => {
       return; // Do nothing if it's already active
     }
     // Toggle the active index if it's different from the clicked index
+    // console.log("activeIndex",activeIndex, index);
     setActiveIndex(index);
     // setloading(false);
   };
@@ -44,12 +42,18 @@ const LetDiscover = ({ categories }) => {
   // }, [router]);
   useEffect(() => {
     console.log("router.query.category", router.query.category);
+    console.log("getting id to filtered categoryiiiiiiiiiiifsdkhdjkskiiiiiiiiiiiiiiiiiiiiiiiii", parseInt(router.query.category))
+
     if (router.query.category) {
-      dispatch(setActivityFilters({ filters: { category: router.query.category, subCategories: [] } }));
-      setActiveIndex(router.query.category);
-      dispatch(getSubCategoriesByCategoryId(router.query.category));
+      dispatch(setActivityFilters({ filters: { category: Number(router.query.category), subCategories: [] } }));
+      setActiveIndex((parseInt(router.query.category)));
+      dispatch(getSubCategoriesByCategoryId(parseInt(router.query.category)));
+      dispatch(getActivitiesByFilters({ category: { id: { $eq: Number(router.query.category) } } }));
+      console.log("router >>",router.query.category);
+      setActiveIndex(Number(router.query.category))
     }
   }, []);
+
   const [showCloseIcon, setShowCloseIcon] = useState({});
   const handleToggleCloseIcon = index => {
     setShowCloseIcon(prevShowCloseIcon => ({
@@ -124,7 +128,7 @@ const LetDiscover = ({ categories }) => {
                   </SwiperSlide>
                   {categories &&
                     categories.data.map((data, index) => {
-                      const isActive = activeIndex === index;
+                      const isActive = activeIndex === data.id;
                       return (
                         <>
                           <SwiperSlide>
@@ -135,7 +139,7 @@ const LetDiscover = ({ categories }) => {
                                   // router.push(`?category=${data.id}`);
                                   dispatch(setActivityFilters({ filters: { ...activityFilters, category: data.id, subCategories: [] } }));
                                   dispatch(getSubCategoriesByCategoryId(data.id));
-                                  handleTitleClick({ index, data });
+                                  handleTitleClick({ index: data.id, data });
                                 }}
                               >
                                 <span className="image-container">

components/listing/ListingInner.js

@@ -93,7 +93,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
     if (activityFilters.priceUpperLimit) {
       filters["priceUpperLimit"] = activityFilters.priceUpperLimit;
     }
-    console.log("router >>", router.query.page);
+    console.log("router query", filters.category);
     dispatch(
       getActivitiesByFilters({
         subCategory: filters.subCategory,
@@ -112,9 +112,9 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
       })
     );
   }, [activityFilters]);
-  useEffect(() => {
-    dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
-  }, []);
+  // useEffect(() => {
+  //   dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
+  // }, []);
 
   return (
     <>

pages/listing.js

@@ -22,10 +22,13 @@ export default function ListingPage() {
 /** For server side rendering */
 export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
   try {
+    console.log("query", query);
     await store.dispatch(getActivitiesByFilters({ currentPage: query.page }));
     await store.dispatch(getAllCategories());
     await store.dispatch(getSubCategoriesByCategoryId());
-
+    // if (query.category) {
+    //   await store.dispatch(getActivitiesByFilters({ currentPage: query.page, category: query.category }));
+    // }
     return {
       props: {}
       // Next.js will attempt to re-generate the page:

redux/actions/activityAction.js

@@ -356,7 +356,7 @@ export const getActivitiesForEndUser = () => async dispatch => {
     // };
 
     const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config);
-    // console.log("Response", response.data);
+    // console.log("router query 2", response.data);
     dispatch({
       type: GET_ACTIVITIES_SUCCESS,
       payload: response.data
@@ -491,9 +491,9 @@ export const getActivitiesByFilters =
       const queryString = qs.stringify(query, {
         encodeValuesOnly: true
       });
-
+      console.log("router query 1", query);
       const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config);
-      // console.log("activity res", response);
+      console.log("router query 2", response);
       dispatch({
         type: GET_ACTIVITIES_SUCCESS,
         payload: response.data