index.tsx raw

   1  import { Favicon } from '@/components/Favicon'
   2  import ProfileList from '@/components/ProfileList'
   3  import { ProfileListBySearch } from '@/components/ProfileListBySearch'
   4  import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
   5  import { fetchPubkeysFromDomain } from '@/lib/nip05'
   6  import { forwardRef, useEffect, useState } from 'react'
   7  import { useTranslation } from 'react-i18next'
   8  
   9  const ProfileListPage = forwardRef(({ index }: { index?: number }, ref) => {
  10    const { t } = useTranslation()
  11    const [title, setTitle] = useState<React.ReactNode>()
  12    const [data, setData] = useState<{
  13      type: 'search' | 'domain'
  14      id: string
  15    } | null>(null)
  16  
  17    useEffect(() => {
  18      const searchParams = new URLSearchParams(window.location.search)
  19      const search = searchParams.get('s')
  20      if (search) {
  21        setTitle(`${t('Search')}: ${search}`)
  22        setData({ type: 'search', id: search })
  23        return
  24      }
  25  
  26      const domain = searchParams.get('d')
  27      if (domain) {
  28        setTitle(
  29          <div className="flex items-center gap-1">
  30            {domain}
  31            <Favicon domain={domain} className="w-5 h-5" />
  32          </div>
  33        )
  34        setData({ type: 'domain', id: domain })
  35        return
  36      }
  37    }, [])
  38  
  39    let content: React.ReactNode = null
  40    if (data?.type === 'search') {
  41      content = <ProfileListBySearch search={data.id} />
  42    } else if (data?.type === 'domain') {
  43      content = <ProfileListByDomain domain={data.id} />
  44    }
  45  
  46    return (
  47      <SecondaryPageLayout ref={ref} index={index} title={title} displayScrollToTopButton>
  48        {content}
  49      </SecondaryPageLayout>
  50    )
  51  })
  52  ProfileListPage.displayName = 'ProfileListPage'
  53  export default ProfileListPage
  54  
  55  function ProfileListByDomain({ domain }: { domain: string }) {
  56    const [pubkeys, setPubkeys] = useState<string[]>([])
  57  
  58    useEffect(() => {
  59      const init = async () => {
  60        const _pubkeys = await fetchPubkeysFromDomain(domain)
  61        setPubkeys(_pubkeys)
  62      }
  63      init()
  64    }, [domain])
  65  
  66    return <ProfileList pubkeys={pubkeys} />
  67  }
  68