Merge pull request #1535 from kkukelka/feat/nft-item-nav

1508 NFT item detail - enable navigation to other items in same collection

Author: yangwao

components/rmrk/Gallery/GalleryItem.vue

@@ -30,6 +30,8 @@
             'is-12 is-theatre': viewMode === 'theatre',
             'is-6 is-offset-3': viewMode === 'default',
           }"
+          @mouseenter="showNavigation = true"
+          @mouseleave="showNavigation = false"
         >
           <div
             v-orientation="
@@ -63,6 +65,8 @@
               :mimeType="mimeType"
             />
           </div>
+          <Navigation v-if="nftsFromSameCollection && nftsFromSameCollection.length > 1" :showNavigation="showNavigation" :items="nftsFromSameCollection" :currentId="nft.id"/>
+
         </div>
         <button
           id="fullscreen-view"
@@ -191,6 +195,7 @@ import { notificationTypes, showNotification } from '@/utils/notification';
 
 import isShareMode from '@/utils/isShareMode';
 import nftById from '@/queries/nftById.graphql';
+import nftListIdsByCollection from '@/queries/nftListIdsByCollection.graphql';
 import { fetchNFTMetadata } from '../utils';
 import { get, set } from 'idb-keyval';
 import { MediaType } from '../types';
@@ -237,6 +242,7 @@ import Orientation from '@/directives/DeviceOrientation';
     History: () => import('@/components/rmrk/Gallery/History.vue'),
     Money: () => import('@/components/shared/format/Money.vue'),
     Name: () => import('@/components/rmrk/Gallery/Item/Name.vue'),
+    Navigation: () => import('@/components/rmrk/Gallery/Item/Navigation.vue'),
     Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
     Appreciation: () => import('./Appreciation.vue'),
     MediaResolver: () => import('../Media/MediaResolver.vue'),
