Add selected votes counts bar - Closes #445

features/step_definitions/generic.step.js

@@ -114,8 +114,13 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
       .and.notify(callback);
   });
 
-  Then('I should see text "{text}" in "{fieldName}" element', (text, fieldName, callback) => {
-    const selectorClass = `.${fieldName.replace(/ /g, '-')}`;
+  Then('I should see text "{text}" in "{elementName}" element', (text, elementName, callback) => {
+    const selectorClass = `.${elementName.replace(/ /g, '-')}`;
+    waitForElemAndCheckItsText(selectorClass, text, callback);
+  });
+
+  Then('I should see element "{elementName}" that contains text:', (elementName, text, callback) => {
+    const selectorClass = `.${elementName.replace(/ /g, '-')}`;
     waitForElemAndCheckItsText(selectorClass, text, callback);
   });
 

features/voting.feature

@@ -36,6 +36,30 @@ Feature: Voting tab
     Then I should see "Insufficient funds for 1 LSK fee" error message
     And "submit button" should be disabled
 
+  Scenario: should display voting bar with numbers of selected votes if any selected
+    Given I'm logged in as "delegate candidate"
+    When I click tab number 2
+    And I should see no "voting bar"
+    And I click checkbox on table row no. 3
+    Then I should see element "voting bar" that contains text:
+      """
+      Upvotes: 1
+      Downvotes: 0
+      Total new votes: 1 / 33
+      Total votes: 1 / 101
+      """
+    And I click checkbox on table row no. 5
+    And I should see element "voting bar" that contains text:
+      """
+      Upvotes: 2
+      Downvotes: 0
+      Total new votes: 2 / 33
+      Total votes: 2 / 101
+      """
+    And I click checkbox on table row no. 3
+    And I click checkbox on table row no. 5
+    And I should see no "voting bar"
+
   Scenario: should allow to select delegates in the "Voting" tab and vote for them
     Given I'm logged in as "delegate candidate"
     When I click tab number 2

src/components/voteDialog/voteDialog.js

@@ -2,11 +2,14 @@ import React from 'react';
 import InfoParagraph from '../infoParagraph';
 import ActionBar from '../actionBar';
 import Fees from '../../constants/fees';
+import votingConst from '../../constants/voting';
 import Autocomplete from './voteAutocomplete';
 import styles from './voteDialog.css';
 import AuthInputs from '../authInputs';
 import { authStatePrefill, authStateIsValid } from '../../utils/form';
 
+const { maxCountOfVotes, maxCountOfVotesInOneTurn } = votingConst;
+
 export default class VoteDialog extends React.Component {
   constructor() {
     super();
@@ -58,9 +61,9 @@ export default class VoteDialog extends React.Component {
         <article className={styles.info}>
           <InfoParagraph>
             <p >
-              You can select up to 33 delegates in one voting turn.
+              You can select up to {maxCountOfVotesInOneTurn} delegates in one voting turn.
             </p>
-            You can vote for up to 101 delegates in total.
+            You can vote for up to {maxCountOfVotes} delegates in total.
           </InfoParagraph>
         </article>
 
@@ -72,9 +75,9 @@ export default class VoteDialog extends React.Component {
             label: 'Confirm',
             fee: Fees.vote,
             disabled: (
-              totalVotes > 101 ||
+              totalVotes > maxCountOfVotes ||
               votesList.length === 0 ||
-              votesList.length > 33 ||
+              votesList.length > maxCountOfVotesInOneTurn ||
               !authStateIsValid(this.state)
             ),
             onClick: this.confirm.bind(this),

src/components/voting/voting.js

@@ -1,11 +1,13 @@
-import React from 'react';
-import { themr } from 'react-css-themr';
 import { TABLE } from 'react-toolbox/lib/identifiers';
-import { tableFactory } from 'react-toolbox/lib/table/Table';
 import { TableHead, TableCell } from 'react-toolbox/lib/table';
+import { tableFactory } from 'react-toolbox/lib/table/Table';
+import { themr } from 'react-css-themr';
+import React from 'react';
 import TableTheme from 'react-toolbox/lib/table/theme.css';
 import Waypoint from 'react-waypoint';
+
 import Header from './votingHeader';
+import VotingBar from './votingBar';
 import VotingRow from './votingRow';
 
 // Create a new Table component injecting Head and Row
@@ -126,6 +128,7 @@ class Voting extends React.Component {
           scrollableAncestor={window}
           key={this.props.delegates.length}
           onEnter={this.loadMore.bind(this)}></Waypoint>
+        <VotingBar votes={this.props.votes} />
       </div>
     );
   }

src/components/voting/votingBar.css

@@ -0,0 +1,9 @@
+.red {
+  color: #c62828;
+}
+
+.fixedAtBottom {
+  position: fixed;
+  bottom: 0;
+  left: 8px;
+}

src/components/voting/votingBar.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
+import votingConst from '../../constants/voting';
+import style from './votingBar.css';
+
+const VotingBar = ({ votes }) => {
+  const { maxCountOfVotes, maxCountOfVotesInOneTurn } = votingConst;
+  const votedList = Object.keys(votes).filter(key => votes[key].confirmed);
+  const voteList = Object.keys(votes).filter(
+    key => votes[key].unconfirmed && !votes[key].confirmed);
+  const unvoteList = Object.keys(votes).filter(
+    key => !votes[key].unconfirmed && votes[key].confirmed);
+  const totalVotesCount = (votedList.length - unvoteList.length) + voteList.length;
+  const totalNewVotesCount = voteList.length + unvoteList.length;
+
+  return (voteList.length + unvoteList.length ?
+    <div className={`${grid.row} ${style.fixedAtBottom} box voting-bar`}>
+      <div className={
+        `${grid['col-sm-12']} ${grid['col-md-10']} ${grid['col-md-offset-1']}
+          ${grid.row} ${grid['center-xs']} ${grid['middle-xs']}`}>
+        <span className={`${grid['col-sm-3']} ${grid['col-xs-12']} upvotes`}>
+          <span>Upvotes: </span>
+          <strong>{voteList.length}</strong>
+        </span>
+        <span className={`${grid['col-sm-3']} ${grid['col-xs-12']} downvotes`}>
+          <span>Downvotes: </span>
+          <strong>{unvoteList.length}</strong>
+        </span>
+        <span className={`${grid['col-sm-3']} ${grid['col-xs-12']} total-new-votes`}>
+          <span>Total new votes: </span>
+          <strong className={totalNewVotesCount > maxCountOfVotesInOneTurn && style.red}>
+            {totalNewVotesCount}
+          </strong>
+          <span> / {maxCountOfVotesInOneTurn}</span>
+        </span>
+        <span className={`${grid['col-sm-3']} ${grid['col-xs-12']} total-votes`}>
+          <span>Total votes: </span>
+          <strong className={totalVotesCount > 101 && style.red}>
+            {totalVotesCount}
+          </strong>
+          <span> / {maxCountOfVotes}</span>
+        </span>
+      </div>
+    </div> :
+    null
+  );
+};
+
+export default VotingBar;

src/components/voting/votingBar.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+
+import VotingBar from './votingBar';
+
+import styles from './votingBar.css';
+
+describe('VotingBar', () => {
+  let wrapper;
+  const props = {
+    votes: {
+      voted: {
+        confirmed: true,
+        unconfirmed: false,
+      },
+      downvote: {
+        confirmed: true,
+        unconfirmed: true,
+      },
+      upvote: {
+        confirmed: false,
+        unconfirmed: true,
+      },
+      upvote2: {
+        confirmed: false,
+        unconfirmed: true,
+      },
+      notVoted: {
+        confirmed: false,
+        unconfirmed: false,
+      },
+    },
+  };
+
+  const generateNVotes = n => (
+    [...Array(n)].map((item, i) => i).reduce(
+      (dict, value) => {
+        dict[`genesis_${value}`] = { unconfirmed: true };
+        return dict;
+      }, {})
+  );
+
+  beforeEach(() => {
+    wrapper = mount(<VotingBar {...props} />);
+  });
+
+  it('should render number of upvotes', () => {
+    expect(wrapper.find('.upvotes')).to.have.text('Upvotes: 2');
+  });
+
+  it('should render number of downvotes', () => {
+    expect(wrapper.find('.downvotes')).to.have.text('Downvotes: 1');
+  });
+
+  it('should render number of downvotes', () => {
+    expect(wrapper.find('.total-new-votes')).to.have.text('Total new votes: 3 / 33');
+  });
+
+  it('should render number of total votes', () => {
+    expect(wrapper.find('.total-votes')).to.have.text('Total votes: 3 / 101');
+  });
+
+  it('should not render if no upvotes or downvotes', () => {
+    wrapper.setProps({ votes: {} });
+    expect(wrapper.html()).to.equal(null);
+  });
+
+  it('should render number of total votes in red if 101 exceeded', () => {
+    const votes = generateNVotes(102);
+
+    expect(wrapper.find(`.total-votes .${styles.red}`)).to.be.not.present();
+    wrapper.setProps({ votes });
+    expect(wrapper.find('.total-votes')).to.have.text('Total votes: 102 / 101');
+    expect(wrapper.find(`.total-votes .${styles.red}`)).to.have.text('102');
+  });
+
+  it('should render number of total new votes in red if 33 exceeded', () => {
+    const votes = generateNVotes(34);
+    expect(wrapper.find(`.total-new-votes .${styles.red}`)).to.be.not.present();
+    wrapper.setProps({ votes });
+    expect(wrapper.find('.total-new-votes')).to.have.text('Total new votes: 34 / 33');
+    expect(wrapper.find(`.total-new-votes .${styles.red}`)).to.have.text('34');
+  });
+});
+

src/constants/voting.js

@@ -0,0 +1,6 @@
+const votingConst = {
+  maxCountOfVotesInOneTurn: 33,
+  maxCountOfVotes: 101,
+};
+
+export default votingConst;

src/store/middlewares/index.js

@@ -6,6 +6,7 @@ import addedTransactionMiddleware from './addedTransaction';
 import loadingBarMiddleware from './loadingBar';
 import offlineMiddleware from './offline';
 import notificationMiddleware from './notification';
+import votingMiddleware from './voting';
 import savedAccountsMiddleware from './savedAccounts';
 
 export default [
@@ -17,5 +18,6 @@ export default [
   loadingBarMiddleware,
   offlineMiddleware,
   notificationMiddleware,
+  votingMiddleware,
   savedAccountsMiddleware,
 ];

src/store/middlewares/voting.js

@@ -0,0 +1,32 @@
+import actionTypes from '../../constants/actions';
+import votingConst from '../../constants/voting';
+import { errorToastDisplayed } from '../../actions/toaster';
+
+const votingMiddleware = store => next => (action) => {
+  next(action);
+  if (action.type === actionTypes.voteToggled) {
+    const { votes } = store.getState().voting;
+    const currentVote = votes[action.data.username] || { unconfirmed: true, confirmed: false };
+
+    const newVoteCount = Object.keys(votes).filter(
+      key => votes[key].confirmed !== votes[key].unconfirmed).length;
+    if (newVoteCount === votingConst.maxCountOfVotesInOneTurn + 1 &&
+        currentVote.unconfirmed !== currentVote.confirmed) {
+      const label = `Maximum of ${votingConst.maxCountOfVotesInOneTurn} votes in one transaction exceeded.`;
+      const newAction = errorToastDisplayed({ label });
+      store.dispatch(newAction);
+    }
+
+    const voteCount = Object.keys(votes).filter(
+      key => (votes[key].confirmed && !votes[key].unconfirmed) || votes[key].unconfirmed).length;
+    if (voteCount === votingConst.maxCountOfVotes + 1 &&
+        currentVote.unconfirmed !== currentVote.confirmed) {
+      const label = `Maximum of ${votingConst.maxCountOfVotes} votes exceeded.`;
+      const newAction = errorToastDisplayed({ label });
+      store.dispatch(newAction);
+    }
+  }
+};
+
+export default votingMiddleware;
+