💄 Display nft book buyer messages on collector list (#1398)

* 💄 Display nft book buyer message on collector list * 🎨 Improve populatedBuyerWithMessage formatting * 🎨 Add try catch for getNftBookBuyerMessage api
likecoin · Nov 15, 2023 · f6b6e9d · f6b6e9d
1 parent dcd3e3a
commit f6b6e9d
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 4 deletions.
diff --git a/src/mixins/nft.js b/src/mixins/nft.js
@@ -21,6 +21,7 @@ import {
   postNewStripeFiatPayment,
   getIdenticonAvatar,
   getNFTCountByClassId,
+  getNftBookBuyerMessage,
 } from '~/util/api';
 import { logTrackerEvent, logPurchaseFlowEvent } from '~/util/EventLogger';
 import { sleep, catchAxiosError } from '~/util/misc';
@@ -696,6 +697,7 @@ export default {
       if (!this.nftIsWritingNFT && !this.nftIsNFTBook) {
         actionType.push('mint_nft');
       }
+
       const ignoreToList = this.nftIsWritingNFT ? LIKECOIN_NFT_API_WALLET : '';
       let dbEventMap = null;
       if (this.nftIsWritingNFT) {
@@ -715,9 +717,39 @@ export default {
         actionType,
         ignoreToList,
       });
-      this.NFTHistory = this.nftIsWritingNFT
-        ? populateGrantEvent(latestBatchEvents, dbEventMap)
-        : latestBatchEvents;
+
+      const nftBookLatestBatchEvents = latestBatchEvents;
+      try {
+        if (this.nftIsNFTBook) {
+          const { messages: nftBookBuyerMessages } = await this.$api.$get(
+            getNftBookBuyerMessage(this.classId)
+          );
+          if (nftBookBuyerMessages && nftBookBuyerMessages.length) {
+            for (let i = 0; i < nftBookBuyerMessages.length; i += 1) {
+              const buyerMessage = nftBookBuyerMessages[i].message;
+              const { txHash } = nftBookBuyerMessages[i];
+
+              const matchingEvent = nftBookLatestBatchEvents.find(
+                event => event.txHash === txHash
+              );
+
+              if (matchingEvent) {
+                matchingEvent.buyerMessage = buyerMessage;
+              }
+            }
+          }
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+
+      if (this.nftIsWritingNFT) {
+        this.NFTHistory = populateGrantEvent(latestBatchEvents, dbEventMap);
+      } else {
+        this.NFTHistory = nftBookLatestBatchEvents;
+      }
+
       const uniqueAddresses = getUniqueAddressesFromEvent(this.NFTHistory);
       this.lazyGetUserInfoByAddresses(
         getAllUserInfo

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -111,7 +111,7 @@
           <NFTPageCollectorList
             :class-id="classId"
             :owner-count="ownerCount"
-            :items="populatedCollectorsWithMemo"
+            :items="populatedBuyerWithMessage"
             :trimmed-count="trimmedCount"
             @click-show-more-collector="handleClickMoreCollector"
           />
@@ -573,6 +573,40 @@ export default {
       }
       return collectorsWithMemo;
     },
+    populatedBuyerWithMessage() {
+      if (!this.populatedDisplayEvents) {
+        return this.populatedCollectors;
+      }
+
+      const filteredEvents = this.populatedDisplayEvents.filter(
+        event => event.buyerMessage
+      );
+
+      const collectorsWithBuyerMessages = this.populatedCollectors.map(
+        buyer => {
+          const event = filteredEvents.find(
+            event => buyer.id === event.toWallet
+          );
+
+          if (event) {
+            return { ...buyer, memo: event.buyerMessage };
+          }
+          return buyer;
+        }
+      );
+      if (collectorsWithBuyerMessages && collectorsWithBuyerMessages.length) {
+        collectorsWithBuyerMessages.sort((a, b) => {
+          if (a.memo && !b.memo) {
+            return -1;
+          }
+          if (!a.memo && b.memo) {
+            return 1;
+          }
+          return b.collectedCount - a.collectedCount;
+        });
+      }
+      return collectorsWithBuyerMessages;
+    },
   },
   async mounted() {
     try {

diff --git a/src/util/api/index.js b/src/util/api/index.js
@@ -443,3 +443,6 @@ export const getTotalResalesByAddress = address => {
     qsPayload
   )}`;
 };
+
+export const getNftBookBuyerMessage = classId =>
+  `${LIKECOIN_API_BASE}/likernft/book/purchase/${classId}/messages`;