Update PostComments component

resources/assets/js/components/PostComments.vue

@@ -1,69 +1,26 @@
-<style type="text/css">
-.b-dropdown > button {
-  padding:0 !important;
-}
-</style>
-<style scoped>
+<style>
  span {
   font-size: 14px;
  }
  .comment-text {
   word-break: break-all;
  }
- .b-dropdown {
-    padding:0 !important;
+ .comment-text p {
+  display: inline;
  }
-.b-dropdown < button {
- }
- .lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 51px;
-  height: 51px;
-  margin: 6px;
-  border: 6px solid #6c757d;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #6c757d transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 </style>
 
 <template>
 <div>
-  <div class="lwrapper text-center">
+  <div class="postCommentsLoader text-center">
     <div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
   </div>
-  <div class="cwrapper d-none">
+  <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">{{comment.account.username}}</a></bdi></span>
+          <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">
@@ -102,6 +59,11 @@ export default {
       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+' ');
@@ -114,11 +76,33 @@ export default {
                 let self = this;
                 this.results = response.data.data;
                 this.pagination = response.data.meta.pagination;
-                $('.lwrapper').addClass('d-none');
-                $('.cwrapper').removeClass('d-none');
+                $('.postCommentsLoader').addClass('d-none');
+                $('.postCommentsContainer').removeClass('d-none');
             }).catch(error => {
-                $('.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.');
+              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) {
@@ -127,18 +111,18 @@ export default {
             $('.load-more-link').addClass('d-none');
             return;
           }
-          $('.cwrapper').addClass('d-none');
-          $('.lwrapper').removeClass('d-none');
+          $('.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;
-                $('.lwrapper').addClass('d-none');
+                $('.postCommentsLoader').addClass('d-none');
                 for(let i=0; i < res.length; i++) {
                   this.results.unshift(res[i]);
                 }
-                $('.cwrapper').removeClass('d-none');
+                $('.postCommentsContainer').removeClass('d-none');
                 this.pagination = response.data.meta.pagination;
             });
       }