import type { NextPage } from 'next'
import { GroupProvider } from '../../components/contexts/GroupProvider'
import { useEffect } from 'react'

import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps'
import { PageOverview } from '../../components/visualize/PageOverview'

const Page: NextPage<PropsGroupProvider> = ({ id, ...initial }) => {
  useEffect(() => {
    document.body.classList.add('scroll')
    return () => document.body.classList.remove('scroll')
  }, [])

  return (
    <GroupProvider id={id} initial={initial}>
      <PageOverview />
    </GroupProvider>
  )
}

export const getServerSideProps = getServerSidePropsGroupProvider

export default Page