feat: add popup to post votes

packages/concordia-app/src/components/PostList/PostVoting/index.jsx

@@ -1,13 +1,14 @@
 import React, {
   memo, useCallback, useEffect, useMemo, useState,
 } from 'react';
-import { Button } from 'semantic-ui-react';
+import { Button, Popup } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
+
+import './styles.css';
 import { useSelector } from 'react-redux';
 import { POST_VOTING_CONTRACT } from '../../../constants/contracts/ContractNames';
 import { drizzle } from '../../../redux/store';
 import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus';
-import './styles.css';
 
 const CHOICE_DEFAULT = '0';
 const CHOICE_UP = '1';
@@ -18,7 +19,8 @@ const {
     [POST_VOTING_CONTRACT]: {
       methods: {
         getVote: { cacheCall: getVoteChainData },
-        getTotalVoteCount: { cacheCall: getTotalVoteCountChainData },
+        getUpvoteCount: { cacheCall: getUpvoteCountChainData },
+        getDownvoteCount: { cacheCall: getDownvoteCountChainData },
         upvote, downvote, unvote,
       },
     },
@@ -33,12 +35,17 @@ const PostVoting = (props) => {
   const userAccount = useSelector((state) => state.accounts[0]);
 
   // Current votes
-  const getVoteResults = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getVote);
-  const getTotalVoteCountResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getTotalVoteCount);
+  const getVoteResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getVote);
+  const getUpvoteCountResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getUpvoteCount);
+  const getDownvoteCountResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getDownvoteCount);
+
   const [getVoteCallHash, setGetVoteCallHash] = useState([]);
-  const [getTotalVoteCountCallHash, setGetTotalVoteCountCallHash] = useState([]);
+  const [getUpvoteCountCallHash, setGetUpvoteCountCallHash] = useState([]);
+  const [getDownvoteCountCallHash, setGetDownvoteCountCallHash] = useState([]);
+
   const [ownVote, setOwnVote] = useState(null);
-  const [totalVoteCount, setTotalVoteCount] = useState(null);
+  const [upvoteCount, setUpvoteCount] = useState(null);
+  const [downvoteCount, setDownvoteCount] = useState(null);
 
   // Voting
   const transactionStack = useSelector((state) => state.transactionStack);
