From 01358a8ed84585801d39c9a930920ee98072c662 Mon Sep 17 00:00:00 2001
From: Jim Toth <jim@artby.city>
Date: Fri, 20 Oct 2023 20:14:05 -0400
Subject: [PATCH] WIP

---
 components/CollaborateMenu.vue         |  43 +++++++
 components/CollaborateMenuItem.vue     | 130 +++++++++++++++++++
 components/CurateMenu.vue              |  30 +++--
 components/CurateMenuItem.vue          |  12 +-
 components/LikesFeed.vue               |   7 +-
 components/PortfolioFeed.vue           |   7 +-
 components/ProfileEditButton.vue       |  21 ++--
 components/TipButton.vue               |  15 +--
 components/TopNavButtons.vue           |   4 +-
 pages/[profile]/index.vue              |   3 +-
 pages/curations/[curationId]/edit.vue  | 166 +++++++++----------------
 pages/curations/[curationId]/index.vue |  58 +++++++--
 pages/curations/create.vue             |   4 +
 pages/curations/index.vue              |   2 +
 pages/discover.vue                     |   3 +
 15 files changed, 358 insertions(+), 147 deletions(-)
 create mode 100644 components/CollaborateMenu.vue
 create mode 100644 components/CollaborateMenuItem.vue

diff --git a/components/CollaborateMenu.vue b/components/CollaborateMenu.vue
new file mode 100644
index 0000000..b87a4a5
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f431415
--- /dev/null
+++ 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
index 3f78a3e..b243d99 100644
--- 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
index 0c71097..9340429 100644
--- 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
index efd383c..212b038 100644
--- 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
index 407c244..0c489ad 100644
--- 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
index 92e9da1..99e90d5 100644
--- 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
index 996c1bc..f226e42 100644
--- 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
index 273a821..7941628 100644
--- 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
index f28488c..622bf33 100644
--- 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>
diff --git a/pages/curations/[curationId]/edit.vue b/pages/curations/[curationId]/edit.vue
index f4d4d46..2270a97 100644
--- a/pages/curations/[curationId]/edit.vue
+++ b/pages/curations/[curationId]/edit.vue
@@ -20,6 +20,10 @@
       <v-col cols="12">
         <v-table>
           <tbody>
+            <tr>
+              <td class="font-weight-bold">ID</td>
+              <td>{{ curationId }}</td>
+            </tr>
             <tr>
               <td class="font-weight-bold">Title</td>
               <td>{{ curation.state.title }}</td>
@@ -55,26 +59,31 @@
           <v-window-item value="items">
             <v-table>
               <tbody>
-                <tr v-for="item in curation.state.items" :key="item">
-                  <td>
-                    <code>{{ item }}</code>
-                  </td>
-                  <td style="width: 100px;">
-                    <FeedItemCard :id="item" />
-                  </td>
-                  <td>
-                    <v-btn
-                      color="primary"
-                      elevation="2"
-                      variant="outlined"
-                      density="compact"
-                      :disabled="pending"
-                      @click="removeItem(item)"
-                    >
-                      Remove
-                    </v-btn>
-                  </td>
-                </tr>
+                <template v-if="curation.state.items.length > 0">
+                  <tr v-for="item in curation.state.items" :key="item">
+                    <td style="width: 100px;">
+                      <FeedItemCard :id="item" />
+                    </td>
+                    <td>
+                      <code>{{ item }}</code>
+                    </td>
+                    <td>
+                      <v-btn
+                        color="primary"
+                        elevation="2"
+                        variant="outlined"
+                        density="compact"
+                        :disabled="pending"
+                        @click="removeItem(item)"
+                      >
+                        Remove
+                      </v-btn>
+                    </td>
+                  </tr>
+                </template>
+                <template v-else>
+                  <h3 class="ma-2">Nothing curated yet!</h3>
+                </template>
               </tbody>
             </v-table>
           </v-window-item>
@@ -93,57 +102,34 @@
           <v-window-item value="curators">
             <v-table>
               <tbody>
