Improve home feed refresh

9 files changed, 97 insertions, 74 deletions

diff --git a/src/lib/ArticleHeader.svelte b/src/lib/ArticleHeader.svelte
index d3697b7..9ea84e6 100644
--- a/src/lib/ArticleHeader.svelte
+++ b/src/lib/ArticleHeader.svelte
@@ -5,10 +5,20 @@
   import { idList } from "$lib/stores";
   import { Card, Button, Modal, Tooltip } from "flowbite-svelte";
   import { ClipboardCheckOutline, ClipboardCleanOutline, CodeOutline, ShareNodesOutline } from "flowbite-svelte-icons";
+  import { ndk } from "./ndk";
 
   export let event: NDKEvent;
-  const title: string = JSON.parse(event.content).title;
-  const href: string = neventEncode(event);
+
+  let title: string;
+  let href: string;
+
+  try {
+    const relays = $ndk.activeUser?.relayUrls ?? standardRelays;
+    title = JSON.parse(event.content).title;
+    href = neventEncode(event, relays);
+  } catch (e) {
+    console.warn(e);
+  }
 
   const handleSendEvents = () => {
     $idList = [];
@@ -50,33 +60,35 @@
   }
 </script>
 
-<Card class='ArticleBox card-leather w-lg'>
-  <div class='flex flex-col space-y-4'>
-    <a href="/{href}" on:click={handleSendEvents}>
-      <h2>{title}</h2>
-    </a>
-    <div class='w-full flex space-x-2 justify-end'>
-      <Button class='btn-leather' size='xs' on:click={shareNjump}><ShareNodesOutline /></Button>
-      <Tooltip class='tooltip-leather' type='auto' placement='top' on:show={() => shareLinkCopied = false}>
-        {#if shareLinkCopied}
-          <ClipboardCheckOutline />
-        {:else}
-          Share via NJump
-        {/if}
-      </Tooltip>
-      <Button class='btn-leather' size='xs' outline on:click={copyEventId}><ClipboardCleanOutline /></Button>
-      <Tooltip class='tooltip-leather' type='auto' placement='top' on:show={() => eventIdCopied = false}>
-        {#if eventIdCopied}
-          <ClipboardCheckOutline />
-        {:else}
-          Copy event ID
-        {/if}
-      </Tooltip>
-      <Button class='btn-leather' size='xs' outline on:click={viewJson}><CodeOutline /></Button>
-      <Tooltip class='tooltip-leather' type='auto' placement='top'>View JSON</Tooltip>
+{#if title != null && href != null}
+  <Card class='ArticleBox card-leather w-lg'>
+    <div class='flex flex-col space-y-4'>
+      <a href="/{href}" on:click={handleSendEvents}>
+        <h2>{title}</h2>
+      </a>
+      <div class='w-full flex space-x-2 justify-end'>
+        <Button class='btn-leather' size='xs' on:click={shareNjump}><ShareNodesOutline /></Button>
+        <Tooltip class='tooltip-leather' type='auto' placement='top' on:show={() => shareLinkCopied = false}>
+          {#if shareLinkCopied}
+            <ClipboardCheckOutline />
+          {:else}
+            Share via NJump
+          {/if}
+        </Tooltip>
+        <Button class='btn-leather' size='xs' outline on:click={copyEventId}><ClipboardCleanOutline /></Button>
+        <Tooltip class='tooltip-leather' type='auto' placement='top' on:show={() => eventIdCopied = false}>
+          {#if eventIdCopied}
+            <ClipboardCheckOutline />
+          {:else}
+            Copy event ID
+          {/if}
+        </Tooltip>
+        <Button class='btn-leather' size='xs' outline on:click={viewJson}><CodeOutline /></Button>
+        <Tooltip class='tooltip-leather' type='auto' placement='top'>View JSON</Tooltip>
+      </div>
     </div>
-  </div>
-  <Modal class='modal-leather' title='Event JSON' bind:open={jsonModalOpen} autoclose outsideclose size='sm'>
-    <code>{JSON.stringify(event.rawEvent())}</code>
-  </Modal>
-</Card>
+    <Modal class='modal-leather' title='Event JSON' bind:open={jsonModalOpen} autoclose outsideclose size='sm'>
+      <code>{JSON.stringify(event.rawEvent())}</code>
+    </Modal>
+  </Card>
+{/if}
diff --git a/src/lib/Toc.svelte b/src/lib/Toc.svelte
index 536f99f..9d433b5 100644
--- a/src/lib/Toc.svelte
+++ b/src/lib/Toc.svelte
@@ -4,7 +4,7 @@
 	export let notes: NDKEvent[] = [];
     // check if notes is empty
     if (notes.length === 0) {
-        console.log('notes is empty');
+        console.debug('notes is empty');
     }
 </script>
 
diff --git a/src/lib/cards/Editor.svelte b/src/lib/cards/Editor.svelte
index 0de7189..6872e77 100644
--- a/src/lib/cards/Editor.svelte
+++ b/src/lib/cards/Editor.svelte
@@ -47,15 +47,15 @@
         let relays = await event.publish();
         relays.forEach((relay) => {
           relay.once('published', () => {
-            console.log('published to', relay);
+            console.debug('published to', relay);
           });
           relay.once('publish:failed', (relay, err) => {
-            console.log('publish failed to', relay, err);
+            console.debug('publish failed to', relay, err);
           });
         });
         success = 1;
       } catch (err) {
-        console.log('failed to publish event', err);
+        console.debug('failed to publish event', err);
         error = String(err);
         success = -1;
       }
diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte
index 0ceefe7..c5df8a9 100644
--- a/src/lib/components/Login.svelte
+++ b/src/lib/components/Login.svelte
@@ -16,7 +16,7 @@
     await $ndk.connect();
     profile = await user.fetchProfile();
 
-    console.log('NDK signed in with extension and reconnected.');
+    console.debug('NDK signed in with extension and reconnected.');
 
     $signedIn = true;
   };
diff --git a/src/lib/components/Toc.svelte b/src/lib/components/Toc.svelte
index 1d28ce6..0e4139a 100644
--- a/src/lib/components/Toc.svelte
+++ b/src/lib/components/Toc.svelte
@@ -2,7 +2,7 @@
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
  	import {nip19} from 'nostr-tools';
 	export let notes: NDKEvent[] = [];
-    console.log(notes);
+    console.debug(notes);
 </script>
 
 <div class="toc">
diff --git a/src/lib/consts.ts b/src/lib/consts.ts
index d28392d..93ec343 100644
--- a/src/lib/consts.ts
+++ b/src/lib/consts.ts
@@ -1,2 +1,4 @@
 export const wikiKind = 30818;
-export const standardRelays = ["wss://nostr.thesamecat.io"];
+export const indexKind = 30040;
+export const zettelKind = 30041;
+export const standardRelays = [ "wss://thecitadel.nostr1.com" ];
diff --git a/src/lib/defaultShareButton.svelte b/src/lib/defaultShareButton.svelte
index 0563afc..241b99f 100644
--- a/src/lib/defaultShareButton.svelte
+++ b/src/lib/defaultShareButton.svelte
@@ -12,21 +12,21 @@
   let modal = false;
 
   function copyEventID() {
-    console.log("copyEventID");
+    console.debug("copyEventID");
     const relays: string[] = standardRelays;
     const naddr = neventEncode(event, relays);
     navigator.clipboard.writeText(naddr);
   }
   function viewJSON() {
-    console.log("viewJSON");
+    console.debug("viewJSON");
     modal = !modal;
-    console.log(modal);
+    console.debug(modal);
   }
 
   function shareNjump() {
     const relays: string[] = standardRelays;
     const naddr = neventEncode(event, relays);
-    console.log(naddr);
+    console.debug(naddr);
     navigator.clipboard.writeText(`njump.me/${naddr}`);
   }
 </script>
diff --git a/src/lib/ndk.ts b/src/lib/ndk.ts
index 745ae4e..ac03a65 100644
--- a/src/lib/ndk.ts
+++ b/src/lib/ndk.ts
@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import NDK, { NDKEvent, NDKNip07Signer } from '@nostr-dev-kit/ndk';
+import NDK from '@nostr-dev-kit/ndk';
 import NDKCacheAdapterDexie from '@nostr-dev-kit/ndk-cache-dexie';
 import { writable, type Writable } from 'svelte/store';
 import { standardRelays } from './consts';
@@ -23,7 +23,7 @@ export function getNdkInstance() {
     enableOutboxModel: true,
     explicitRelayUrls: relays,
   });
-  ndk.connect().then(() => console.log('ndk connected'));
+  ndk.connect().then(() => console.debug('ndk connected'));
 
   return ndk;
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5852aa5..7e0e6e6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,44 +1,53 @@
 <script lang="ts">
   import ArticleHeader from "$lib/ArticleHeader.svelte";
-  import { ndk, signedIn } from "$lib/ndk";
-  import { NDKRelaySet, type NDKUser } from "@nostr-dev-kit/ndk";
-  const kind = 30040;
-  const count: number = 10;
+  import { indexKind } from "$lib/consts";
+  import { ndk } from "$lib/ndk";
+  import { NDKEvent, NDKRelayList, NDKRelaySet, type NDKUser } from "@nostr-dev-kit/ndk";
 
-  async function loadEvents(user?: NDKUser) {
-    if (user == null) {
-      return $ndk.fetchEvents(
-        { kinds: [kind] },
-        { closeOnEose: true }
-      );
-    }
+  const getEvents = (): Promise<Set<NDKEvent>> =>
+    $ndk.fetchEvents(
+      // @ts-ignore
+      { kinds: [indexKind] },
+    );
+
+  const getEventsFromUserRelays = (userRelays: NDKRelayList): Promise<Set<NDKEvent>> => {
+    const relaySet = NDKRelaySet.fromRelayUrls(userRelays!.readRelayUrls, $ndk);
 
-    const relays = await user.relayList();
-    const relaySet = NDKRelaySet.fromRelayUrls(relays!.readRelayUrls, $ndk);
-    
     // TODO: Add more filter parameters to customize the event feed.
     return $ndk.fetchEvents(
-      { authors: [user.pubkey, ], kinds: [kind] },
-      { closeOnEose: true },
+      // @ts-ignore
+      { kinds: [indexKind] },
       relaySet,
     );
-  }
+  };
 
-  $: eventList = loadEvents($ndk.activeUser);
+  let user: NDKUser | null | undefined;
+  let readRelays: NDKRelayList | null | undefined;
 
-  signedIn.subscribe(async isSignedIn => {
-    if (isSignedIn) {
-      eventList = loadEvents();
-    }
-  });
+  $: {
+    user = $ndk.activeUser;
+    user?.relayList().then(relays => readRelays = relays);
+  }
 </script>
 
 <div class='leather flex flex-col flex-grow-0 space-y-4 overflow-y-auto w-max'>
-  {#await eventList}
-    <p>Loading...</p>
-  {:then events}
-    {#each Array.from(events) as event}
-      <ArticleHeader {event} />
-    {/each}
-  {/await}
+  {#key user}
+    {#if user == null || readRelays == null}
+      {#await getEvents()}
+        <p>Loading...</p>
+      {:then events}
+        {#each Array.from(events) as event}
+          <ArticleHeader {event} />
+        {/each}
+      {/await}
+    {:else}
+      {#await getEventsFromUserRelays(readRelays)}
+        <p>Loading...</p>
+      {:then events}
+        {#each Array.from(events) as event}
+          <ArticleHeader {event} />
+        {/each}
+      {/await}
+    {/if}
+  {/key}
 </div>