Add Comments (#4)

[rbdr/dasein] / app / components / posts.js

diff --git a/app/components/posts.js b/app/components/posts.js
index c41707fc7e71b8e3963bb807b50994af5ca6c8d9..d0e03387d9f207f5885d58f395970d87bd3c4229 100644 (file)
--- 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();
+
   }
 });