useUserDms

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

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>
}

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

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