Implement follow/unfollow

src/components/CreatePost/PostEditor.vue

@@ -141,8 +141,7 @@ export default {
       try {
         const event = this.buildEvent()
         await this.app.signEvent(event)
-        //this.nostr.sendEvent(event)
-        console.log('Publishing', event)
+        this.nostr.publish(event)
 
         this.reset()
         this.$emit('publish', event)

src/components/Sidebar/FollowingBox.vue

@@ -1,11 +1,10 @@
 <template>
-  <div v-if="app.isSignedIn" class="following">
+  <div v-if="app.isSignedIn && contacts?.length" class="following">
     <div class="following-wrapper">
       <div class="following-header">
         <h3>Following</h3>
       </div>
       <div
-        v-if="contacts?.length"
         class="following-body"
       >
         <UserCard

src/components/SignIn/SignUpForm.vue

@@ -47,7 +47,7 @@ export default {
         })
       })
       await useAppStore().signEvent(event)
-      useNostrStore().sendEvent(event)
+      useNostrStore().publish(event)
 
       this.$emit('complete', {
         pubkey: account.pubkey,

src/components/User/FollowButton.vue

@@ -3,6 +3,7 @@
     v-if="app.isSignedIn"
     class="btn btn-sm"
     :class="{'btn-primary': !isFollowing}"
+    @click="toggleFollow"
   >
     {{ isFollowing ? 'Unfollow' : 'Follow' }}
   </button>
@@ -11,6 +12,7 @@
 <script>
 import {useNostrStore} from 'src/nostr/NostrStore'
 import {useAppStore} from 'stores/App'
+import Event, {EventKind, TagType} from 'src/nostr/model/Event'
 
 export default {
   name: 'FollowButton',
@@ -27,12 +29,53 @@ export default {
     }
   },
   computed: {
+    contacts() {
+      return this.nostr.getContacts(this.app.myPubkey)
+    },
     isFollowing() {
       // TODO improve
-      const contacts = this.nostr.getContacts(this.app.myPubkey)
-      return contacts?.length && contacts.find(contact => contact.pubkey === this.pubkey)
-    }
-  }
+      return this.contacts?.length && this.contacts.find(contact => contact.pubkey === this.pubkey)
+    },
+  },
+  methods: {
+    // TODO Move this logic somewhere else
+    buildEvent(contacts) {
+      return Event.fresh({
+        pubkey: this.app.myPubkey,
+        kind: EventKind.CONTACT,
+        tags: this.buildTags(contacts),
+        content: '',
+      })
+    },
+    buildTags(contacts) {
+      const tags = []
+      for (const contact of contacts) {
+        tags.push([TagType.PUBKEY, contact.pubkey])
+      }
+      return tags
+    },
+    async updateContacts(contacts) {
+      const event = this.buildEvent(contacts)
+      await this.app.signEvent(event)
+      this.nostr.publish(event)
+    },
+    toggleFollow() {
+      return this.isFollowing
+        ? this.unfollow()
+        : this.follow()
+    },
+    async follow() {
+      const contacts = [].concat(this.contacts || []) // Clone array
+      contacts.push({pubkey: this.pubkey})
+      await this.updateContacts(contacts)
+    },
+    async unfollow() {
+      const contacts = [].concat(this.contacts || []) // Clone array
+      const idx = contacts.findIndex(contact => contact.pubkey === this.pubkey)
+      contacts.splice(idx, 1)
+      await this.updateContacts(contacts)
+    },
+  },
 }
 </script>
 

src/nostr/FetchQueue.js

@@ -57,7 +57,7 @@ export default class FetchQueue extends Observable {
 
     if (!filteredIds.length) return
 
-    console.log(`Fetching ${ids.length}/${Object.keys(this.queue).length} ${this.subId}s`, ids)
+    console.log(`Fetching ${filteredIds.length}/${Object.keys(this.queue).length} ${this.subId}s`, ids)
 
     this.fetching = true
     this.retryInterval = setInterval(this.fetch.bind(this), this.retryDelay)

src/nostr/NostrStore.js

@@ -69,6 +69,7 @@ export const useNostrStore = defineStore('nostr', {
       this.contactQueue = contactQueue(this.client, 'queue')
       this.contactQueue.on('event', this.addEvent.bind(this))
     },
+
     addEvent(event, relay = null) {
       // console.log(`[EVENT] from ${relay}`, event)
 
@@ -119,7 +120,7 @@ export const useNostrStore = defineStore('nostr', {
       return !!this.seenBy[id]
     },
 
-    sendEvent(event) {
+    publish(event) {
       this.addEvent(event)
       return this.client.publish(event)
     },

src/nostr/model/Event.js

@@ -61,7 +61,7 @@ export default class Event {
     this.pubkey = opts.pubkey
     this.created_at = opts.createdAt || opts.created_at
     this.kind = opts.kind
-    this.tags = Event.parseTags(opts.tags || [])
+    this.tags = opts.tags || []
     this.content = opts.content
     this.sig = opts.sig
   }
@@ -99,11 +99,11 @@ export default class Event {
   }
 
   pubkeyTags() {
-    return this.tags.filter(tag => tag.type === TagType.PUBKEY)
+    return Event.parseTags(this.tags).filter(tag => tag.type === TagType.PUBKEY)
   }
 
   eventTags() {
-    return this.tags.filter(tag => tag.type === TagType.EVENT)
+    return Event.parseTags(this.tags).filter(tag => tag.type === TagType.EVENT)
   }
 
   pubkeyRefs() {

src/nostr/model/Note.js

@@ -1,4 +1,4 @@
-import {EventKind, EventRefs, TagType} from 'src/nostr/model/Event'
+import Event, {EventKind, EventRefs, TagType} from 'src/nostr/model/Event'
 import {isEmoji} from 'src/utils/utils'
 
 export default class Note {
@@ -21,7 +21,7 @@ export default class Note {
       author: event.pubkey,
       createdAt: event.createdAt,
       content,
-      tags: event.tags,
+      tags: Event.parseTags(event.tags),
     })
   }