import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import Detail from "../../components/detail/Detail";
import Layout from "../../components/layout/Layout";
import { getActivityById } from "../../redux/actions/activityAction";
import { getCurrentEndUser, loadUser } from "../../redux/actions/userActions";
import { wrapper } from "../../redux/store";
import { getFaqs } from "../../redux/actions/faqsAction";
import { getReviewsAction } from "../../redux/actions/reviewsAction";
import { useRouter } from "next/router";

const ActivityDetailPage = () => {
  const router = useRouter()
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadUser());
  }, []);
  useEffect(() => {
    dispatch(getCurrentEndUser());
  }, [router]);
  return (
    <Layout>
      <Detail />
    </Layout>
  );
};

export default ActivityDetailPage;

/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
  await store.dispatch(getActivityById(query.id));
  await store.dispatch(getFaqs());
  await store.dispatch(getReviewsAction({activityId: query.id}))

  return {
    props: {}
  };
});