useEvent & useEventData

Access a single event from context, or manage one directly

Overview

useEvent reads the event loaded by EventProvider from context, returning the event plus bound actions (updateEvent, deleteEvent, cancelEvent, setRsvp, withdrawRsvp). useEventData is the underlying hook the provider uses — call it directly when you want the same managed state without the provider/context.

useEvent

Call inside a descendant of EventProvider.

import { useEvent } from "@sublay/react-js";

function EventDetail() {
  const { event, setRsvp, withdrawRsvp, cancelEvent } = useEvent();

  if (event === undefined) return <p>Loading…</p>;
  if (!event) return <p>Not found.</p>;

  return (
    <div>
      <h1>{event.title}</h1>
      <button onClick={() => setRsvp("going")}>Going</button>
    </div>
  );
}

useEvent returns a Partial<UseEventDataValues> (empty object outside a provider).

useEventData

Manage an event without the provider. Pass either a pre-fetched event or an eventId to fetch.

import { useEventData } from "@sublay/react-js";

function EventCard({ eventId }: { eventId: string }) {
  const { event, setRsvp } = useEventData({ eventId, include: "userRsvp" });
  // ...
}

Parameters

event · Event

A pre-fetched event. Use this or eventId.

eventId · string

An event ID to fetch. Use this or event.

include · string | string[]

Associations to expand when fetching by eventId.

Returns (both hooks)

event · Event | null | undefined

The event. undefined while loading, null if not found.

setEvent · React.Dispatch

Set the event state directly (optimistic updates).

updateEvent · (props: { update }) => Promise<Event | undefined>

Update mutable fields (host-only).

deleteEvent · () => Promise<void>

Delete the event (host-only).

cancelEvent · () => Promise<Event | undefined>

Cancel the event (host-only).

setRsvp · (status: RsvpStatus) => Promise<Event | undefined>

Set/change the caller’s RSVP.

withdrawRsvp · () => Promise<Event | undefined>

Withdraw the caller’s RSVP.

See Also

• EventProvider & useEvent guide
• Event data model