WIP

art-by-city · Oct 21, 2023 · 01358a8 · 01358a8
1 parent fb414d7
commit 01358a8
Show file tree

Hide file tree

Showing 15 changed files with 358 additions and 147 deletions.
diff --git a/components/CollaborateMenu.vue b/components/CollaborateMenu.vue
@@ -0,0 +1,43 @@
+<template>
+  <v-btn
+    elevation="2"
+    variant="outlined"
+    color="primary"
+    density="compact"
+    size="small"
+  >
+    Invite to Curate
+    <v-menu
+      location="bottom"
+      :close-on-content-click="false"
+      activator="parent"
+    >
+      <v-list density="compact" max-height="200px">
+        <template v-if="data">
+          <template v-for="curation in data.curations" :key="curation.id">
+            <CollaborateMenuItem
+              :address="props.address"
+              :curation="curation"
+            />
+          </template>
+        </template>
+      </v-list>
+    </v-menu>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/auth'
+
+const props = defineProps<{ address: string }>()
+const abc = useArtByCity()
+const auth = useAuthStore()
+
+const {
+  data
+} = useLazyAsyncData(`curations-from-${auth.address}`, async () => {
+  if (!auth.address) { return { curations: [] } }
+
+  return await abc.curations.createdBy(auth.address)
+})
+</script>
diff --git a/components/CollaborateMenuItem.vue b/components/CollaborateMenuItem.vue
@@ -0,0 +1,130 @@
+<template>
+  <v-list-item
+    v-if="!pending && !hasError && isCollaborative"
+    :disabled="pending"
+  >
+    <template #prepend>
+      <v-list-item-action start>
+        <v-hover #="{ isHovering, props }">
+          <v-btn
+            v-bind="props"
+            icon
+            variant="plain"
+            density="compact"
+            :loading="loading"
+            @click="onCurationActionClicked"
+          >
+            <v-icon size="x-small">{{ curationActionIcon(isHovering) }}</v-icon>
+          </v-btn>
+        </v-hover>
+      </v-list-item-action>
+    </template>
+
+    <v-list-item-title>
+      {{ curationTitle }}
+    </v-list-item-title>
+
+    <template #append>
+      <v-list-item-action end>
+        <v-btn
+          icon
+          variant="plain"
+          density="compact"
+          :to="`/curations/${props.curation.id}`"
+        >
+          <v-icon>mdi-arrow-right</v-icon>
+        </v-btn>
+      </v-list-item-action>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import {
+  CollaborativeWhitelistCurationState
+} from '@artbycity/sdk/dist/web/curation'
+import ArdbTransaction from 'ardb/lib/models/transaction'
+
+const props = defineProps<{
+  address: string,
+  curation: ArdbTransaction
+}>()
+
+const abc = useArtByCity()
+const hasError = ref(false)
+const loading = ref(false)
+const {
+  data: state,
+  pending,
+  refresh
+} = useLazyAsyncData(`curation-state-${props.curation.id}`, async () => {
+  try {
+    const contract = abc
+      .curations
+      .get<CollaborativeWhitelistCurationState>(props.curation.id)
+    const { cachedValue: { state } } = await contract.readState()
+
+    return state
+  } catch (error) {
+    hasError.value = true
+    console.error(
+      `Error reading curation state for ${props.curation.id}`,
+      error
+    )
+  }
+})
+
+const curationTitle = computed(() => {
+  if (state.value) {
+    return state.value.title
+  }
+
+  const title = props.curation.tags.find(tag => tag.name === 'Title')?.value
+
+  return title || props.curation.id
+})
+
+const isInCuration = computed(() => {
+  if (!state.value) { return false }
+
+  return state.value.roles.curator.includes(props.address)
+})
+
+const isCollaborative = computed(() => {
+  if (!state.value) { return false }
+  if (!state.value.roles) { return false }
+
+  return 'roles' in state.value && 'curator' in state.value.roles
+})
+
+const curationActionIcon = (isHovering?: boolean) => {
+  return isInCuration.value
+    ? isHovering
+      ? 'mdi-minus' 
+      : 'mdi-check'
+    : 'mdi-plus'
+}
+
+const onCurationActionClicked = debounce(async () => {
+  loading.value = true
+  const addOrRemove = isInCuration.value ? 'removeCurator' : 'addCurator'
+
+  try {
+    const curation = abc
+    .curations
+    .get<CollaborativeWhitelistCurationState>(props.curation.id)
+    await curation.connect('use_wallet').writeInteraction({
+      function: addOrRemove,
+      address: props.address
+    })
+    await refresh()
+  } catch (error) {
+    hasError.value = true
+    console.error(
+      `Error ${addOrRemove} ${props.address} for curation ${props.curation.id}`
+    )
+  }
+
+  loading.value = false
+})
+</script>
diff --git a/components/CurateMenu.vue b/components/CurateMenu.vue
@@ -12,13 +12,26 @@
       :close-on-content-click="false"
       activator="parent"
     >
