index.tsx raw

   1  import { useSecondaryPage } from '@/PageManager'
   2  import { Badge } from '@/components/ui/badge'
   3  import { Pubkey } from '@/domain'
   4  import { useFetchRelayInfo, useFetchRelayList } from '@/hooks'
   5  import { toRelay } from '@/lib/link'
   6  import { TMailboxRelay } from '@/types'
   7  import { useMemo } from 'react'
   8  import { useTranslation } from 'react-i18next'
   9  import RelaySimpleInfo from '../RelaySimpleInfo'
  10  
  11  export default function OthersRelayList({ userId }: { userId: string }) {
  12    const { t } = useTranslation()
  13    const pubkey = useMemo(() => Pubkey.tryFromString(userId)?.hex ?? userId, [userId])
  14    const { relayList, isFetching } = useFetchRelayList(pubkey)
  15  
  16    if (isFetching) {
  17      return <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
  18    }
  19  
  20    return (
  21      <div className="space-y-4">
  22        {relayList.originalRelays.map((relay, index) => (
  23          <RelayItem key={`read-${relay.url}-${index}`} relay={relay} />
  24        ))}
  25      </div>
  26    )
  27  }
  28  
  29  function RelayItem({ relay }: { relay: TMailboxRelay }) {
  30    const { t } = useTranslation()
  31    const { push } = useSecondaryPage()
  32    const { relayInfo } = useFetchRelayInfo(relay.url)
  33    const { url, scope } = relay
  34  
  35    return (
  36      <div className="p-4 rounded-lg border clickable space-y-1" onClick={() => push(toRelay(url))}>
  37        <RelaySimpleInfo relayInfo={relayInfo} />
  38        <div className="flex gap-2">
  39          {['both', 'read'].includes(scope) && (
  40            <Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
  41          )}
  42          {['both', 'write'].includes(scope) && (
  43            <Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
  44          )}
  45        </div>
  46      </div>
  47    )
  48  }
  49