.

components/detail/Detail.js

@@ -21,7 +21,7 @@ const Detail = () => {
   const { faqs } = useSelector(state => state.faqs);
   useEffect(() => {
     // console.log("router", activityById.data.attributes.category?.data?.attributes.name);
-    dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id }));
+    dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id, currentPage: router.query.page }));
   }, [activityById]);
 
   console.log("faqs=>", faqs);

components/listing/ListingInner.js

@@ -31,7 +31,6 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
     setGridClass(className);
   };
 
-
   useEffect(() => {
     const handleResize = () => {
       // console.log("Window Width:");
@@ -108,7 +107,8 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
         maxGroupSize: filters.maxGroupSize,
         ageLowerLimit: filters.ageLowerLimit,
         sort: filters.sort,
-        priceUpperLimit: filters.priceUpperLimit
+        priceUpperLimit: filters.priceUpperLimit,
+        currentPage: router.query.page
       })
     );
   }, [activityFilters]);

components/listing/ListingItems.js

@@ -38,6 +38,7 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
       search: queryParams.toString()
     });
   };
+  console.log("page", page);
   return (
     <>
       {allActivitiesData && !allActivitiesData.data.length == 0 ? (

pages/listing.js

+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import Layout from "../components/layout/Layout";
 import Listing from "../components/listing/Listing";
 import { getActivitiesByFilters } from "../redux/actions/activityAction";
@@ -6,13 +9,11 @@ import { wrapper } from "../redux/store";
 
 export default function ListingPage() {
   /** Client side rendering, traditional API call. */
-  // const dispatch = useDispatch();
-  // useEffect(() => {
-  //   const fetchData = async () => {
-  //     await dispatch(getProjects({ currentPage: 1, featuredOnHome: true }));
-  //   };
-  //   fetchData();
-  // });
+  const router = useRouter();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
+  }, [router]);
 
   return (
     <Layout>

redux/actions/activityAction.js

@@ -391,11 +391,12 @@ export const getActivitiesByFilters =
     sort,
     priceLowerLimit,
     priceUpperLimit,
-    currentPage = 1
+    currentPage
   }) =>
   async dispatch => {
     let sortFilter = [];
     try {
+      console.log("page num", currentPage);
       dispatch({
         type: GET_ACTIVITIES_REQUEST,
         loading: true
@@ -413,8 +414,8 @@ export const getActivitiesByFilters =
       }
       let query = {
         pagination: {
-          pageSize: 12,
-          page: currentPage
+          pageSize: 12
+          // page: Number(currentPage)
         },
         filters: {
           approved: { $eq: "approved" }
@@ -438,6 +439,10 @@ export const getActivitiesByFilters =
         ]
         // sort: ["pricePerPerson:asc"]
       };
+      if (currentPage) {
+        query.pagination["page"] = Number(currentPage);
+      }
+      console.log("page query", query);
       if (category) {
         query.filters["category"] = category;
       }