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, 12 insertions, 12 deletions

diff --git a/app/components/posts.js b/app/components/posts.js
index c41707f..d0e0338 100644
--- a/app/components/posts.js
+++ b/app/components/posts.js
@@ -3,26 +3,21 @@ import Vue from 'vue';
 import AuthService from '../services/auth';
 
 import PostFormComponent from './post_form';
+import PostComponent from './post';
 import DatetimeFilter from '../filters/datetime';
 import UsertimeFilter from '../filters/usertime';
 
 const internals = {};
 
 internals.kPostsRoute = '/api/posts';
+internals.kPollFrequency = 5000;
 
 export default internals.PostsComponent = Vue.component('posts', {
-  template: '<div class="posts-container">' +
+  template: '<div v-if="authService.authenticated" class="posts-container">' +
       '<post-form v-on:post-submitted="addPost"></post-form>' +
       '<h1>Posts.</h1>' +
       '<p v-show="message" class="posts-error">{{message}}</p>' +
-      '<article class="post" v-for="post in posts">' +
-      '<aside class="post-meta">' +
-      '<img :src="post.userImage" v-bind:alt="\'Avatar for @\' + post.userId">' +
-      '<a v-bind:href="\'https://twitter.com/\' + post.userId">{{post.userName}}</a> said on ' +
-      '<time v-bind:datetime="post.timestamp | datetime">{{post.timestamp | usertime}}</time>' +
-      '</aside>' +
-      '<div class="post-content">{{post.content}}</div>' +
-      '</article>' +
+      '<post v-for="post in posts" v-bind:post="post" :key="post.uuid"></post>' +
       '</div>',
 
   data() {
@@ -46,9 +41,12 @@ export default internals.PostsComponent = Vue.component('posts', {
       }).then((response) => {
 
         this.posts = response.data;
+        if (!this._isBeingDestroyed) {
+          setTimeout(this.fetchPosts.bind(this), internals.kPollFrequency);
+        }
       }).catch((err) => {
 
-        console.err(err.stack);
+        console.error(err.stack);
         this.message = 'Error while loading the posts...';
       });
     },
@@ -61,17 +59,19 @@ export default internals.PostsComponent = Vue.component('posts', {
 
   components: {
     postForm: PostFormComponent,
+    post: PostComponent,
     datetime: DatetimeFilter,
     usertime: UsertimeFilter
   },
 
-  mounted: function mounted() {
+  mounted() {
 
     if (!this.authService.authenticated) {
       return this.$router.push('/login');
     }
 
-    return this.fetchPosts();
+    this.fetchPosts();
+
   }
 });