From ca89a879daba72201db47f3a84a14f138daf459d Mon Sep 17 00:00:00 2001 From: Ezerous Date: Tue, 2 Mar 2021 12:09:58 +0200 Subject: [PATCH] performance: post voting improvements --- .../components/PostList/PostVoting/index.jsx | 73 +++++-------------- .../src/layouts/MainLayout/index.jsx | 2 +- .../contracts/PostVoting.sol | 10 +++ 3 files changed, 30 insertions(+), 55 deletions(-) diff --git a/packages/concordia-app/src/components/PostList/PostVoting/index.jsx b/packages/concordia-app/src/components/PostList/PostVoting/index.jsx index 68a6178..953cf35 100644 --- a/packages/concordia-app/src/components/PostList/PostVoting/index.jsx +++ b/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)} /> -    +    {totalVoteCount || 0}    @@ -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)} /> ), [disableVoting, downvoteCount, ownVote, totalVoteCount, upvoteCount, vote]); diff --git a/packages/concordia-app/src/layouts/MainLayout/index.jsx b/packages/concordia-app/src/layouts/MainLayout/index.jsx index 1300e3b..db43c83 100644 --- a/packages/concordia-app/src/layouts/MainLayout/index.jsx +++ b/packages/concordia-app/src/layouts/MainLayout/index.jsx @@ -22,9 +22,9 @@ const MainLayout = (props) => { {children} - + diff --git a/packages/concordia-contracts/contracts/PostVoting.sol b/packages/concordia-contracts/contracts/PostVoting.sol index 180b288..f83f3b9 100644 --- a/packages/concordia-contracts/contracts/PostVoting.sol +++ b/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());