feat: explore (#85)

src/pages/secondary/HomePage/index.tsx

@@ -1,13 +1,85 @@
+import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
+import RelaySimpleInfo from '@/components/RelaySimpleInfo'
+import { Button } from '@/components/ui/button'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { forwardRef } from 'react'
+import { toRelay } from '@/lib/link'
+import relayInfoService from '@/services/relay-info.service'
+import { TNip66RelayInfo } from '@/types'
+import { ArrowRight, RefreshCcw, Server } from 'lucide-react'
+import { forwardRef, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
+  const { navigate } = usePrimaryPage()
+  const { push } = useSecondaryPage()
+  const [randomRelayInfos, setRandomRelayInfos] = useState<TNip66RelayInfo[]>([])
+
+  const refresh = useCallback(async () => {
+    const relayInfos = await relayInfoService.getRandomRelayInfos(10)
+    const relayUrls = new Set<string>()
+    const uniqueRelayInfos = relayInfos.filter((relayInfo) => {
+      if (relayUrls.has(relayInfo.url)) {
+        return false
+      }
+      relayUrls.add(relayInfo.url)
+      return true
+    })
+    setRandomRelayInfos(uniqueRelayInfos)
+  }, [])
+
+  useEffect(() => {
+    refresh()
+  }, [])
+
+  if (!randomRelayInfos.length) {
+    return (
+      <SecondaryPageLayout ref={ref} index={index} hideBackButton>
+        <div className="text-muted-foreground w-full h-screen flex items-center justify-center">
+          {t('Welcome! 🥳')}
+        </div>
+      </SecondaryPageLayout>
+    )
+  }
+
   return (
-    <SecondaryPageLayout ref={ref} index={index} hideBackButton>
-      <div className="text-muted-foreground w-full h-screen flex items-center justify-center">
-        {t('Welcome! 🥳')}
+    <SecondaryPageLayout
+      ref={ref}
+      index={index}
+      title={
+        <>
+          <Server />
+          <div>{t('Random Relays')}</div>
+        </>
+      }
+      controls={
+        <Button variant="ghost" className="h-10 [&_svg]:size-3" onClick={() => refresh()}>
+          <RefreshCcw />
+          <div>{t('randomRelaysRefresh')}</div>
+        </Button>
+      }
+      hideBackButton
+    >
+      <div className="px-4">
+        <div className="grid grid-cols-2 gap-3">
+          {randomRelayInfos.map((relayInfo) => (
+            <RelaySimpleInfo
+              key={relayInfo.url}
+              className="clickable h-auto p-3 rounded-lg border"
+              relayInfo={relayInfo}
+              onClick={(e) => {
+                e.stopPropagation()
+                push(toRelay(relayInfo.url))
+              }}
+            />
+          ))}
+        </div>
+        <div className="flex mt-2 justify-center">
+          <Button variant="ghost" onClick={() => navigate('explore')}>
+            <div>{t('Explore more')}</div>
+            <ArrowRight />
+          </Button>
+        </div>
       </div>
     </SecondaryPageLayout>
   )

src/pages/secondary/RelayPage/index.tsx

@@ -1,16 +1,33 @@
 import NoteList from '@/components/NoteList'
 import RelayInfo from '@/components/RelayInfo'
 import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
+import SearchInput from '@/components/SearchInput'
 import { Button } from '@/components/ui/button'
+import { useFetchRelayInfo } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
 import { Check, Copy } from 'lucide-react'
-import { forwardRef, useMemo, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
 
 const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
+  const { t } = useTranslation()
   const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
+  const { relayInfo } = useFetchRelayInfo(normalizedUrl)
   const title = useMemo(() => (url ? simplifyUrl(url) : undefined), [url])
+  const [searchInput, setSearchInput] = useState('')
+  const [debouncedInput, setDebouncedInput] = useState(searchInput)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedInput(searchInput)
+    }, 1000)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [searchInput])
 
   if (!normalizedUrl) {
     return <NotFoundPage ref={ref} />
@@ -25,7 +42,20 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
       displayScrollToTopButton
     >
       <RelayInfo url={normalizedUrl} />
-      <NoteList relayUrls={[normalizedUrl]} needCheckAlgoRelay />
+      {relayInfo?.supported_nips?.includes(50) && (
+        <div className="px-4 py-2">
+          <SearchInput
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder={t('Search')}
+          />
+        </div>
+      )}
+      <NoteList
+        relayUrls={[normalizedUrl]}
+        needCheckAlgoRelay
+        filter={debouncedInput ? { search: debouncedInput } : {}}
+      />
     </SecondaryPageLayout>
   )
 })