improve relay form

2023-12-02 17:53:45 +07:00
parent a528b646e3
commit 255dcb43fe
8 changed files with 178 additions and 102 deletions
--- a/src/app/relays/components/relayForm.tsx
+++ b/src/app/relays/components/relayForm.tsx
@@ -1,69 +1,62 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { NDKRelayUrl } from '@nostr-dev-kit/ndk';
+import { normalizeRelayUrl } from 'nostr-fetch';
 import { useState } from 'react';
-
-import { useStorage } from '@libs/storage/provider';
+import { toast } from 'sonner';

 import { PlusIcon } from '@shared/icons';

+import { useRelay } from '@utils/hooks/useRelay';
+
 const domainRegex = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/;

 export function RelayForm() {
-  const { db } = useStorage();
-  const queryClient = useQueryClient();
+  const { connectRelay } = useRelay();
+  const [relay, setRelay] = useState<{
+    url: NDKRelayUrl;
+    purpose: 'read' | 'write' | undefined;
+  }>({ url: '', purpose: undefined });

-  const [url, setUrl] = useState('');
-  const [error, setError] = useState('');
-
-  const createRelay = async () => {
-    if (url.length < 1) return setError('Please enter relay url');
+  const create = () => {
+    if (relay.url.length < 1) return toast.info('Please enter relay url');
    try {
-      const relay = new URL(url.replace(/\s/g, ''));
+      const relayUrl = new URL(relay.url.replace(/\s/g, ''));
      if (
-        domainRegex.test(relay.host) &&
-        (relay.protocol === 'wss:' || relay.protocol === 'ws:')
+        domainRegex.test(relayUrl.host) &&
+        (relayUrl.protocol === 'wss:' || relayUrl.protocol === 'ws:')
      ) {
-        const res = await db.createRelay(url);
-        if (!res) return setError("You're already using this relay");
-
-        queryClient.invalidateQueries({
-          queryKey: ['user-relay'],
-        });
-
-        setError('');
-        setUrl('');
+        connectRelay.mutate(normalizeRelayUrl(relay.url));
+        setRelay({ url: '', purpose: undefined });
      } else {
-        return setError(
+        return toast.error(
          'URL is invalid, a relay must use websocket protocol (start with wss:// or ws://). Please check again'
        );
      }
    } catch {
-      return setError('Relay URL is not valid. Please check again');
+      return toast.error('Relay URL is not valid. Please check again');
    }
  };

  return (
    <div className="flex flex-col gap-1">
-      <div className="flex h-10 items-center justify-between rounded-lg bg-neutral-200 pr-1.5 dark:bg-neutral-800">
+      <div className="flex gap-2">
        <input
-          className="h-full w-full bg-transparent pl-3 pr-1.5 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-400"
-          type="url"
+          className="h-11 flex-1 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
          placeholder="wss://"
          spellCheck={false}
          autoComplete="off"
          autoCorrect="off"
          autoCapitalize="off"
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
+          value={relay.url}
+          onChange={(e) => setRelay((prev) => ({ ...prev, url: e.target.value }))}
        />
        <button
          type="button"
-          onClick={() => createRelay()}
-          className="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500 text-white hover:bg-blue-600"
+          onClick={() => create()}
+          className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white hover:bg-blue-600"
        >
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="h-5 w-5" />
        </button>
      </div>
-      <span className="text-sm text-red-400">{error}</span>
    </div>
  );
 }
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@@ -1,22 +1,18 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { normalizeRelayUrl } from 'nostr-fetch';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { toast } from 'sonner';
 import { VList } from 'virtua';

-import { useStorage } from '@libs/storage/provider';
-
 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 queryClient = useQueryClient();

  const { getAllRelaysByUsers } = useNostr();
-  const { db } = useStorage();
+  const { connectRelay } = useRelay();
  const { status, data } = useQuery({
    queryKey: ['relays'],
    queryFn: async () => {
@@ -33,20 +29,6 @@ export function RelayList() {
    navigate(`/relays/${url.hostname}`);
  };

-  const connectRelay = async (relayUrl: string) => {
-    const url = normalizeRelayUrl(relayUrl);
-    const res = await db.createRelay(url);
-
-    if (res) {
-      toast.info('Connected. You need to restart app to take effect');
-      queryClient.invalidateQueries({
-        queryKey: ['user-relay'],
-      });
-    } else {
-      toast.warning("You're aldready connected to this relay");
-    }
-  };
-
  return (
    <div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
      {status === 'pending' ? (
@@ -59,9 +41,7 @@ export function RelayList() {
      ) : (
        <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 text-neutral-950 dark:text-neutral-50">
-              All relays
-            </h3>
+            <h3 className="font-semibold">Relay discovery</h3>
          </div>
          {[...data].map(([key, value]) => (
            <div
@@ -80,7 +60,7 @@ export function RelayList() {
                  </button>
                  <button
                    type="button"
-                    onClick={() => connectRelay(key)}
+                    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" />
--- a/src/app/relays/components/userRelayList.tsx
+++ b/src/app/relays/components/userRelayList.tsx
@@ -1,4 +1,5 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { NDKKind, NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';

 import { RelayForm } from '@app/relays/components/relayForm';

@@ -7,39 +8,49 @@ import { useStorage } from '@libs/storage/provider';

 import { CancelIcon } from '@shared/icons';

-export function UserRelay() {
-  const queryClient = useQueryClient();
+import { useRelay } from '@utils/hooks/useRelay';

-  const { relayUrls } = useNDK();
+export function UserRelayList() {
  const { db } = useStorage();
+  const { ndk, relayUrls } = useNDK();
+  const { removeRelay } = useRelay();
  const { status, data } = useQuery({
-    queryKey: ['user-relay'],
+    queryKey: ['relays', db.account.pubkey],
    queryFn: async () => {
-      return await db.getExplicitRelayUrls();
+      const event = await ndk.fetchEvent(
+        {
+          kinds: [NDKKind.RelayList],
+          authors: [db.account.pubkey],
+        },
+        { cacheUsage: NDKSubscriptionCacheUsage.ONLY_RELAY }
+      );
+
+      if (!event) throw new Error('relay set not found');
+      return event.tags;
    },
    refetchOnWindowFocus: false,
  });

-  const removeRelay = async (relayUrl: string) => {
-    await db.removeRelay(relayUrl);
-    queryClient.invalidateQueries({
-      queryKey: ['user-relay'],
-    });
-  };
-
  return (
-    <div className="mt-3 px-3">
-      {status === 'pending' ? (
-        <p>Loading...</p>
-      ) : (
-        <div className="flex flex-col gap-2">
-          {data.map((item) => (
+    <div className="col-span-1">
+      <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">Connected relays</h3>
+      </div>
+      <div className="mt-3 flex flex-col gap-2 px-3">
+        {status === 'pending' ? (
+          <p>Loading...</p>
+        ) : !data ? (
+          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900">
+            <p className="text-sm font-medium">You not have personal relay set yet</p>
+          </div>
+        ) : (
+          data.map((item) => (
            <div
-              key={item}
-              className="group flex h-10 items-center justify-between rounded-lg bg-neutral-100 pl-3 pr-1.5 dark:bg-neutral-900"
+              key={item[1]}
+              className="group flex h-11 items-center justify-between rounded-lg bg-neutral-100 pl-3 pr-1.5 dark:bg-neutral-900"
            >
              <div className="inline-flex items-center gap-2.5">
-                {relayUrls.includes(item) ? (
+                {relayUrls.includes(item[1]) ? (
                  <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-teal-500"></span>
@@ -51,21 +62,21 @@ export function UserRelay() {
                  </span>
                )}
                <p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                  {item}
+                  {item[1]}
                </p>
              </div>
              <button
                type="button"
-                onClick={() => removeRelay(item)}
+                onClick={() => removeRelay.mutate(item[1])}
                className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
              >
                <CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
              </button>
            </div>
-          ))}
-          <RelayForm />
-        </div>
-      )}
+          ))
+        )}
+        <RelayForm />
+      </div>
    </div>
  );
 }