Merge pull request #2861 from luniehq/fabo/infinite-scroll

Fabo/infinite scroll

.gitignore

@@ -26,4 +26,4 @@ yarn-error.log*
 *.sw?
 
 android
-ios
+ios

changes/fabo_infinite-scroll

@@ -0,0 +1 @@
+[Added] Added infinite scroll to validator list @faboweb

package.json

@@ -57,6 +57,7 @@
  "vue": "2.6.10",
  "vue-clipboard2": "0.3.0",
  "vue-directive-tooltip": "1.4.5",
+ "vue-infinite-scroll": "2.0.2",
  "vue-router": "^3.0.3",
  "vuelidate": "0.7.4",
  "vuex": "3.1.1",

src/components/staking/TableValidators.vue

@@ -8,9 +8,9 @@
  :show-on-mobile="showOnMobile"
  />
  </thead>
- <tbody>
+ <tbody v-infinite-scroll="loadMore" infinite-scroll-distance="80">
  <LiValidator
- v-for="validator in sortedEnrichedValidators"
+ v-for="validator in showingValidators"
  :key="validator.operator_address"
  :validator="validator"
  :show-on-mobile="showOnMobile"
@@ -51,6 +51,7 @@ export default {
  property: `commission`,
  order: `asc`
  },
+ showing: 15,
  rollingWindow: 10000 // param of slashing period
  }),
  computed: {
@@ -116,6 +117,9 @@ export default {
  [this.sort.order]
  )
  },
+ showingValidators() {
+ return this.sortedEnrichedValidators.slice(0, this.showing)
+ },
  properties() {
  return [
  {
@@ -156,15 +160,6 @@ export default {
  tooltip: `Approximate annualized return if validator is never punished`
  }
  ]
- },
- yourValidators({ committedDelegations, validators, session } = this) {
- if (!session.signedIn) {
- return
- }
-
- return validators.filter(
- ({ operator_address }) => operator_address in committedDelegations
- )
  }
  },
  watch: {
@@ -176,13 +171,24 @@ export default {
  handler() {
  this.$store.dispatch(`getRewardsFromMyValidators`)
  }
+ },
+ "sort.property": function() {
+ this.showing = 15
+ },
+ "sort.order": function() {
+ this.showing = 15
  }
  },
  mounted() {
  this.$store.dispatch(`getPool`)
  this.$store.dispatch(`updateDelegates`)
  this.$store.dispatch(`getRewardsFromMyValidators`)
  this.$store.dispatch(`getMintingParameters`)
+ },
+ methods: {
+ loadMore() {
+ this.showing += 10
+ }
  }
 }
 </script>

src/components/wallet/PageTransactions.vue

@@ -10,11 +10,13 @@
  >
  <DataEmptyTx slot="no-data" />
  <template slot="managed-body">
- <TransactionList
- :transactions="flatOrderedTransactionList"
- :address="session.address"
- :validators="validators"
- />
+ <div v-infinite-scroll="loadMore" infinite-scroll-distance="80">
+ <TransactionList
+ :transactions="showingTransactions"
+ :address="session.address"
+ :validators="validators"
+ />
+ </div>
  <br />
  </template>
  </TmPage>
@@ -33,9 +35,15 @@ export default {
  DataEmptyTx,
  TmPage
  },
+ data: () => ({
+ showing: 15
+ }),
  computed: {
  ...mapState([`session`, `transactions`]),
  ...mapGetters([`validators`, `flatOrderedTransactionList`]),
+ showingTransactions() {
+ return this.flatOrderedTransactionList.slice(0, this.showing)
+ },
  dataEmpty() {
  return this.flatOrderedTransactionList.length === 0
  }
@@ -53,6 +61,9 @@ export default {
  if (this.session.signedIn) {
  await this.$store.dispatch(`getAllTxs`)
  }
+ },
+ loadMore() {
+ this.showing += 10
  }
  }
 }

src/main.js

@@ -3,6 +3,7 @@
 import Vue from "vue"
 import Tooltip from "vue-directive-tooltip"
 import Vuelidate from "vuelidate"
+import InfiniteScroll from "vue-infinite-scroll"
 import VueClipboard from "vue-clipboard2"
 import { focusElement, focusParentLast } from "src/directives"
 import App from "./App.vue"
@@ -16,6 +17,7 @@ Vue.config.productionTip = false
 Vue.use(Tooltip, { delay: 1 })
 Vue.use(Vuelidate)
 Vue.use(VueClipboard)
+Vue.use(InfiniteScroll)
 
 Vue.directive(`focus`, focusElement)
 Vue.directive(`focus-last`, focusParentLast)

tests/unit/specs/components/staking/TableValidators.spec.js

@@ -59,7 +59,10 @@ describe(`TableValidators`, () => {
  mocks: {
  $store
  },
- propsData: { validators }
+ propsData: { validators },
+ directives: {
+ infiniteScroll: () => {}
+ }
  })
  wrapper.setData({ rollingWindow: 10000 })
  })
@@ -105,6 +108,13 @@ describe(`TableValidators`, () => {
  ).toEqual(validators.map(x => x.operator_address).reverse())
  })
 
