Merge pull request #112 from art-by-city/94-add-curations-tab-to-profile

94 add curations tab to profile

components/CurationsFeed.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-container v-if="curationFeed">
+    <v-row>
+      <v-col v-for="item in curationFeed" :key="item.id" cols="4">
+        <FeedItemCard :id="item.id" />
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasReachedEnd">
+      <v-col>
+        <v-btn
+          elevation="2"
+          color="primary"
+          variant="outlined"
+          @click="onLoadMore"
+        >
+          Load More
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import ArdbTransaction from 'ardb/lib/models/transaction'
+
+const props = defineProps<{ address: string }>()
+const abc = useArtByCity()
+const curationFeed = ref<ArdbTransaction[]>([])
+const cursor = ref<string | undefined>()
+const hasReachedEnd = ref(false)
+
+const onLoadMore = debounce(async () => {
+  if (hasReachedEnd.value) { return }
+  const { curations, cursor: nextCursor } = await abc
+    .curations
+    .createdBy(props.address, cursor.value)
+
+  curationFeed.value.push(...curations)
+  cursor.value = nextCursor
+
+  if (!nextCursor) {
+    hasReachedEnd.value = true
+  }
+})
+
+onLoadMore()
+</script>

components/FeedItemCard.vue

@@ -29,7 +29,7 @@
                   <v-row class="ma-0">
                     <v-col cols="12">
                       <div class="text-h3 scale-text text-center">
-                        404 image not found
+                        error
                       </div>
                     </v-col>
                   </v-row>
@@ -74,11 +74,8 @@
                       </a>
                       <br>
                       <a class="text-white font-italic">
-                        <ResolveUsername 
-                          :address="`${itemAddress}`"
-                          no-link
-                        />
-                      </a>                        
+                        <ResolveUsername :address="itemAddress" no-link />
+                      </a>
                     </v-col>
                   </v-row>
                 </v-card>
@@ -168,6 +165,8 @@ const { data, pending } = useLazyAsyncData(props.id, async () => {
       return { publication, username }
     }
   }
+
+  return null
 })
 
 const src = computed(() => {

components/ResolveUsername.vue

@@ -22,10 +22,16 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ address: string, noLink?: boolean}>()
+const props = defineProps<{ address?: string, noLink?: boolean}>()
 const abc = useArtByCity()
 
-const { data: user } = useLazyAsyncData(props.address, async () => {
+const {
+  data: user
+} = useLazyAsyncData(`resolve-username-${props.address}`, async () => {
+  if (!props.address) {
+    return { profile: null, username: null }
+  }
+
   const profile = await abc.legacy.fetchProfile(props.address)
   const username =
     await abc.usernames.resolveUsernameFromAddress(props.address)

pages/[profile]/index.vue

@@ -30,6 +30,9 @@
             <v-tab value="art">
               Art
             </v-tab>
+            <v-tab value="curations">
+              Curations
+            </v-tab>
             <v-tab value="liked">
               Likes
             </v-tab>
@@ -42,7 +45,10 @@
       </v-row>
       <v-row>
         <v-col>
-          <template v-if="tab === 'liked'">
+          <template v-if="tab === 'curations'">
+            <CurationsFeed :address="data.address" />
+          </template>
+          <template v-else-if="tab === 'liked'">
             <LikesFeed :address="data.address" />
           </template>
           <template v-else-if="tab === 'tips'">