Observe detailed location data

Build thread previews with detailed data about all threads in a location


Overview

This method allows you to observe detailed data about a location, including live updates.

import { thread } from '@cord-sdk/react';
const summary = thread.useLocationData(location, options);
Copy

Usage

import { thread } from '@cord-sdk/react';
const { threads, loading, hasMore, fetchMore } = thread.useLocationData({
  page: 'document_details',
});

return (
  <div>
    {threads.map((threadSummary) => (
      <div key={threadSummary.id}>
        Thread ID {threadSummary.id} has {threadSummary.total} messages!
      </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:


threads

object[]

An array of thread summary objects. There will be one for each thread at the specified location.

This array is paginated. At first, it will contain summaries of only the first few threads. Calling fetchMore will cause further thread summaries to be appended to the array.

The order in which you will receive the threads is determined by the sorting options, see below.


loading

boolean

When this is true, Cord is in the process of fetching additional data from its backend. Once the fetch is complete, the additional items will be appended to the above list, and loading will become false.

Both the initial data load and a call to fetchMore will start a fetch and cause loading to become true.


fetchMore

function

Call this function to fetch additional data from Cord's backend. It takes a single argument, the number of additional items to fetch.

Once called, loading will become true while the data is fetched. Once the fetch is complete, the additional items will be appended to the above list, and loading will return to false.

This function returns a promise that is resolved once the fetch is complete.


hasMore

boolean

If this is true, then the list of results is incomplete, and you need to call fetchMore to continue paginating through them. Once this becomes false, all results are available, and calls to fetchMore won't do anything.


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


location

required
string

The location to fetch data for.


options

optional
object

Miscellaneous options. See below.


The "options" argument


sortBy

optional
string

This option controls the criteria for how threads are sorted. Combined with sortDirection, it determines which threads are "first".

It's a string enum which can have one of the following values:

  • first_message_timestamp: sort threads by the timestamp of the first message in the thread. In other words, threads will be sorted based on how recently they were created.
  • most_recent_message_timestamp: sort threads by the timestamp of the most recent message in the thread. In other words, threads will be sorted based on how recently they were responded to.

If unset, defaults to first_message_timestamp.


sortDirection

optional
string

This option controls the direction that sortBy sorts. Combined with sortBy, it determines which threads are "first".

It's a string enum which can have one of the following values:

  • ascending: sort older threads in front of of newer threads.
  • descending: sort newer threads in front of older threads.

If unset, defaults to descending (since people usually care about the most recent things).


includeResolved

optional
boolean

If false, resolved threads are filtered out of the results. If true, all threads are returned.

If unset, defaults to false.