Merge pull request #4028 from LiskHQ/4018-latest-vote-weight-missing

Fix missing latest vote properties - Closes #4018
LiskHQ · Dec 31, 2021 · c25b227 · c25b227
2 parents 650d5bb + f67ad34
commit c25b227
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 15 deletions.
diff --git a/src/components/screens/wallet/votes/index.js b/src/components/screens/wallet/votes/index.js
@@ -27,7 +27,7 @@ const apis = {
 };
 
 const mapStateToProps = state => ({
-  hostVotes: state.voting,
+  sentVotes: state.voting,
   isDelegate: state.account?.info?.LSK?.summary.isDelegate,
 });
 

diff --git a/src/components/screens/wallet/votes/voteRow.js b/src/components/screens/wallet/votes/voteRow.js
@@ -18,9 +18,9 @@ const VoteRow = ({
   const truncatedAddress = truncateAddress(data.address);
   return (
     <div className={`${grid.row} ${tableStyles.row} ${styles.row}`}>
-      <div className={`${grid['col-sm-11']} vote-row`} onClick={onClick}>
+      <div className={`${grid['col-sm-12']} vote-row`}>
         {/* Account visual */}
-        <div className={grid['col-sm-6']}>
+        <div className={grid['col-sm-5']} onClick={onClick}>
           <div className={`${styles.info}`}>
             <AccountVisual
               className={`${styles.avatar}`}
@@ -35,12 +35,12 @@ const VoteRow = ({
         </div>
 
         {/* Delegate rank */}
-        <div className={grid['col-sm-2']}>
+        <div className={`${grid['col-sm-2']} ${styles.flexLeftAlign}`} onClick={onClick}>
           <span>{account?.dpos.delegate.rank}</span>
         </div>
 
         {/* Delegate weight */}
-        <div className={grid['col-sm-2']}>
+        <div className={`${grid['col-sm-2']} ${styles.flexLeftAlign}`} onClick={onClick}>
           <span>
             <LiskAmount
               val={account?.dpos.delegate.totalVotesReceived ?? 0}
@@ -51,7 +51,7 @@ const VoteRow = ({
 
         {/* Vote amount */}
         {account ? (
-          <div className={`${grid['col-sm-2']} ${styles.flexRightAlign}`}>
+          <div className={`${grid['col-sm-2']} ${styles.flexRightAlign}`} onClick={onClick}>
             <span className={styles.votes}>
               <LiskAmount
                 val={data.amount}
@@ -62,10 +62,9 @@ const VoteRow = ({
             </span>
           </div>
         ) : null}
-      </div>
 
-      {/* Edit button */}
-      {
+        {/* Edit button */}
+        {
         data.pending
           ? <Spinner />
           : (
@@ -80,6 +79,7 @@ const VoteRow = ({
             </div>
           )
       }
+      </div>
     </div>
   );
 };

diff --git a/src/components/screens/wallet/votes/votes.css b/src/components/screens/wallet/votes/votes.css
@@ -21,6 +21,11 @@
     direction: revert;
     justify-content: flex-end;
   }
+
+  & .flexLeftAlign {
+    display: flex;
+    justify-content: flex-start;
+  }
 }
 
 .empty {
@@ -70,6 +75,7 @@
 
 .info {
   display: flex;
+  margin-left: -8px;
 
   & > .avatar {
     margin-right: 16px;
@@ -79,6 +85,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
+    text-align: left;
   }
 
   & .username {

diff --git a/src/components/screens/wallet/votes/votes.js b/src/components/screens/wallet/votes/votes.js
@@ -17,7 +17,7 @@ const getMessages = t => ({
 });
 
 const Votes = ({
-  votes, accounts, address, t, history, hostVotes = {},
+  votes, accounts, address, t, history, sentVotes = {},
 }) => {
   const [filterValue, setFilterValue] = useState('');
   const messages = getMessages(t);
@@ -33,15 +33,15 @@ const Votes = ({
 
   useEffect(() => {
     votes.loadData({ address });
-  }, [address, hostVotes]);
+  }, [address, sentVotes]);
 
   // Fetch delegate profiles to define rank, productivity and delegate weight
   useEffect(() => {
-    if (isEmpty(accounts.data) && votes.data.length) {
-      const addressList = votes.data.map(vote => vote.address);
+    const addressList = Object.keys(sentVotes);
+    if (isEmpty(accounts.data) && addressList.length) {
       accounts.loadData({ addressList, isDelegate: true });
     }
-  }, [votes.data]);
+  }, [sentVotes]);
 
   const areLoading = accounts.isLoading || votes.isLoading;
   const filteredVotes = votes.data.filter((vote) => {

diff --git a/src/components/screens/wallet/votes/votes.test.js b/src/components/screens/wallet/votes/votes.test.js
@@ -47,6 +47,32 @@ describe('Votes Tab Component', () => {
     expect(wrapper).toContainMatchingElement('.loading');
   });
 
+  it('should call accounts.loadData with right arguments', () => {
+    const loadData = jest.fn();
+    wrapper = setup({
+      ...props,
+      votes: { ...props.votes, isLoading: true },
+      accounts: { data: [], loadData },
+      sentVotes: {
+        lskwhocotuu6bwnhwgjt859ugp467f8kuhdo5xfd6: [],
+        skaqeqqvkxzvt8g6kbukma8pu5cwpe6w2fjc5amc: [],
+      },
+    });
+    expect(loadData).toBeCalledWith({
+      addressList: ['lskwhocotuu6bwnhwgjt859ugp467f8kuhdo5xfd6', 'skaqeqqvkxzvt8g6kbukma8pu5cwpe6w2fjc5amc'],
+      isDelegate: true,
+    });
+  });
+  it('should not call accounts.loadData if accounts.data and no sentVotes is empty', () => {
+    const loadData = jest.fn();
+    wrapper = setup({
+      ...props,
+      votes: { ...props.votes, isLoading: true },
+      accounts: { data: [], loadData },
+    });
+    expect(loadData).not.toHaveBeenCalled();
+  });
+
   it('Should render votes', () => {
     const customProps = {
       ...props,
@@ -62,7 +88,7 @@ describe('Votes Tab Component', () => {
       votes,
     };
     wrapper = setup(customProps);
-    wrapper.find('.vote-row').at(0).simulate('click');
+    wrapper.find('.vote-row > div').at(0).first().simulate('click');
     jest.advanceTimersByTime(300);
     expect(props.history.push).toBeCalledWith(`${routes.account.path}?address=lsk0`);
   });