Fix comments bugs

src/actions/api.js

@@ -980,7 +980,8 @@ export const onCommentVote = (currentUserID, token, commentid, vote, state) =>
         dispatch(act.RECEIVE_SYNC_LIKE_COMMENT({ token, commentid, vote }));
       })
       .catch((error) => {
-        dispatch(act.RESET_SYNC_LIKE_COMMENT({ token }));
+        // xxx: why reset on error?
+        // dispatch(act.RESET_SYNC_LIKE_COMMENT({ token }));
         dispatch(act.RECEIVE_LIKE_COMMENT(null, error));
       });
   });

src/actions/tests/api.test.js

@@ -669,11 +669,6 @@ describe("test api actions (actions/api.js)", () => {
           error: false,
           payload: { commentid, token: FAKE_PROPOSAL_TOKEN }
         },
-        {
-          type: act.RESET_SYNC_LIKE_COMMENT,
-          error: false,
-          payload: { token: FAKE_PROPOSAL_TOKEN }
-        },
         {
           error: true,
           payload: { errorcode },

src/components/Likes/Likes.jsx

@@ -1,64 +1,33 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback } from "react";
 import PropTypes from "prop-types";
-import { delay } from "lodash";
-import {
-  Icon,
-  useTheme,
-  Text,
-  getThemeProperty,
-  useHover,
-  Spinner,
-  classNames
-} from "pi-ui";
+import { debounce } from "lodash";
+import { Icon, useTheme, Text, getThemeProperty, classNames } from "pi-ui";
 import styles from "./Likes.module.css";
 
 export const isLiked = (action) => action === 1 || action === "1";
 export const isDisliked = (action) => action === -1 || action === "-1";
 
-const Likes = ({
-  upLikes,
-  downLikes,
-  onLike,
-  onDislike,
-  option,
-  disabled,
-  apiLoading
-}) => {
-  const [loading, setLoading] = useState(false);
-  const [likeRef, isLikeHovered] = useHover();
-  const [dislikeRef, isDislikeHovered] = useHover();
+const Likes = ({ upLikes, downLikes, onLike, onDislike, option, disabled }) => {
   const { theme } = useTheme();
   const defaultColor = getThemeProperty(theme, "comment-like-color");
   const activeColor = getThemeProperty(theme, "comment-like-color-active");
   const liked = isLiked(option);
   const disliked = isDisliked(option);
-  const likeColor = liked || isLikeHovered ? activeColor : defaultColor;
-  const dislikeColor =
-    disliked || isDislikeHovered ? activeColor : defaultColor;
+  const likeColor = liked ? activeColor : defaultColor;
+  const dislikeColor = disliked ? activeColor : defaultColor;
 
-  useEffect(() => {
-    if (apiLoading) {
-      delay(() => setLoading(true), 1000);
-    } else if (loading) {
-      setLoading(false);
-    }
-  }, [apiLoading, loading, setLoading]);
+  async function handleLike() {
+    if (disabled) return;
+    await onLike();
+  }
 
-  const handleLike = useCallback(
-    async function handleLike() {
-      if (disabled) return;
-      await onLike();
-    },
-    [disabled, onLike]
-  );
+  async function handleDislike() {
+    if (disabled) return;
+    await onDislike();
+  }
 
-  const handleDislike = useCallback(
-    async function handleDislike() {
-      if (disabled) return;
-      await onDislike();
-    },
-    [disabled, onDislike]
-  );
+  const debouncedHandleDislike = debounce(handleDislike, 500);
+  const debouncedHandleLike = debounce(handleLike, 500);
 
   const renderCount = useCallback(
     (count) => (
@@ -73,44 +42,35 @@ const Likes = ({
   );
 
   return (
-    <div
-      className={classNames("align-center", disabled && styles.likeDisabled)}>
-      {loading && apiLoading ? (
-        <div className={styles.likeBoxSpinner}>
-          <Spinner invert />
-        </div>
-      ) : (
-        <>
-          <div className={styles.leftLikeBox}>
-            <button
-              ref={likeRef}
-              className={styles.likeBtn}
-              data-testid="like-btn"
-              onClick={handleLike}>
-              <Icon
-                iconColor={likeColor}
-                backgroundColor={likeColor}
-                type="like"
-              />
-            </button>
-            {renderCount(upLikes)}
-          </div>
-          <div className={styles.rightLikeBox}>
-            <button
-              ref={dislikeRef}
-              className={styles.likeBtn}
-              data-testid="dislike-btn"
-              onClick={handleDislike}>
-              <Icon
-                iconColor={dislikeColor}
-                backgroundColor={dislikeColor}
-                type="dislike"
-              />
-            </button>
-            {renderCount(downLikes)}
-          </div>
-        </>
-      )}
+    <div className={"align-center"}>
+      <div className={styles.leftLikeBox}>
+        <button
+          className={classNames(
+            styles.likeBtn,
+            disabled && styles.likeDisabled
+          )}
+          data-testid="like-btn"
+          onClick={debouncedHandleLike}>
+          <Icon iconColor={likeColor} backgroundColor={likeColor} type="like" />
+        </button>
+        {renderCount(upLikes)}
+      </div>
+      <div className={styles.rightLikeBox}>
+        <button
+          className={classNames(
+            styles.likeBtn,
+            disabled && styles.likeDisabled
+          )}
+          data-testid="dislike-btn"
+          onClick={debouncedHandleDislike}>
+          <Icon
+            iconColor={dislikeColor}
+            backgroundColor={dislikeColor}
+            type="dislike"
+          />
+        </button>
+        {renderCount(downLikes)}
+      </div>
     </div>
   );
 };

src/components/Likes/Likes.module.css

@@ -33,10 +33,10 @@
   color: var(--color-gray) !important;
 }
 
-.likeDisabled .likeBtn {
+.likeDisabled {
   cursor: not-allowed;
 }
 
-.likeBtn:hover > svg {
-  fill: black;
+.likeBtn:not(.likeDisabled):hover svg > g > path {
+  fill: var(--comment-like-color-active) !important;
 }

src/containers/Comments/Comment/Comment.jsx

@@ -45,7 +45,6 @@ const Comment = ({
   censorable,
   isFlatMode,
   seeInContextLink,
-  loadingLikeAction,
   ...props
 }) => {
   const extraSmall = useMediaQuery("(max-width: 560px)");
@@ -100,7 +99,6 @@ const Comment = ({
           <div className={styles.likesWrapper}>
             <Likes
               disabled={disableLikesClick}
-              apiLoading={!!loadingLikeAction}
               upLikes={likesUpCount}
               downLikes={likesDownCount}
               option={likeOption}

src/containers/Comments/Comment/CommentWrapper.jsx

@@ -78,7 +78,6 @@ const CommentWrapper = ({
     recordAuthorID,
     recordAuthorUsername,
     loadingLikes,
-    loadingLikeAction,
     userLoggedIn,
     recordToken,
     readOnly,
@@ -172,7 +171,6 @@ const CommentWrapper = ({
 
   const isLikeCommentDisabled =
     loadingLikes ||
-    !!loadingLikeAction ||
     readOnly ||
     (userLoggedIn &&
       (identityError || paywallMissing || currentUser.username === username));
@@ -199,7 +197,6 @@ const CommentWrapper = ({
         likeOption={getCommentLikeOption(commentid)}
         onLike={handleLikeComment}
         onDislike={handleDislikeComment}
-        loadingLikeAction={loadingLikeAction[commentid]}
         showReplies={showReplies}
         isFlatMode={isFlatMode}
         onClickCensor={handleClickCensor}

src/containers/Comments/helpers.js

@@ -38,7 +38,7 @@ export const getSort = (sortOption) => {
     [commentSortOptions.SORT_BY_OLD]: orderBy(["timestamp"], ["asc"]),
     [commentSortOptions.SORT_BY_TOP]: orderBy(
       ["resultvotes", "timestamp"],
-      ["desc", "desc"]
+      ["desc", "asc"]
     )
   };
 
@@ -50,7 +50,12 @@ export const getSort = (sortOption) => {
 
 export const sortComments = (sortOption, comments) => {
   const sorter = getSort(sortOption);
-  return sorter(comments);
+  return sorter(
+    comments.map((comment) => ({
+      ...comment,
+      resultvotes: comment.upvotes - comment.downvotes
+    }))
+  );
 };
 
 /**

src/containers/Comments/hooks.js

@@ -56,7 +56,6 @@ export function useComments(recordToken, proposalState) {
       ? act.onFetchDccComments
       : act.onFetchInvoiceComments
   );
-  const loadingLikeAction = useSelector(sel.isApiRequestingLikeComment);
   const onFetchLikes = useAction(act.onFetchLikedComments);
   const onCommentVoteAction = useAction(act.onCommentVote);
   const onCensorComment = useAction(act.onCensorComment);
@@ -111,9 +110,9 @@ export function useComments(recordToken, proposalState) {
         (cl) => cl.commentid === commentID
       );
       if (actionData) {
-        return actionData.action;
+        return actionData.vote;
       }
-      return actionData ? actionData.action : 0;
+      return actionData ? actionData.vote : 0;
     },
     [commentsLikes]
   );
@@ -131,7 +130,6 @@ export function useComments(recordToken, proposalState) {
     lastVisitTimestamp,
     loading,
     loadingLikes,
-    loadingLikeAction,
     onSubmitComment,
     error
   };