src/components/@shared/DirectMessages/ListItem.tsx
import React, { useState, useEffect } from 'react'
import { useCancelToken } from '@hooks/useCancelToken'
import { useOrbis } from '@context/DirectMessages'
import { IConversationWithAdditionalData } from '@context/DirectMessages/_types'
import { didToAddress } from './_utils'
import Avatar from '@shared/atoms/Avatar'
import Time from '@shared/atoms/Time'
import styles from './ListItem.module.css'
export default function ConversationItem({
conversation,
setConversationId
}: {
conversation: IConversationWithAdditionalData
setConversationId: (value: string) => void
}) {
const { account, getConversationTitle } = useOrbis()
const newCancelToken = useCancelToken()
const [name, setName] = useState<string>(null)
const [address, setAddress] = useState(null)
useEffect(() => {
const getProfile = async () => {
const did = conversation.recipients.find((o) => o !== account.did)
const _address = didToAddress(did)
setAddress(_address)
const _name = await getConversationTitle(conversation?.stream_id)
setName(_name)
}
if (conversation && account) {
getProfile()
}
}, [conversation, account, newCancelToken, getConversationTitle])
return (
<div
className={styles.conversation}
onClick={() => setConversationId(conversation.stream_id)}
>
<div className={styles.accountAvatarSet}>
<Avatar accountId={address} className={styles.accountAvatar} />
{conversation.notifications_count > 0 && (
<div className={styles.notificationCount}>
{conversation.notifications_count}
</div>
)}
</div>
<div className={styles.accountInfo}>
<div className={styles.accountName}>{name}</div>
<span className={styles.lastMessageDate}>
<Time
date={conversation.last_message_timestamp.toString()}
isUnix={true}
relative={false}
displayFormat="Pp"
/>
</span>
</div>
</div>
)
}