1 files changed, 57 insertions, 56 deletions

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index c945806b..aab2cea5 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -44,15 +44,14 @@ interface PostListingState {
   showConfirmTransferCommunity: boolean;
   imageExpanded: boolean;
   viewSource: boolean;
-  my_vote: number;
-  score: number;
+  upvoteLoading: boolean;
+  downvoteLoading: boolean;
 }
 
 interface PostListingProps {
   post: Post;
   showCommunity?: boolean;
   showBody?: boolean;
-  viewOnly?: boolean;
   moderators?: Array<CommunityUser>;
   admins?: Array<UserView>;
 }
@@ -70,8 +69,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     showConfirmTransferCommunity: false,
     imageExpanded: false,
     viewSource: false,
-    my_vote: this.props.post.my_vote,
-    score: this.props.post.score,
+    upvoteLoading: this.props.post.upvoteLoading,
+    downvoteLoading: this.props.post.downvoteLoading,
   };
 
   constructor(props: any, context: any) {
@@ -84,6 +83,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  componentWillReceiveProps(nextProps: PostListingProps) {
+    if (
+      nextProps.post.upvoteLoading !== this.state.upvoteLoading ||
+      nextProps.post.downvoteLoading !== this.state.downvoteLoading
+    ) {
+      this.setState({
+        upvoteLoading: false,
+        downvoteLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
       <div class="row">
@@ -106,52 +117,59 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     let post = this.props.post;
     return (
       <div class="listing col-12">
-        <div
-          className={`vote-bar mr-2 float-left small text-center ${this.props
-            .viewOnly && 'no-click'}`}
-        >
+        <div className={`vote-bar mr-2 float-left small text-center`}>
           <button
             disabled={!UserService.Instance.user}
             className={`btn p-0 ${
-              this.state.my_vote == 1 ? 'text-info' : 'text-muted'
+              post.my_vote == 1 ? 'text-info' : 'text-muted'
             }`}
             onClick={linkEvent(this, this.handlePostLike)}
           >
-            <svg class="icon upvote">
-              <use xlinkHref="#icon-arrow-up"></use>
-            </svg>
+            {this.state.upvoteLoading ? (
+              <svg class="icon icon-spinner spin upvote">
+                <use xlinkHref="#icon-spinner"></use>
+              </svg>
+            ) : (
+              <svg class="icon upvote">
+                <use xlinkHref="#icon-arrow-up"></use>
+              </svg>
+            )}
           </button>
-          <div class={`font-weight-bold text-muted`}>{this.state.score}</div>
+          <div class={`font-weight-bold text-muted`}>{post.score}</div>
           {WebSocketService.Instance.site.enable_downvotes && (
             <button
               disabled={!UserService.Instance.user}
               className={`btn p-0 ${
-                this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
+                post.my_vote == -1 ? 'text-danger' : 'text-muted'
               }`}
               onClick={linkEvent(this, this.handlePostDisLike)}
             >
-              <svg class="icon downvote">
-                <use xlinkHref="#icon-arrow-down"></use>
-              </svg>
+              {this.state.downvoteLoading ? (
+                <svg class="icon icon-spinner spin downvote">
+                  <use xlinkHref="#icon-spinner"></use>
+                </svg>
+              ) : (
+                <svg class="icon downvote">
+                  <use xlinkHref="#icon-arrow-down"></use>
+                </svg>
+              )}
             </button>
           )}
         </div>
-        {post.url &&
-          isImage(post.url) &&
-          !post.nsfw &&
-          !post.community_nsfw &&
-          !this.state.imageExpanded && (
-            <span
-              title={i18n.t('expand_here')}
-              class="pointer"
-              onClick={linkEvent(this, this.handleImageExpandClick)}
-            >
-              <img
-                class="mx-2 mt-1 float-left img-fluid thumbnail rounded"
-                src={imageThumbnailer(post.url)}
-              />
-            </span>
-          )}
+        {post.url && isImage(post.url) && !this.state.imageExpanded && (
+          <span
+            title={i18n.t('expand_here')}
+            class="pointer"
+            onClick={linkEvent(this, this.handleImageExpandClick)}
+          >
+            <img
+              className={`mx-2 mt-1 float-left img-fluid thumbnail rounded ${(post.nsfw ||
+                post.community_nsfw) &&
+                'img-blur'}`}
+              src={imageThumbnailer(post.url)}
+            />
+          </span>
+        )}
         {post.url && isVideo(post.url) && (
           <video
             playsinline
@@ -722,38 +740,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   handlePostLike(i: PostListing) {
-    this.state.my_vote = i.props.post.my_vote == 1 ? 0 : 1;
-    let add = 1;
-    if (i.props.post.my_vote == 1) {
-      add = -1;
-    } else if (i.props.post.my_vote == -1) {
-      add = 2;
-    }
-
-    this.state.score = i.props.post.score + add;
-    this.setState(this.state);
+    i.setState({ upvoteLoading: true });
 
     let form: CreatePostLikeForm = {
       post_id: i.props.post.id,
-      score: this.state.my_vote,
+      score: i.props.post.my_vote == 1 ? 0 : 1,
     };
     WebSocketService.Instance.likePost(form);
   }
 
   handlePostDisLike(i: PostListing) {
-    this.state.my_vote = i.props.post.my_vote == -1 ? 0 : -1;
-    let add = -1;
-    if (i.props.post.my_vote == 1) {
-      add = -2;
-    } else if (i.props.post.my_vote == -1) {
-      add = 1;
-    }
-    this.state.score = i.props.post.score + add;
-    this.setState(this.state);
+    i.setState({ downvoteLoading: true });
 
     let form: CreatePostLikeForm = {
       post_id: i.props.post.id,
-      score: this.state.my_vote,
+      score: i.props.post.my_vote == -1 ? 0 : -1,
     };
     WebSocketService.Instance.likePost(form);
   }
@@ -800,7 +801,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   get crossPostParams(): string {
-    let params = `?name=${this.props.post.name}`;
+    let params = `?title=${this.props.post.name}`;
     if (this.props.post.url) {
       params += `&url=${this.props.post.url}`;
     }