feat: add a easy way to add relay to specified set

This commit is contained in:
codytseng 2025-01-16 17:50:53 +08:00
parent e2cdc27545
commit 8fb32bd380
6 changed files with 171 additions and 45 deletions

View file

@ -1,17 +1,15 @@
import { Button } from '@/components/ui/button'
import { useFetchRelayInfos } from '@/hooks'
import { simplifyUrl } from '@/lib/url'
import { useFeed } from '@/providers/FeedProvider'
import { useRelaySets } from '@/providers/RelaySetsProvider'
import client from '@/services/client.service'
import { Save, SearchCheck } from 'lucide-react'
import { ListPlus, SearchCheck } from 'lucide-react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
export default function TemporaryRelaySet() {
const { t } = useTranslation()
const { temporaryRelayUrls, switchFeed } = useFeed()
const { addRelaySet } = useRelaySets()
const { temporaryRelayUrls } = useFeed()
const [relays, setRelays] = useState<
{
url: string
@ -42,38 +40,35 @@ export default function TemporaryRelaySet() {
return null
}
const handleSave = () => {
const relaySetName =
temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : 'Temporary'
const id = addRelaySet(relaySetName, temporaryRelayUrls)
switchFeed('relays', { activeRelaySetId: id })
}
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 className="w-full border border-dashed rounded-lg p-4 border-highlight bg-highlight/5 flex gap-4 justify-between">
<div>
<div className="flex justify-between items-center">
<div className="h-8 font-semibold">Temporary</div>
</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>
<SaveRelayDropdownMenu urls={temporaryRelayUrls} asChild>
<Button title="save" size="icon" variant="ghost">
<ListPlus />
</Button>
</SaveRelayDropdownMenu>
</div>
)
}