95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { VList } from 'virtua';
|
|
|
|
import { LoaderIcon, PlusIcon, ShareIcon } from '@shared/icons';
|
|
import { User } from '@shared/user';
|
|
|
|
import { useNostr } from '@utils/hooks/useNostr';
|
|
import { useRelay } from '@utils/hooks/useRelay';
|
|
|
|
export function RelayList() {
|
|
const navigate = useNavigate();
|
|
|
|
const { getAllRelaysByUsers } = useNostr();
|
|
const { connectRelay } = useRelay();
|
|
const { status, data } = useQuery({
|
|
queryKey: ['relays'],
|
|
queryFn: async () => {
|
|
return await getAllRelaysByUsers();
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
refetchOnMount: false,
|
|
refetchOnReconnect: false,
|
|
staleTime: Infinity,
|
|
});
|
|
|
|
const inspectRelay = (relayUrl: string) => {
|
|
const url = new URL(relayUrl);
|
|
navigate(`/relays/${url.hostname}`);
|
|
};
|
|
|
|
return (
|
|
<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
|
|
{status === 'pending' ? (
|
|
<div className="flex h-full w-full items-center justify-center pb-10">
|
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
|
<p>Loading relay...</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<VList className="h-full">
|
|
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
|
|
<h3 className="font-semibold">Relay discovery</h3>
|
|
</div>
|
|
{[...data].map(([key, value]) => (
|
|
<div
|
|
key={key}
|
|
className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900"
|
|
>
|
|
<div className="inline-flex items-center gap-2 divide-x divide-neutral-100 dark:divide-neutral-900">
|
|
<div className="inline-flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => inspectRelay(key)}
|
|
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-200 px-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
|
|
>
|
|
<ShareIcon className="h-3 w-3" />
|
|
Inspect
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => connectRelay.mutate(key)}
|
|
className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
|
|
>
|
|
<PlusIcon className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
<div className="inline-flex items-center gap-2 pl-3">
|
|
<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
|
|
Relay:{' '}
|
|
</span>
|
|
<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
{key}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="isolate flex -space-x-2">
|
|
{value.slice(0, 4).map((item) => (
|
|
<User key={item} pubkey={item} variant="stacked" />
|
|
))}
|
|
{value.length > 4 ? (
|
|
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
|
<span className="text-xs font-medium">+{value.length}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</VList>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|