git.r.bdr.sh - rbdr/dasein/blob - app/components/comments.js

   1 import Axios from 'axios';
   2 import Vue from 'vue';
   3 import AuthService from '../services/auth';
   4
   5 import CommentFormComponent from './comment_form';
   6 import CommentComponent from './comment';
   7 import DatetimeFilter from '../filters/datetime';
   8 import UsertimeFilter from '../filters/usertime';
   9
  10 const internals = {};
  11
  12 internals.kPostsRoute = '/api/posts';
  13 internals.kCommentsRoute = '/comments';
  14 internals.kPollFrequency = 2000;
  15
  16 export default internals.CommentsComponent = Vue.component('comments', {
  17   template: '<div class="comments-container">' +
  18       '<p v-show="message" class="comments-error">{{message}}</p>' +
  19       '<comment v-for="comment in comments" v-bind:comment="comment" :key="comment.uuid"></comment>' +
  20       '<comment-form v-bind:postUuid="postUuid" v-on:comment-submitted="addComment"></comment-form>' +
  21       '</div>',
  22
  23   props: ['postUuid'],
  24
  25   data() {
  26
  27     return {
  28       message: '',
  29       poller: null,
  30       authService: new AuthService(),
  31       comments: []
  32     };
  33   },
  34
  35   methods: {
  36     fetchComments() {
  37
  38       const route = `${internals.kPostsRoute}/${this.postUuid}${internals.kCommentsRoute}`;
  39
  40       return Axios({
  41         method: 'get',
  42         headers: {
  43           Authorization: `Bearer ${this.authService.token}`
  44         },
  45         url: route
  46       }).then((response) => {
  47
  48         this.comments = response.data;
  49         if (!this._isBeingDestroyed) {
  50           setTimeout(this.fetchComments.bind(this), internals.kPollFrequency);
  51         }
  52       }).catch((err) => {
  53
  54         console.error(err.stack);
  55         this.message = 'Error while loading the comments...';
  56       });
  57     },
  58
  59     addComment(comment) {
  60
  61       this.comments.push(comment);
  62     }
  63   },
  64
  65   components: {
  66     commentForm: CommentFormComponent,
  67     comment: CommentComponent,
  68     datetime: DatetimeFilter,
  69     usertime: UsertimeFilter
  70   },
  71
  72   mounted() {
  73
  74     this.fetchComments();
  75   }
  76 });