Implement recursive commenting and sorting by number of likes

3 files changed, 76 insertions, 5 deletions

diff --git a/demo/components/chat.js b/demo/components/chat.js
index 2d68ee0..bffde26 100644
--- a/demo/components/chat.js
+++ b/demo/components/chat.js
@@ -1,9 +1,9 @@
 import { Name } from './name.js'
-import LikeButton from './like-button.js'
+import Comments from './comment.js'
 
 export default {
 
-  components: { Name, LikeButton },
+  components: { Name, Comments },
 
   data: ()=> ({
     message: '',
@@ -42,7 +42,7 @@ export default {
           <em><Name :of="object._by"/></em>:
           {{ object.message }}
 
-          <LikeButton :messageID="object._id" />
+          <Comments :messageID="object._id" />
 
           <template v-if="object._by==$graffitiMyID">
             <button @click="object.message+='!!';object._update()">
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>`
+}
+
diff --git a/demo/components/like-button.js b/demo/components/like-button.js
index 5c9b1a5..6f65ac6 100644
--- a/demo/components/like-button.js
+++ b/demo/components/like-button.js
@@ -1,6 +1,6 @@
 export default {
 
-  props: ['messageID'],
+  props: ['messageID', 'parent'],
 
   methods: {
     likeObjects(objects, messageID=this.messageID) {
@@ -20,7 +20,7 @@ export default {
         this.$graffitiUpdate({
           like: this.messageID,
           timestamp: Date.now(),
-          _tags: [this.messageID]
+          _tags: [this.messageID, this.parent]
         })
       }
     }