]> git.r.bdr.sh - rbdr/dasein/blob - app/components/comments.js
e29cedc3c4affdc2b9910ff5ac8dd307438663ff
[rbdr/dasein] / 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 });