Add follow/follower count

README.md

@@ -40,13 +40,15 @@ If you like Coracle and want to support its development, you can donate sats via
 
 ## 0.2.6
 
-- [x] Add support for at-mentions
+- [x] Add support for at-mentions in note and reply composition
 - [x] Improve cleanup on logout
 - [x] Move add note button to be available everywhere
 - [x] Fix reporting relay along with tags
 - [x] Add support for bech32 keys
 - [x] Add second order follows to network tab
 - [x] Add favicon and social media preview image
+- [x] Extract urls in person bios
+- [x] Add follow/follower counts
 
 ## 0.2.5
 

src/relay/pool.js

@@ -166,13 +166,15 @@ const loadEvents = async filter => {
   return events
 }
 
-const listenForEvents = async (key, filter, onEvent) => {
+const listenForEvents = async (key, filter, onEvent, {shouldProcess = true} = {}) => {
   if (listenForEvents.subs[key]) {
     listenForEvents.subs[key].unsub()
   }
 
   listenForEvents.subs[key] = await sub(filter, e => {
+    if (shouldProcess) {
       db.events.process(e)
+    }
 
     if (onEvent) {
       onEvent(e)

src/routes/Person.svelte

@@ -17,29 +17,45 @@
   export let pubkey
   export let activeTab
 
-  let sub = null
+  let subs = []
   let following = $user && find(t => t[1] === pubkey, $user.petnames)
+  let followers = new Set()
+  let followersCount = 0
+  let person
+
+  $: {
+    person = $people[pubkey] || {pubkey}
+  }
 
   onMount(async () => {
-    sub = await relay.pool.listenForEvents(
+    subs.push(await relay.pool.listenForEvents(
       'routes/Person',
-      [{kinds: [0, 1, 5, 7], authors: [pubkey], since: now()}],
+      [{kinds: [1, 5, 7], authors: [pubkey], since: now()},
-      when(propEq('kind', 1), relay.loadNotesContext)
+       {kinds: [0, 3, 12165], authors: [pubkey]}],
-    )
+      when(propEq('kind', 1), relay.loadNoteContext)
+    ))
+
+    subs.push(await relay.pool.listenForEvents(
+      'routes/Person/followers',
+      [{kinds: [3], '#p': [pubkey]}],
+      e => {
+        followers.add(e.pubkey)
+        followersCount = followers.size
+      },
+      {shouldProcess: false},
+    ))
   })
 
   onDestroy(() => {
-    if (sub) {
+    for (const sub of subs) {
       sub.unsub()
     }
   })
 
-  const getPerson = () => $people[pubkey] || {pubkey}
-
   const setActiveTab = tab => navigate(`/people/${pubkey}/${tab}`)
 
   const follow = () => {
-    relay.cmd.addPetname($user, pubkey, getPerson().name)
+    relay.cmd.addPetname($user, pubkey, person.name)
 
     following = true
   }
@@ -51,7 +67,7 @@
   }
 
   const openAdvanced = () => {
-    modal.set({form: 'person/settings', person: getPerson()})
+    modal.set({form: 'person/settings', person})
   }
 </script>
 
@@ -60,15 +76,15 @@
     <div class="flex gap-4">
       <div
         class="overflow-hidden w-12 h-12 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
-        style="background-image: url({getPerson().picture})" />
+        style="background-image: url({person.picture})" />
       <div class="flex-grow">
         <div class="flex items-center gap-2">
-          <h1 class="text-2xl">{displayPerson(getPerson())}</h1>
+          <h1 class="text-2xl">{displayPerson(person)}</h1>
           {#if $user && $user.pubkey !== pubkey}
             <i class="fa-solid fa-sliders cursor-pointer" on:click={openAdvanced} />
           {/if}
         </div>
-        <p>{@html renderContent(getPerson().about || '')}</p>
+        <p>{@html renderContent(person.about || '')}</p>
       </div>
       <div class="whitespace-nowrap">
         {#if $user?.pubkey === pubkey}
@@ -87,6 +103,10 @@
       </div>
     </div>
   </div>
+  <div class="flex gap-8 ml-16">
+    <div><strong>{person?.petnames?.length}</strong> following</div>
+    <div><strong>{followersCount}</strong> followers</div>
+  </div>
 </div>
 
 <Tabs tabs={['notes', 'likes', 'network']} {activeTab} {setActiveTab} />
@@ -95,8 +115,8 @@
 {:else if activeTab === 'likes'}
 <Likes {pubkey} />
 {:else if activeTab === 'network'}
-{#if $people[pubkey]}
+{#if person}
-<Network person={getPerson()} />
+<Network person={person} />
 {:else}
 <div class="py-16 max-w-xl m-auto flex justify-center">
   Unable to show network for this person.

src/views/person/Likes.svelte

@@ -12,7 +12,7 @@
     const [since, until] = cursor.step()
     const filter = {kinds: [7], authors: [pubkey], since, until}
 
-    await relay.loadEventsContext(
+    await relay.loadNotesContext(
       await relay.pool.loadEvents(filter),
       {loadParents: true}
     )

src/views/person/Network.svelte

@@ -13,7 +13,7 @@
     const authors = getTagValues(person.petnames)
     const filter = {since, until, kinds: [1], authors}
 
-    await relay.loadEventsContext(
+    await relay.loadNotesContext(
       await relay.pool.loadEvents(filter),
       {loadParents: true}
     )

src/views/person/Notes.svelte

@@ -5,7 +5,7 @@
 
   export let pubkey
 
-  const cursor = new Cursor(timedelta(3, 'days'))
+  const cursor = new Cursor(timedelta(1, 'days'))
 
   const loadNotes = async () => {
     const [since, until] = cursor.step()