Added moderation

4 files changed, 45 insertions, 3 deletions

diff --git a/demo/components/chat.js b/demo/components/chat.js
index 08b478b..2d68ee0 100644
--- a/demo/components/chat.js
+++ b/demo/components/chat.js
@@ -32,7 +32,9 @@ export default {
   },
 
   template: `
-    Chat Channel: <input v-model="channel"/>
+    <p>
+      Chat Channel: <input v-model="channel"/>
+    </p>
 
     <graffiti-objects :tags="[channel]" v-slot="{objects}">
       <ul v-for="object in messageObjects(objects)">
diff --git a/demo/components/like-button.js b/demo/components/like-button.js
index 1c9649a..5c9b1a5 100644
--- a/demo/components/like-button.js
+++ b/demo/components/like-button.js
@@ -3,11 +3,11 @@ export default {
   props: ['messageID'],
 
   methods: {
-    likeObjects(objects) {
+    likeObjects(objects, messageID=this.messageID) {
       return objects.filter(o=>
                       'like' in o &&
                       'timestamp' in o &&
-                      o.like == this.messageID &&
+                      o.like == messageID &&
                       typeof o.timestamp == 'number')
 
     },
diff --git a/demo/components/moderation.js b/demo/components/moderation.js
new file mode 100644
index 0000000..8ba4e98
--- /dev/null
+++ b/demo/components/moderation.js
@@ -0,0 +1,36 @@
+import Chat from './chat.js'
+import LikeButton from './like-button.js'
+
+export default {
+
+  data: ()=> ({
+    likeThreshold: 0,
+    channel: 'demo'
+  }),
+
+  methods: {
+    messageObjects: Chat.methods.messageObjects,
+    likeObjects: LikeButton.methods.likeObjects,
+  },
+
+  template: `
+    <p>
+      Chat Channel: <input v-model="channel"/>
+    </p>
+
+    <p>
+      Only show me objects with more than <input v-model.number="likeThreshold"/> likes.
+    </p>
+
+    <graffiti-objects :tags="[channel]" v-slot="{objects}">
+      <ul v-for="object in messageObjects(objects)">
+        <graffiti-objects :tags="[object._id]" v-slot="{objects: responses}">
+          <li v-if="likeObjects(responses, object._id).length >= likeThreshold">
+            <em><Name :of="object._by"/></em>:
+            {{ object.message }}
+          </li>
+        </graffiti-objects>
+      </ul>
+    </graffiti-objects>`
+}
+
diff --git a/demo/index.html b/demo/index.html
index b409ee4..57b3132 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,12 +16,14 @@
     import { createApp } from 'vue'
     import { Name, SetMyName } from './components/name.js'
     import Chat from './components/chat.js'
+    import Moderation from './components/moderation.js'
     import GraffitiVue from 'graffiti-vue'
     createApp()
       .use(GraffitiVue)
       .component('Name', Name)
       .component('SetMyName', SetMyName)
       .component('Chat', Chat)
+      .component('Moderation', Moderation)
       .mount('#app')
   </script>
 </head>
@@ -61,6 +63,8 @@
 
   <h2>Moderation</h2>
 
+  <moderation></moderation>
+
   <h2>Private Messages</h2>
 
   <h2>Tagging</h2>