@@ -255,6 +261,7 @@ export default class GalleryItem extends Vue {
   // private accountId: string = '';
   private passsword = '';
   private nft: NFT = emptyObject<NFT>();
+  private nftsFromSameCollection: NFT[] = [];
   private imageVisible = true;
   private viewMode = 'default';
   private isFullScreenView = false;
@@ -264,6 +271,7 @@ export default class GalleryItem extends Vue {
   public emotes: Emote[] = [];
   public message = '';
   public priceChartData: [Date, number][][] = [];
+  public showNavigation = false;
 
   get accountId() {
     return this.$store.getters.getAuthAddress;
@@ -278,7 +286,7 @@ export default class GalleryItem extends Vue {
 
     try {
       // const nft = await rmrkService.getNFT(this.id);
-      this.$apollo.addSmartQuery('nft', {
+      await this.$apollo.addSmartQuery('nft', {
         query: nftById,
         variables: {
           id: this.id,
@@ -287,7 +295,12 @@ export default class GalleryItem extends Vue {
           ...nFTEntity,
           emotes: nFTEntity?.emotes?.nodes,
         }),
-        result: () => this.fetchMetadata(),
+        result: () => { 
+          Promise.all([
+            this.fetchMetadata(),
+            this.fetchCollectionItems()
+          ]); 
+        },
         pollInterval: 5000,
       });
     } catch (e) {
@@ -305,6 +318,36 @@ export default class GalleryItem extends Vue {
     this.priceChartData = data;
   }
 
+  public async fetchCollectionItems() {
+    const collectionId = (this.nft as any)?.collectionId;
+    if(collectionId) {
+      // cancel request and get ids from store in case we already fetched collection data before
+      if(this.$store.state.history?.currentCollection?.id === collectionId) {
+        this.nftsFromSameCollection = this.$store.state.history.currentCollection?.nftIds || []
+        return
+      }
+      try {
+        const nfts = await this.$apollo.query({
+          query: nftListIdsByCollection,
+          variables: {
+            id: collectionId,
+          },
+        })
+
+        const {
+          data: {
+            nFTEntities
+          }
+        } =  nfts
+        
+        this.nftsFromSameCollection = nFTEntities?.nodes.map((n: { id: string }) => n.id) || []
+        this.$store.dispatch('history/setCurrentCollection', { id: collectionId, nftIds: this.nftsFromSameCollection })
+      } catch (e) {
+        showNotification(`${e}`, notificationTypes.warn);
+      }
+    }
+  }
+
   public async fetchMetadata() {
     if (this.nft['metadata'] && !this.meta['image']) {
       const m = await get(this.nft.metadata);

components/rmrk/Gallery/Item/Navigation.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="navigation-container" :class="{ 'is-hidden-desktop': !showNavigation }">
+    <b-button
+      tag="nuxt-link"
+      icon-left="chevron-left"
+      :to="`/rmrk/gallery/${this.items[this.prevIndex]}`"
+      outlined
+    />
+    <b-button
+      tag="nuxt-link"
+      icon-left="chevron-right"
+      :to="`/rmrk/gallery/${this.items[this.nextIndex]}`"
+      outlined
+    />
+  </div>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
+
+const components = {
+  ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue')
+}
+
+@Component({ components })
+export default class Navigation extends Vue {
+  @Prop({type: Array}) readonly items!: string[];
+  @Prop(Boolean) public showNavigation !: boolean
+  @Prop({type: String}) readonly currentId!: string;
+
+  get indexOfCurrentId(): number {
+    return this.items.indexOf(this.currentId);
+  }
+
+  get nextIndex(): number {
+    // check if current item is last item of array
+    return (this.indexOfCurrentId === this.items.length - 1) ? 0 : this.indexOfCurrentId + 1;
+  }
+
+  get prevIndex(): number {
+    // check if current item is first item of array
+    return this.indexOfCurrentId === 0 ? this.items.length - 1 : this.indexOfCurrentId - 1;
+  }
+
+  public mounted() {
+    document.addEventListener('keyup', this.handleKeyEvent);
+
+  }
+
+  public beforeDestroy() {
+    document.removeEventListener('keyup', this.handleKeyEvent);
+  }
+
+  public handleKeyEvent(event) {
+    return {
+      'ArrowLeft': this.gotoNextItem(true),
+      'ArrowRight': this.gotoNextItem(false),
+    }[event.key]
+  }
+
+  public gotoNextItem(reverse: boolean) {
+    this.$router.push(`/rmrk/gallery/${this.items[reverse ? this.prevIndex : this.nextIndex]}`)
+  }
+}
+</script>
+
+<style scoped>
+.navigation-container {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>

components/rmrk/utils.ts

@@ -354,4 +354,4 @@ export const getRandomIntInRange = (min: number, max: number): number => {
   min = Math.ceil(min)
   max = Math.floor(max)
   return Math.floor(Math.random() * (max - min + 1)) + min
-}
+}

icons.ts

@@ -6,7 +6,7 @@ import {
   faTrash, faCloudDownloadAlt, faKey,
   faExternalLinkAlt, faUpload, faUsers,
   faQuestionCircle, faMinus, faSearch,
-  faInfoCircle, faChevronDown, faChevronUp, faChevronLeft,
+  faInfoCircle, faChevronDown, faChevronUp, faChevronLeft, faChevronRight,
   faHeart, faCaretDown, faCaretUp, faInfo,
   faShareSquare, faCopy, faBookmark,
   faLink, faLanguage,
@@ -44,9 +44,9 @@ library.add(
   faKey, faExternalLinkAlt, faUpload,
   faUsers, faQuestionCircle, faMinus,
   faSearch, faInfoCircle, faChevronDown,
-  faChevronUp, faChevronLeft, faHeart,
+  faChevronUp, faChevronLeft, faChevronRight,
   faCaretDown, faCaretUp, faInfo, faShareSquare,
-  faBookmark, faLink,
+  faBookmark, faLink, faHeart,
   faLanguage, faQuestion, faEye,
   faPrint, faCommentAlt, faMagic,
   faLeaf, faFlask,

queries/nftListIdsByCollection.graphql

@@ -0,0 +1,12 @@
+query nftListByCollection($id: String!) {
+  nFTEntities(
+    filter: {
+      collectionId: { equalTo: $id }
+      burned: { distinctFrom: true }
+    }
+  ) {
+    nodes {
+      id
+    }
+  }
+}

store/history.ts

@@ -10,7 +10,11 @@ export interface HistoryItem {
 }
 
 export const state = () => ({
-    visitedNFTs: []
+    visitedNFTs: [],
+    currentCollection: {
+      id: '',
+      nftIds: []
+    }
 })
 
 export type HistoryState = ReturnType<typeof state>
@@ -24,7 +28,7 @@ export const getters: GetterTree<HistoryState, HistoryState> = {
 };
 
 export const mutations: MutationTree<HistoryState> = {
-  updateHistoryItems(state: any, data: HistoryItem | string) {
+  UPDATE_HISTORY_ITEM(state: any, data: HistoryItem | string) {
     if(typeof data === 'string') {
       state.visitedNFTs = state.visitedNFTs.filter(item => item.id !== data);
     }
@@ -39,14 +43,20 @@ export const mutations: MutationTree<HistoryState> = {
       }
       state.visitedNFTs.unshift(data);
     }
+  },
+  UPDATE_CURRENT_COLLECTION(state: any, data: {id: string, nftIds: string[]}) {
+    state.currentCollection = data;
   }
 };
 
 export const actions: ActionTree<HistoryState, HistoryState> = {
   addHistoryItem({ commit }: { commit: Commit }, data: HistoryItem) {
-    commit('updateHistoryItems', data);
+    commit('UPDATE_HISTORY_ITEM', data);
   },
   removeHistoryItem({ commit }: { commit: Commit }, data: string) {
-    commit('updateHistoryItems', data);
+    commit('UPDATE_HISTORY_ITEM', data);
+  },
+  setCurrentCollection({ commit }: { commit: Commit }, data: {id: string, nftIds: string[]}) {
+    commit('UPDATE_CURRENT_COLLECTION', data);
   },
 };