Update note detail to use explicit relays

README.md

@@ -73,6 +73,7 @@ If you like Coracle and want to support its development, you can donate sats via
 - [ ] Close connections that haven't been used in a while
 - [ ] Load feeds from network rather than user relays? This could make global feed more useful: global for _my_ relays
 - [ ] Release to android with https://svelte-native.technology/docs
+- [ ] Compress is taking too long and messing up the ui, maybe use dexie for people?
 
 ## 0.2.6
 

src/App.svelte

@@ -206,7 +206,7 @@
         <dialog open class="bg-dark border-t border-solid border-medium h-full w-full overflow-auto">
           {#if $modal.note}
             {#key $modal.note.id}
-            <NoteDetail note={$modal.note} />
+            <NoteDetail {...$modal} />
             {/key}
           {:else if $modal.form === 'relay'}
             <AddRelay />

src/agent/index.js

@@ -1,6 +1,6 @@
-import {last} from 'ramda'
+import {last, uniq} from 'ramda'
 import {derived, get} from 'svelte/store'
-import {getTagValues} from 'src/util/nostr'
+import {getTagValues, Tags} from 'src/util/nostr'
 import pool from 'src/agent/pool'
 import keys from 'src/agent/keys'
 import defaults from 'src/agent/defaults'
@@ -45,6 +45,10 @@ export const getRelays = pubkey => {
   return relays
 }
 
+export const getEventRelays = event => {
+  return uniq(getRelays(event.pubkey).concat(Tags.from(event).relays()))
+}
+
 export const publish = async (relays, event) => {
   const signedEvent = await keys.sign(event)
 

src/app/loaders.js

@@ -2,7 +2,7 @@ import {uniq, pluck, groupBy, identity} from 'ramda'
 import {ensurePlural, createMap} from 'hurdak/lib/hurdak'
 import {findReply, personKinds, Tags, getTagValues} from 'src/util/nostr'
 import {now, timedelta} from 'src/util/misc'
-import {load, db, getPerson} from 'src/agent'
+import {load, getPerson} from 'src/agent'
 import defaults from 'src/agent/defaults'
 
 const getStalePubkeys = pubkeys => {
@@ -108,18 +108,4 @@ const loadNotesContext = async (relays, notes, {loadParents = false} = {}) => {
   }
 }
 
-const getOrLoadNote = async (relays, id) => {
-  if (!await db.events.get(id)) {
-    await load(relays, {kinds: [1], ids: [id]})
-  }
-
-  const note = await db.events.get(id)
-
-  if (note) {
-    await loadNotesContext(relays, [note], {loadParent: true})
-  }
-
-  return note
-}
-
-export default {getOrLoadNote, loadNotesContext, loadNetwork, loadPeople, personKinds, loadContext}
+export default {loadNotesContext, loadNetwork, loadPeople, personKinds, loadContext}

src/partials/Note.svelte

@@ -14,7 +14,7 @@
   import Badge from "src/partials/Badge.svelte"
   import Compose from "src/partials/Compose.svelte"
   import Card from "src/partials/Card.svelte"
-  import {user, getPerson, getRelays} from 'src/agent'
+  import {user, getPerson, getRelays, getEventRelays} from 'src/agent'
   import cmd from 'src/app/cmd'
 
   export let note
@@ -40,12 +40,15 @@
 
   const onClick = e => {
     if (!['I'].includes(e.target.tagName) && !hasParent('a', e.target)) {
-      modal.set({note})
+      modal.set({note, relays: getEventRelays(note)})
     }
   }
 
   const goToParent = async () => {
-    modal.set({note: {id: findReply(note)[1]}})
+    modal.set({
+      note: {id: findReply(note)[1]},
+      relays: getEventRelays(note),
+    })
   }
 
   const react = async content => {
@@ -88,7 +91,7 @@
     const {content, mentions} = reply.parse()
 
     if (content) {
-      cmd.createReply(getRelays(), note, content, mentions)
+      cmd.createReply(getEventRelays(note), note, content, mentions)
 
       reply = null
     }

src/views/NoteDetail.svelte

@@ -1,60 +1,38 @@
 <script>
-  import {liveQuery} from 'dexie'
-  import {when, propEq} from 'ramda'
+  import {first} from 'hurdak/lib/hurdak'
   import {fly} from 'svelte/transition'
-  import {onMount, onDestroy} from 'svelte'
-  import {now} from 'src/util/misc'
-  import {listen, getRelays} from 'src/agent'
+  import {load} from 'src/agent'
   import loaders from 'src/app/loaders'
   import query from 'src/app/query'
   import Note from 'src/partials/Note.svelte'
   import Spinner from 'src/partials/Spinner.svelte'
 
   export let note
+  export let relays
 
-  let observable, sub
+  if (!note.pubkey) {
+    load(relays, {ids: [note.id]}).then(async events => {
+      const found = first(events)
 
-  onMount(async () => {
-    note = await loaders.getOrLoadNote(getRelays(), note.id)
+      if (found) {
+        const context = await loaders.loadContext(relays, found)
 
-    // Log this for debugging purposes
-    console.log('NoteDetail', note)
-
-    if (note) {
-      sub = await listen(
-        getRelays(),
-        [{kinds: [1, 5, 7], '#e': [note.id], since: now()}],
-        when(propEq('kind', 1), e => {
-          loaders.loadNotesContext(getRelays(), e)
-        })
-      )
-    }
-  })
-
-  onDestroy(() => {
-    if (sub) {
-      sub.unsub()
-    }
-  })
-
-  onMount(() => {
-    observable = liveQuery(() => query.findNote(note.id, {showEntire: true, depth: 5}))
-
-    return () => {
-      if (sub) {
-        sub.unsub()
+        note = query.annotate(found, context, {showEntire: true, depth: 3})
       }
-    }
-  })
+
+      // Log this for debugging purposes
+      console.log('NoteDetail', note)
+    })
+  }
 </script>
 
 {#if !note}
 <div class="p-4 text-center text-white" in:fly={{y: 20}}>
   Sorry, we weren't able to find this note.
 </div>
-{:else if $observable}
+{:else if note.pubkey}
 <div in:fly={{y: 20}}>
-  <Note invertColors anchorId={note.id} note={$observable} depth={2} />
+  <Note invertColors anchorId={note.id} note={note} depth={2} />
 </div>
 {:else}
 <Spinner />