mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-26 03:06:49 +02:00
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
|
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>
|
||
|
)
|
||
|
}
|