diff --git a/src/components/voting/voting.js b/src/components/voting/voting.js index 7ee49ac89..6c6c9ebe6 100644 --- a/src/components/voting/voting.js +++ b/src/components/voting/voting.js @@ -169,8 +169,8 @@ class Voting extends React.Component { Uptime Approval - {this.state.delegates.map((item, idx) => ( - + {this.state.delegates.map(item => ( + ))} diff --git a/src/components/voting/votingRow.js b/src/components/voting/votingRow.js index e2939888d..5d504fe30 100644 --- a/src/components/voting/votingRow.js +++ b/src/components/voting/votingRow.js @@ -12,9 +12,16 @@ const setRowClass = ({ pending, selected, voted }) => { return voted ? styles.downVoteRow : ''; }; -const VotingRow = (props) => { - const { data } = props; - return ( +class VotingRow extends React.Component { + // eslint-disable-next-line class-methods-use-this + shouldComponentUpdate(nextProps) { + return !!nextProps.data.dirty; + } + + render() { + const props = this.props; + const { data } = props; + return ( { {data.productivity} % {data.approval} % - ); -}; + ); + } +} export default VotingRow; diff --git a/src/components/voting/votingRow.test.js b/src/components/voting/votingRow.test.js index bef85ba6c..aaa4e0175 100644 --- a/src/components/voting/votingRow.test.js +++ b/src/components/voting/votingRow.test.js @@ -9,7 +9,7 @@ describe('VotinRow', () => { let wrapper; beforeEach(() => { - wrapper = mount(, + wrapper = mount(, { context: { store }, childContextTypes: { store: PropTypes.object.isRequired }, @@ -19,40 +19,40 @@ describe('VotinRow', () => { it('should TableRow has class name of "pendingRow" when props.data.pending is true', () => { wrapper.setProps({ - data: { pending: true }, + data: { pending: true, dirty: true }, }); - const expectedClass = /_pendingRow/g; - const html = wrapper.find('tr').html(); - expect(html.match(expectedClass)).to.have.lengthOf(1); + const expectedClass = '_pendingRow'; + const className = wrapper.find('tr').prop('className'); + expect(className).to.contain(expectedClass); }); it(`should TableRow has class name of "votedRow" when props.data.selected and props.data.voted are true`, () => { wrapper.setProps({ - data: { selected: true, voted: true }, + data: { selected: true, voted: true, dirty: true }, }); - const expectedClass = /_votedRow/g; - const html = wrapper.find('tr').html(); - expect(html.match(expectedClass)).to.have.lengthOf(1); + const expectedClass = '_votedRow'; + const className = wrapper.find('tr').prop('className'); + expect(className).to.contain(expectedClass); }); it(`should TableRow has class name of "downVoteRow" when props.data.selected is false and props.data.voted is true`, () => { wrapper.setProps({ - data: { selected: false, voted: true }, + data: { selected: false, voted: true, dirty: true }, }); - const expectedClass = /_downVoteRow/g; - const html = wrapper.find('tr').html(); - expect(html.match(expectedClass)).to.have.lengthOf(1); + const expectedClass = '_downVoteRow'; + const className = wrapper.find('tr').prop('className'); + expect(className).to.contain(expectedClass); }); it(`should TableRow has class name of "upVoteRow" when props.data.selected is true and props.data.voted is false`, () => { wrapper.setProps({ - data: { selected: true, voted: false }, + data: { selected: true, voted: false, dirty: true }, }); - const expectedClass = /_upVoteRow/g; - const html = wrapper.find('tr').html(); - expect(html.match(expectedClass)).to.have.lengthOf(1); + const expectedClass = '_upVoteRow'; + const className = wrapper.find('tr').prop('className'); + expect(className).to.contain(expectedClass); }); }); diff --git a/src/store/reducers/voting.js b/src/store/reducers/voting.js index 7469e1b75..4894e6e8f 100644 --- a/src/store/reducers/voting.js +++ b/src/store/reducers/voting.js @@ -47,7 +47,7 @@ const voting = (state = { votedList: [], unvotedList: [] }, action) => { refresh: false, votedList: [ ...state.votedList, - Object.assign(action.data, { selected: true }), + Object.assign(action.data, { selected: true, dirty: true }), ], }); case actionTypes.removedFromVoteList: @@ -64,11 +64,16 @@ const voting = (state = { votedList: [], unvotedList: [] }, action) => { refresh: false, unvotedList: [ ...state.unvotedList, - Object.assign(action.data, { selected: false }), + Object.assign(action.data, { selected: false, dirty: true }), ], }); - case actionTypes.votesCleared: case actionTypes.accountLoggedOut: + return Object.assign({}, state, { + votedList: [], + unvotedList: [], + refresh: true, + }); + case actionTypes.votesCleared: return Object.assign({}, state, { votedList: state.votedList.filter(item => !item.pending), unvotedList: state.unvotedList.filter(item => !item.pending),