👔 Improve recommendation display items & label (#1821)

* 🎨 Remove duplicate items from featured list * 🎨 Identify label for publisher and creator * 🎨 Use type props to identify user label * 🎨 Use isCreatedTab for redirect
likecoin · Sep 20, 2024 · ea5fa61 · ea5fa61
1 parent 9dd7a28
commit ea5fa61
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/src/components/NFTMessage/Identity.vue b/src/components/NFTMessage/Identity.vue
@@ -53,10 +53,10 @@ const userInfoMixin = createUserInfoMixin({ walletKey: 'walletAddress' });
 
 export default {
   name: 'MessageIdentity',
-  mixins: [userInfoMixin],
   filters: {
     ellipsis,
   },
+  mixins: [userInfoMixin],
   props: {
     walletAddress: {
       type: String,
@@ -88,15 +88,19 @@ export default {
       return this.localeLocation({
         name: 'id',
         params: { id: this.walletAddress },
-        query: { tab: this.type === 'creator' ? 'created' : 'collected' },
+        query: { tab: this.isCreatedTab ? 'created' : 'collected' },
       });
     },
     userLabel() {
-      return this.$t(
-        this.type === 'creator'
-          ? 'identity_type_creator'
-          : 'identity_type_collector'
-      );
+      switch (this.type) {
+        case 'publisher':
+          return this.$t('identity_type_publisher');
+        case 'collector':
+          return this.$t('identity_type_collector');
+        case 'creator':
+        default:
+          return this.$t('identity_type_creator');
+      }
     },
     userLabelSize() {
       switch (this.avatarSize) {
@@ -107,6 +111,9 @@ export default {
           return 'h5';
       }
     },
+    isCreatedTab() {
+      return this.type === 'creator' || this.type === 'publisher';
+    },
   },
   watch: {
     walletAddress() {

diff --git a/src/components/NFTPage/Recommendation.vue b/src/components/NFTPage/Recommendation.vue
@@ -5,7 +5,7 @@
       class="flex items-center justify-between px-[2rem]"
     >
       <NFTMessageIdentity
-        type="creator"
+        :type="iscnWorkAuthor ? 'publisher' : 'creator'"
         class="flex-shrink-0"
         :wallet-address="iscnOwner"
         :avatar-size="40"
@@ -129,6 +129,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    iscnWorkAuthor: {
+      type: String,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -170,7 +174,14 @@ export default {
           normalizedRecommendedList.length < displayItemCount &&
           index < sourceData.length
         ) {
-          normalizedRecommendedList.push(sourceData[index]);
+          const itemToAdd = sourceData[index];
+          const alreadyExists = normalizedRecommendedList.some(
+            item => item.classId === itemToAdd.classId
+          );
+
+          if (!alreadyExists) {
+            normalizedRecommendedList.push(itemToAdd);
+          }
           index += 1;
         }
       }

diff --git a/src/pages/nft/class/_classId/_nftId.vue b/src/pages/nft/class/_classId/_nftId.vue
@@ -325,6 +325,7 @@
         <NFTPageRecommendation
           v-else
           :iscn-owner="iscnOwner"
+          :iscn-work-author="iscnWorkAuthor"
           :is-followed="isFollowed"
           :should-show-follow-button="shouldShowFollowButton"
           :recommended-list="recommendedList"

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -191,6 +191,7 @@
           </client-only>
           <NFTPageRecommendation
             :iscn-owner="iscnOwner"
+            :iscn-work-author="iscnWorkAuthor"
             :should-show-follow-button="shouldShowFollowButton"
             :is-followed="isFollowed"
             :recommended-list="recommendedList"