Merge pull request #125 from makerdao/minimize-db-fetches

Only make spock fetches if the data is needed to display the active page

package.json

@@ -8,7 +8,7 @@
     "@craco/craco": "^3.5.0",
     "@makerdao/dai": "^0.16.1",
     "@makerdao/dai-plugin-config": "^0.2.7-rc.3",
-    "@makerdao/dai-plugin-governance": "^0.7.0",
+    "@makerdao/dai-plugin-governance": "0.7.2",
     "@makerdao/dai-plugin-ledger-web": "^0.9.7",
     "@makerdao/dai-plugin-trezor-web": "^0.9.6",
     "@makerdao/ui-components": "1.0.0-alpha.29",

src/pages/Polling.js

@@ -14,7 +14,7 @@ import { VotingWeightBanner } from './PollingList';
 import { activeCanVote, getActiveVotingFor } from '../reducers/accounts';
 import { modalOpen } from '../reducers/modal';
 import { getWinningProp } from '../reducers/proposals';
-import { getOptionVotingFor } from '../reducers/polling';
+import { getOptionVotingFor, pollDataInit } from '../reducers/polling';
 import theme, { colors } from '../theme';
 import { ethScanLink } from '../utils/ethereum';
 import { MIN_MKR_PERCENTAGE } from '../utils/constants';
@@ -340,11 +340,13 @@ class Polling extends React.Component {
       this.state.activeAccount !== prevProps.activeAccount ||
       (this.props.poll && prevProps.poll === undefined)
     ) {
-      await this.updateVotedPollOption();
+      this.props.pollDataInit(this.props.poll);
+      this.updateVotedPollOption();
     }
   }
 
   componentDidMount() {
+    if (!!this.props.poll) this.props.pollDataInit(this.props.poll);
     this.updateVotedPollOption();
   }
 
@@ -374,7 +376,8 @@ class Polling extends React.Component {
       modalOpen,
       pollsFetching
     } = this.props;
-    if (pollsFetching && !poll) return null;
+    if (pollsFetching && !poll)
+      return <Loader mt={34} mb={34} color="header" background="background" />;
     if (isNil(poll) || isEmpty(poll) || !isValidRoute) return <NotFound />;
     const {
       discussion_link,
@@ -602,6 +605,7 @@ export default connect(
   reduxProps,
   {
     modalOpen,
-    getOptionVotingFor
+    getOptionVotingFor,
+    pollDataInit
   }
 )(Polling);

src/pages/PollingList.js

@@ -189,15 +189,8 @@ const Strong = styled(Black)`
   font-weight: bold;
 `;
 
-export const VotingWeightBanner = ({ fetching, activeAccount }) => {
-  if (fetching) {
-    return (
-      <Padding>
-        <Loader mt={34} mb={34} color="header" background="background" />
-      </Padding>
-    );
-  }
-  if (!activeAccount) return <Padding />;
+export const VotingWeightBanner = ({ accountsFetching, activeAccount }) => {
+  if (accountsFetching || !activeAccount) return <Padding />;
 
   // mkr in wallet + mkr locked in chief (including mkr locked via a vote proxy)
   const pollVotingPower = add(
@@ -220,11 +213,12 @@ export const VotingWeightBanner = ({ fetching, activeAccount }) => {
 };
 
 const PollingList = ({
-  fetching,
+  accountsFetching,
   polling: { polls },
   activeAccount,
   proposals,
-  approvals
+  approvals,
+  pollsFetching
 }) => {
   polls.sort((a, b) => b.startDate - a.startDate);
   const winningProposal = poll => {
@@ -240,7 +234,15 @@ const PollingList = ({
   return (
     <Fragment>
       <MigrationNotificationBanner />
-      <VotingWeightBanner fetching={fetching} activeAccount={activeAccount} />
+      <VotingWeightBanner
+        accountsFetching={accountsFetching}
+        activeAccount={activeAccount}
+      />
+      {accountsFetching || pollsFetching ? (
+        <Padding>
+          <Loader mt={34} mb={34} color="header" background="background" />
+        </Padding>
+      ) : null}
       <RiseUp key={polls.toString()}>
         {polls.map(poll => (
           <StyledCard key={poll.pollId}>
@@ -317,11 +319,13 @@ const PollingList = ({
 };
 
 const reduxProps = ({ accounts, polling, approvals, proposals }) => {
+  const { pollsFetching } = polling;
   const activeAccount = accounts.activeAccount
     ? accounts.allAccounts.find(a => eq(a.address, accounts.activeAccount))
     : null;
   return {
-    fetching: accounts.fetching,
+    pollsFetching,
+    accountsFetching: accounts.fetching,
     polling,
     activeAccount,
     approvals,

src/reducers/polling.js

@@ -312,7 +312,6 @@ export const pollsInit = () => async dispatch => {
               .service('smartContract')
               .getContract('POLLING').address;
             dispatch(addPoll(pollData));
-            dispatch(pollDataInit(pollData));
           } catch (e) {
             throw e;
           }
@@ -326,12 +325,9 @@ export const pollsInit = () => async dispatch => {
   }
 };
 
-export const pollDataInit = ({
-  pollId,
-  options,
-  endDate,
-  active
-}) => dispatch => {
+export const pollDataInit = poll => dispatch => {
+  if (!poll) return;
+  const { pollId, options, endDate, active } = poll;
   getTotalVotes(pollId).then(totalVotes =>
     dispatch(updatePoll(pollId, { totalVotes }))
   );

yarn.lock

@@ -1087,10 +1087,10 @@
     babel-runtime "^6.26.0"
     ramda "^0.26.1"
 
-"@makerdao/dai-plugin-governance@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@makerdao/dai-plugin-governance/-/dai-plugin-governance-0.7.0.tgz#e838627aa54fa5650894e23b09fbac174be5ea73"
-  integrity sha512-Fjw3UTgXPqSYxwcC2qSLXT9Y8kKmL9JwKpdh0kCoR3TKyOI7EwSY7rbhBMVLXstKcZ8Z8Xl+J8r2QhnFIOoMlg==
+"@makerdao/[email protected].2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@makerdao/dai-plugin-governance/-/dai-plugin-governance-0.7.2.tgz#b84fb0a35eace3e29f2795bbf7ebf44f656314b9"
+  integrity sha512-foNjsTbPhpReYnnuGWXafdfcKIAMgBq2GZeSG+70gJ6mFK++Ez1D4oaSMhMtXZqHcfUHFiduYIY+aD0vKipk3g==
   dependencies:
     "@babel/runtime" "^7.4.3"
     "@makerdao/currency" "^0.9.5"