{
);
};
+PollGraph.defaultProps = {
+ userVoteIndex: -1,
+};
+
PollGraph.propTypes = {
pollOptions: PropTypes.arrayOf(PropTypes.string).isRequired,
voteCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
+ userVoteIndex: PropTypes.number,
};
export default PollGraph;
diff --git a/packages/concordia-app/src/components/PollView/PollGraph/styles.css b/packages/concordia-app/src/components/PollView/PollGraph/styles.css
index a2c3d42..3e86acd 100644
--- a/packages/concordia-app/src/components/PollView/PollGraph/styles.css
+++ b/packages/concordia-app/src/components/PollView/PollGraph/styles.css
@@ -2,3 +2,7 @@
box-shadow: none;
border: none;
}
+
+#topic-poll-container h4 {
+ margin-top: 0.5rem;
+}
diff --git a/packages/concordia-app/src/components/PollView/PollVote/index.jsx b/packages/concordia-app/src/components/PollView/PollVote/index.jsx
index 836e45e..b1ac786 100644
--- a/packages/concordia-app/src/components/PollView/PollVote/index.jsx
+++ b/packages/concordia-app/src/components/PollView/PollVote/index.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
-import { Form } from 'semantic-ui-react';
+import { useSelector } from 'react-redux';
+import { Button, Form, Header } from 'semantic-ui-react';
import { useTranslation } from 'react-i18next';
import { VOTING_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
import { drizzle } from '../../../redux/store';
+import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus';
const { contracts: { [VOTING_CONTRACT]: { methods: { vote } } } } = drizzle;
@@ -11,19 +13,57 @@ const PollVote = (props) => {
const {
topicId, account, pollOptions, enableVoteChanges, hasUserVoted, userVoteIndex,
} = props;
+ const transactionStack = useSelector((state) => state.transactionStack);
+ const transactions = useSelector((state) => state.transactions);
+ const [voteCacheSendStackId, setVoteCacheSendStackId] = useState('');
const [selectedOptionIndex, setSelectedOptionIndex] = useState(userVoteIndex);
- const [voting, setVoting] = useState('');
+ const [voting, setVoting] = useState(false);
const { t } = useTranslation();
const onOptionSelected = (e, { value }) => {
setSelectedOptionIndex(value);
};
+ useEffect(() => {
+ setSelectedOptionIndex(userVoteIndex);
+ }, [userVoteIndex]);
+
const onCastVote = () => {
setVoting(true);
- vote.cacheSend(...[topicId, selectedOptionIndex + 1], { from: account });
+ setVoteCacheSendStackId(vote.cacheSend(...[topicId, selectedOptionIndex + 1], { from: account }));
+ };
+
+ const onUnvote = (e) => {
+ e.preventDefault();
+ setVoting(true);
+ setVoteCacheSendStackId(vote.cacheSend(...[topicId, 0], { from: account }));
};
+ useEffect(() => {
+ if (voting && transactionStack && transactionStack[voteCacheSendStackId]
+ && transactions[transactionStack[voteCacheSendStackId]]) {
+ if (transactions[transactionStack[voteCacheSendStackId]].status === TRANSACTION_ERROR
+ || transactions[transactionStack[voteCacheSendStackId]].status === TRANSACTION_SUCCESS) {
+ setVoting(false);
+ }
+ }
+ }, [transactionStack, transactions, voteCacheSendStackId, voting]);
+
+ if (hasUserVoted && !enableVoteChanges) {
+ return (
+ <>
+
+ {t('topic.poll.tab.results.user.vote', {
+ userVote: pollOptions[userVoteIndex],
+ })}
+
+
+ {t('topic.poll.tab.vote.no.changes')}
+
+ >
+ );
+ }
+
return (
@@ -34,17 +74,28 @@ const PollVote = (props) => {
label={pollOption}
value={index}
checked={index === selectedOptionIndex}
- disabled={hasUserVoted && !enableVoteChanges && index !== selectedOptionIndex}
+ disabled={voting}
onChange={onOptionSelected}
/>
))}
-
{t('topic.poll.tab.vote.form.button.submit')}
-
+
+ {hasUserVoted && enableVoteChanges
+ && (
+
+ )}
);
};
diff --git a/packages/concordia-app/src/components/PollView/index.jsx b/packages/concordia-app/src/components/PollView/index.jsx
index a7c2445..955d2f8 100644
--- a/packages/concordia-app/src/components/PollView/index.jsx
+++ b/packages/concordia-app/src/components/PollView/index.jsx
@@ -147,10 +147,11 @@ const PollView = (props) => {
)
: null
- ), [chainDataLoading, orbitDataLoading, pollOptions, voteCounts]);
+ ), [chainDataLoading, orbitDataLoading, pollOptions, userVoteIndex, voteCounts]);
const panes = useMemo(() => {
const pollVotePane = (