pixelfed/resources/assets/js/components/PostComments.vue

<style>
 span {
  font-size: 14px;
 }
 .comment-text {
  word-break: break-all;
 }
 .comment-text p {
  display: inline;
 }
</style>

<template>
<div>
  <div class="postCommentsLoader text-center">
    <div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
  </div>
  <div class="postCommentsContainer d-none">
    <p class="mb-1 text-center load-more-link"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
    <div class="comments" data-min-id="0" data-max-id="0">
      <p class="mb-0 d-flex justify-content-between align-items-center" v-for="(comment, index) in results" :data-id="comment.id" v-bind:key="comment.id">
        <span class="pr-3">
          <span class="font-weight-bold pr-1"><bdi><a class="text-dark" :href="comment.account.url" :title="comment.account.username">{{l(comment.account.username)}}</a></bdi></span>
          <span class="comment-text" v-html="comment.content"></span>
        </span>
        <b-dropdown :id="comment.uri" variant="link" no-caret class="float-right">
          <template slot="button-content">
              <i class="fas fa-ellipsis-v text-muted"></i><span class="sr-only">Options</span>
          </template>
          <b-dropdown-item class="font-weight-bold" v-on:click="reply(comment)">Reply</b-dropdown-item>
          <b-dropdown-item class="font-weight-bold" :href="comment.url">Permalink</b-dropdown-item>
          <b-dropdown-item class="font-weight-bold" v-on:click="embed(comment)">Embed</b-dropdown-item>
          <b-dropdown-item class="font-weight-bold" :href="comment.account.url">Profile</b-dropdown-item>
          <b-dropdown-divider></b-dropdown-divider>
          <b-dropdown-item class="font-weight-bold" :href="'/i/report?type=post&id='+comment.id">Report</b-dropdown-item>
        </b-dropdown>
      </p>
    </div>
  </div>
</div>
</template>

<script>
export default {
    props: ['post-id', 'post-username'],
    data() {
        return {
            results: {},
            pagination: {},
            min_id: 0,
            max_id: 0,
            reply_to_profile_id: 0,
          }
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      embed(e) {
          pixelfed.embed.build(e);
      },
      l(e) {
        let len = e.length;
        if(len < 10) { return e; } 
        return e.substr(0, 10)+'...';
      },
      reply(e) {
          this.reply_to_profile_id = e.account.id;
          $('.comment-form input[name=comment]').val('@'+e.account.username+' ');
          $('.comment-form input[name=comment]').focus();
      },
      fetchData() {
          let url = '/api/v2/comments/'+this.postUsername+'/status/'+this.postId;
          axios.get(url)
            .then(response => {
                let self = this;
                this.results = response.data.data;
                this.pagination = response.data.meta.pagination;
                $('.postCommentsLoader').addClass('d-none');
                $('.postCommentsContainer').removeClass('d-none');
            }).catch(error => {
              if(!error.response) {
                $('.postCommentsLoader .lds-ring')
                  .attr('style','width:100%')
                  .addClass('pt-4 font-weight-bold text-muted')
                  .text('An error occured, cannot fetch comments. Please try again later.');
                console.log(error);
              } else {
                switch(error.response.status) {
                  case 401:
                    $('.postCommentsLoader .lds-ring')
                      .attr('style','width:100%')
                      .addClass('pt-4 font-weight-bold text-muted')
                      .text('Please login to view.');
                  break;

                  default:
                    $('.postCommentsLoader .lds-ring')
                      .attr('style','width:100%')
                      .addClass('pt-4 font-weight-bold text-muted')
                      .text('An error occured, cannot fetch comments. Please try again later.');
                  break;
                }
                console.log(error.response.status);
              }
            });
      },
      loadMore(e) {
          e.preventDefault();
          if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
            $('.load-more-link').addClass('d-none');
            return;
          }
          $('.postCommentsContainer').addClass('d-none');
          $('.postCommentsLoader').removeClass('d-none');
          let next = this.pagination.links.next;
          axios.get(next)
            .then(response => {
                let self = this;
                let res =  response.data.data;
                $('.postCommentsLoader').addClass('d-none');
                for(let i=0; i < res.length; i++) {
                  this.results.unshift(res[i]);
                }
                $('.postCommentsContainer').removeClass('d-none');
                this.pagination = response.data.meta.pagination;
            });
      }
    }
}
</script>