diff --git a/packages/concordia-app/src/components/PostList/PostVoting/index.jsx b/packages/concordia-app/src/components/PostList/PostVoting/index.jsx index ea3cb0f..022c81f 100644 --- a/packages/concordia-app/src/components/PostList/PostVoting/index.jsx +++ b/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, getVoteResults]); + }, [getVoteCallHash, getVoteResult]); useEffect(() => { - if (getTotalVoteCountCallHash && getTotalVoteCountResult && getTotalVoteCountResult[getTotalVoteCountCallHash]) { - setTotalVoteCount(getTotalVoteCountResult[getTotalVoteCountCallHash].value); + if (getUpvoteCountCallHash && getUpvoteCountResult && getUpvoteCountResult[getUpvoteCountCallHash]) { + setUpvoteCount(getUpvoteCountResult[getUpvoteCountCallHash].value); } - }, [getTotalVoteCountCallHash, getTotalVoteCountResult]); + }, [getUpvoteCountCallHash, getUpvoteCountResult]); + + useEffect(() => { + if (getDownvoteCountCallHash && getDownvoteCountResult && getDownvoteCountResult[getDownvoteCountCallHash]) { + setDownvoteCount(getDownvoteCountResult[getDownvoteCountCallHash].value); + } + }, [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(() => (