From c8ab4ebbd7a3e13b027d3e95645a8e22017bc21f Mon Sep 17 00:00:00 2001
From: Mario Pino <info@quequiereshacer.es>
Date: Tue, 17 Dec 2019 03:30:47 +0100
Subject: [PATCH] Update proposals every new block (#3295)

* Update proposals every 10 blocks

* changelog

* istanbul ignore next

* Trigger CI

* istanbul ignore next

* Use loaded

* Update snap

* istanbul ignore next

* Update single proposal page every new block

* Job is done!

* Comment

* Remove comment

* istanbul ignore next

* Improve coverage

* Update all proposal data

* Simplify

* Revert

* Fix watcher func testing

* Fix, cleanup, optimization

* Update snap

* Cleanup
---
 .../mario_3277-proposals-page-never-refreshes |   1 +
 src/components/governance/PageProposal.vue    |  58 +++++-
 src/components/governance/PageProposals.vue   |  46 ++++-
 .../governance/PageProposal.spec.js           |   8 +
 .../__snapshots__/PageProposal.spec.js.snap   | 192 +++++++++++++++++-
 .../__snapshots__/PageProposals.spec.js.snap  |  11 +-
 6 files changed, 293 insertions(+), 23 deletions(-)
 create mode 100644 changes/mario_3277-proposals-page-never-refreshes

diff --git a/changes/mario_3277-proposals-page-never-refreshes b/changes/mario_3277-proposals-page-never-refreshes
new file mode 100644
index 0000000000..abb977c839
--- /dev/null
+++ b/changes/mario_3277-proposals-page-never-refreshes
@@ -0,0 +1 @@
+[Fixed] [#3277](https://github.com/cosmos/lunie/issues/3277) Update proposals every 10 blocks @mariopino
\ No newline at end of file
diff --git a/src/components/governance/PageProposal.vue b/src/components/governance/PageProposal.vue
index b586a292fe..5382c048ce 100644
--- a/src/components/governance/PageProposal.vue
+++ b/src/components/governance/PageProposal.vue
@@ -1,12 +1,6 @@
 <template>
   <TmPage data-title="Proposal" hide-header class="small">
-    <TmDataLoading
-      v-if="
-        $apollo.queries.proposals.loading ||
-          $apollo.queries.proposal.loading ||
-          $apollo.queries.parameters.loading
-      "
-    />
+    <TmDataLoading v-if="$apollo.loading && !loaded" />
     <TmDataNotFound v-else-if="!found" />
     <TmDataError v-else-if="error" />
     <template v-else>
@@ -202,6 +196,7 @@ import { ProposalItem, GovernanceParameters, Vote } from "src/gql"
 import BigNumber from "bignumber.js"
 import Bech32 from "common/Bech32"
 import gql from "graphql-tag"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 
 export default {
   name: `page-proposal`,
@@ -243,7 +238,8 @@ export default {
       depositDenom: "TESTCOIN"
     },
     error: undefined,
-    found: false
+    found: false,
+    loaded: false
   }),
   computed: {
     ...mapGetters([`address`, `network`]),
@@ -263,6 +259,12 @@ export default {
       return id
     }
   },
+  watch: {
+    // Needed to show data loading component when you are browsing from one proposal to another
+    $route: function() {
+      this.loaded = false
+    }
+  },
   methods: {
     onVote() {
       this.$refs.modalVote.open()
@@ -319,6 +321,7 @@ export default {
         ) {
           this.found = true
         }
+        /* istanbul ignore next */
         return data.proposals
       }
     },
@@ -328,6 +331,8 @@ export default {
         return ProposalItem(this.network)
       },
       update(data) {
+        /* istanbul ignore next */
+        this.loaded = true
         /* istanbul ignore next */
         return data.proposal
       },
@@ -388,6 +393,43 @@ export default {
         /* istanbul ignore next */
         this.error = data.error
       }
+    },
+    $subscribe: {
+      blockAdded: {
+        variables() {
+          /* istanbul ignore next */
+          return {
+            networkId: this.network
+          }
+        },
+        query() {
+          /* istanbul ignore next */
+          return gql`
+            subscription($networkId: String!) {
+              blockAdded(networkId: $networkId) {
+                height
+              }
+            }
+          `
+        },
+        skip() {
+          /* istanbul ignore next */
+          return !this.found
+        },
+        result() {
+          /* istanbul ignore next */
+          if (
+            // Don't update passed or rejected proposals
+            this.proposal.status !== "Passed" &&
+            this.proposal.status !== "Rejected" &&
+            this.loaded
+          ) {
+            refetchNetworkOnly(this.$apollo.queries.proposal)
+            refetchNetworkOnly(this.$apollo.queries.parameters)
+            refetchNetworkOnly(this.$apollo.queries.vote)
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/components/governance/PageProposals.vue b/src/components/governance/PageProposals.vue
index e25dfe7977..867c9726f2 100644
--- a/src/components/governance/PageProposals.vue
+++ b/src/components/governance/PageProposals.vue
@@ -1,5 +1,10 @@
 <template>
-  <TmPage data-title="Proposals" :managed="false" hide-header>
+  <TmPage
+    data-title="Proposals"
+    :managed="true"
+    hide-header
+    :loading="$apollo.loading && !loaded"
+  >
     <div class="button-container">
       <TmBtn
         id="propose-btn"
@@ -26,10 +31,7 @@
         </TmDataMsg>
       </div>
     </div>
-    <div v-else>
-      <TmDataLoading v-if="$apollo.loading" />
-      <TableProposals v-else :proposals="proposals" />
-    </div>
+    <TableProposals v-else :proposals="proposals" />
   </TmPage>
 </template>
 
@@ -39,10 +41,10 @@ import TableProposals from "governance/TableProposals"
 import TmPage from "common/TmPage"
 import TmBtn from "common/TmBtn"
 import TmDataMsg from "common/TmDataMsg"
-import TmDataLoading from "common/TmDataLoading"
 import { mapGetters } from "vuex"
 import { GovernanceParameters } from "src/gql"
 import gql from "graphql-tag"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 
 export default {
   name: `page-proposals`,
@@ -50,7 +52,6 @@ export default {
     ModalPropose,
     TableProposals,
     TmDataMsg,
-    TmDataLoading,
     TmBtn,
     TmPage
   },
@@ -58,7 +59,8 @@ export default {
     proposals: [],
     parameters: {
       depositDenom: "xxx"
-    }
+    },
+    loaded: false
   }),
   computed: {
     ...mapGetters([`network`])
@@ -89,11 +91,14 @@ export default {
         `
       },
       variables() {
+        /* istanbul ignore next */
         return {
           networkId: this.network
         }
       },
       update(data) {
+        /* istanbul ignore next */
+        this.loaded = true
         /* istanbul ignore next */
         return data.proposals
       }
@@ -107,10 +112,35 @@ export default {
         /* istanbul ignore next */
         return data.governanceParameters
       }
+    },
+    $subscribe: {
+      blockAdded: {
+        variables() {
+          /* istanbul ignore next */
+          return {
+            networkId: this.network
+          }
+        },
+        query() {
+          /* istanbul ignore next */
+          return gql`
+            subscription($networkId: String!) {
+              blockAdded(networkId: $networkId) {
+                height
+              }
+            }
+          `
+        },
+        result() {
+          /* istanbul ignore next */
+          refetchNetworkOnly(this.$apollo.queries.proposals)
+        }
+      }
     }
   }
 }
 </script>
+
 <style scoped>
 .button-container {
   display: flex;
diff --git a/tests/unit/specs/components/governance/PageProposal.spec.js b/tests/unit/specs/components/governance/PageProposal.spec.js
index 52b19288d4..c10a7c2c55 100644
--- a/tests/unit/specs/components/governance/PageProposal.spec.js
+++ b/tests/unit/specs/components/governance/PageProposal.spec.js
@@ -34,6 +34,7 @@ describe(`PageProposal`, () => {
       getters,
       state
     }
+
     const $apollo = {
       queries: {
         proposals: {
@@ -119,6 +120,13 @@ describe(`PageProposal`, () => {
     expect(wrapper.vm.getProposalIndex(1)).toEqual(32)
   })
 
+  it(`should set loaded to false on route change`, () => {
+    wrapper.vm.loaded = true
+    // Call directly watcher function
+    wrapper.vm.$options.watch.$route.call(wrapper.vm, { path: "xxxx" })
+    expect(wrapper.vm.loaded).toBe(false)
+  })
+
   describe(`Proposal status`, () => {
     it(`displays correctly a proposal that 'Passed'`, () => {
       wrapper.vm.proposal.status = `Passed`
diff --git a/tests/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap b/tests/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap
index fca349571b..1d8596bc68 100644
--- a/tests/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap
+++ b/tests/unit/specs/components/governance/__snapshots__/PageProposal.spec.js.snap
@@ -159,8 +159,196 @@ exports[`PageProposal should show a loader if the necessary data hasen't been lo
   subtitle=""
   title=""
 >
-  <tmdataloading-stub
-    title="Data is loading…"
+  <div
+    class="proposal"
+  >
+    <div
+      class="page-profile__header__info"
+    >
+      <span
+        class="proposal-status rejected"
+      >
+        
+          Rejected
+        
+      </span>
+       
+      <div
+        class="proposal-title__row"
+      >
+        <router-link-stub
+          class="read-more-link"
+          style="visibility: hidden;"
+          to="/proposals/undefined"
+        >
+          <i
+            class="material-icons"
+          >
+            chevron_left
+          </i>
+        </router-link-stub>
+         
+        <h2
+          class="proposal-title"
+        >
+          test
+        </h2>
+         
+        <router-link-stub
+          class="read-more-link"
+          style="visibility: hidden;"
+          to="/proposals/undefined"
+        >
+          <i
+            class="material-icons"
+          >
+            chevron_right
+          </i>
+        </router-link-stub>
+      </div>
+       
+      <p
+        class="proposer"
+      >
+        
+            Proposed by Big Daddy Validator:
+            
+        <bech32-stub
+          address="cosmos1z8mzakma7vnaajysmtkwt4wgjqr2m84tzvyfkz"
+        />
+      </p>
+    </div>
+     
+    <div
+      class="button-container"
+    >
+      <tmbtn-stub
+        color="primary"
+        disabled="true"
+        id="deposit-btn"
+        value="Deposit"
+      />
+       
+      <tmbtn-stub
+        color="primary"
+        disabled="true"
+        id="vote-btn"
+        value="Vote"
+      />
+    </div>
+  </div>
+   
+  <textblock-stub
+    content="test"
+  />
+   
+  <!---->
+   
+  <ul
+    class="row"
+  >
+    <!---->
+     
+    <li>
+      <h4>
+        Yes
+      </h4>
+       
+      <span>
+        
+          0.00%
+          /
+          0
+        
+      </span>
+    </li>
+     
+    <li>
+      <h4>
+        No
+      </h4>
+       
+      <span>
+        
+          0.00%
+          /
+          0
+        
+      </span>
+    </li>
+     
+    <li>
+      <h4>
+        Veto
+      </h4>
+       
+      <span>
+        
+          0.00%
+          /
+          0
+        
+      </span>
+    </li>
+     
+    <li>
+      <h4>
+        Abstain
+      </h4>
+       
+      <span>
+        
+          0.00%
+          /
+          0
+        
+      </span>
+    </li>
+  </ul>
+   
+  <ul
+    class="row"
+  >
+    <li>
+      <h4>
+        Proposal ID
+      </h4>
+       
+      <span>
+        33
+      </span>
+    </li>
+     
+    <li>
+      <h4>
+        Submitted
+      </h4>
+       
+      <span>
+        August 23rd 2019, 08:46
+      </span>
+    </li>
+     
+    <li>
+      <h4>
+        Proposal Finalized (Rejected)
+      </h4>
+       
+      <span>
+        August 25th 2019, 08:46
+      </span>
+    </li>
+  </ul>
+   
+  <modaldeposit-stub
+    denom="TESTCOIN"
+    proposalid="33"
+    proposaltitle="test"
+  />
+   
+  <modalvote-stub
+    proposalid="33"
+    proposaltitle="test"
   />
 </tmpage-stub>
 `;
diff --git a/tests/unit/specs/components/governance/__snapshots__/PageProposals.spec.js.snap b/tests/unit/specs/components/governance/__snapshots__/PageProposals.spec.js.snap
index edbaf8b20d..da85fc9fc5 100644
--- a/tests/unit/specs/components/governance/__snapshots__/PageProposals.spec.js.snap
+++ b/tests/unit/specs/components/governance/__snapshots__/PageProposals.spec.js.snap
@@ -4,6 +4,7 @@ exports[`PageProposals shows a message if still loading 1`] = `
 <tmpage-stub
   data-title="Proposals"
   hideheader="true"
+  managed="true"
   subtitle=""
   title=""
 >
@@ -48,6 +49,7 @@ exports[`PageProposals shows a message if there is nothing to display 1`] = `
 <tmpage-stub
   data-title="Proposals"
   hideheader="true"
+  managed="true"
   subtitle=""
   title=""
 >
@@ -92,6 +94,7 @@ exports[`PageProposals shows a proposals table 1`] = `
 <tmpage-stub
   data-title="Proposals"
   hideheader="true"
+  managed="true"
   subtitle=""
   title=""
 >
@@ -109,10 +112,8 @@ exports[`PageProposals shows a proposals table 1`] = `
     denom="lunies"
   />
    
-  <div>
-    <tableproposals-stub
-      proposals="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-    />
-  </div>
+  <tableproposals-stub
+    proposals="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+  />
 </tmpage-stub>
 `;