Add Comments (#4)

* Preserve whitespace in posts

* Create comments handler

* Use comments handler

* Update paw

* Add comment components

* Style comments

* Remove unnecessary code from app

* Fix linter warning

* Add key to handle children (thx @javierbyte)

* Add toggling to the form

* Return all keys always

* Correct missing semicolons

* Restore redirect

* Render posts conditionally

* Set poll time to 1s

* Set post frequency to 2s

* Add polling to comments

* Correct typo in error logging

* Clear intervals and reduce polling

* Stops polling if it's being destroyed

* Update changelog

1 files changed, 16 insertions, 3 deletions

diff --git a/app/components/post_form.js b/app/components/post_form.js
index cee17b0..1f45f0c 100644
--- a/app/components/post_form.js
+++ b/app/components/post_form.js
@@ -8,10 +8,11 @@ internals.kPostsRoute = '/api/posts';
 
 export default internals.PostFormComponent = Vue.component('post-form', {
   template: '<div class="post-form-container">' +
-      '<h1>sup.</h1>' +
-      '<textarea :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
+      '<h1>hi {{authService.user.name}}</h1>' +
+      '<button v-show="!active" class="post-submit" v-on:click="activate">Post something.</button>' +
+      '<textarea v-show="active" :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
       '<p v-show="message" class="post-form-error">{{message}}</p>' +
-      '<button :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
+      '<button v-show="active" :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
       '</div>',
 
   data() {
@@ -20,11 +21,22 @@ export default internals.PostFormComponent = Vue.component('post-form', {
       content: '',
       message: '',
       submitting: false,
+      active: false,
       authService: new AuthService()
     };
   },
 
   methods: {
+
+    // Activates the form.
+
+    activate() {
+
+      this.active = true;
+    },
+
+    // Creates a post
+
     submit() {
 
       this.submitting = true;
@@ -44,6 +56,7 @@ export default internals.PostFormComponent = Vue.component('post-form', {
         this.content = '';
         this.message = '';
         this.submitting = false;
+        this.active = false;
       }).catch((err) => {
 
         console.error(err.stack);