-                <tr
-                  v-for="address in curation.state.roles.curator"
-                  :key="address"
-                >
-                  <td>
-                    <nuxt-link class="text-primary" :to="`/${address}`">
-                      {{ address }}
-                    </nuxt-link>
-                  </td>
-                  <td>
-                    <v-btn
-                      color="primary"
-                      elevation="2"
-                      variant="outlined"
-                      density="compact"
-                      :disabled="pending"
-                      @click="removeCurator(address)"
-                    >
-                      Remove
-                    </v-btn>
-                  </td>
-                </tr>
+                <template v-if="curation.state.roles.curator.length > 0">
+                  <tr
+                    v-for="address in curation.state.roles.curator"
+                    :key="address"
+                  >
+                    <td>
+                      <nuxt-link class="text-primary" :to="`/${address}`">
+                        <code>{{ address }}</code>
+                      </nuxt-link>
+                    </td>
+                    <td>
+                      <v-btn
+                        color="primary"
+                        elevation="2"
+                        variant="outlined"
+                        density="compact"
+                        :disabled="pending"
+                        @click="removeCurator(address)"
+                      >
+                        Remove
+                      </v-btn>
+                    </td>
+                  </tr>
+                </template>
+                <template v-else>
+                  <h3 class="ma-2">No collaborators yet!</h3>
+                </template>
               </tbody>
-
-              <tfoot>
-                <tr>
-                  <td>
-                    <v-text-field
-                      v-model="curatorToAdd"
-                      class="ma-2"
-                      label="Address"
-                      :rules="[rules.required, rules.length(43)]"
-                      :disabled="pending"
-                      variant="outlined"
-                      density="compact"
-                    />
-                  </td>
-                  <td>
-                    <v-btn
-                      color="primary"
-                      elevation="2"
-                      variant="outlined"
-                      density="compact"
-                      :disabled="pending"
-                      @click="addCurator"
-                    >
-                      Add Curator
-                    </v-btn>
-                  </td>
-                </tr>
-              </tfoot>
             </v-table>
           </v-window-item>
         </v-window>
@@ -164,15 +150,8 @@ const abc = useArtByCity()
 const route = useRoute()
 const curationId = route.params.curationId as string
 const tab = ref('items')
-const itemToAdd = ref('')
-const curatorToAdd = ref('')
 const pending = ref(false)
 
-const rules = {
-  required: (value: string) => !!value || 'Required',
-  length: (length: number) => (value: string) => value.length === length || `Must be ${length} chars`
-}
-
 const {
   data: curation,
   refresh
@@ -187,9 +166,12 @@ const {
       value: tag.get('value', { decode: true, string: true })
     }
   })
-  const title = tags.find(tag => tag.name === 'Title')?.value || 'Untitled'
-  const desc = tags.find(tag => tag.name === 'Description')?.value
   const { cachedValue: { state } } = await contract.readState()
+  const title = state.title
+    || tags.find(tag => tag.name === 'Title')?.value
+    || 'Untitled'
+  const desc = state.metadata.description
+    || tags.find(tag => tag.name === 'Description')?.value  
 
   return { contract, title, desc, state }
 })
@@ -219,32 +201,6 @@ const removeItem = debounce(async (item: string) => {
   pending.value = false
 })
 
