Finalizes username resolution component and username resolution acros…

…s dapp
art-by-city · Nov 1, 2023 · e83da26 · e83da26
1 parent 1276861
commit e83da26
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/components/FeedItemCard.vue b/components/FeedItemCard.vue
@@ -68,13 +68,15 @@
                   <v-row align="end" class="fill-height pa-1 pl-4">
                     <v-col>
                       <a class="text-white font-weight-bold">
-                        {{ artwork?.title }}
+                        {{ artwork?.publication.title }}
                       </a>
                       <br>
                       <a class="text-white font-italic">
-                        {{ primaryName }} 
-                      </a>
-                      <ResolveUsername :address="artwork ? artwork.creator : ''" />
+                        <ResolveUsername 
+                          :address="artwork ? artwork.publication.creator : ''"
+                          no-link
+                        />
+                      </a>                        
                     </v-col>
                   </v-row>
                 </v-card>
@@ -111,7 +113,7 @@ const img = ref<VImg>()
 const hasError = computed(() => {
   if (pending.value) { return false }
 
-  return data.value === null
+  return artwork.value === null
 })
 
 const props = defineProps<{ id: string, to?: RouteLocationRaw }>()
@@ -120,27 +122,31 @@ const { protocol, host, port } = abc.arweave.api.config
 const gatewayBase = `${protocol}://${host}:${port}`
 
 const { data: artwork, pending } = useLazyAsyncData(props.id, async () => {
-  return await abc.legacy.fetchPublication(props.id)
+  const publication = await abc.legacy.fetchPublication(props.id)
+  const username = 
+    await abc.usernames.resolveUsernameFromAddress(publication.creator)
+
+  return { publication, username }
 })
 
 const src = computed(() => {
-  if (!data.value) { return '' }
+  if (!artwork.value?.publication) { return '' }
 
-  return data.value.publication.image.preview.startsWith('data:image')
-    ? data.value.publication.image.preview
-    : `${gatewayBase}/${data.value.publication.image.preview}`
+  return artwork.value.publication.image.preview.startsWith('data:image')
+    ? artwork.value.publication.image.preview
+    : `${gatewayBase}/${artwork.value.publication.image.preview}`
 })
 
 const isPlayable = computed(() => {
-  if (!data.value) { return false }
+  if (!artwork.value?.publication) { return false }
 
-  return data.value.publication.image.animated ||
-    !!data.value.publication.audio || !!data.value.publication.model
+  return artwork.value.publication.image.animated ||
+    !!artwork.value.publication.audio || !!artwork.value.publication.model
 })
 
 const to = computed(() => {
-  return `/${
-    artwork.value?.username || data.value?.publication.creator
-  }/${artwork.value?.slug || artwork.value?.id}` || props.to
+  return `/${artwork.value?.username || artwork.value?.publication.creator}/${
+    artwork.value?.publication.slug || artwork.value?.publication.id
+  }` || props.to
 })
 </script>
diff --git a/components/ResolveUsername.vue b/components/ResolveUsername.vue
@@ -1,5 +1,6 @@
 <template>
-  <nuxt-link v-if="!noLink"
+  <nuxt-link
+    v-if="!noLink"
     class="text-primary"
     :to="`/${user?.username || props.address}`"
   >

diff --git a/pages/[profile]/[slugOrId].vue b/pages/[profile]/[slugOrId].vue
@@ -127,7 +127,7 @@
             text-truncate
           "
         >
-          <ResolveUsername :address="artwork.creator" class="font-italic"/>
+          <ResolveUsername :address="artwork.creator" class="font-italic" />
         </v-col>
       </v-row>
       <v-row v-if="artwork.description" dense>