Adds curation support to FeedItemCards

components/FeedItemCard.vue

@@ -12,7 +12,11 @@
                       cols="12"
                       class="text-h5 font-weight-md-thin scale-text text-center"
                     >
-                      {{ id }}
+                      {{
+                        data?.curatedPublications
+                          ? data?.curatedPublications[0].id
+                          : props.id
+                      }}
                     </v-col>
                     <v-col cols="12">
                       <v-progress-linear
@@ -68,12 +72,14 @@
                   <v-row align="end" class="fill-height pa-1 pl-4">
                     <v-col>
                       <a class="text-white font-weight-bold">
-                        {{ data instanceof ArdbTransaction ? '' : data?.title }}
+                        {{
+                          isCuration ? data?.title : data?.publication?.title
+                        }}
                       </a>
                       <br>
                       <a class="text-white font-italic">
                         <ResolveUsername 
-                          :address="artwork ? artwork.publication.creator : ''"
+                          :address="`${itemAddress}`"
                           no-link
                         />
                       </a>                        
@@ -105,63 +111,108 @@
 
 
 <script setup lang="ts">
-import { RouteLocationRaw } from '.nuxt/vue-router'
-import ArdbTransaction from 'ardb/lib/models/transaction';
 import { VImg } from 'vuetify/lib/components/index.mjs'
+import {
+  CollaborativeWhitelistCurationState
+} from '@artbycity/sdk/dist/web/curations'
 
 const img = ref<VImg>()
 
 const hasError = computed(() => {
   if (pending.value) { return false }
 
-  return artwork.value === null
+  return data.value === null
 })
 
-const props = defineProps<{ id: string, to?: RouteLocationRaw }>()
+const props = defineProps<{ id: string }>()
 const abc = useArtByCity()
 const { protocol, host, port } = abc.arweave.api.config
 const gatewayBase = `${protocol}://${host}:${port}`
+const isCuration = ref<boolean>(false)
 
 const { data, pending } = useLazyAsyncData(props.id, async () => {
   const checkId = await abc.curations.getTransaction(props.id)
-  // const checkId = await abc.curations.getTransaction(
-  //   'B35QBsuBbbadEzWSJT8pR8i6LjIlDHWI9f--pQUgsrY'
-  // )
 
   if (checkId) {
     if (checkId.tags.find(o => o.name === 'Entity-Type')?.value === 'curation'){
-      return checkId
+      isCuration.value = true
+      try {
+        const curation = abc
+          .curations
+          .get<CollaborativeWhitelistCurationState>(props.id)
+
+        const { cachedValue: { state } } = await curation.contract.readState()
+        const curatedPublications = []
+
+        let count = 0
+        for (let i of state.items) {
+          curatedPublications.push(
+            await abc.legacy.fetchPublication(i)
+          )
+          count += 1
+          if (count === 3){ break }
+        }
+
+        return {
+          contract: curation,
+          title: state.title,
+          desc: state.metadata.description as string,
+          state,
+          curatedPublications,
+          username: await abc.usernames.resolveUsernameFromAddress(state.owner)
+        }
+      } catch (error) {
+        console.error('Error fetching curation', props.id, error)
+      }
     } else {
       const publication = await abc.legacy.fetchPublication(props.id)
+      const username = 
+        await abc.usernames.resolveUsernameFromAddress(publication.creator)
 
-      return publication
+      return { publication, username }
     }
   }
 })
 
 const src = computed(() => {
-  if (!artwork.value?.publication) { return '' }
-
-  if (!(data.value instanceof ArdbTransaction)) {
-    return data.value.image.preview.startsWith('data:image')
-      ? data.value.image.preview
-      : `${gatewayBase}/${data.value.image.preview}`
+  if (!data.value) { return '' }
+
+  if (data.value.publication) {
+    return data.value.publication.image.preview.startsWith('data:image')
+      ? data.value.publication.image.preview
+      : `${gatewayBase}/${data.value.publication.image.preview}`
+  } else if (data.value.curatedPublications) {
+    return data.value.curatedPublications[0]?.image.preview
+      .startsWith('data:image')
+      ? data.value.curatedPublications[0]?.image.preview
+      : `${gatewayBase}/${data.value.curatedPublications[0]?.image.preview}`
   }
   
 })
 
 const isPlayable = computed(() => {
-  if (!artwork.value?.publication) { return false }
+  if (!data.value) { return false }
 
-  if (!(data.value instanceof ArdbTransaction)) {
-    return data.value.image.animated || !!data.value.audio || !!data.value.model
+  if (!isCuration.value) {
+    return data.value.publication?.image.animated
+      || !!data.value.publication?.audio
+      || !!data.value.publication?.model
   }
 })
 
 const to = computed(() => {
-  if (!(data.value instanceof ArdbTransaction)) {
-    return props.to
-    || `/${data.value?.creator}/${data.value?.slug || data.value?.id}`
+  if (!isCuration.value) {
+    return `/${data.value?.username || data.value?.publication?.creator}/${
+      data.value?.publication?.slug || data.value?.publication?.id
+    }`
+  } else {
+    return `/curations/${data.value?.contract?.contractId}`
   }
 })
+
+const itemAddress = computed(() => {
+  return isCuration.value
+    ? data?.value?.state?.owner
+    : data?.value?.publication?.creator
+})
 </script>

pages/discover/index.vue

@@ -13,7 +13,6 @@
       <v-col cols="12" md="6" lg="9" xl="10" xxl="12">
         <FeedItemCard
           :id="pub.id"
-          :to="`/${pub.creator}/${pub.slug || pub.id}`"
         />
       </v-col>
     </v-row>