Observe full notification data

How to use the notification API to observe full notification data


Overview #

This method allows you to observe the full notification data for the current user, including live updates.
React:
import { notification } from '@cord-sdk/react';
const { notifications, loading, hasMore, fetchMore } = notification.useData(
  filter: { metadata: { flavor: 'minty' } } },
);
return (
  <div>
    {notifications.map((notification) => (
      <div key={notification.id}>
        Got notification {notification.id}!
      </div>
    ))}
    {loading ? (
      <div>Loading...</div>
    ) : hasMore ? (
      <div onClick={() => fetchMore(10)}>Fetch 10 more</div>
    ) : null}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.notification.observeData(
  ({ notifications, loading, hasMore, fetchMore }) => {
    console.log('Got a notifications data update:');
    if (loading) {
      console.log('Loading...');
    }
    notifications.forEach((notification) =>
      console.log(\`Got notification \${notification.id}!\`),
    );
    if (!loading && hasMore && notifications.length < 25) {
      // Get the first 25 notifications, 10 at a time.
      fetchMore(10);
    }
  },
  { filter: { metadata: { flavor: 'minty' } } },
);
import { notification } from '@cord-sdk/react';
const { notifications, loading, hasMore, fetchMore } = notification.useData(
  filter: { metadata: { flavor: 'minty' } } },
);
return (
  <div>
    {notifications.map((notification) => (
      <div key={notification.id}>
        Got notification {notification.id}!
      </div>
    ))}
    {loading ? (
      <div>Loading...</div>
    ) : hasMore ? (
      <div onClick={() => fetchMore(10)}>Fetch 10 more</div>
    ) : null}
  </div>
);
Copy

Available Data #

The API provides an object which has the following fields:


id #

string
The ID for this notification.

senderUserIDs #

string[]
The IDs of the user(s) who sent this notification. The Cord backend will sometimes aggregate multiple notifications together, causing them to have multiple senders. For example, if multiple people react to the same message, that will generate only one notification (but with multiple senders, one for each person who reacted).

iconUrl #

string | null
The URL of an icon image for this notification, if one was specified when it was created. This will always be null for Cord's internally-generated notifications (i.e., it can only be non-null for notifications you create via the REST API).

array
The "header" or "text" of the notification. This will represent text like "Alice replied to your thread." or similar. For notifications you create via the REST API, this will be based upon the template parameter, see below.

This is an array of items. Each item can be one of the following:

  • NotificationTextHeader

    This is an object with the following fields:


    type
    "text"
    Indicator that this is a string header node.

    text
    string
    The text to display. This text may start and/or end with whitespace, which should typically not be trimmed. For example, in order to display the notification "Alice replied to your thread.", this would typically be composed of two nodes -- a user node for Alice, and then a text node containing " replied to your thread.", with a meaningful space at the front, to separate this node from Alice's name.

    bold
    boolean
    Whether the text should be formatted in bold.
  • NotificationUserHeader

    This is an object with the following fields:


    type
    "user"
    Indicator that this is a user reference header node.

    user
    ClientUserData
    The indicated user.

    This is an object with the following fields:


    id
    string
    The user's ID. This is unique within an application.

    name
    string | null
    The user's name.

    shortName
    string | null
    The user's short name. In most cases, Cord components will prefer using this name over name when set.

    displayName
    string
    The primary display name of the user. This is a readonly field that's provided as a convenience. Its value is the user's shortName or name, preferring shortName if both are set, or the string "unknown" if neither is set.

    secondaryDisplayName
    string
    The secondary display name of the user, in cases where you might want to display a secondary name (such as in a subtitle). This is a readonly field that's provided as a convenience. Its value is the user's name or shortName, preferring name if both are set, or the string "Unknown" if neither is set.

    profilePictureURL
    string | null
    A URL to the user's profile picture.

    metadata
    EntityMetadata
    Any metadata that has been set for the user.

headerTranslation #

Translation | null
A translation that can be used to translate the header of the notification. All Cord-created notifications will have a translation, but this may be null for notifications you create through the REST API. See the translations documentation for more information.

This is an object with the following fields:


key #

string
A translation key that is used to look up the proper translation. See the translations documentation for more information on how translations work.

parameters #

TranslationParameters
The parameters to supply to the translation. This will always be set, but may be an empty object if the translation doesn't take any parameters.

attachment #

Additional context attached to the notification. For example, if this notification is about a new reaction on a message, the attachment will specify what message received that new reaction.
A renderer will typically check the type field of the attachment and render that attachment type below the header.

This property can be one of the following:

  • null
  • NotificationURLAttachment

    This is an object with the following fields:


    type #

    "url"
    Indicator that this is a URL attachment.

    url #

    string
    The URL this attachment points to. This would typically be the URL to send the browser to if this notification is clicked.
  • NotificationMessageAttachment

    This is an object with the following fields:


    type #

    "message"
    Indicator that this is a message attachment.

    message #

    CoreMessageData
    The relevant message.

    This is an object with the following fields:


    id
    string
    The ID for the message. If a message is created with no ID, a random UUID-based ID will be automatically created for it.

    authorID
    string
    The ID for the user that sent the message.

    groupID
    string
    The ID for the group this message belongs to.

    threadID
    string
    The ID for the thread this message is part of.

    content
    object[]
    The content of the message.

    plaintext
    string
    A plaintext version of the structured message content.

    url
    string | null
    A URL where the message can be seen. This determines where a user is sent when they click on a reference to this message, such as in a notification. If unset, it defaults to the thread's URL.

    createdTimestamp
    Date
    The timestamp when this message was created. The default value is the current time.

    deletedTimestamp
    Date | null
    The timestamp when this message was deleted, if it was. If unset, the message is not deleted.

    updatedTimestamp
    Date | null
    The timestamp when this message was last edited, if it ever was. If unset, the message does not show as edited.

    iconURL
    string | null
    The URL of the icon to show next to the message. This is only used for action_message messages; other messages show the avatar of the author. If an action_message does not have an icon set, no icon is shown.

    translationKey
    string | null
    An optional translation key used for this message. This is useful for system-generated messages where you might want to translate or customize them at runtime. See the translations documentation for more information.

    type
    "action_message" | "user_message"
    The type of message this is. A user_message is a message that the author sent. An action_message is a message about something that happened, such as the thread being resolved. The default value is user_message.

    metadata
    EntityMetadata
    Arbitrary key-value pairs that can be used to store additional information.

    extraClassnames
    string | null
    A optional space separated list of classnames to add to the message.

    attachments
    array
    The items attached to this message.

    reactions
    Reaction[]
    The reactions to this message.

    This is an array of objects, each of which has the following fields:


    reaction
    string
    The emoji reaction.

    userID
    string
    The ID of the user who reacted to the message.

    timestamp
    Date
    The timestamp of when the reaction was created.

    seenBy
    string[]
    A list of IDs of the users that have seen the message.

    skipLinkPreviews
    boolean
    If set, Cord won't analyze links in the message to generate previews.

readStatus #

"unread" | "read"
Whether this notification has been read by the recipient yet.

timestamp #

Date
The time this notification was sent.

extraClassnames #

string | null
A space separated list of classnames to add to the notification.

metadata #

EntityMetadata
An arbitrary JSON object specified when the notification was created. This will always be an empty object for Cord's internally-generated notifications (i.e., it can only be non-null for notifications you create via the REST API).

What this function returns #

The hook will return an object containing the fields described under "Available Data" above. The component will automatically re-render if any of the data changes, i.e., this data is always "live".

Arguments this function takes #


options #

optional
ObserveNotificationDataOptions
Miscellaneous options. See below.

This is an object with the following fields:


filter #

optional
NotificationListFilter
An object that can be used to filter the notifications returned.

This is an object with the following fields:


metadata
optional
EntityMetadata
An arbitrary JSON object specified when the notification is created. The value for a metadata entry should be an object representing the metadata key/value to filter on. For example, to show only notifications with the metadata key of "category" set to "sales", set the filter to { metadata: { category: "sales" } }.

location
optional
Location
The location where the notifications live. This will be the location of the thread containing the message which prompted the notification.

groupID
optional
string
The group to which the message that prompted the notification belongs.

Ask Cordy