From dbfb862a14faacb9585bda304f23e4a6a8e646a0 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sat, 12 Oct 2024 14:52:40 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Enable=20content=20viewing=20usi?=
 =?UTF-8?q?ng=20ownedNFTId=20instead=20of=20lastOwnedNFTId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTPortfolio/Item.vue     | 22 +++++++++++++++++-----
 src/components/NFTPortfolio/MainView.vue |  1 +
 src/store/modules/nft.js                 |  5 ++++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/NFTPortfolio/Item.vue b/src/components/NFTPortfolio/Item.vue
index 0a54d2df6..be43ccb10 100644
--- a/src/components/NFTPortfolio/Item.vue
+++ b/src/components/NFTPortfolio/Item.vue
@@ -24,7 +24,7 @@
       :display-state="nftDisplayState"
       :is-nft-book="nftIsNFTBook"
       :portfolio-tab="portfolioTab"
-      :is-content-viewable="!(nftIsNFTBook && !isOwningNFT)"
+      :is-content-viewable="isContentViewable"
       :is-content-downloadable="!nftIsDownloadHidden"
       :collect-expiry-time="collectExpiryTime"
       @collect="handleClickCollect"
@@ -39,12 +39,11 @@
 </template>
 
 <script>
-import { logTrackerEvent } from '~/util/EventLogger';
-
 import nftMixin from '~/mixins/nft';
+import walletMixin from '~/mixins/wallet';
 
 export default {
-  mixins: [nftMixin],
+  mixins: [nftMixin, walletMixin],
   props: {
     classId: {
       type: String,
@@ -66,6 +65,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isBookshelf: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -74,8 +77,17 @@ export default {
     };
   },
   computed: {
+    ownedNftId() {
+      return this.collectorMap?.[this.getAddress]?.[0];
+    },
+    isContentViewable() {
+      return this.nftIsNFTBook && this.isBookshelf && this.ownedNftId;
+    },
     nftIdForDetails() {
-      return this.portfolioTab === 'collected' && this.nftId;
+      if (this.portfolioTab === 'collected') {
+        return this.isBookshelf ? this.ownedNftId : this.nftId;
+      }
+      return undefined;
     },
     detailsPageRoute() {
       if (this.nftIdForDetails) {
diff --git a/src/components/NFTPortfolio/MainView.vue b/src/components/NFTPortfolio/MainView.vue
index db373a38a..5e877d218 100644
--- a/src/components/NFTPortfolio/MainView.vue
+++ b/src/components/NFTPortfolio/MainView.vue
@@ -197,6 +197,7 @@
             :nft-id="nft.lastOwnedNFTId"
             :portfolio-tab="portfolioTab"
             :should-fetch-when-visible="true"
+            :is-bookshelf="isBookshelf"
             @load-cover="updatePortfolioGrid"
             @click.native="handleItemClick(nft.classId)"
             @collect="handleItemCollect(nft.classId)"
diff --git a/src/store/modules/nft.js b/src/store/modules/nft.js
index 96f966dc5..d8f3e6562 100644
--- a/src/store/modules/nft.js
+++ b/src/store/modules/nft.js
@@ -792,7 +792,10 @@ const actions = {
     if (classesOrPromise) {
       await classesOrPromise;
     } else {
-      await dispatch('fetchCollectedNFTClassesByAddress', { address });
+      await dispatch('fetchCollectedNFTClassesByAddress', {
+        address,
+        nocache: true,
+      });
     }
   },
   async fetchNFTDisplayStateListByAddress({ commit }, address) {