From 9e30e3bd2c78ac501c2cbc83e5a36083a8d07dbe Mon Sep 17 00:00:00 2001
From: Paul Mineev <paul@mineev.me>
Date: Thu, 21 Apr 2022 18:21:44 -0700
Subject: [PATCH] enable downvoting for only positive

---
 frontend/app/components/comment/comment-votes.spec.tsx | 5 ++++-
 frontend/app/components/comment/comment-votes.tsx      | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/comment/comment-votes.spec.tsx b/frontend/app/components/comment/comment-votes.spec.tsx
index 2f02109f..807a7a3e 100644
--- a/frontend/app/components/comment/comment-votes.spec.tsx
+++ b/frontend/app/components/comment/comment-votes.spec.tsx
@@ -99,8 +99,10 @@ describe('<CommentVote />', () => {
   it('should allow only upvote ability', () => {
     StaticStore.config.positive_score = true;
     render(<CommentVotes id="1" vote={0} votes={10} controversy={0} />);
-    expect(screen.queryByTitle('Vote down')).not.toBeInTheDocument();
+    expect(screen.queryByTitle('Vote down')).toBeVisible();
+    expect(screen.queryByTitle('Vote down')).toBeDisabled();
     expect(screen.getByTitle('Vote up')).toBeVisible();
+    expect(screen.getByTitle('Vote up')).not.toBeDisabled();
   });
 
   it('should disable downvote ability when `low_score` is reached', async () => {
@@ -111,6 +113,7 @@ describe('<CommentVote />', () => {
     fireEvent(screen.getByTitle('Vote down'), new Event('click'));
     await waitFor(() => {
       expect(screen.getByTitle('Vote down')).toBeDisabled();
+      expect(screen.getByTitle('Vote up')).toBeDisabled();
     });
   });
 });
diff --git a/frontend/app/components/comment/comment-votes.tsx b/frontend/app/components/comment/comment-votes.tsx
index 771b3142..890207d9 100644
--- a/frontend/app/components/comment/comment-votes.tsx
+++ b/frontend/app/components/comment/comment-votes.tsx
@@ -48,16 +48,17 @@ export function CommentVotes({ id, votes, vote, disabled, controversy = 0 }: Pro
   const positiveScore = StaticStore.config.positive_score;
   const isUpvoted = vote === 1;
   const isDownvoted = vote === -1;
+  const value = loadingState?.votes ?? votes;
 
   return (
     <span className={clsx(styles.root, disabled && styles.rootDisabled)}>
-      {Boolean(!disabled && !positiveScore) && (
+      {Boolean(!disabled) && (
         <button
           className={clsx(styles.voteButton, styles.downVoteButton, isDownvoted && styles.downVoteButtonActive)}
           onClick={handleClick}
           data-value={-1}
           title={intl.formatMessage(messages.downvote)}
-          disabled={lowScore || loadingState !== null || isDownvoted}
+          disabled={lowScore || loadingState !== null || isDownvoted || (positiveScore && value > -1)}
         >
           <ArrowIcon className={styles.downVoteIcon} />
         </button>
@@ -80,7 +81,7 @@ export function CommentVotes({ id, votes, vote, disabled, controversy = 0 }: Pro
             [styles.votesPositive]: votes > 0,
           })}
         >
-          {loadingState?.votes ?? votes}
+          {value}
         </div>
       </Tooltip>
       {!disabled && (