Add fast comment and post voting. (Doesn't wait for server return)

- Fixes #416

2 files changed, 64 insertions, 13 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 4d216f97..2c15b6c8 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -47,6 +47,8 @@ interface CommentNodeState {
   showConfirmAppointAsAdmin: boolean;
   collapsed: boolean;
   viewSource: boolean;
+  my_vote: number;
+  score: number;
 }
 
 interface CommentNodeProps {
@@ -76,6 +78,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     showConfirmTransferCommunity: false,
     showConfirmAppointAsMod: false,
     showConfirmAppointAsAdmin: false,
+    my_vote: this.props.node.comment.my_vote,
+    score: this.props.node.comment.score,
   };
 
   constructor(props: any, context: any) {
@@ -102,7 +106,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           >
             <button
               className={`btn p-0 ${
-                node.comment.my_vote == 1 ? 'text-info' : 'text-muted'
+                this.state.my_vote == 1 ? 'text-info' : 'text-muted'
               }`}
               onClick={linkEvent(node, this.handleCommentLike)}
             >
@@ -110,13 +114,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <use xlinkHref="#icon-arrow-up"></use>
               </svg>
             </button>
-            <div class={`font-weight-bold text-muted`}>
-              {node.comment.score}
-            </div>
+            <div class={`font-weight-bold text-muted`}>{this.state.score}</div>
             {WebSocketService.Instance.site.enable_downvotes && (
               <button
                 className={`btn p-0 ${
-                  node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'
+                  this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
                 }`}
                 onClick={linkEvent(node, this.handleCommentDisLike)}
               >
@@ -721,19 +723,40 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   }
 
   handleCommentLike(i: CommentNodeI) {
+    this.state.my_vote = i.comment.my_vote == 1 ? 0 : 1;
+    let add = 1;
+    if (i.comment.my_vote == 1) {
+      add = -1;
+    } else if (i.comment.my_vote == -1) {
+      add = 2;
+    }
+
+    this.state.score = i.comment.score + add;
+    this.setState(this.state);
+
     let form: CommentLikeForm = {
       comment_id: i.comment.id,
       post_id: i.comment.post_id,
-      score: i.comment.my_vote == 1 ? 0 : 1,
+      score: this.state.my_vote,
     };
     WebSocketService.Instance.likeComment(form);
   }
 
   handleCommentDisLike(i: CommentNodeI) {
+    this.state.my_vote = i.comment.my_vote == -1 ? 0 : -1;
+    let add = -1;
+    if (i.comment.my_vote == 1) {
+      add = -2;
+    } else if (i.comment.my_vote == -1) {
+      add = 1;
+    }
+    this.state.score = i.comment.score + add;
+    this.setState(this.state);
+
     let form: CommentLikeForm = {
       comment_id: i.comment.id,
       post_id: i.comment.post_id,
-      score: i.comment.my_vote == -1 ? 0 : -1,
+      score: this.state.my_vote,
     };
     WebSocketService.Instance.likeComment(form);
   }
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index e5e71b65..5a528bbf 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -44,6 +44,8 @@ interface PostListingState {
   showConfirmTransferCommunity: boolean;
   imageExpanded: boolean;
   viewSource: boolean;
+  my_vote: number;
+  score: number;
 }
 
 interface PostListingProps {
@@ -68,6 +70,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,
   };
 
   constructor(props: any, context: any) {
@@ -108,7 +112,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         >
           <button
             className={`btn p-0 ${
-              post.my_vote == 1 ? 'text-info' : 'text-muted'
+              this.state.my_vote == 1 ? 'text-info' : 'text-muted'
             }`}
             onClick={linkEvent(this, this.handlePostLike)}
           >
@@ -116,11 +120,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <use xlinkHref="#icon-arrow-up"></use>
             </svg>
           </button>
-          <div class={`font-weight-bold text-muted`}>{post.score}</div>
+          <div class={`font-weight-bold text-muted`}>{this.state.score}</div>
           {WebSocketService.Instance.site.enable_downvotes && (
             <button
               className={`btn p-0 ${
-                post.my_vote == -1 ? 'text-danger' : 'text-muted'
+                this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
               }`}
               onClick={linkEvent(this, this.handlePostDisLike)}
             >
@@ -642,7 +646,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get isAdmin(): boolean {
     return (
       this.props.admins &&
-      isMod(this.props.admins.map(a => a.id), this.props.post.creator_id)
+      isMod(
+        this.props.admins.map(a => a.id),
+        this.props.post.creator_id
+      )
     );
   }
 
@@ -709,17 +716,38 @@ 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);
+
     let form: CreatePostLikeForm = {
       post_id: i.props.post.id,
-      score: i.props.post.my_vote == 1 ? 0 : 1,
+      score: this.state.my_vote,
     };
     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);
+
     let form: CreatePostLikeForm = {
       post_id: i.props.post.id,
-      score: i.props.post.my_vote == -1 ? 0 : -1,
+      score: this.state.my_vote,
     };
     WebSocketService.Instance.likePost(form);
   }