{"size": 1605, "ext": "js", "max_stars_repo_path": "pages/aws.js", "max_stars_repo_name": "dermasmid/hossted-admin", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pages/aws.js", "max_issues_repo_name": "dermasmid/hossted-admin", "max_issues_repo_issues_event_min_datetime": "2021-07-29T08:35:08.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-11T10:31:30.000Z", "max_forks_repo_path": "pages/aws.js", "max_forks_repo_name": "dermasmid/hossted-admin", "max_forks_repo_forks_event_min_datetime": "2021-07-29T08:34:23.000Z", "max_forks_repo_forks_event_max_datetime": "2021-07-29T08:34:23.000Z"}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": 1, "avg_line_length": 25.8870967742, "max_line_length": 80, "alphanum_fraction": 0.6230529595}
import { useState, useEffect } from 'react'
import { useSession } from 'next-auth/client'
import Layout from '../components/layout'
import AccessDenied from '../components/access-denied'
import DataTable from 'react-data-table-component';

const results = [];

const columns = [
  {
    name: 'User Id',
    selector: 'Customer Reference ID',
    sortable: true,
  },
  {
    name: 'Product Title',
    selector: 'Product Title',
    sortable: true,
    right: true,
  },
];

export default function Page () {
  const [ session, loading ] = useSession()
  const [ content , setContent ] = useState()
  const [ data, setData] = useState([])

  // Fetch content from protected route
  useEffect(()=>{
    const fetchData = async () => {
      const res = await fetch('/api/examples/protected')
      const json = await res.json()
      if (json.content) { setContent(json.content) }
    }
    const getTableData = async () => {
      const res = await fetch('/api/data/get')
      const json = await res.json()
      if (json.data) { setData(json.data) }
    }
    fetchData()
    getTableData()
  },[session])

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }

  // If session exists, display content
  return (
    <Layout>
      <DataTable
        title="Test data"
        columns={columns}
        data={data}
      />
      <p><strong>{content || "\u00a0"}</strong></p>
  </Layout>
    )
}