+ it(`should load more validators (infinite scrolling)`, async () => {
+ wrapper.setData({ showing: 2 })
+ expect(wrapper.findAll("livalidator-stub").length).toBe(2)
+ wrapper.vm.loadMore()
+ expect(wrapper.findAll("livalidator-stub").length).toBe(3)
+ })
+
  it(`queries delegations on signin`, () => {
  const session = { address: `cosmos1address` }
  const $store = { dispatch: jest.fn() }
@@ -119,63 +129,10 @@ describe(`TableValidators`, () => {
  expect($store.dispatch).not.toHaveBeenCalledWith(`updateDelegates`)
  })
 
- it(`should filter the validators for your delegations`, () => {
- const session = { signedIn: true }
- expect(
- TableValidators.computed.yourValidators({
- committedDelegations: {
- [validators[0].operator_address]: 1,
- [validators[2].operator_address]: 2
- },
- validators,
- session
- })
- ).toEqual([validators[0], validators[2]])
- })
-
- it(`should not filter the validators if you're not signed in`, () => {
- const session = { signedIn: false }
- expect(
- TableValidators.computed.yourValidators({
- committedDelegations: {
- [validators[0].operator_address]: 1,
- [validators[2].operator_address]: 2
- },
- validators,
- session
- })
- ).not.toBeDefined()
- })
-
- describe(`update rewards on new blocks`, () => {
- describe(`shouldn't update`, () => {
- it(`if hasn't waited for 20 blocks `, () => {
- const $store = { dispatch: jest.fn() }
- const yourValidators = [{}]
- const newHeader = { height: `30` }
- TableValidators.watch.lastHeader.handler.call(
- { $store, yourValidators },
- newHeader
- )
- expect($store.dispatch).not.toHaveBeenCalledWith(
- `getRewardsFromMyValidators`,
- yourValidators
- )
- })
-
- it(`if user doesn't have any delegations `, () => {
- const $store = { dispatch: jest.fn() }
- const yourValidators = []
- const newHeader = { height: `40` }
- TableValidators.watch.lastHeader.handler.call(
- { $store, yourValidators },
- newHeader
- )
- expect($store.dispatch).not.toHaveBeenCalledWith(
- `getRewardsFromMyValidators`,
- yourValidators
- )
- })
- })
+ it(`should update rewards on new blocks`, () => {
+ const $store = { dispatch: jest.fn() }
+ const newHeader = { height: `30` }
+ TableValidators.watch.lastHeader.handler.call({ $store }, newHeader)
+ expect($store.dispatch).toHaveBeenCalledWith(`getRewardsFromMyValidators`)
  })
 })

tests/unit/specs/components/staking/__snapshots__/TableValidators.spec.js.snap

@@ -13,7 +13,9 @@ exports[`TableValidators shows a validator table 1`] = `
  />
  </thead>
  
- <tbody>
+ <tbody
+ infinite-scroll-distance="80"
+ >
  <livalidator-stub
  showonmobile="returns"
  validator="[object Object]"

tests/unit/specs/components/wallet/PageTransactions.spec.js

@@ -229,6 +229,9 @@ describe(`PageTransactions`, () => {
  localVue,
  mocks: {
  $store
+ },
+ directives: {
+ infiniteScroll: () => {}
  }
  })
  expect(wrapper.element).toMatchSnapshot()
@@ -243,6 +246,9 @@ describe(`PageTransactions`, () => {
  localVue,
  mocks: {
  $store
+ },
+ directives: {
+ infiniteScroll: () => {}
  }
  })
  expect(wrapper.element).toMatchSnapshot()
@@ -258,11 +264,30 @@ describe(`PageTransactions`, () => {
  localVue,
  mocks: {
  $store
+ },
+ directives: {
+ infiniteScroll: () => {}
  }
  })
  expect($store.dispatch).not.toHaveBeenCalledWith(`getAllTxs`)
  $store.state.session.signedIn = true
  $store.state.session.address = undefined
  expect($store.dispatch).toHaveBeenCalledWith(`getAllTxs`)
  })
+
+ it(`should load more transactions (infinite scrolling)`, async () => {
+ wrapper = shallowMount(PageTransactions, {
+ localVue,
+ mocks: {
+ $store
+ },
+ directives: {
+ infiniteScroll: () => {}
+ }
+ })
+ wrapper.setData({ showing: 2 })
+ expect(wrapper.vm.showingTransactions.length).toBe(2)
+ wrapper.vm.loadMore()
+ expect(wrapper.vm.showingTransactions.length).toBe(7)
+ })
 })

tests/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap

@@ -12,10 +12,14 @@ exports[`PageTransactions Renders correctly and does not load transactions if th
  <dataemptytx-stub />
  
  <template>
- <transactionlist-stub
- transactions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
- validators="[object Object]"
- />
+ <div
+ infinite-scroll-distance="80"
+ >
+ <transactionlist-stub
+ transactions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+ validators="[object Object]"
+ />
+ </div>
  
  <br />
  </template>
@@ -34,11 +38,15 @@ exports[`PageTransactions Renders correctly and loads transactions 1`] = `
  <dataemptytx-stub />
  
  <template>
- <transactionlist-stub
- address="cosmos15ky9du8a2wlstz6fpx3p4mqpjyrm5ctpesxxn9"
- transactions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
- validators="[object Object]"
- />
+ <div
+ infinite-scroll-distance="80"
+ >
+ <transactionlist-stub
+ address="cosmos15ky9du8a2wlstz6fpx3p4mqpjyrm5ctpesxxn9"
+ transactions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+ validators="[object Object]"
+ />
+ </div>
  
  <br />
  </template>

yarn.lock

@@ -11826,6 +11826,11 @@ vue-hot-reload-api@^2.3.0:
  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
  integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-infinite-scroll@2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
+ integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
+
 vue-jest@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.4.tgz#b6a2b0d874968f26fa775ac901903fece531e08b"