performance: post voting improvements

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

@@ -17,10 +17,7 @@ const {
   contracts: {
     [POST_VOTING_CONTRACT]: {
       methods: {
-        getVote: { cacheCall: getVoteChainData },
-        getTotalVoteCount: { cacheCall: getTotalVoteCountChainData },
-        getUpvoteCount: { cacheCall: getUpvoteCountChainData },
-        getDownvoteCount: { cacheCall: getDownvoteCountChainData },
+        getVoteInfo: { cacheCall: getVoteInfoChainData },
         upvote, downvote, unvote,
       },
     },
@@ -29,21 +26,13 @@ const {
 
 const PostVoting = (props) => {
   const { postId, postAuthorAddress } = props;
-  const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
-  const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
   const hasSignedUp = useSelector((state) => state.user.hasSignedUp);
   const userAccount = useSelector((state) => state.accounts[0]);
 
   // Current votes
-  const [getVoteCallHash, setGetVoteCallHash] = useState(null);
-  const [getTotalVoteCountCallHash, setGetTotalVoteCountCallHash] = useState(null);
-  const [getUpvoteCountCallHash, setGetUpvoteCountCallHash] = useState(null);
-  const [getDownvoteCountCallHash, setGetDownvoteCountCallHash] = useState(null);
+  const [getVoteInfoCallHash, setGetVoteInfoCallHash] = useState(null);
 
-  const getVoteResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getVote[getVoteCallHash]);
-  const getTotalVoteCountResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getTotalVoteCount[getTotalVoteCountCallHash]);
-  const getUpvoteCountResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getUpvoteCount[getUpvoteCountCallHash]);
-  const getDownvoteCountResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getDownvoteCount[getDownvoteCountCallHash]);
+  const getVoteInfoResult = useSelector((state) => state.contracts[POST_VOTING_CONTRACT].getVoteInfo[getVoteInfoCallHash]);
 
   const [ownVote, setOwnVote] = useState(null);
   const [totalVoteCount, setTotalVoteCount] = useState(null);
@@ -58,46 +47,19 @@ const PostVoting = (props) => {
 
   // Current votes
   useEffect(() => {
-    if (drizzleInitialized && !drizzleInitializationFailed && postId !== null) {
-      if (getTotalVoteCountCallHash === null) setGetTotalVoteCountCallHash(getTotalVoteCountChainData(postId));
-      if (getUpvoteCountCallHash === null) setGetUpvoteCountCallHash(getUpvoteCountChainData(postId));
-      if (getDownvoteCountCallHash === null) setGetDownvoteCountCallHash(getDownvoteCountChainData(postId));
+    if (postId !== null && getVoteInfoCallHash === null) {
+      setGetVoteInfoCallHash(getVoteInfoChainData(postId));
     }
-  }, [drizzleInitializationFailed, drizzleInitialized, getDownvoteCountCallHash,
-    getTotalVoteCountCallHash, getUpvoteCountCallHash, postId]);
+  }, [getVoteInfoCallHash, postId]);
 
   useEffect(() => {
-    const shouldGetOwnVoteFromChain = ownVote === null;
-
-    if (drizzleInitialized && !drizzleInitializationFailed && shouldGetOwnVoteFromChain
-            && postId !== null && userAccount !== null && getVoteCallHash === null) {
-      setGetVoteCallHash(getVoteChainData(postId, userAccount));
-    }
-  }, [drizzleInitializationFailed, drizzleInitialized, getVoteCallHash, ownVote, postId, userAccount]);
-
-  useEffect(() => {
-    if (getVoteResult) {
-      setOwnVote(getVoteResult.value);
-    }
-  }, [getVoteResult]);
-
-  useEffect(() => {
-    if (getTotalVoteCountResult) {
-      setTotalVoteCount(getTotalVoteCountResult.value);
+    if (getVoteInfoResult) {
+      setOwnVote(getVoteInfoResult.value[0]);
+      setTotalVoteCount(getVoteInfoResult.value[1]);
+      setUpvoteCount(getVoteInfoResult.value[2]);
+      setDownvoteCount(getVoteInfoResult.value[3]);
     }
-  }, [getTotalVoteCountResult]);
-
-  useEffect(() => {
-    if (getUpvoteCountResult) {
-      setUpvoteCount(getUpvoteCountResult.value);
-    }
-  }, [getUpvoteCountResult]);
-
-  useEffect(() => {
-    if (getDownvoteCountResult) {
-      setDownvoteCount(getDownvoteCountResult.value);
-    }
-  }, [getDownvoteCountResult]);
+  }, [getVoteInfoResult]);
 
   // Voting
   useEffect(() => {
@@ -110,13 +72,15 @@ const PostVoting = (props) => {
     }
   }, [createVoteCacheSendStackId, transactionStack, transactions, voting]);
 
