diff --git a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx
index be698a9..12d77d7 100644
--- a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx
+++ b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx
@@ -7,7 +7,7 @@ import { CASTED_OPTION_COLOR, DEFAULT_OPTION_COLOR } from '../../../constants/po
const PollGraph = (props) => {
const {
- pollOptions, voteCounts, hasUserVoted, userVoteHash,
+ pollOptions, voteCounts, hasUserVoted, selectedOptionIndex,
} = props;
const { t } = useTranslation();
@@ -22,16 +22,16 @@ const PollGraph = (props) => {
},
colors: [
(value) => {
- if (hasUserVoted && pollOptions[value.dataPointIndex].hash === userVoteHash) {
+ if (hasUserVoted && value.dataPointIndex === selectedOptionIndex) {
return CASTED_OPTION_COLOR;
}
return DEFAULT_OPTION_COLOR;
},
],
xaxis: {
- categories: pollOptions.map((pollOption) => pollOption.label),
+ categories: pollOptions,
},
- }), [hasUserVoted, pollOptions, userVoteHash]);
+ }), [hasUserVoted, pollOptions, selectedOptionIndex]);
const chartSeries = useMemo(() => [{
name: 'votes',
@@ -66,17 +66,14 @@ const PollGraph = (props) => {
PollGraph.defaultProps = {
hasUserVoted: false,
- userVoteHash: '',
+ selectedOptionIndex: '',
};
PollGraph.propTypes = {
- pollOptions: PropTypes.arrayOf(PropTypes.exact({
- label: PropTypes.string,
- hash: PropTypes.string,
- })).isRequired,
+ pollOptions: PropTypes.arrayOf(PropTypes.string).isRequired,
voteCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
hasUserVoted: PropTypes.bool,
- userVoteHash: PropTypes.string,
+ selectedOptionIndex: PropTypes.string,
};
export default PollGraph;
diff --git a/packages/concordia-app/src/components/PollView/PollVote/index.jsx b/packages/concordia-app/src/components/PollView/PollVote/index.jsx
index 3b4641e..836e45e 100644
--- a/packages/concordia-app/src/components/PollView/PollVote/index.jsx
+++ b/packages/concordia-app/src/components/PollView/PollVote/index.jsx
@@ -2,42 +2,46 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Form } from 'semantic-ui-react';
import { useTranslation } from 'react-i18next';
+import { VOTING_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
+import { drizzle } from '../../../redux/store';
+
+const { contracts: { [VOTING_CONTRACT]: { methods: { vote } } } } = drizzle;
const PollVote = (props) => {
const {
- pollOptions, enableVoteChanges, hasUserVoted, userVoteHash,
+ topicId, account, pollOptions, enableVoteChanges, hasUserVoted, userVoteIndex,
} = props;
- const [selectedOptionHash, setSelectedOptionHash] = useState(userVoteHash);
+ const [selectedOptionIndex, setSelectedOptionIndex] = useState(userVoteIndex);
+ const [voting, setVoting] = useState('');
const { t } = useTranslation();
const onOptionSelected = (e, { value }) => {
- setSelectedOptionHash(value);
+ setSelectedOptionIndex(value);
};
const onCastVote = () => {
- console.log('vote');
- // TODO
- // TODO: callback for immediate poll data refresh on vote?
+ setVoting(true);
+ vote.cacheSend(...[topicId, selectedOptionIndex + 1], { from: account });
};
return (
- {pollOptions.map((pollOption) => (
+ {pollOptions.map((pollOption, index) => (
))}
{t('topic.poll.tab.vote.form.button.submit')}
@@ -46,17 +50,15 @@ const PollVote = (props) => {
};
PollVote.defaultProps = {
- userVoteHash: '',
+ userVoteIndex: -1,
};
PollVote.propTypes = {
- pollOptions: PropTypes.arrayOf(PropTypes.exact({
- label: PropTypes.string,
- hash: PropTypes.string,
- })).isRequired,
+ topicId: PropTypes.number.isRequired,
+ pollOptions: PropTypes.arrayOf(PropTypes.string).isRequired,
enableVoteChanges: PropTypes.bool.isRequired,
hasUserVoted: PropTypes.bool.isRequired,
- userVoteHash: PropTypes.string,
+ userVoteIndex: PropTypes.number,
};
export default PollVote;
diff --git a/packages/concordia-app/src/components/PollView/index.jsx b/packages/concordia-app/src/components/PollView/index.jsx
index 18ff75c..c591826 100644
--- a/packages/concordia-app/src/components/PollView/index.jsx
+++ b/packages/concordia-app/src/components/PollView/index.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { VOTING_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
import {
- Container, Grid, Header, Icon, Placeholder, Tab,
+ Container, Header, Icon, Tab,
} from 'semantic-ui-react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
@@ -13,7 +13,7 @@ import CustomLoadingTabPane from '../CustomLoadingTabPane';
import { GRAPH_TAB, VOTE_TAB } from '../../constants/polls/PollTabs';
import PollVote from './PollVote';
import { FETCH_USER_DATABASE } from '../../redux/actions/peerDbReplicationActions';
-import { generatePollHash, generateHash } from '../../utils/hashUtils';
+import { generatePollHash } from '../../utils/hashUtils';
import { POLL_OPTIONS, POLL_QUESTION } from '../../constants/orbit/PollsDatabaseKeys';
import PollDataInvalid from './PollDataInvalid';
import PollGuestView from './PollGuestView';
@@ -35,7 +35,8 @@ const PollView = (props) => {
const [voters, setVoters] = useState([]);
const [pollHashValid, setPollHashValid] = useState(false);
const [pollQuestion, setPollQuestion] = useState('');
- const [loading, setLoading] = useState(true);
+ const [chainDataLoading, setChainDataLoading] = useState(true);
+ const [orbitDataLoading, setOrbitDataLoading] = useState(true);
const dispatch = useDispatch();
const { t } = useTranslation();
@@ -70,6 +71,8 @@ const PollView = (props) => {
.map((subArrayEnd, index) => getPollResults[getPollCallHash].value[5]
.slice(index > 0 ? cumulativeSum[index - 1] : 0,
subArrayEnd)));
+
+ setChainDataLoading(false);
}
}, [getPollCallHash, getPollResults]);
@@ -81,15 +84,12 @@ const PollView = (props) => {
if (generatePollHash(pollFound[POLL_QUESTION], pollFound[POLL_OPTIONS]) === pollHash) {
setPollHashValid(true);
setPollQuestion(pollFound[POLL_QUESTION]);
- setPollOptions(pollFound[POLL_OPTIONS].map((pollOption) => ({
- label: pollOption,
- hash: generateHash(pollOption),
- })));
+ setPollOptions([...pollFound[POLL_OPTIONS]]);
} else {
setPollHashValid(false);
}
- setLoading(false);
+ setOrbitDataLoading(false);
}
}, [pollHash, polls, topicId]);
@@ -97,71 +97,77 @@ const PollView = (props) => {
.some((optionVoters) => optionVoters.includes(userAddress)),
[hasSignedUp, userAddress, voters]);
- const userVoteHash = useMemo(() => {
- if (userHasVoted) {
- return pollOptions[voters
- .findIndex((optionVoters) => optionVoters.includes(userAddress))].hash;
+ const userVoteIndex = useMemo(() => {
+ if (!chainDataLoading && !orbitDataLoading && userHasVoted) {
+ return voters
+ .findIndex((optionVoters) => optionVoters.includes(userAddress));
}
- return '';
- }, [pollOptions, userAddress, userHasVoted, voters]);
+ return -1;
+ }, [chainDataLoading, orbitDataLoading, userAddress, userHasVoted, voters]);
const pollVoteTab = useMemo(() => {
if (!hasSignedUp) {
return ;
}
- if (loading) {
+ if (chainDataLoading || orbitDataLoading) {
return null;
}
return (
);
- }, [hasSignedUp, loading, pollChangeVoteEnabled, pollOptions, userHasVoted, userVoteHash]);
+ }, [
+ chainDataLoading, hasSignedUp, orbitDataLoading, pollChangeVoteEnabled, pollOptions, topicId, userHasVoted,
+ userVoteIndex,
+ ]);
const pollGraphTab = useMemo(() => (
- !loading
+ !chainDataLoading || orbitDataLoading
? (
)
: null
- ), [loading, pollOptions, userHasVoted, userVoteHash, voteCounts]);
+ ), [chainDataLoading, orbitDataLoading, pollOptions, userHasVoted, userVoteIndex, voteCounts]);
const panes = useMemo(() => {
- const pollVotePane = ({pollVoteTab});
- const pollGraphPane = ({pollGraphTab});
+ const pollVotePane = (
+
+ {pollVoteTab}
+
+ );
+ const pollGraphPane = (
+
+ {pollGraphTab}
+
+ );
return ([
{ menuItem: t(VOTE_TAB.intl_display_name_id), render: () => pollVotePane },
{ menuItem: t(GRAPH_TAB.intl_display_name_id), render: () => pollGraphPane },
]);
- }, [loading, pollGraphTab, pollVoteTab, t]);
+ }, [chainDataLoading, orbitDataLoading, pollGraphTab, pollVoteTab, t]);
return (
- {!loading && pollHashValid
+ {!chainDataLoading && !orbitDataLoading && pollHashValid
? (
<>
-
-
-
- {loading
- ?
- : pollQuestion}
-
-
+
+ {pollQuestion}
>