import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { getAllCategories } from "../redux/actions/categoriesAction";
import { getTestimonial } from "../redux/actions/testimonialAction";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";

export default function IndexPage() {
  /** Client side rendering, traditional API call. */
  // const dispatch = useDispatch();
  // useEffect(() => {
  //   const fetchData = async () => {
  //     await dispatch(getProjects({ currentPage: 1, featuredOnHome: true }));
  //   };
  //   fetchData();
  // });

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

/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
  try {
    await store.dispatch(getAllCategories())
    await store.dispatch(getTestimonial())

  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);
}
});