Data and Suspense

import { Suspense } from 'react'
import type { Temporal } from '@js-temporal/polyfill'
import { useSuspenseQuery } from '@tanstack/react-query'
import {
  CalendarProvider,
  useCalendar,
  useCalendarView,
  useCreateCalendar,
} from '@gobrand/react-calendar'

type Event = {
  id: string
  title: string
  date: Temporal.PlainDate
}

type CalendarProps = {
  loadEvents(
    start: Temporal.ZonedDateTime,
    end: Temporal.ZonedDateTime,
  ): Promise<Event[]>
}

function Calendar({ loadEvents }: CalendarProps) {
  const calendar = useCreateCalendar({ views: { month: true } })

  return (
    <CalendarProvider calendar={calendar}>
      <Controls />
      <Suspense fallback={<p>Loading events…</p>}>
        <MonthView loadEvents={loadEvents} />
      </Suspense>
    </CalendarProvider>
  )
}

function Controls() {
  const calendar = useCalendar()

  return (
    <nav>
      <button onClick={calendar.previous}>Previous</button>
      <strong>{calendar.title()}</strong>
      <button onClick={calendar.next}>Next</button>
    </nav>
  )
}

function MonthView({ loadEvents }: CalendarProps) {
  const calendar = useCalendar()
  const { start, end } = calendar.visibleRange
  const { data: events } = useSuspenseQuery({
    queryKey: ['events', start.toString(), end.toString()],
    queryFn: () => loadEvents(start, end),
  })

  const month = useCalendarView({
    view: 'month',
    items: events,
    getDate: event => event.date,
  })

  return month.weeks.map(week => (
    <div key={week[0].id}>
      {week.map(day => (
        <div key={day.id}>
          {day.date.toString()}: {day.items.map(event => event.title).join(', ')}
        </div>
      ))}
    </div>
  ))
}