@@ -48,12 +55,12 @@ const PostVoting = (props) => {
 
   // Current votes
   useEffect(() => {
-    const shouldGetTotalVoteCountDataFromChain = totalVoteCount === null;
+    if (drizzleInitialized && !drizzleInitializationFailed && postId !== null) {
+      if (upvoteCount === null) setGetUpvoteCountCallHash(getUpvoteCountChainData(postId));
 
-    if (drizzleInitialized && !drizzleInitializationFailed && shouldGetTotalVoteCountDataFromChain && postId !== null) {
-      setGetTotalVoteCountCallHash(getTotalVoteCountChainData(postId));
+      if (downvoteCount === null) setGetDownvoteCountCallHash(getDownvoteCountChainData(postId));
     }
-  }, [drizzleInitializationFailed, drizzleInitialized, postId, totalVoteCount]);
+  }, [downvoteCount, drizzleInitializationFailed, drizzleInitialized, postId, upvoteCount, userAccount]);
 
   useEffect(() => {
     const shouldGetOwnVoteFromChain = ownVote === null;
@@ -65,16 +72,22 @@ const PostVoting = (props) => {
   }, [drizzleInitializationFailed, drizzleInitialized, ownVote, postId, userAccount]);
 
   useEffect(() => {
-    if (getVoteCallHash && getVoteResults && getVoteResults[getVoteCallHash]) {
-      setOwnVote(getVoteResults[getVoteCallHash].value);
+    if (getVoteCallHash && getVoteResult && getVoteResult[getVoteCallHash]) {
+      setOwnVote(getVoteResult[getVoteCallHash].value);
+    }
+  }, [getVoteCallHash, getVoteResult]);
+
+  useEffect(() => {
+    if (getUpvoteCountCallHash && getUpvoteCountResult && getUpvoteCountResult[getUpvoteCountCallHash]) {
+      setUpvoteCount(getUpvoteCountResult[getUpvoteCountCallHash].value);
     }
-  }, [getVoteCallHash, getVoteResults]);
+  }, [getUpvoteCountCallHash, getUpvoteCountResult]);
 
   useEffect(() => {
-    if (getTotalVoteCountCallHash && getTotalVoteCountResult && getTotalVoteCountResult[getTotalVoteCountCallHash]) {
-      setTotalVoteCount(getTotalVoteCountResult[getTotalVoteCountCallHash].value);
+    if (getDownvoteCountCallHash && getDownvoteCountResult && getDownvoteCountResult[getDownvoteCountCallHash]) {
+      setDownvoteCount(getDownvoteCountResult[getDownvoteCountCallHash].value);
     }
-  }, [getTotalVoteCountCallHash, getTotalVoteCountResult]);
+  }, [getDownvoteCountCallHash, getDownvoteCountResult]);
 
   // Voting
   useEffect(() => {
@@ -96,6 +109,7 @@ const PostVoting = (props) => {
   }, [ownVote, postId, userAccount, voting]);
 
   const disableVoting = userAccount === null || !hasSignedUp || postAuthorAddress === null || userAccount === postAuthorAddress;
+  const totalVoteCount = (upvoteCount !== null && downvoteCount !== null) ? upvoteCount - downvoteCount : null;
   return useMemo(() => (
       <div className="post-voting">
           <Button
@@ -106,11 +120,32 @@ const PostVoting = (props) => {
             disabled={disableVoting}
             onClick={() => vote(CHOICE_DOWN)}
           />
+          <Popup
+            trigger={(
                 <span className="unselectable">
               &nbsp;&nbsp;
                     {totalVoteCount || 0}
                   &nbsp;&nbsp;
                 </span>
+            )}
+            disabled={(upvoteCount === null && downvoteCount === null) || (upvoteCount === '0' && downvoteCount === '0')}
+            position="bottom center"
+          >
+              {upvoteCount !== '0' ? (
+                  <span className="upvote-count">
+                      +
+                      {upvoteCount}
+                      &nbsp;&nbsp;
+                  </span>
+              ) : null}
+
+              {downvoteCount !== '0' ? (
+                  <span className="downvote-count">
+                      -
+                      {downvoteCount}
+                  </span>
+              ) : null}
+          </Popup>
           <Button
             compact
             size="mini"
@@ -120,7 +155,7 @@ const PostVoting = (props) => {
             onClick={() => vote(CHOICE_UP)}
           />
       </div>
-  ), [disableVoting, ownVote, totalVoteCount, vote]);
+  ), [disableVoting, downvoteCount, ownVote, totalVoteCount, upvoteCount, vote]);
 };
 
 PostVoting.propTypes = {

packages/concordia-app/src/components/PostList/PostVoting/styles.css

@@ -10,3 +10,11 @@
 .post-voting > span{
     vertical-align: middle;
 }
+
+.upvote-count {
+    color: #21ba45;
+}
+
+.downvote-count {
+    color: #db2828;
+}

packages/concordia-contracts/contracts/PostVoting.sol

@@ -40,12 +40,6 @@ contract PostVoting {
         return (getVoteCount(postID, Option.DOWN));
     }
 
-    function getTotalVoteCount(uint postID) public view returns (int) {
-        int upvoteCount = int(getUpvoteCount(postID));
-        int downvoteCount = int(getDownvoteCount(postID));
-        return upvoteCount - downvoteCount;
-    }
-
     // Gets voters for a specific option (Option.UP/ Option.DOWN)
     function getVoters(uint postID, Option option) private view returns (address[] memory) {
         require(forum.postExists(postID), forum.POST_DOES_NOT_EXIST());