78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import Image from '@/components/Image'
|
|
import { useFetchEvent } from '@/hooks'
|
|
import { toNote } from '@/lib/link'
|
|
import { generateBech32IdFromETag, tagNameEquals } from '@/lib/tag'
|
|
import { cn } from '@/lib/utils'
|
|
import { useSecondaryPage } from '@/PageManager'
|
|
import { useNostr } from '@/providers/NostrProvider'
|
|
import { Heart } from 'lucide-react'
|
|
import { Event } from 'nostr-tools'
|
|
import { useMemo } from 'react'
|
|
import ContentPreview from '../../ContentPreview'
|
|
import { FormattedTimestamp } from '../../FormattedTimestamp'
|
|
import UserAvatar from '../../UserAvatar'
|
|
|
|
export function ReactionNotification({
|
|
notification,
|
|
isNew = false
|
|
}: {
|
|
notification: Event
|
|
isNew?: boolean
|
|
}) {
|
|
const { push } = useSecondaryPage()
|
|
const { pubkey } = useNostr()
|
|
const eventId = useMemo(() => {
|
|
const targetPubkey = notification.tags.findLast(tagNameEquals('p'))?.[1]
|
|
if (targetPubkey !== pubkey) return undefined
|
|
|
|
const eTag = notification.tags.findLast(tagNameEquals('e'))
|
|
return eTag ? generateBech32IdFromETag(eTag) : undefined
|
|
}, [notification, pubkey])
|
|
const { event } = useFetchEvent(eventId)
|
|
const reaction = useMemo(() => {
|
|
if (!notification.content || notification.content === '+') {
|
|
return <Heart size={24} className="text-red-400" />
|
|
}
|
|
|
|
const emojiName = /^:([^:]+):$/.exec(notification.content)?.[1]
|
|
if (emojiName) {
|
|
const emojiTag = notification.tags.find((tag) => tag[0] === 'emoji' && tag[1] === emojiName)
|
|
const emojiUrl = emojiTag?.[2]
|
|
if (emojiUrl) {
|
|
return (
|
|
<Image
|
|
image={{ url: emojiUrl, pubkey: notification.pubkey }}
|
|
alt={emojiName}
|
|
className="w-6 h-6"
|
|
classNames={{ errorPlaceholder: 'bg-transparent' }}
|
|
errorPlaceholder={<Heart size={24} className="text-red-400" />}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
return notification.content
|
|
}, [notification])
|
|
|
|
if (!event || !eventId) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center justify-between cursor-pointer py-2"
|
|
onClick={() => push(toNote(event))}
|
|
>
|
|
<div className="flex gap-2 items-center flex-1">
|
|
<UserAvatar userId={notification.pubkey} size="small" />
|
|
<div className="text-xl min-w-6 text-center">{reaction}</div>
|
|
<ContentPreview
|
|
className={cn('truncate flex-1 w-0', isNew ? 'font-semibold' : 'text-muted-foreground')}
|
|
event={event}
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
<FormattedTimestamp timestamp={notification.created_at} short />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|