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

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

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)
+          }
+        }
+      }
     }
   }
 }

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,26 +41,26 @@ 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`,
   components: {
     ModalPropose,
     TableProposals,
     TmDataMsg,
-    TmDataLoading,
     TmBtn,
     TmPage
   },
   data: () => ({
     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;

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`