MentionNotification.tsx raw

   1  import ParentNotePreview from '@/components/ParentNotePreview'
   2  import { NOTIFICATION_LIST_STYLE } from '@/constants'
   3  import { getEmbeddedPubkeys, getParentStuff } from '@/lib/event'
   4  import { toExternalContent, toNote } from '@/lib/link'
   5  import { useSecondaryPage } from '@/PageManager'
   6  import { useNostr } from '@/providers/NostrProvider'
   7  import { useUserPreferences } from '@/providers/UserPreferencesProvider'
   8  import { AtSign, MessageCircle, Quote } from 'lucide-react'
   9  import { Event } from 'nostr-tools'
  10  import { useMemo } from 'react'
  11  import { useTranslation } from 'react-i18next'
  12  import Notification from './Notification'
  13  
  14  export function MentionNotification({
  15    notification,
  16    isNew = false,
  17    navIndex
  18  }: {
  19    notification: Event
  20    isNew?: boolean
  21    navIndex?: number
  22  }) {
  23    const { t } = useTranslation()
  24    const { push } = useSecondaryPage()
  25    const { pubkey } = useNostr()
  26    const { notificationListStyle } = useUserPreferences()
  27    const isMention = useMemo(() => {
  28      if (!pubkey) return false
  29      const mentions = getEmbeddedPubkeys(notification)
  30      return mentions.includes(pubkey)
  31    }, [pubkey, notification])
  32    const { parentEventId, parentExternalContent } = useMemo(() => {
  33      return getParentStuff(notification)
  34    }, [notification])
  35  
  36    return (
  37      <Notification
  38        notificationId={notification.id}
  39        icon={
  40          isMention ? (
  41            <AtSign size={24} className="text-pink-400" />
  42          ) : parentEventId ? (
  43            <MessageCircle size={24} className="text-blue-400" />
  44          ) : (
  45            <Quote size={24} className="text-green-400" />
  46          )
  47        }
  48        sender={notification.pubkey}
  49        sentAt={notification.created_at}
  50        targetEvent={notification}
  51        middle={
  52          notificationListStyle === NOTIFICATION_LIST_STYLE.DETAILED && (
  53            <ParentNotePreview
  54              eventId={parentEventId}
  55              externalContent={parentExternalContent}
  56              className=""
  57              onClick={(e) => {
  58                e.stopPropagation()
  59                if (parentExternalContent) {
  60                  push(toExternalContent(parentExternalContent))
  61                } else if (parentEventId) {
  62                  push(toNote(parentEventId))
  63                }
  64              }}
  65            />
  66          )
  67        }
  68        description={
  69          isMention ? t('mentioned you in a note') : parentEventId ? '' : t('quoted your note')
  70        }
  71        isNew={isNew}
  72        showStats
  73        navIndex={navIndex}
  74      />
  75    )
  76  }
  77