diff --git a/src/components/OthersRelayList/index.tsx b/src/components/OthersRelayList/index.tsx index 00dcbe47..b64a7784 100644 --- a/src/components/OthersRelayList/index.tsx +++ b/src/components/OthersRelayList/index.tsx @@ -1,12 +1,12 @@ import { useSecondaryPage } from '@/PageManager' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' -import { useFetchRelayList } from '@/hooks' +import { useFetchRelayInfo, useFetchRelayList } from '@/hooks' import { toRelay } from '@/lib/link' import { userIdToPubkey } from '@/lib/pubkey' import { simplifyUrl } from '@/lib/url' import { TMailboxRelay } from '@/types' -import { ListPlus, Telescope } from 'lucide-react' +import { ListPlus } from 'lucide-react' import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import RelayIcon from '../RelayIcon' @@ -22,7 +22,7 @@ export default function OthersRelayList({ userId }: { userId: string }) { } return ( -
+
{relayList.originalRelays.map((relay, index) => ( ))} @@ -33,26 +33,30 @@ export default function OthersRelayList({ userId }: { userId: string }) { function RelayItem({ relay }: { relay: TMailboxRelay }) { const { t } = useTranslation() const { push } = useSecondaryPage() + const { relayInfo } = useFetchRelayInfo(relay.url) const { url, scope } = relay return ( -
-
push(toRelay(url))} - > - -
{simplifyUrl(url)}
+
push(toRelay(url))} + > +
+
+ +
{simplifyUrl(url)}
+
+ {!!relayInfo?.description &&
{relayInfo.description}
} +
+ {['both', 'read'].includes(scope) && ( + {t('Read')} + )} + {['both', 'write'].includes(scope) && ( + {t('Write')} + )} +
-
- {scope === 'read' ? ( - {t('Read')} - ) : scope === 'write' ? ( - {t('Write')} - ) : null} - +
e.stopPropagation()}>
)} {relayInfo.contact && (
Contact
-
+
{relayInfo.contact}
@@ -55,7 +55,7 @@ export default function RelayInfo({ url }: { url: string }) { {relayInfo.software && (
Software
-
+
{formatSoftware(relayInfo.software)}
@@ -64,7 +64,7 @@ export default function RelayInfo({ url }: { url: string }) { {relayInfo.version && (
Version
-
+
{relayInfo.version}
diff --git a/src/hooks/useFetchRelayList.tsx b/src/hooks/useFetchRelayList.tsx index 6c6f12e5..e227b874 100644 --- a/src/hooks/useFetchRelayList.tsx +++ b/src/hooks/useFetchRelayList.tsx @@ -3,7 +3,11 @@ import { TRelayList } from '@/types' import { useEffect, useState } from 'react' export function useFetchRelayList(pubkey?: string | null) { - const [relayList, setRelayList] = useState({ write: [], read: [] }) + const [relayList, setRelayList] = useState({ + write: [], + read: [], + originalRelays: [] + }) const [isFetching, setIsFetching] = useState(true) useEffect(() => { diff --git a/src/pages/secondary/ProfilePage/index.tsx b/src/pages/secondary/ProfilePage/index.tsx index a91f1915..ec1aeea8 100644 --- a/src/pages/secondary/ProfilePage/index.tsx +++ b/src/pages/secondary/ProfilePage/index.tsx @@ -51,10 +51,6 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number () => (profile?.pubkey ? generateImageByPubkey(profile?.pubkey) : ''), [profile] ) - const relayCount = useMemo( - () => new Set(relayList.write.concat(relayList.read)).size, - [relayList] - ) const isSelf = accountPubkey === profile?.pubkey if (!profile && isFetching) { @@ -128,7 +124,7 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number to={isSelf ? toRelaySettings('mailbox') : toOthersRelaySettings(pubkey)} className="flex gap-1 hover:underline w-fit" > - {relayCount} + {relayList.originalRelays.length}
{t('Relays')}
diff --git a/src/pages/secondary/RelayPage/index.tsx b/src/pages/secondary/RelayPage/index.tsx index 5f80b9e5..b7188f0f 100644 --- a/src/pages/secondary/RelayPage/index.tsx +++ b/src/pages/secondary/RelayPage/index.tsx @@ -4,8 +4,8 @@ import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu' import { Button } from '@/components/ui/button' import SecondaryPageLayout from '@/layouts/SecondaryPageLayout' import { normalizeUrl, simplifyUrl } from '@/lib/url' -import { ListPlus } from 'lucide-react' -import { useMemo } from 'react' +import { Check, Copy, ListPlus } from 'lucide-react' +import { useMemo, useState } from 'react' import NotFoundPage from '../NotFoundPage' export default function RelayPage({ url, index }: { url?: string; index?: number }) { @@ -20,13 +20,7 @@ export default function RelayPage({ url, index }: { url?: string; index?: number - - - } + controls={} displayScrollToTopButton > @@ -34,3 +28,25 @@ export default function RelayPage({ url, index }: { url?: string; index?: number ) } + +function RelayPageControls({ url }: { url: string }) { + const [copied, setCopied] = useState(false) + const handleCopy = () => { + navigator.clipboard.writeText(url) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + + return ( + <> + + + + + + ) +}