import Layout from "../components/layout/Layout";
// import Listing from "../components/listing/Listing";
import { getActivitiesByFilters } from "../redux/actions/activityAction";
import { getAllCategories, getSubCategoriesByCategoryId } from "../redux/actions/categoriesAction";
import { wrapper } from "../redux/store";
import dynamic from "next/dynamic";
const Listing = dynamic(() => import("../components/listing/Listing"));

export default function ListingPage() {
  /** Client side rendering, traditional API call. */
  // useEffect(() => {
  //   dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
  // }, []);

  return (
    <Layout>
      <Listing />
    </Layout>
  );
}

/** 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:
      // - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
      // - After the 10-second window, the next request will still show the cached (stale) page
      // - Next.js triggers a regeneration of the page in the background.
      // - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
      // In seconds
      // revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
    };
  } catch (error) {
    console.log("index.js", error);
  }
});