feat: add a easy way to add relay to specified set
This commit is contained in:
parent
e2cdc27545
commit
8fb32bd380
6 changed files with 171 additions and 45 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue