Add subscribers tab to profile page

src/api/subscriptions-common.ts

@@ -1,6 +1,6 @@
 import { BACKEND_URL } from "@/constants"
 import { http } from "./common"
-import { User } from "./users"
+import { Profile, User } from "./users"
 
 export interface SubscriptionOption {
   type: string;
@@ -47,7 +47,7 @@ export interface SubscriptionDetails {
   expires_at: string,
 }
 
-export async function getSubscription(
+export async function findSubscription(
   senderId: string,
   recipientId: string,
 ): Promise<SubscriptionDetails | null> {
@@ -65,3 +65,20 @@ export async function getSubscription(
     throw new Error(data.message)
   }
 }
+
+export interface Subscription {
+  id: number,
+  sender: Profile,
+  sender_address: string | null,
+  expires_at: string,
+}
+
+export async function getReceivedSubscriptions(
+  authToken: string,
+  accountId: string,
+): Promise<Subscription[]> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${accountId}/subscribers`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data
+}

src/api/subscriptions-ethereum.ts

@@ -235,23 +235,6 @@ export async function cancelSubscription(
   return transaction
 }
 
-export interface Subscription {
-  id: number,
-  sender: Profile,
-  sender_address: string | null,
-  expires_at: string,
-}
-
-export async function getSubscribers(
-  authToken: string,
-  accountId: string,
-): Promise<Subscription[]> {
-  const url = `${BACKEND_URL}/api/v1/accounts/${accountId}/subscribers`
-  const response = await http(url, { authToken })
-  const data = await response.json()
-  return data
-}
-
 export async function withdrawReceived(
   contractAddress: string,
   signer: Signer,

src/components/SubscriptionMonero.vue

@@ -96,7 +96,7 @@ import { $, $ref } from "vue/macros"
 import { DateTime } from "luxon"
 
 import { searchProfilesByAcct } from "@/api/search"
-import { getSubscription, SubscriptionDetails } from "@/api/subscriptions-common"
+import { findSubscription, SubscriptionDetails } from "@/api/subscriptions-common"
 import {
   createInvoice,
   getInvoice,
@@ -134,7 +134,7 @@ onMounted(async () => {
   if (subscriptionOption?.price) {
     subscriptionPrice = getPricePerMonth(subscriptionOption.price)
     if (sender.id !== "") {
-      subscriptionDetails = await getSubscription(sender.id, recipient.id)
+      subscriptionDetails = await findSubscription(sender.id, recipient.id)
     }
   }
 })
@@ -204,7 +204,7 @@ async function checkInvoice() {
   isLoading = true
   invoice = await getInvoice(invoice.id)
   if (invoice.status === "forwarded") {
-    subscriptionDetails = await getSubscription(sender.id, recipient.id)
+    subscriptionDetails = await findSubscription(sender.id, recipient.id)
     invoice = null
   }
   isLoading = false

src/components/SubscriptionSettingsEthereum.vue

@@ -41,7 +41,7 @@
     <form class="withdraw" v-if="subscriptionConfig !== null">
       <h2>Subscribers</h2>
       <div
-        v-for="subscription in subscribers"
+        v-for="subscription in subscriptions"
         class="subscriber"
         :class="{ expired: !isSubscriptionActive(subscription) }"
         :key="subscription.id"
@@ -80,19 +80,19 @@ import { DateTime } from "luxon"
 import { ProfileWrapper } from "@/api/users"
 import {
   getSubscriptionOptions,
+  getReceivedSubscriptions,
+  Subscription,
   SubscriptionOption,
 } from "@/api/subscriptions-common"
 import {
   configureSubscriptions,
   getPricePerSec,
-  getSubscribers,
   getSubscriptionAuthorization,
   getSubscriptionConfig,
   getSubscriptionState,
   getSubscriptionToken,
   onSubscriptionsEnabled,
   withdrawReceived,
-  Subscription,
   SubscriptionConfig,
   SubscriptionState,
   SubscriptionToken,
@@ -118,7 +118,7 @@ let subscriptionToken = $ref<SubscriptionToken | null>(null)
 let subscriptionsEnabled = $ref<boolean | null>(null)
 let subscriptionConfig = $ref<SubscriptionConfig | null>(null)
 let subscriptionState = $ref<SubscriptionState | null>(null)
-let subscribers = $ref<Subscription[]>([])
+let subscriptions = $ref<Subscription[]>([])
 let subscriberAddress = $ref<string | null>(null)
 
 const blockchain = $computed(() => instance?.blockchains[0])
@@ -193,7 +193,7 @@ async function loadSubscriptionSettings() {
     // Ensure server is aware of subscription configuration
     await onSubscriptionsEnabled(ensureAuthToken())
     await loadSubscriptionOption()
-    subscribers = await getSubscribers(
+    subscriptions = await getReceivedSubscriptions(
       ensureAuthToken(),
       profile.id,
     )

src/views/Profile.vue

@@ -149,10 +149,15 @@
             <span class="value">{{ profile.following_count }}</span>
             <span class="label">following</span>
           </component>
-          <span class="stats-item" v-if="isSubscriptionsFeatureEnabled()">
+          <component
+            class="stats-item"
+            v-if="isSubscriptionsFeatureEnabled()"
+            :is="isCurrentUser() ? 'a' : 'span'"
+            @click="isCurrentUser() && switchTab('subscribers')"
+          >
             <span class="value">{{ profile.subscribers_count }}</span>
             <span class="label">subscribers</span>
-          </span>
+          </component>
         </div>
       </div>
       <div class="tab-bar">
@@ -172,6 +177,7 @@
         </template>
         <span v-else-if="tabName === 'followers'" class="active">Followers</span>
         <span v-else-if="tabName === 'following'" class="active">Following</span>
+        <span v-else-if="tabName === 'subscribers'" class="active">Subscribers</span>
       </div>
       <loader v-if="isLoading"></loader>
       <div :style="{ visibility: isLoading ? 'hidden' : 'visible' }">
@@ -180,7 +186,7 @@
           :posts="posts"
           @load-next-page="loadNextPage"
         ></post-list>
-        <template v-if="tabName === 'followers' || tabName === 'following'">
+        <template v-else-if="tabName === 'followers' || tabName === 'following' || tabName === 'subscribers'">
           <router-link
             v-for="profile in followList"
             :key="profile.id"
@@ -215,6 +221,7 @@ import {
   getFollowers,
   getFollowing,
 } from "@/api/relationships"
+import { getReceivedSubscriptions } from "@/api/subscriptions-common"
 import {
   getProfile,
   Profile,
@@ -299,6 +306,13 @@ async function switchTab(name: string) {
     )
     followList = page.profiles
     followListNextPageUrl = page.nextPageUrl
+  } else if (tabName === "subscribers" && isCurrentUser()) {
+    const subscriptions = await getReceivedSubscriptions(
+      ensureAuthToken(),
+      profile.id,
+    )
+    followList = subscriptions.map((subscription) => subscription.sender)
+    followListNextPageUrl = null
   }
   isLoading = false
 }