Hook to get the direct messages of the current user.

​
Imports

import { useUserDms } from '@towns-protocol/react-sdk'

​
Examples

You can combine this hook with the useDm, useMemberList and useMember hooks to get all direct messages of the current user and render them, showing the name of the other user in the dm:

import { useDm, useMyMember, useMemberList, useMember } from '@towns-protocol/react-sdk'

const AllDms = () => {
    const { streamIds } = useUserDms()
    return <>{streamIds.map((streamId) => <Dm key={streamId} streamId={streamId} />)}</>
}

const Dm = ({ streamId }: { streamId: string }) => {
    const { data: dm } = useDm(streamId)
    const { userId: myUserId } = useMyMember(streamId)
    const { data: members } = useMemberList(streamId)
    const { userId, username, displayName } = useMember({
       streamId,
       // We find the other user in the dm by checking the userIds in the member list
       // and defaulting to the current user if we don't find one, since a user is able to send a dm to themselves
       userId: members.userIds.find((userId) => userId !== sync.userId) || sync.userId,
    })
    return <span>{userId === myUserId ? 'You' : displayName || username || userId}</span>
}

​
Definition

function useUserDms(
  config?: ObservableConfig.FromObservable<Dms>,
): {
    error: Error | undefined;
    status: "loading" | "loaded" | "error";
    isLoading: boolean;
    isError: boolean;
    isLoaded: boolean;
    streamIds: string[];
}

Source: useUserDms

​
Parameters

​
config

  • Type: ObservableConfig.FromObservable<Dms>
  • Optional

Configuration options for the observable.

​
Return Type

The list of all direct messages stream ids of the current user.

{
    error: Error | undefined;
    status: "loading" | "loaded" | "error";
    isLoading: boolean;
    isError: boolean;
    isLoaded: boolean;
    streamIds: string[];
}