1 files changed, 65 insertions, 0 deletions
diff --git a/components/chat.js b/components/chat.js
new file mode 100644
index 0000000..5095dcd
--- /dev/null
+++ b/components/chat.js
@@ -0,0 +1,65 @@
+import { Name } from './name.js'
+import Comments from './comment.js'
+
+export default {
+
+  components: { Name, Comments },
+
+  data: ()=> ({
+    message: '',
+    channel: 'demo'
+  }),
+
+  methods: {
+    messageObjects(objects) {
+      return objects.filter(o=> 
+                      'message' in o &&
+                      'timestamp' in o &&
+                      typeof o.message == 'string' &&
+                      typeof o.timestamp == 'number')
+                    .sortBy('timestamp')
+    },
+
+    sendMessage() {
+      if (!this.message) return
+      this.$graffitiUpdate({
+        message: this.message,
+        timestamp: Date.now(),
+        _tags: [this.channel]
+      })
+      this.message = ''
+    }
+  },
+
+  template: `
+    <p>
+      Chat Channel: <input v-model="channel"/>
+    </p>
+
+    <graffiti-objects :tags="[channel]" v-slot="{objects}">
+      <ul v-for="object in messageObjects(objects)">
+        <li>
+          <em><Name :of="object._by"/></em>:
+          {{ object.message }}
+
+          <Comments :messageID="object._id" />
+
+          <template v-if="object._by==$graffitiMyID">
+            <button @click="object.message+='!!'">
+              ‼️
+            </button>
+
+            <button @click="delete object._key">
+              ❌
+            </button>
+          </template>
+        </li>
+      </ul>
+    </graffiti-objects>
+
+    <form @submit.prevent="sendMessage">
+      <input v-model="message">
+      <input type="submit" value="Submit"/>
+    </form>`
+}
+