]> git.r.bdr.sh - rbdr/dasein/blame_incremental - app/components/comments.js
Merge branch 'release/1.0.0'
[rbdr/dasein] / app / components / comments.js
... / ...
CommitLineData
1import Axios from 'axios';
2import Vue from 'vue';
3import AuthService from '../services/auth';
4
5import CommentFormComponent from './comment_form';
6import CommentComponent from './comment';
7import DatetimeFilter from '../filters/datetime';
8import UsertimeFilter from '../filters/usertime';
9
10const internals = {};
11
12internals.kPostsRoute = '/api/posts';
13internals.kCommentsRoute = '/comments';
14internals.kPollFrequency = 2000;
15
16export 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});