💨

src/components/RelaySetsSetting/RelayUrl.tsx

@@ -2,66 +2,40 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useFetchRelayInfos } from '@/hooks'
 import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
-import { useFeed } from '@/providers/FeedProvider'
 import { useRelaySets } from '@/providers/RelaySetsProvider'
-import client from '@/services/client.service'
 import { CircleX, SearchCheck } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   const { t } = useTranslation()
   const { relaySets, updateRelaySet } = useRelaySets()
-  const { activeRelaySetId } = useFeed()
   const [newRelayUrl, setNewRelayUrl] = useState('')
   const [newRelayUrlError, setNewRelayUrlError] = useState<string | null>(null)
   const relaySet = useMemo(
     () => relaySets.find((r) => r.id === relaySetId),
     [relaySets, relaySetId]
   )
-  const [relays, setRelays] = useState<
-    {
-      url: string
-      isConnected: boolean
-    }[]
-  >(relaySet?.relayUrls.map((url) => ({ url, isConnected: false })) ?? [])
-  const isActive = relaySet?.id === activeRelaySetId
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const connectionStatusMap = client.listConnectionStatus()
-      setRelays((pre) => {
-        return pre.map((relay) => {
-          const isConnected = connectionStatusMap.get(relay.url) || false
-          return { ...relay, isConnected }
-        })
-      })
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [])
 
   if (!relaySet) return null
 
   const removeRelayUrl = (url: string) => {
-    setRelays((relays) => relays.filter((relay) => relay.url !== url))
     updateRelaySet({
       ...relaySet,
-      relayUrls: relays.map(({ url }) => url).filter((u) => u !== url)
+      relayUrls: relaySet.relayUrls.filter((u) => u !== url)
     })
   }
 
   const saveNewRelayUrl = () => {
     if (newRelayUrl === '') return
     const normalizedUrl = normalizeUrl(newRelayUrl)
-    if (relays.some(({ url }) => url === normalizedUrl)) {
+    if (relaySet.relayUrls.includes(normalizedUrl)) {
       return setNewRelayUrlError(t('Relay already exists'))
     }
     if (!isWebsocketUrl(normalizedUrl)) {
       return setNewRelayUrlError(t('invalid relay URL'))
     }
-    setRelays((pre) => [...pre, { url: normalizedUrl, isConnected: false }])
-    const newRelayUrls = [...relays.map(({ url }) => url), normalizedUrl]
+    const newRelayUrls = [...relaySet.relayUrls, normalizedUrl]
     updateRelaySet({ ...relaySet, relayUrls: newRelayUrls })
     setNewRelayUrl('')
   }
@@ -81,14 +55,8 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   return (
     <>
       <div className="mt-1">
-        {relays.map(({ url, isConnected: isConnected }, index) => (
-          <RelayUrl
-            key={index}
-            isActive={isActive}
-            url={url}
-            isConnected={isConnected}
-            onRemove={() => removeRelayUrl(url)}
-          />
+        {relaySet.relayUrls.map((url, index) => (
+          <RelayUrl key={index} url={url} onRemove={() => removeRelayUrl(url)} />
         ))}
       </div>
       <div className="mt-2 flex gap-2">
@@ -107,17 +75,7 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   )
 }
 
-function RelayUrl({
-  isActive,
-  url,
-  isConnected,
-  onRemove
-}: {
-  isActive: boolean
-  url: string
-  isConnected: boolean
-  onRemove: () => void
-}) {
+function RelayUrl({ url, onRemove }: { url: string; onRemove: () => void }) {
   const { t } = useTranslation()
   const {
     relayInfos: [relayInfo]
@@ -126,13 +84,6 @@ function RelayUrl({
   return (
     <div className="flex items-center justify-between">
       <div className="flex gap-2 items-center">
-        {!isActive ? (
-          <div className="text-muted-foreground text-xs">●</div>
-        ) : isConnected ? (
-          <div className="text-green-500 text-xs">●</div>
-        ) : (
-          <div className="text-red-500 text-xs">●</div>
-        )}
         <div className="text-muted-foreground text-sm">{url}</div>
         {relayInfo?.supported_nips?.includes(50) && (
           <div title={t('supports search')} className="text-highlight">