-const addCurator = debounce(async () => {
-  if (!curation.value) { return }
-  if (!curatorToAdd.value || curatorToAdd.value.length !== 43) { return }
-
-  pending.value = true
-
-  try {
-    const res = await curation.value
-      .contract
-      .connect('use_wallet')
-      .writeInteraction({
-        function: 'addCurator',
-        address: curatorToAdd.value
-      })
-
-    console.log('addCurator res', res)
-
-    await refresh()
-    curatorToAdd.value = ''
-  } catch (error) {
-    console.error('Error adding curator to curation contract', error)
-  }
-
-  pending.value = false
-})
-
 const removeCurator = debounce(async (address: string) => {
   if (!curation.value) { return }
   if (!address || address.length !== 43) { return }
diff --git a/pages/curations/[curationId]/index.vue b/pages/curations/[curationId]/index.vue
index e4cb2de..f406afa 100644
--- a/pages/curations/[curationId]/index.vue
+++ b/pages/curations/[curationId]/index.vue
@@ -31,14 +31,51 @@
         <span>{{ curation.desc }}</span>
       </v-col>
     </v-row>
-    <v-row v-if="curation.state.items.length > 0">
-      <v-col v-for="id in curation.state.items" :key="id" cols="4">
-        <FeedItemCard :id="id" />
+    <v-row dense>
+      <v-col cols="12">
+        <v-tabs v-model="tab">
+          <v-tab value="items">Items</v-tab>
+          <v-tab value="curators">Curators</v-tab>
+        </v-tabs>
       </v-col>
     </v-row>
-    <v-row v-else>
-      <v-col cols="12">This curation is empty!</v-col>
-    </v-row>
+    <v-window v-model="tab">
+      <v-window-item value="items">
+        <v-row v-if="curation.state.items.length > 0">
+          <v-col v-for="id in curation.state.items" :key="id" cols="4">
+            <FeedItemCard :id="id" />
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          <v-col cols="12">
+            <h3 class="ma-2">This curation is empty!</h3>
+          </v-col>
+        </v-row>
+      </v-window-item>
+      <v-window-item value="curators">
+        <v-row>
+          <v-col cols="2" class="text-truncate">
+            <nuxt-link class="text-primary" :to="`/${curation.state.owner}`">
+              <Avatar :address="curation.state.owner" />
+              <br />
+              <code>{{ curation.state.owner }}</code>
+            </nuxt-link>
+          </v-col>
+          <v-col
+            v-for="address in curation.state.roles.curator"
+            :key="address"
+            cols="2"
+            class="text-truncate text-center"
+          >
+            <nuxt-link class="text-primary" :to="`/${address}`">
+              <Avatar :address="address" />
+              <br />
+              <code>{{ address }}</code>
+            </nuxt-link>
+          </v-col>
+        </v-row>
+      </v-window-item>
+    </v-window>
   </v-container>
   <template v-else>
     <h1>404 Curation not found :(</h1>
@@ -46,14 +83,21 @@
 </template>
 
 <script setup lang="ts">
+import {
+  CollaborativeWhitelistCurationState
+} from '@artbycity/sdk/dist/web/curation'
+
 const abc = useArtByCity()
 const route = useRoute()
 const curationId = route.params.curationId as string
+const tab = ref('items')
 
 const {
   data: curation
 } = useLazyAsyncData(`curation-${curationId}`, async () => {
-  const contract = abc.curations.get(curationId)
+  const contract = abc
+    .curations
+    .get<CollaborativeWhitelistCurationState>(curationId)
   const tx = await abc.arweave.transactions.get(curationId)
   const tags = tx.tags.map(tag => {
     return {
diff --git a/pages/curations/create.vue b/pages/curations/create.vue
index afe16a5..a94d7a6 100644
--- a/pages/curations/create.vue
+++ b/pages/curations/create.vue
@@ -13,12 +13,16 @@
             label="Title"
             placeholder="My Curation Title"
             :rules="[rules.required]"
+            variant="outlined"
+            class="mb-2"
           ></v-text-field>
 
           <v-textarea
             v-model="description"
             label="Description"
             placeholder="My Curation Description"
+            variant="outlined"
+            class="mb-2"
           ></v-textarea>
 
           <v-btn
diff --git a/pages/curations/index.vue b/pages/curations/index.vue
index f1311f4..6f13d5a 100644
--- a/pages/curations/index.vue
+++ b/pages/curations/index.vue
@@ -10,6 +10,7 @@
           variant="outlined"
           to="/curations/create"
           elevation="2"
+          density="compact"
         >Create New</v-btn>
       </v-col>
     </v-row>
@@ -39,6 +40,7 @@
                   color="primary"
                   variant="outlined"
                   elevation="2"
+                  density="compact"
                   @click="onEditClicked(curation.id)"
                 >
                   Edit
diff --git a/pages/discover.vue b/pages/discover.vue
index 064dcfd..7ddab08 100644
--- a/pages/discover.vue
+++ b/pages/discover.vue
@@ -17,6 +17,9 @@
       <v-col>
         <v-btn
           v-if="!publicationsStore.verified._hasReachedEnd"
+          elevation="2"
+          color="primary"
+          variant="outlined"
           @click="onLoadMoreClicked"
         >
           Load More