Merge pull request #1374 from roiLeo/refactoring/store

👔 refactoring store

Author: yangwao

components/accounts/utils.ts

@@ -18,7 +18,7 @@ export const toDistribute = (length: number, distribution: number): number => {
 }
 
 export const parseBatchAddresses = (batchAddresses: string): string[] => {
-  const ss58Format: any = store.getters.getChainProperties58Format
+  const ss58Format: any = store.getters['chain/getChainProperties58Format']
   const addresses = batchAddresses
     .split('\n')
     .map((x) => x.split('-'))

components/metadata/Metadata.vue

@@ -46,9 +46,9 @@ export default class Summary extends Vue {
   public chainProperties: any = this.emptyChainProperties;
   public loading = false;
 
-  @Watch('$store.state.chainProperties')
+  @Watch('$store.state["chain/chainProperties"]')
   public mapProp(): void {
-    this.chainProperties = {...this.emptyChainProperties, ...this.$store.state.chainProperties}
+    this.chainProperties = {...this.emptyChainProperties, ...this.$store.state['chain/chainProperties']}
   }
 
   @Watch('$store.state.loading')

components/rmrk/Create/SimpleMint.vue

@@ -186,7 +186,7 @@
                   tooltipsize="is-large"
                 >
                   <template v-slot:content>
-                    {{ $t('carbonOffset.tooltip') }} 
+                    {{ $t('carbonOffset.tooltip') }}
                     (<a class="has-text-black is-underlined" href='https://kodadot.xyz/carbonless'>https://kodadot.xyz/carbonless</a>)
                   </template>
                 </Tooltip>
@@ -617,7 +617,7 @@ export default class SimpleMint extends mixins(
   }
 
   get chainProperties() {
-    return this.$store.getters.getChainProperties
+    return this.$store.getters['chain/getChainProperties']
   }
 
   get decimals(): number {

components/rmrk/Gallery/CollectionItem.vue

@@ -3,40 +3,40 @@
     <div class="columns is-centered">
       <div class="column is-half has-text-centered">
         <div class="container image is-128x128 mb-2">
-          <b-image
-            v-if="!isLoading"
+          <BasicImage
             :src="image"
             :alt="name"
-            ratio="1by1"
             rounded
-          ></b-image>
+            customClass="collection__image"
+          />
         </div>
         <h1 class="title is-2">
-          {{ name }}
+          <template v-if="!isLoading">
+            {{ name }}
+          </template>
+          <b-skeleton :active="isLoading" size="is-medium"></b-skeleton>
         </h1>
       </div>
     </div>
 
     <div class="columns is-align-items-center">
       <div class="column">
-        <div class="label">
-          {{ $t('creator') }}
-        </div>
-        <div class="subtitle is-size-6">
-          <ProfileLink :address="issuer" :inline="true" :showTwitter="true"/>
-        </div>
-      </div>
-      <div class="column" v-if="owner">
-        <div class="label">
-          {{ $t('owner') }}
-        </div>
-        <div class="subtitle is-size-6">
-          <ProfileLink :address="owner" :inline="true" :showTwitter="true" />
+        <div v-if="!isLoading">
+          <div class="label">
+            {{ $t('creator') }}
+          </div>
+          <div v-if="issuer" class="subtitle is-size-6">
+            <ProfileLink :address="issuer" inline showTwitter />
+          </div>
         </div>
+        <b-skeleton :active="isLoading" width="40%" size="is-small"></b-skeleton>
+        <b-skeleton :active="isLoading" width="60%" size="is-small"></b-skeleton>
       </div>
+
       <div class="column is-6-tablet is-7-desktop is-8-widescreen">
         <CollectionActivity :nfts="stats" />
       </div>
+
       <div class="column has-text-right">
         <Sharing v-if="sharingVisible"
           class="mb-2"
@@ -47,27 +47,27 @@
       </div>
     </div>
 
-    <b-tabs v-model="activeTab" position="is-centered">
-      <b-tab-item label="Collection">
-        <div class="columns is-centered">
-          <div class="column is-8 has-text-centered">
-            <CollapseWrapper
-              visible="collapse.collection.description.show"
-              hidden="collapse.collection.description.hide"
-            >
-              <VueMarkdown :source="description" />
-            </CollapseWrapper>
-          </div>
-        </div>
+    <div class="columns is-centered">
+      <div class="column is-8 has-text-centered">
+        <CollapseWrapper
+          visible="collapse.collection.description.show"
+          hidden="collapse.collection.description.hide"
+        >
+          <VueMarkdown :source="description" />
+        </CollapseWrapper>
+      </div>
+    </div>
 
+    <b-tabs position="is-centered" v-model="activeTab">
+      <b-tab-item label="Collection" value="collection">
         <Search v-bind.sync="searchQuery">
           <Layout class="mr-5" />
           <b-field>
             <Pagination hasMagicBtn simple replace preserveScroll :total="total" v-model="currentValue" :per-page="first" />
           </b-field>
         </Search>
 
-        <GalleryCardList :items="collection.nfts" :horizontalLayout="true" />
+        <GalleryCardList :items="collection.nfts" horizontalLayout />
 
         <Pagination
           class="py-5"
@@ -78,26 +78,28 @@
           :per-page="first"
         />
       </b-tab-item>
-      <b-tab-item label="Activity">
-        <CollectionPriceChart v-if="activeTab === 1" :priceData="priceData" />
+      <b-tab-item label="Activity" value="activity">
+        <CollectionPriceChart :priceData="priceData" />
       </b-tab-item>
     </b-tabs>
   </section>
 </template>
 
 <script lang="ts" >
 import { emptyObject } from '@/utils/empty'
-import { Component, mixins } from 'nuxt-property-decorator'
+import { Component, mixins, Watch } from 'nuxt-property-decorator'
 import { CollectionWithMeta, Interaction } from '../service/scheme'
 import {
   sanitizeIpfsUrl, fetchCollectionMetadata, sortByTimeStamp, onlyEvents, onlyPriceEvents,
   eventTimestamp, soldNFTPrice, collectionFloorPriceList, PriceDataType, onlyBuyEvents
 } from '../utils'
 import isShareMode from '@/utils/isShareMode'
+import shouldUpdate from '@/utils/shouldUpdate'
 import collectionById from '@/queries/collectionById.graphql'
 import nftListByCollection from '@/queries/nftListByCollection.graphql'
 import { CollectionMetadata } from '../types'
 import { NFT } from '@/components/rmrk/service/scheme'
+import { exist } from '@/components/rmrk/Gallery/Search/exist'
 import { SearchQuery } from './Search/types'
 import ChainMixin from '@/utils/mixins/chainMixin'
 
@@ -112,6 +114,7 @@ const components = {
   DonationButton: () => import('@/components/transfer/DonationButton.vue'),
   Layout: () => import('@/components/rmrk/Gallery/Layout.vue'),
   CollectionPriceChart: () => import('@/components/rmrk/Gallery/CollectionPriceChart.vue'),
+  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
   CollapseWrapper: () => import('@/components/shared/collapse/CollapseWrapper.vue'),
 }
 @Component<CollectionItem>({
@@ -139,27 +142,30 @@ export default class CollectionItem extends mixins(
 ) {
   private id = '';
   private collection: CollectionWithMeta = emptyObject<CollectionWithMeta>();
-  private isLoading = false;
   public meta: CollectionMetadata = emptyObject<CollectionMetadata>();
   private searchQuery: SearchQuery = {
     search: '',
     type: '',
     sortBy: 'BLOCK_NUMBER_DESC',
     listed: false,
   };
-  private activeTab = 0;
+  public activeTab = 'collection';
   private currentValue = 1;
   private first = 15;
-  private total = 0;
+  protected total = 0;
   protected stats: NFT[] = [];
   protected priceData: any = [];
 
+  get isLoading(): boolean {
+    return this.$apollo.queries.collection.loading
+  }
+
   get offset(): number {
     return this.currentValue * this.first - this.first
   }
 
-  get image(): string {
-    return this.meta.image || ''
+  get image(): string|undefined {
+    return this.meta.image
   }
 
   get description(): string {
@@ -178,10 +184,6 @@ export default class CollectionItem extends mixins(
     return this.collection.issuer || ''
   }
 
-  get owner(): string {
-    return this.collection.issuer === (this.collection as any).currentOwner ? '' : (this.collection as any).currentOwner
-  }
-
   get sharingVisible(): boolean {
     return !isShareMode
   }
@@ -205,10 +207,12 @@ export default class CollectionItem extends mixins(
   }
 
   public created(): void {
-    this.isLoading = true
     this.checkId()
+    this.checkActiveTab()
+    this.loadStats()
     this.$apollo.addSmartQuery('collection', {
       query: collectionById,
+      loadingKey: 'isLoading',
       variables: () => {
         return {
           id: this.id,
@@ -225,11 +229,9 @@ export default class CollectionItem extends mixins(
       result: this.handleResult,
     })
 
-    this.loadStats()
-    this.isLoading = false
   }
 
-  public async loadStats(): Promise<void> {
+  public loadStats(): void {
     const nftStatsP = this.$apollo.query({
       query: nftListByCollection,
       variables: {
@@ -244,29 +246,27 @@ export default class CollectionItem extends mixins(
   }
 
   public loadPriceData(): void {
-
     this.priceData = []
 
-    const events : Interaction[][] = this.stats?.map(onlyEvents) || []
-    const priceEvents : Interaction[][] = events.map(this.priceEvents) || []
+    const events: Interaction[][] = this.stats?.map(onlyEvents) || []
+    const priceEvents: Interaction[][] = events.map(this.priceEvents) || []
 
-    const overTime : string[] = priceEvents.flat().sort(sortByTimeStamp).map(eventTimestamp)
+    const overTime: string[] = priceEvents.flat().sort(sortByTimeStamp).map(eventTimestamp)
 
-    const floorPriceData : PriceDataType[] = overTime.map(collectionFloorPriceList(priceEvents, this.decimals))
+    const floorPriceData: PriceDataType[] = overTime.map(collectionFloorPriceList(priceEvents, this.decimals))
 
     const buyEvents = events.map(onlyBuyEvents)?.flat().sort(sortByTimeStamp)
-    const soldPriceData : PriceDataType[] = buyEvents?.map(soldNFTPrice(this.decimals))
+    const soldPriceData: PriceDataType[] = buyEvents?.map(soldNFTPrice(this.decimals))
 
     this.priceData = [floorPriceData, soldPriceData]
   }
 
   public async handleResult({data}: any): Promise<void> {
     this.total = data.collectionEntity.nfts.totalCount
-    this.fetchMetadata()
+    await this.fetchMetadata()
   }
 
   public async fetchMetadata(): Promise<void> {
-    console.log(this.collection['metadata'], !this.meta['image'])
     if (this.collection['metadata'] && !this.meta['image']) {
       const meta = await fetchCollectionMetadata(this.collection)
       this.meta = {
@@ -282,12 +282,34 @@ export default class CollectionItem extends mixins(
     }
   }
 
+  public checkActiveTab(): void {
+    exist(this.$route.query.tab, (val) => {
+      this.activeTab = val
+    })
+  }
+
+  @Watch('activeTab')
+  protected onTabChange(val: string, oldVal: string): void {
+    if (shouldUpdate(val, oldVal)) {
+      this.$router.replace({
+        name: String(this.$route.name),
+        query: { tab: val },
+      })
+    }
+  }
+
   get iframeSettings(): Record<string, unknown> {
     return { width: '100%', height: '100vh' }
   }
 
-  protected priceEvents(nftEvents:Interaction[]) : Interaction[] {
+  protected priceEvents(nftEvents: Interaction[]): Interaction[] {
     return nftEvents.filter(onlyPriceEvents)
   }
 }
 </script>
+
+<style>
+.collection__image img {
+  color: transparent;
+}
+</style>

components/rmrk/Gallery/GalleryCardList.vue

@@ -38,14 +38,15 @@ export default class GalleryCardList extends Vue {
   @Prop({ default: '/rmrk/gallery' }) public route!: string;
   @Prop({ default: 'rmrk/gallery' }) public link!: string;
   @Prop() public items!: RmrkType[];
-  @Prop(Boolean) horizontalLayout!: boolean;
+  @Prop(Boolean) public horizontalLayout!: boolean;
   get classLayout() {
-    return this.$store.getters.getLayoutClass
+    return this.$store.getters['preferences/getLayoutClass']
   }
 }
 
 </script>
 <style>
+/* TODO: move to global */
 .b-radio.radio.button.is-selected{
   background-color: #db2980;
 }

components/rmrk/Gallery/History.vue

@@ -203,7 +203,7 @@ export default class History extends mixins(ChainMixin) {
   protected getBlockUrl(block: string): string {
     return urlBuilderBlockNumber(
       block,
-      this.$store.getters.getCurrentChain,
+      this.$store.getters['explorer/getCurrentChain'],
       'subscan'
     );
   }

components/rmrk/Gallery/Layout.vue

@@ -41,7 +41,7 @@ export default class Layout extends Vue {
   public layout = 'is-one-third-desktop is-one-third-tablet'
 
   public onInputChange (data :string) {
-    this.$store.dispatch('setLayoutClass', data)
+    this.$store.dispatch('preferences/setLayoutClass', data)
   }
 }
 </script>

components/series/utils.ts

@@ -59,7 +59,7 @@ export const nftFn = (a: any): RowSeries => {
   }
 }
 
-const tokenDecimals = store.getters.getChainPropertiesTokenDecimals as any
+const tokenDecimals = store.getters['chain/getChainPropertiesTokenDecimals'] as any
 const formatNumber = (val: SimpleSeriesNFT) =>
   Number(
     formatBalance(

components/settings/SettingChooserExplorer.vue

@@ -31,19 +31,19 @@ export default class SettingChooserExplorer extends Vue {
   @Prop() public addMethod!: string;
 
   get options() {
-    return this.$store.state.explorerOptions.availableOptions[this.selector]
+    return this.$store.state['explorer/explorerOptions'].availableOptions[this.selector]
   }
 
   get selected() {
-    return this.$store.state.explorerOptions.availableOptions[this.selector][this.defaultValue].value
+    return this.$store.state['explorer/explorerOptions'].availableOptions[this.selector][this.defaultValue].value
   }
 
   set selected(value) {
     this.$store.commit(this.setter, { [this.selector]: value })
   }
 
   public async mounted() {
-    this.$store.commit('setExplorerOptions',{ availableOptions: {
+    this.$store.dispatch('explorer/setExplorerOptions', { availableOptions: {
       provider: [
         { text: 'Subscan', value: 'subscan' },
         { text: 'Polkascan', value: 'polkascan'}