n8udd/events.js

## events.js
import AppLayout from '@/components/Layouts/AppLayout'
import Head from 'next/head'
import React from 'react'
import axios from '@/lib/axios'
import { useEffect, useState } from 'react'

const Events = ({ events }) => {
  // const [events, setEvents] = useState(null)
  console.log(events)
  const [dataLoaded, setDataLoaded] = useState(false)

  // useEffect(() => {
  //   axios
  //     .get('/api/events')
  //     .then(response => {
  //       console.log(response.data.data)
  //       setEvents(response.data.data)
  //       setDataLoaded(true)
  //     })
  //     .catch(error => {
  //       console.error(error)
  //     })
  // }, [])

  return (
    <AppLayout
      header={
        <h2 className="font-semibold text-xl text-gray-800 leading-tight">
          Event List
        </h2>
      }>
      <Head>
        <title>Events</title>
      </Head>

      <div className="py-6">
        <div className="max-w-7xl mx-auto flex flex-col">
          <aside className="flex w-full bg-white overflow-hidden shadow-md p-4 mb-8">
            <div>{dataLoaded && `${events.length}`}</div>
          </aside>
          <main className="flex w-full overflow-hidden">
            {dataLoaded ? (
              <div className="align-middle inline-block min-w-full">
                {events.map(event => (
                  <p className="bg-white mb-4 p-4 shadow-md" key={event.uuid}>
                    <span className="font-bold">{event.type.name}</span>-{' '}
                    {event.title}
                  </p>
                ))}
              </div>
            ) : (
              <div className="py-2 align-middle inline-block min-w-full">
                no events found
              </div>
            )}
          </main>
        </div>
      </div>
    </AppLayout>
  )
}

export default Events

export const getServerSideProps = async () => {
  const { data } = await axios.get(`http://localhost:8000/api/events`)

  if (!data) {
    return {
      notFound: true,
    }
  }

  const events = data
  return {
    props: {
      events,
    },
  }
}
	import AppLayout from '@/components/Layouts/AppLayout'
	import Head from 'next/head'
	import React from 'react'
	import axios from '@/lib/axios'
	import { useEffect, useState } from 'react'

	const Events = ({ events }) => {
	// const [events, setEvents] = useState(null)
	console.log(events)
	const [dataLoaded, setDataLoaded] = useState(false)

	// useEffect(() => {
	// axios
	// .get('/api/events')
	// .then(response => {
	// console.log(response.data.data)
	// setEvents(response.data.data)
	// setDataLoaded(true)
	// })
	// .catch(error => {
	// console.error(error)
	// })
	// }, [])

	return (
	<AppLayout
	header={
	<h2 className="font-semibold text-xl text-gray-800 leading-tight">
	Event List
	</h2>
	}>
	<Head>
	<title>Events</title>
	</Head>

	<div className="py-6">
	<div className="max-w-7xl mx-auto flex flex-col">
	<aside className="flex w-full bg-white overflow-hidden shadow-md p-4 mb-8">
	<div>{dataLoaded && `${events.length}`}</div>
	</aside>
	<main className="flex w-full overflow-hidden">
	{dataLoaded ? (
	<div className="align-middle inline-block min-w-full">
	{events.map(event => (
	<p className="bg-white mb-4 p-4 shadow-md" key={event.uuid}>
	<span className="font-bold">{event.type.name}</span>-{' '}
	{event.title}
	</p>
	))}
	</div>
	) : (
	<div className="py-2 align-middle inline-block min-w-full">
	no events found
	</div>
	)}
	</main>
	</div>
	</div>
	</AppLayout>
	)
	}

	export default Events

	export const getServerSideProps = async () => {
	const { data } = await axios.get(`http://localhost:8000/api/events`)

	if (!data) {
	return {
	notFound: true,
	}
	}

	const events = data
	return {
	props: {
	events,
	},
	}
	}