Add simple client-side posting effect

assets/data.json

@@ -6,5 +6,6 @@
   "backgroundImage": false,
   "backgroundColour": "#73D8FF",
   "privateKey": "encrypted private key",
-  "publicKey": "public key"
+  "publicKey": "public key",
+  "debug": false
 }

components/textComposer.vue

@@ -10,7 +10,7 @@
     </no-ssr>
     <div class='compose-tools buttons'>
       <button @click='editorContent=""' ref='clearButton' class='button'>Clear</button>
-      <button ref='postButton' class='button is-primary'>Post</button>
+      <button ref='postButton' class='button is-primary' @click='post'>Post</button>
     </div>
   </div>
 </template>
@@ -47,8 +47,14 @@ export default {
   },
 
   methods: {
+    clear () {
+      this.editorContent = ''
+    },
     editorChange ( { quill, html, text } ) {
       this.$emit('composerChange', quill, html, text)
+    },
+    post () {
+      this.$emit('post', this.editorContent)
     }
   }
 }

pages/index.vue

@@ -6,9 +6,15 @@
     <!-- Main tabs with currently hard-coded content. -->
     <b-tabs v-model='activeTab' position='is-centered' class='block'>
       <b-tab-item label='Me' :disabled='!configured'>
-        <content-type-filter />
-        <textComposer @composerChange='composerChange' v-if='signedIn'/>
-        <pre style='word-break: break-word;' v-if='signedIn'>{{ composerContent }}</pre>
+        <!-- <content-type-filter /> -->
+        <textComposer ref='textComposer' @composerChange='composerChange' @post='post' v-if='signedIn'/>
+        <pre style='word-break: break-word;' v-if='signedIn && debug'>{{ composerContent }}</pre>
+        <transition-group name='list' tag='div' @enter='clearTextComposer'>
+          <div v-for='post in posts' :key='post.id'>
+            <!-- <span>ID: {{post.id}}</span> -->
+            <span v-html='post.content'></span>
+          </div>
+        </transition-group>
       </b-tab-item>
       <b-tab-item label="Everyone" :disabled='!configured'><b-message type='is-info' has-icon><strong>Nothing yet.</strong> Federated posts will go here.</b-message></b-tab-item>
       <b-tab-item label='Search' :disabled='!configured'><search /></b-tab-item>
@@ -19,7 +25,7 @@
     </b-tabs>
 
     <!-- Follow modal -->
-    <follow-modal :isActive='followModalActive' @close='followModalActive = false' />
+    <follow-modal :isActive='followModalActive' @after-enter='followModalActive = false' />
   </div>
 </template>
 
@@ -56,20 +62,41 @@ export default {
     name () { return this.$store.state.name },
     bio () { return this.$store.state.bio },
     signedIn () { return this.$store.state.signedIn },
-    configured () { return this.$store.state.configured }
+    configured () { return this.$store.state.configured },
+    debug () { return this.$store.state.debug }
   },
 
   data () {
     return {
       followModalActive: false,
       composerContent: '',
-      activeTab: 0
+      activeTab: 0,
+      postCounter: 2,
+
+      // Mock posts
+      posts: [
+      {
+        id: 1,
+        content: "<h2>Earliest post</h2><p>So is this.</p>"
+      },
+      {
+        id: 0,
+        content: "<h2>Later post</h2><p>This is a great post.</p>"
+      }
+    ]
     }
   },
 
   methods: {
     composerChange (quill, html, text) {
       this.composerContent = html
+    },
+    post (content) {
+      // Add the new post to the top of the list.
+      this.posts.unshift({id: this.postCounter++, content})
+    },
+    clearTextComposer() {
+      this.$refs.textComposer.clear()
     }
   },
 
@@ -78,7 +105,7 @@ export default {
 
     // Decide which tab to show based on whether the site has been
     // configured yet or not.
-    this.activeTab = this.configured ? Tabs.Me : Tabs.Settings;
+    this.activeTab = this.configured ? Tabs.Me : Tabs.Settings
     console.log(`Active tab: ${this.activeTab}`)
   }
 }
@@ -111,5 +138,11 @@ nav.tabs
   margin-bottom: 0;
 }
 
-
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to {
+  opacity: 1;
+  transform: translateY(-7em);
+}
 </style>