Getting and displaying Events

Getting and displaying Events

In many cases, you'll want to display a list of events for your users to select one, or at the very least you'll want to fetch the data of a single event in order to contextualise the Elements the user is seeing.

While you may not always want to process the currently active Event, this is the most common approach to selecting which Event is the focal point. The snippet below illustrates how to retrieve the list of all available Events and identify one that is currently in the active state.

You can use the state of the Event to filter and locate the Event that suits your needs. There are three states an event can be in:

  • Active: When the Event is currently live

  • Upcoming: When the Event is available, but it's start date is in the future

  • Finished: When the Event has concluded

async function displayActiveEvent() {
  try {
    // If left unspecified, the `getEvents` function would use
    // the project you setup in the SDK by calling `configure()`
    const events = await getEvents();

    const firstActiveEvent =
      events.find(({ state }) => state === EventState.Active);

    const {
      id,
      name,
      endAt,
      fields: {
        my_field: eventCustomField,
      },
    } = firstActiveEvent;

    console.log(firstActiveEvent, eventCustomField);
  } catch (e) {
    console.error('Something went wrong!', e);
  }
}

getEvents will return the list of events sorted so that the most recent event is first, and the oldest is last

Additionally, you can be notified of any updates to the Event using this snippet:

// Called when an element is published to an event
const unsubscribeOnElementPublished = onElementPublished(event, 
    (element) => { console.log(element) }
);

// Called when an element is revoked from the event
const unsubscribeOnElementRevoked = onElementRevoked(
    event, 
    element => { console.log(element) }
);

// Called when the event is updated
const unsubscribeOnEventUpdated = onEventUpdated(
    event, 
    () => { console.log(event) }
);

// Called when the event state changes
const unsubscribeOnEventState = onEventState(
    event, 
    (state) => { console.log(state) }
);

Alternatively, you can also obtain the Event by its ID. This is useful if you want to attach a given known Event to specific information in your platform. For instance, you could create an Event for a given football match, and then link all the articles relevant to that match to the Event, so that you display match details, or interactive Elements relevant to that match within the article.

The following snippet showcases how to get an Event from an ID, which we'll assume in this case is being provided by your API.

import { getEvent } from "@monterosa-sdk/interact-kit";

const event = await getEvent('<event-id>'); // can be null

Last updated