reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: relay manegament screen

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-30 19:07:17 +07:00
parent a2e3247432
commit 11ed618a7f
10 changed files with 248 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/relays/components/userRelay.tsx
+37 -14
View File
@@ -1,9 +1,15 @@
import { useQuery } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { RelayForm } from '@app/relays/components/relayForm';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { CancelIcon } from '@shared/icons';
export function UserRelay() {
const queryClient = useQueryClient();
const { relayUrls } = useNDK();
const { db } = useStorage();
const { status, data } = useQuery(
@@ -14,6 +20,11 @@ export function UserRelay() {
{ refetchOnWindowFocus: false }
);
const removeRelay = async (relayUrl: string) => {
await db.removeRelay(relayUrl);
queryClient.invalidateQueries(['user-relay']);
};
return (
<div className="mt-3 px-3">
{status === 'loading' ? (
@@ -23,22 +34,34 @@ export function UserRelay() {
{data.map((item) => (
<div
key={item}
className="inline-flex h-10 items-center gap-2.5 rounded-lg bg-white/10 px-3"
className="group flex h-10 items-center justify-between rounded-lg bg-white/10 pl-3 pr-1.5"
>
{relayUrls.includes(item) ? (
<span className="relative flex h-3 w-3">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
</span>
) : (
<span className="relative flex h-3 w-3">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
</span>
)}
<p className="text-sm font-medium">{item}</p>
<div className="inline-flex items-center gap-2.5">
{relayUrls.includes(item) ? (
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
</span>
) : (
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
</span>
)}
<p className="max-w-[20rem] truncate text-sm font-medium leading-none">
{item}
</p>
</div>
<button
type="button"
onClick={() => removeRelay(item)}
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-white/10 group-hover:inline-flex"
>
<CancelIcon className="h-4 w-4 text-white" />
</button>
</div>
))}
<RelayForm />
</div>
)}
</div>