From 674e5f0339ca13a25b92ff6231f532d9d543d08b Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 1 Oct 2023 09:02:14 +0700
Subject: [PATCH] finish relay manegament screen
---
src/app/relays/components/relayEventList.tsx | 63 +++++++-
src/app/relays/components/relayList.tsx | 7 +-
src/app/relays/relay.tsx | 148 ++++++++++++++++---
src/shared/user.tsx | 2 +-
4 files changed, 192 insertions(+), 28 deletions(-)
diff --git a/src/app/relays/components/relayEventList.tsx b/src/app/relays/components/relayEventList.tsx
index f373ebf45..56841a884 100644
--- a/src/app/relays/components/relayEventList.tsx
+++ b/src/app/relays/components/relayEventList.tsx
@@ -1,29 +1,84 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { VList } from 'virtua';
import { useNDK } from '@libs/ndk/provider';
+import {
+ ArticleNote,
+ FileNote,
+ NoteWrapper,
+ Repost,
+ TextNote,
+ UnknownNote,
+} from '@shared/notes';
+
export function RelayEventList({ relayUrl }: { relayUrl: string }) {
const { fetcher } = useNDK();
const { status, data } = useQuery(
['relay-event'],
async () => {
+ const url = 'wss://' + relayUrl;
const events = await fetcher.fetchLatestEvents(
- [relayUrl],
+ [url],
{
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
},
100
);
-
return events as unknown as NDKEvent[];
},
{ refetchOnWindowFocus: false }
);
+ const renderItem = useCallback(
+ (event: NDKEvent) => {
+ switch (event.kind) {
+ case NDKKind.Text:
+ return (
+
+
+
+ );
+ case NDKKind.Repost:
+ return ;
+ case 1063:
+ return (
+
+
+
+ );
+ case NDKKind.Article:
+ return (
+
+
+
+ );
+ default:
+ return (
+
+
+
+ );
+ }
+ },
+ [data]
+ );
+
return (
-
-
TODO
+
+
+ {status === 'loading' ? (
+
Loading...
+ ) : (
+
+
+ {data.map((item) => renderItem(item))}
+
+
+ )}
+
);
}
diff --git a/src/app/relays/components/relayList.tsx b/src/app/relays/components/relayList.tsx
index e59d9d96a..0281ab4a8 100644
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@@ -22,7 +22,12 @@ export function RelayList() {
async () => {
return await getAllRelaysByUsers();
},
- { refetchOnWindowFocus: false }
+ {
+ refetchOnWindowFocus: false,
+ refetchOnMount: false,
+ refetchOnReconnect: false,
+ staleTime: Infinity,
+ }
);
const inspectRelay = (relayUrl: string) => {
diff --git a/src/app/relays/relay.tsx b/src/app/relays/relay.tsx
index 4940ff8df..576b2094d 100644
--- a/src/app/relays/relay.tsx
+++ b/src/app/relays/relay.tsx
@@ -1,14 +1,39 @@
import { Suspense } from 'react';
-import { Await, useLoaderData } from 'react-router-dom';
+import { Await, useLoaderData, useNavigate, useParams } from 'react-router-dom';
-import { LoaderIcon } from '@shared/icons';
+import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+import { RelayEventList } from './components/relayEventList';
export function RelayScreen() {
+ const { url } = useParams();
+
const data: { relay?: { [key: string]: string } } = useLoaderData();
+ const navigate = useNavigate();
+
+ const getSoftwareName = (url: string) => {
+ const filename = url.substring(url.lastIndexOf('/') + 1);
+ return filename.replace('.git', '');
+ };
+
+ const titleCase = (s: string) => {
+ return s
+ .replace(/^[-_]*(.)/, (_, c) => c.toUpperCase())
+ .replace(/[-_]+(.)/g, (_, c) => ' ' + c.toUpperCase());
+ };
return (
-
+
+
+
+
Global events
+
+
+
Information
@@ -31,25 +56,104 @@ export function RelayScreen() {
}
>
{(resolvedRelay) => (
-
-
- Name : {resolvedRelay.name}
-
-
- Description :{' '}
- {resolvedRelay.description}
-
-
- Contact :{' '}
- {resolvedRelay.contact}
-
-
- Software : [open website]
-
-
- Version :{' '}
- {resolvedRelay.version}
-
+
+
+
+ {resolvedRelay.name}
+
+
+ {resolvedRelay.description}
+
+
+ {resolvedRelay.pubkey ? (
+
+ ) : null}
+ {resolvedRelay.contact ? (
+
+ ) : null}
+
+
+
+ Supported NIPs:
+
+
+ {resolvedRelay.supported_nips.map((item: string) => (
+
+ {item}
+
+ ))}
+
+
+ {resolvedRelay.limitation ? (
+
+
Limitation
+
+ {Object.keys(resolvedRelay.limitation).map((key, index) => {
+ return (
+
+
+ {titleCase(key)}:
+
+
+ {resolvedRelay.limitation[key].toString()}
+
+
+ );
+ })}
+
+
+ ) : null}
+ {resolvedRelay.payments_url ? (
+
+ ) : null}
)}
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index 7c467bd98..8fab1c30d 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -277,7 +277,7 @@ export const User = memo(function User({