6. Visualizar eventos com ingressos do usuário

const events = await sdk.users.getEvents();
 
// Com filtro de seção (opcional)
const eventsFuturos = await sdk.users.getEvents({ type: 'FUTURE' });
const eventsPassados = await sdk.users.getEvents({ type: 'PAST' });

import { useUserEvents } from '@meaple-com/react-query';
import { useRouter } from 'next/router';
 
function MyEvents() {
  const router = useRouter();
 
  const { data: events, isPending, error } = useUserEvents({
    type: 'coming_soon', // eventos futuros
  });
 
  if (isPending) return <div>Carregando...</div>;
  if (error) return <div>Erro: {error.message}</div>;
 
  return (
    <div>
      <h1>Meus ingressos</h1>
      {events?.map(event => (
        <div
          key={event.id}
          onClick={() => router.push(`/tickets/${event.id}`)}
          style={{ cursor: 'pointer' }}
        >
          <h3>{event.name}</h3>
          <p>{event.channel?.name}</p>
          <p>{new Date(event.startsAt).toLocaleDateString()}</p>
        </div>
      ))}
    </div>
  );
}

import { ListUserEvents } from '@meaple-com/react-headless-components';
 
function MyEventsPage() {
  return (
    <ListUserEvents>
      {({ events, isPending, error }) => {
        if (isPending) return <div>Carregando...</div>;
        if (error) return <div>Erro: {error.message}</div>;
 
        return (
          <div>
            {events.map(event => (
              <div key={event.id}>{event.name}</div>
            ))}
          </div>
        );
      }}
    </ListUserEvents>
  );
}