-  const vote = useCallback((choice) => {
+  const vote = useCallback((e, choice) => {
+    e.currentTarget.blur();
     if (voting) return;
 
     setVoting(true);
     if ((ownVote === CHOICE_DEFAULT || ownVote === CHOICE_DOWN) && choice === CHOICE_UP) setVoteCacheSendStackId(upvote.cacheSend(...[postId], { from: userAccount }));
     else if ((ownVote === CHOICE_DEFAULT || ownVote === CHOICE_UP) && choice === CHOICE_DOWN) setVoteCacheSendStackId(downvote.cacheSend(...[postId], { from: userAccount }));
     else if ((ownVote === CHOICE_UP && choice === CHOICE_UP) || (ownVote === CHOICE_DOWN && choice === CHOICE_DOWN)) setVoteCacheSendStackId(unvote.cacheSend(...[postId], { from: userAccount }));
+    else setVoting(false);
   }, [ownVote, postId, userAccount, voting]);
 
   const disableVoting = userAccount === null || !hasSignedUp || postAuthorAddress === null || userAccount === postAuthorAddress;
@@ -128,12 +92,13 @@ const PostVoting = (props) => {
             icon="arrow down"
             negative={ownVote === CHOICE_DOWN}
             disabled={disableVoting}
-            onClick={() => vote(CHOICE_DOWN)}
+            onClick={(e) => vote(e, CHOICE_DOWN)}
           />
           <Popup
+            size="tiny"
             trigger={(
                 <span className="unselectable">
-              &nbsp;&nbsp;
+                        &nbsp;&nbsp;
                     {totalVoteCount || 0}
                         &nbsp;&nbsp;
                 </span>
@@ -162,7 +127,7 @@ const PostVoting = (props) => {
             icon="arrow up"
             positive={ownVote === CHOICE_UP}
             disabled={disableVoting}
-            onClick={() => vote(CHOICE_UP)}
+            onClick={(e) => vote(e, CHOICE_UP)}
           />
       </div>
   ), [disableVoting, downvoteCount, ownVote, totalVoteCount, upvoteCount, vote]);

packages/concordia-app/src/layouts/MainLayout/index.jsx

@@ -22,9 +22,9 @@ const MainLayout = (props) => {
                   {children}
               </Grid.Column>
               <Grid.Column width={4}>
-                  <MainLayoutConcordiaStatus />
                   <MainLayoutEthereumStatus />
                   <MainLayoutIPFSStatus />
+                  <MainLayoutConcordiaStatus />
               </Grid.Column>
           </Grid>
 

packages/concordia-contracts/contracts/PostVoting.sol

@@ -46,6 +46,16 @@ contract PostVoting {
         return upvoteCount - downvoteCount;
     }
 
+    function getVoteInfo(uint postID) public view returns (Option, int, uint, uint) {
+        require(forum.postExists(postID), forum.POST_DOES_NOT_EXIST());
+        return (
+            getVote(postID, msg.sender),
+            getTotalVoteCount(postID),
+            getUpvoteCount(postID),
+            getDownvoteCount(postID)
+        );
+    }
+
     // 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());