1. Listagem de eventos

// Listar eventos com filtros
const { events, cursor } = await sdk.events.find({
  limit: 20,
  cursor: 'next-cursor', // para paginação
  q: 'rock',             // busca por nome
  channelSlugs: ['meu-canal'],
  categoryIds: ['cat-id-1', 'cat-id-2'],
  orderBy: 'START_DATE',  // START_DATE | END_DATE | MAX_PRICE | MIN_PRICE
  priority: 0,           // obrigatório para retornar resultados
});
 
// Listar categorias
const categories = await sdk.categories.find();

import { useEvents, useCategories } from '@meaple-com/react-query';
 
function EventsList() {
  const [query, setQuery] = useState('');
  const [categoryIds, setCategoryIds] = useState<string[]>([]);
 
  const { data, isLoading, error } = useEvents({
    priority: 0,
    q: query.trim() || undefined,
    categoryIds: categoryIds.length > 0 ? categoryIds : undefined,
    limit: 20,
  });
 
  const { data: categories } = useCategories();
 
  const events = data?.events ?? [];
  const categoriesList = categories ?? [];
 
  if (isLoading) return <div>Carregando...</div>;
  if (error) return <div>Erro: {error.message}</div>;
 
  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Buscar eventos"
      />
      <select
        multiple
        value={categoryIds}
        onChange={e => {
          const options = e.target.selectedOptions;
          setCategoryIds(Array.from(options, o => o.value));
        }}
      >
        {categoriesList.map(cat => (
          <option key={cat.id} value={cat.id}>{cat.name}</option>
        ))}
      </select>
      <div>
        {events.map(event => (
          <div key={event.id}>{event.name}</div>
        ))}
      </div>
    </div>
  );
}

import { ListEvents, ListCategories } from '@meaple-com/react-headless-components';
 
function EventsPage() {
  return (
    <>
      <ListCategories>
        {({ categories, isPending }) => (
          <div>
            {categories.map(cat => (
              <button key={cat.id}>{cat.name}</button>
            ))}
          </div>
        )}
      </ListCategories>
 
      <ListEvents
        params={{
          priority: 0,
          q: 'rock',
          categoryIds: ['cat-1'],
          orderBy: 'START_DATE',
          limit: 20,
        }}
      >
        {({ events, isPending, error }) => (
          <div>
            {events.map(event => (
              <div key={event.id}>{event.name}</div>
            ))}
          </div>
        )}
      </ListEvents>
    </>
  );
}