-      <v-list density="compact" height="200px">
-        <template v-if="data">
-          <template v-for="curation in data.curations" :key="curation.id">
-            <CurateMenuItem
-              :publication-id="props.publicationId"
-              :curation="curation"
-            />
+      <v-list density="compact" max-height="200px">
+        <template v-if="pending">
+          <v-progress-circular />
+        </template>
+        <template v-else-if="data">
+          <template v-if="data.curations.length > 0">
+            <template v-for="curation in data.curations" :key="curation.id">
+              <CurateMenuItem
+                :publication-id="props.publicationId"
+                :curation="curation"
+              />
+            </template>
+          </template>
+          <template v-else>
+            <p class="pa-2 text-caption">
+              You don't have any curations yet!
+              <nuxt-link class="text-primary" to="/curations/create">
+                Create one
+              </nuxt-link>
+            </p>
           </template>
         </template>
       </v-list>
@@ -34,7 +47,8 @@ const abc = useArtByCity()
 const auth = useAuthStore()
 
 const {
-  data
+  data,
+  pending
 } = useLazyAsyncData(`curations-from-${auth.address}`, async () => {
   if (!auth.address) { return { curations: [] } }
 

diff --git a/components/CurateMenuItem.vue b/components/CurateMenuItem.vue
@@ -8,7 +8,7 @@
             icon
             variant="plain"
             density="compact"
-            :loading="pending"
+            :loading="loading"
             @click="onCurationActionClicked"
           >
             <v-icon size="x-small">{{ curationActionIcon(isHovering) }}</v-icon>
@@ -47,6 +47,7 @@ const props = defineProps<{
 
 const abc = useArtByCity()
 const hasError = ref(false)
+const loading = ref(false)
 const {
   data: state,
   pending,
@@ -69,6 +70,10 @@ const {
 })
 
 const curationTitle = computed(() => {
+  if (state.value) {
+    return state.value.title
+  }
+
   const title = props.curation.tags.find(tag => tag.name === 'Title')?.value
 
   return title || props.curation.id
@@ -89,6 +94,7 @@ const curationActionIcon = (isHovering?: boolean) => {
 }
 
 const onCurationActionClicked = debounce(async () => {
+  loading.value = true
   const addOrRemove = isInCuration.value ? 'removeItem' : 'addItem'
 
   try {
@@ -103,8 +109,10 @@ const onCurationActionClicked = debounce(async () => {
   } catch (error) {
     hasError.value = true
     console.error(
-      `Error adding ${props.publicationId} to curation ${props.curation.id}`
+      `Error ${addOrRemove} ${props.publicationId} for curation ${props.curation.id}`
     )
   }
+
+  loading.value = false
 })
 </script>
diff --git a/components/LikesFeed.vue b/components/LikesFeed.vue
@@ -7,7 +7,12 @@
     </v-row>
     <v-row v-if="!hasReachedEnd">
       <v-col>
-        <v-btn @click="onLoadMore">
+        <v-btn
+          elevation="2"
+          color="primary"
+          variant="outlined"
+          @click="onLoadMore"
+        >
           Load More
         </v-btn>
       </v-col>

diff --git a/components/PortfolioFeed.vue b/components/PortfolioFeed.vue
@@ -7,7 +7,12 @@
     </v-row>
     <v-row v-if="!hasReachedEnd">
       <v-col>
-        <v-btn @click="onLoadMore">
+        <v-btn
+          elevation="2"
+          color="primary"
+          variant="outlined"
+          @click="onLoadMore"
+        >
           Load More
         </v-btn>
       </v-col>

diff --git a/components/ProfileEditButton.vue b/components/ProfileEditButton.vue
@@ -1,17 +1,12 @@
 <template>
-  <v-btn disabled justify="center">
+  <v-btn
+    disabled
+    elevation="2"
+    variant="outlined"
+    color="primary"
+    density="compact"
+    size="small"
+  >
     Edit Profile
   </v-btn>
 </template>
-
-
-<style>
-
-
-</style>
-
-
-<script setup lang="ts">
-
-
-</script>
diff --git a/components/TipButton.vue b/components/TipButton.vue
@@ -1,15 +1,16 @@
 <template>
-  <v-btn disabled justify="center">
+  <v-btn
+    disabled
+    elevation="2"
+    variant="outlined"
+    color="primary"
+    density="compact"
+    size="small"
+  >
     Tip
   </v-btn>
 </template>
 
-<style>
-
-
-</style>
-
 <script setup lang="ts">
 defineProps<{ address: string }>()
-
 </script>
diff --git a/components/TopNavButtons.vue b/components/TopNavButtons.vue
@@ -2,7 +2,7 @@
   <div class="nav-buttons-container">
     <v-container class="px-0">
       <v-row dense>
-        <v-col class="px-sm-5">
+        <v-col class="mx-sm-5">
           <v-btn
             color="white"
             :size="display.xs ? 'small' : 'default'"
@@ -24,7 +24,7 @@
             CURATE
           </v-btn>
         </v-col>
-        <v-col>
+        <v-col class="mx-2">
           <ConnectButton />
         </v-col>
       </v-row>

diff --git a/pages/[profile]/index.vue b/pages/[profile]/index.vue
@@ -10,7 +10,8 @@
             <ProfileEditButton />
           </template>
           <template v-else>
-            <TipButton :address="data.address" />
+            <!-- <TipButton :address="data.address" /> -->
+            <CollaborateMenu :address="data.address" />
           </template>
         </v-row>
       </v-col>