import BlogDetails from "../../components/blog-details/BlogDetails";
import Layout from "../../components/layout/Layout";
import { getBlogData } from "../../redux/actions/blogAction";
import { wrapper } from "../../redux/store";

export default function BlogDetailsPage() {

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

/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
    try {
        console.log("query", query);
        await store.dispatch(getBlogData(query.slug))
    
      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);
    }
});