Implement recursive commenting and sorting by number of likes

1 files changed, 71 insertions, 0 deletions

diff --git a/demo/components/comment.js b/demo/components/comment.js
new file mode 100644
index 0000000..d838ee1
--- /dev/null
+++ b/demo/components/comment.js
@@ -0,0 +1,71 @@
+import LikeButton from './like-button.js'
+
+export default {
+  name: 'Comments',
+
+  components: { LikeButton },
+
+  props: ['messageID'],
+
+  methods: {
+    commentObjects(objects) {
+      console.log(111111111111)
+      console.log(objects.filter(o=>'like' in o))
+      console.log(objects.filter(o=>'comment' in o))
+      return objects.filter(o=>
+                      'comment' in o &&
+                      'timestamp' in o &&
+                      o.comment == this.messageID &&
+                      typeof o.timestamp == 'number')
+                      .sort((a,b)=>
+                        objects.filter(o=>
+                        'like' in o &&
+                        o.like == a._id).length
+                        < objects.filter(o=>
+                        'like' in o &&
+                        o.like == b._id).length
+                      )
+    },
+
+    sendComment(objects) {
+      this.$graffitiUpdate({
+        comment: this.messageID,
+        timestamp: Date.now(),
+        message: this.message,
+        _tags: [this.messageID]
+      })
+    }
+  },
+
+  template: `
+    <graffiti-objects :tags="[messageID]" v-slot="{objects}">
+      <details>
+        <summary>Comment</summary>
+        <form @submit.prevent="sendComment(objects)">
+          <input v-model="message">
+          <input type="submit" value="Submit"/>
+        </form>
+      </details>
+      <details open>
+        <summary>Collapse thread</summary>
+        <ul v-for="object in commentObjects(objects)">
+          <li>
+            <Name :of="object._by"/>
+            {{ object.message }}
+            <LikeButton :messageID="object._id" :parent="messageID"/>
+            <template v-if="object._by==$graffitiMyID">
+              <button @click="object.message+='!!';object._update()">
+                ‼️
+              </button>
+
+              <button @click="object.message='deleted';object._update()">
+                ❌
+              </button>
+            </template>
+            <Comments :messageID="object._id" />
+          </li>
+        </ul>
+      </details>
+    </graffiti-objects>`
+}
+