From 81cc39126e50550602061256ded7866f0fc2176b Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 13:51:33 +0700
Subject: [PATCH 1/6] error page

---
 pages/error.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/pages/error.vue b/pages/error.vue
index 06c4c76b39..f341a3f54b 100644
--- a/pages/error.vue
+++ b/pages/error.vue
@@ -1,13 +1,6 @@
 <template>
   <ErrorMsg />
 </template>
-<script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-// due to the name conflict, has to import and rename it
+<script lang="ts" setup>
 import ErrorMsg from '@/components/shared/Error.vue'
-
-@Component({
-  components: { ErrorMsg },
-})
-export default class Error extends Vue {}
 </script>

From 3eb8cf343a69b2077db2d10bc90af5a852267aaf Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 13:55:16 +0700
Subject: [PATCH 2/6] hot page

---
 pages/hot.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pages/hot.vue b/pages/hot.vue
index e94df80775..970cdc0444 100644
--- a/pages/hot.vue
+++ b/pages/hot.vue
@@ -5,9 +5,9 @@
   </section>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+export default {
+  name: 'HotDashboard',
 
-@Component<HotDashboard>({
   head() {
     const title = 'Recently KUSAMA Sales'
     const metaData = {
@@ -22,6 +22,5 @@ import { Component, Vue } from 'nuxt-property-decorator'
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class HotDashboard extends Vue {}
+}
 </script>

From e339d903c39e610540270692719b9c13ed373020 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 14:01:01 +0700
Subject: [PATCH 3/6] sales page

---
 pages/sales.vue | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/pages/sales.vue b/pages/sales.vue
index 41081b1db4..0d6cc2641a 100644
--- a/pages/sales.vue
+++ b/pages/sales.vue
@@ -17,12 +17,10 @@
   </section>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+// import { Component, Vue } from 'nuxt-property-decorator'
 
-@Component<Sales>({
-  components: {
-    Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  },
+export default {
+  name: 'Sales',
   head() {
     const title = 'Latest KUSAMA Sales'
     const metaData = {
@@ -37,6 +35,26 @@ import { Component, Vue } from 'nuxt-property-decorator'
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class Sales extends Vue {}
+}
+
+// @Component<Sales>({
+//   components: {
+//     Identity: () => import('@/components/identity/IdentityIndex.vue'),
+//   },
+//   head() {
+//     const title = 'Latest KUSAMA Sales'
+//     const metaData = {
+//       title,
+//       type: 'profile',
+//       description: 'Featuring the most recently sold NFTs on RMRK.',
+//       url: './sales.vue',
+//       image: `${this.$config.public.baseUrl}/k_card.png`,
+//     }
+//     return {
+//       title,
+//       meta: [...this.$seoMeta(metaData)],
+//     }
+//   },
+// })
+// export default class Sales extends Vue {}
 </script>

From 32efb42128b900bbe5c40b419eb432de0cbc71fd Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 14:01:27 +0700
Subject: [PATCH 4/6] sales page

---
 pages/sales.vue | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/pages/sales.vue b/pages/sales.vue
index 0d6cc2641a..5277164e98 100644
--- a/pages/sales.vue
+++ b/pages/sales.vue
@@ -17,8 +17,6 @@
   </section>
 </template>
 <script lang="ts">
-// import { Component, Vue } from 'nuxt-property-decorator'
-
 export default {
   name: 'Sales',
   head() {
@@ -36,25 +34,4 @@ export default {
     }
   },
 }
-
-// @Component<Sales>({
-//   components: {
-//     Identity: () => import('@/components/identity/IdentityIndex.vue'),
-//   },
-//   head() {
-//     const title = 'Latest KUSAMA Sales'
-//     const metaData = {
-//       title,
-//       type: 'profile',
-//       description: 'Featuring the most recently sold NFTs on RMRK.',
-//       url: './sales.vue',
-//       image: `${this.$config.public.baseUrl}/k_card.png`,
-//     }
-//     return {
-//       title,
-//       meta: [...this.$seoMeta(metaData)],
-//     }
-//   },
-// })
-// export default class Sales extends Vue {}
 </script>

From 91fe3206a3ad5333f7890d622b503a8fed76993d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 15:26:52 +0700
Subject: [PATCH 5/6] seriesTable

---
 components/series/SeriesTable.vue | 373 ++++++++++++++----------------
 1 file changed, 174 insertions(+), 199 deletions(-)

diff --git a/components/series/SeriesTable.vue b/components/series/SeriesTable.vue
index eae298b2e5..1735550de6 100644
--- a/components/series/SeriesTable.vue
+++ b/components/series/SeriesTable.vue
@@ -294,18 +294,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Watch, mixins } from 'nuxt-property-decorator'
-
-import { Collection, NFTMetadata } from '@/components/rmrk/service/scheme'
+<script lang="ts" setup>
+import { Collection } from '@/components/rmrk/service/scheme'
 import { exist } from '@/utils/exist'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
-
-import AuthMixin from '@/utils/mixins/authMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
-import { emptyObject } from '@/utils/empty'
-
 import collectionsEvents from '@/queries/rmrk/subsquid/collectionsEvents.graphql'
 import seriesInsightList from '@/queries/rmrk/subsquid/seriesInsightList.graphql'
 
@@ -322,214 +314,197 @@ import {
   NeoField,
   NeoIcon,
   NeoSelect,
+  NeoSkeleton,
   NeoTable,
   NeoTableColumn,
 } from '@kodadot1/brick'
 
-const components = {
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  Money: () => import('@/components/shared/format/Money.vue'),
-  Loader: () => import('@/components/shared/Loader.vue'),
-  NeoField,
-  NeoIcon,
-  NeoTable,
-  NeoTableColumn,
-  NeoSelect,
-  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
-}
-
-@Component({ components })
-export default class SeriesTable extends mixins(PrefixMixin, AuthMixin) {
-  protected data: RowSeries[] = []
-  protected usersWithIdentity: RowSeries[] = []
-  protected nbDays = '7'
-  protected nbRows = '50'
-  protected sortBy: SortType = { field: 'volume', value: 'DESC' }
-  public isLoading = false
-  public meta: NFTMetadata = emptyObject<NFTMetadata>()
-  // private hasPassionFeed = false
-
-  async created() {
-    exist(this.$route.query.rows, (val) => {
-      this.nbRows = val
-    })
-    exist(this.$route.query.period, (val) => {
-      this.nbDays = val
-    })
-    exist(this.$route.query.sort, (val) => {
-      this.sortBy.field = val.slice(1)
-      this.sortBy.value = val.charAt(0) === '-' ? 'DESC' : 'ASC'
-    })
-    await this.fetchCollectionsSeries(Number(this.nbRows))
+const Money = defineAsyncComponent(
+  () => import('@/components/shared/format/Money.vue')
+)
+const BasicImage = defineAsyncComponent(
+  () => import('@/components/shared/view/BasicImage.vue')
+)
+const Loader = defineAsyncComponent(
+  () => import('@/components/shared/Loader.vue')
+)
+
+const route = useRoute()
+const router = useRouter()
+const { $apollo, $consola } = useNuxtApp()
+const { client, urlPrefix } = usePrefix()
+const nbRows = ref('50')
+const nbDays = ref('7')
+const isLoading = ref(false)
+const sortBy = reactive<SortType>({ field: 'volume', value: 'DESC' })
+
+const data = ref<RowSeries[]>([])
+
+const seriesQueryParams = async (limit, sort) => ({
+  limit,
+  offset: 0,
+  orderBy: sort || 'volume_DESC',
+  where: {
+    volume_isNull: false,
+  },
+})
+
+const fetchCollectionEvents = async (ids: string[]) => {
+  if (ids.length === 0) {
+    return []
   }
-
-  private async seriesQueryParams(limit, sort) {
-    const queryVars = {
-      limit,
-      offset: 0,
-      orderBy: sort || 'volume_DESC',
-      where: {
-        volume_isNull: false,
+  try {
+    // const today = new Date()
+    const { data } = await $apollo.query<{ events }>({
+      query: collectionsEvents,
+      client: client.value,
+      variables: {
+        ids: ids,
+        and: {
+          interaction_eq: 'BUY',
+        },
+        lte: today,
+        gte: lastmonthDate,
       },
-    }
-    // if (this.isLogIn && this.hasPassionFeed) {
-    //   this.passionList = this.passionList.concat(await this.fetchPassionList())
-    //   queryVars.where.issuer_in = this.passionList
-    // }
-
-    return queryVars
+    })
+    return data.events
+  } catch (e) {
+    $consola.error(e)
+    return []
   }
+}
 
-  public async fetchCollectionsSeries(
-    limit = Number(this.nbRows),
-    sort: string = toSort(this.sortBy)
-  ) {
-    this.isLoading = true
-    const collections = await this.$apollo.query({
-      query: seriesInsightList,
-      client: this.client,
-      variables: await this.seriesQueryParams(limit, sort),
-      fetchPolicy: 'cache-first',
+const fetchCollectionsSeries = async (
+  limit = Number(nbRows.value),
+  sort: string = toSort(sortBy)
+) => {
+  isLoading.value = true
+  const collections = await $apollo.query({
+    query: seriesInsightList,
+    client: client.value,
+    variables: await seriesQueryParams(limit, sort),
+    fetchPolicy: 'cache-first',
+  })
+
+  const {
+    data: { collectionEntities },
+  } = collections
+
+  const defaultBuyEvents = getDateArray(lastmonthDate, today).reduce(
+    (res, date) => {
+      res[date] = 0
+      return res
+    },
+    {}
+  )
+
+  const axisLize = (obj = {}): BuyHistory => ({
+    xAxisList: Object.keys(obj),
+    yAxisList: Object.values(obj),
+  })
+
+  const ids = collectionEntities.map((c: Collection) => c.id)
+
+  const buyEvents = (await fetchCollectionEvents(ids))
+    .map((e) => ({
+      ...e.nft.collection,
+      timestamp: onlyDate(new Date(e.timestamp)),
+    }))
+    .reduce((res, e) => {
+      const { id, timestamp: ts } = e
+      if (!res[id]) {
+        res[id] = Object.assign({}, defaultBuyEvents)
+      }
+      res[id][ts] += 1
+      return res
+    }, {})
+
+  data.value = collectionEntities.map(
+    (e: RowSeries): RowSeries => ({
+      ...e,
+      image: sanitizeIpfsUrl(e.image),
+      rank: e.sold * (e.unique / e.total || 1),
+      averagePrice: calculateAvgPrice(e.volume as string, e.buys),
+      buyHistory: axisLize(
+        Object.assign({}, defaultBuyEvents, buyEvents[e.id] || {})
+      ),
+      emoteCount: e.emoteCount || 0,
     })
+  )
 
-    const {
-      data: { collectionEntities },
-    } = collections
+  isLoading.value = false
+}
 
-    const defaultBuyEvents = getDateArray(lastmonthDate, today).reduce(
-      (res, date) => {
-        res[date] = 0
-        return res
+onBeforeMount(async () => {
+  exist(route.query.rows, (val) => {
+    nbRows.value = val
+  })
+  exist(route.query.period, (val) => {
+    nbDays.value = val
+  })
+  exist(route.query.sort, (val) => {
+    sortBy.field = val.slice(1)
+    sortBy.value = val.charAt(0) === '-' ? 'DESC' : 'ASC'
+  })
+  await fetchCollectionsSeries(Number(nbRows.value))
+})
+
+const onSort = (field: string, order: string) => {
+  let sort: SortType = {
+    field: field,
+    value: order === 'desc' ? 'DESC' : 'ASC',
+  }
+  router
+    .replace({
+      path: String(route.path),
+      query: {
+        ...route.query,
+        sort: (order === 'desc' ? '-' : '+') + field,
       },
-      {}
-    )
-
-    const axisLize = (obj = {}): BuyHistory => ({
-      xAxisList: Object.keys(obj),
-      yAxisList: Object.values(obj),
     })
+    .catch((e) => $consola.warn(e))
+  fetchCollectionsSeries(Number(nbRows.value), toSort(sort))
+}
 
-    const ids = collectionEntities.map((c: Collection) => c.id)
-
-    const buyEvents = (await this.fetchCollectionEvents(ids))
-      .map((e) => ({
-        ...e.nft.collection,
-        timestamp: onlyDate(new Date(e.timestamp)),
-      }))
-      .reduce((res, e) => {
-        const { id, timestamp: ts } = e
-        if (!res[id]) {
-          res[id] = Object.assign({}, defaultBuyEvents)
-        }
-        res[id][ts] += 1
-        return res
-      }, {})
-
-    this.data = collectionEntities.map(
-      (e: RowSeries): RowSeries => ({
-        ...e,
-        image: sanitizeIpfsUrl(e.image),
-        rank: e.sold * (e.unique / e.total || 1),
-        averagePrice: calculateAvgPrice(e.volume as string, e.buys),
-        buyHistory: axisLize(
-          Object.assign({}, defaultBuyEvents, buyEvents[e.id] || {})
-        ),
-        emoteCount: e.emoteCount || 0,
-      })
-    )
-
-    this.isLoading = false
-  }
-
-  protected async fetchCollectionEvents(ids: string[]) {
-    if (ids.length === 0) {
-      return []
-    }
-    try {
-      // const today = new Date()
-      const { data } = await this.$apollo.query<{ events }>({
-        query: collectionsEvents,
-        client: this.client,
-        variables: {
-          ids: ids,
-          and: {
-            interaction_eq: 'BUY',
-          },
-          lte: today,
-          gte: lastmonthDate,
-        },
-      })
-      return data.events
-    } catch (e) {
-      this.$consola.error(e)
-      return []
-    }
-  }
-
-  public onSort(field: string, order: string) {
-    let sort: SortType = {
-      field: field,
-      value: order === 'desc' ? 'DESC' : 'ASC',
-    }
-    this.$router
-      .replace({
-        path: String(this.$route.path),
-        query: {
-          ...this.$route.query,
-          sort: (order === 'desc' ? '-' : '+') + field,
-        },
-      })
-      .catch((e) => this.$consola.warn(e))
-    this.fetchCollectionsSeries(Number(this.nbRows), toSort(sort))
-  }
-
-  @Watch('nbRows')
-  public onTopRowsChange(value: string) {
-    this.$router
-      .replace({
-        path: String(this.$route.path),
-        query: { ...this.$route.query, rows: value },
-      })
-      .catch((e) => this.$consola.warn(e))
-    this.fetchCollectionsSeries(Number(value))
+const displayVolumePercent = (
+  priceNow: number,
+  priceAgo: number,
+  getClass?: boolean
+) => {
+  /* added getClass for getting the class name for the row
+   * it would be true when you want to return the class name
+   */
+  const vol = ((priceNow - priceAgo) / priceAgo) * 100
+  if (vol === 0 || !parseFloat(String(vol)) || !isFinite(vol)) {
+    return getClass ? '' : '---'
   }
+  const volumePercent = Math.round(vol * 100) / 100
 
-  @Watch('nbDays')
-  public onTopDaysChange(value: string) {
-    this.$router
-      .replace({
-        path: String(this.$route.path),
-        query: { ...this.$route.query, period: value },
-      })
-      .catch((e) => this.$consola.warn(e))
+  if (getClass) {
+    return volumePercent > 0 ? 'has-text-success' : 'has-text-danger'
   }
 
-  // @Watch('hasPassionFeed', { immediate: true })
-  // public onHasPassionFeed() {
-  //   this.fetchCollectionsSeries()
-  // }
-
-  public displayVolumePercent(
-    priceNow: number,
-    priceAgo: number,
-    getClass?: boolean
-  ) {
-    /* added getClass for getting the class name for the row
-     * it would be true when you want to return the class name
-     */
-    const vol = ((priceNow - priceAgo) / priceAgo) * 100
-    if (vol === 0 || !parseFloat(String(vol)) || !isFinite(vol)) {
-      return getClass ? '' : '---'
-    }
-    const volumePercent = Math.round(vol * 100) / 100
-
-    if (getClass) {
-      return volumePercent > 0 ? 'has-text-success' : 'has-text-danger'
-    }
-
-    return volumePercent > 0 ? `+${volumePercent}%` : `${volumePercent}%`
-  }
+  return volumePercent > 0 ? `+${volumePercent}%` : `${volumePercent}%`
 }
+
+watch(nbRows, (value: string) => {
+  router
+    .replace({
+      path: String(route.path),
+      query: { ...route.query, rows: value },
+    })
+    .catch((e) => $consola.warn(e))
+  fetchCollectionsSeries(Number(value))
+})
+
+watch(nbDays, (value: string) => {
+  router
+    .replace({
+      path: String(route.path),
+      query: { ...route.query, period: value },
+    })
+    .catch((e) => $consola.warn(e))
+})
 </script>
 <style lang="scss">
 @import '@/styles/abstracts/variables';

From 2a2d804c2f26416c1b95e6bc3b355284a1fd17e4 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 15:27:08 +0700
Subject: [PATCH 6/6] series-insight page

---
 pages/series-insight.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/pages/series-insight.vue b/pages/series-insight.vue
index 29628d2281..46eaf5083a 100644
--- a/pages/series-insight.vue
+++ b/pages/series-insight.vue
@@ -25,13 +25,17 @@
   </section>
 </template>
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
-@Component<Series>({
+export default {
+  name: 'Series',
   components: {
     SeriesTable: () => import('@/components/series/SeriesTable.vue'),
   },
+  setup() {
+    const { urlPrefix } = usePrefix()
+    return {
+      urlPrefix,
+    }
+  },
   head() {
     const title = 'NFT artist rank'
     const metaData = {
@@ -46,6 +50,5 @@ import PrefixMixin from '@/utils/mixins/prefixMixin'
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class Series extends mixins(PrefixMixin) {}
+}
 </script>