81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { useFetchRelayInfos } from '@/hooks'
|
|
import { useRelaySettings } from '@/providers/RelaySettingsProvider'
|
|
import client from '@/services/client.service'
|
|
import { Save, SearchCheck } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function TemporaryRelayGroup() {
|
|
const { t } = useTranslation()
|
|
const { temporaryRelayUrls, relayGroups, addRelayGroup, switchRelayGroup } = useRelaySettings()
|
|
const [relays, setRelays] = useState<
|
|
{
|
|
url: string
|
|
isConnected: boolean
|
|
}[]
|
|
>(temporaryRelayUrls.map((url) => ({ url, isConnected: false })))
|
|
const { relayInfos } = useFetchRelayInfos(relays.map((relay) => relay.url))
|
|
|
|
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)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
setRelays(temporaryRelayUrls.map((url) => ({ url, isConnected: false })))
|
|
}, [temporaryRelayUrls])
|
|
|
|
if (!relays.length) {
|
|
return null
|
|
}
|
|
|
|
const handleSave = () => {
|
|
const existingTemporaryIndexes = relayGroups
|
|
.filter((group) => /^Temporary \d+$/.test(group.groupName))
|
|
.map((group) => group.groupName.split(' ')[1])
|
|
.map(Number)
|
|
.filter((index) => !isNaN(index))
|
|
const nextIndex = Math.max(...existingTemporaryIndexes, 0) + 1
|
|
const groupName = `Temporary ${nextIndex}`
|
|
addRelayGroup(groupName, temporaryRelayUrls)
|
|
switchRelayGroup(groupName)
|
|
}
|
|
|
|
return (
|
|
<div className={`w-full border border-dashed rounded-lg p-4 border-highlight bg-highlight/5`}>
|
|
<div className="flex justify-between items-center">
|
|
<div className="h-8 font-semibold">Temporary</div>
|
|
<Button title="save" size="icon" variant="ghost" onClick={handleSave}>
|
|
<Save />
|
|
</Button>
|
|
</div>
|
|
{relays.map((relay, index) => (
|
|
<div key={index} className="flex items-center justify-between">
|
|
<div className="flex gap-2 items-center">
|
|
{relay.isConnected ? (
|
|
<div className="text-green-500 text-xs">●</div>
|
|
) : (
|
|
<div className="text-red-500 text-xs">●</div>
|
|
)}
|
|
<div className="text-muted-foreground text-sm">{relay.url}</div>
|
|
{relayInfos[index]?.supported_nips?.includes(50) && (
|
|
<div title={t('supports search')} className="text-highlight">
|
|
<SearchCheck size={14} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|