feat(happ-details): update components to work with new API

Holo-Host · Nov 15, 2023 · a87b827 · a87b827
1 parent a837307
commit a87b827
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 54 deletions.
diff --git a/src/components/hAppDetails/HAppDetailsUsage.vue b/src/components/hAppDetails/HAppDetailsUsage.vue
@@ -24,13 +24,13 @@ const props = defineProps<{
     <div class="happ-details-usage__usage-row">
       <span class="happ-details-usage__usage-row-label">{{ t('happ_details.seven_day_usage') }}:</span>
       <div class="happ-details-usage__usage-row-value-wrapper">
-        <span class="happ-details-usage__usage-row-value">{{ presentMicroSeconds(props.hApp.last7DaysUsage.cpu) }}</span> {{ t('$.cpu') }}
-      </div>
-      <div class="happ-details-usage__usage-row-value-wrapper happ-details-usage__storage">
-        <span class="happ-details-usage__usage-row-value">{{ presentBytes(props.hApp.last7DaysUsage.storage) }}</span> {{ t('$.storage') }}
+        <span class="happ-details-usage__usage-row-value">{{ presentMicroSeconds(props.hApp.usage?.cpu) }}</span> {{ t('$.cpu') }}
       </div>
+      <!--      <div class="happ-details-usage__usage-row-value-wrapper happ-details-usage__storage">-->
+      <!--        <span class="happ-details-usage__usage-row-value">{{ presentBytes(props.hApp.usage.storage) }}</span> {{ t('$.storage') }}-->
+      <!--      </div>-->
       <div class="happ-details-usage__usage-row-value-wrapper happ-details-usage__data-transfer">
-        <span class="happ-details-usage__usage-row-value">{{ presentBytes(props.hApp.last7DaysUsage.bandwidth) }}</span> {{ t('$.data_transfer') }}
+        <span class="happ-details-usage__usage-row-value">{{ presentBytes(props.hApp.usage?.bandwidth) }}</span> {{ t('$.data_transfer') }}
       </div>
     </div>
   </div>

diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
@@ -10,7 +10,7 @@ import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement'
 
 interface HposInterface {
   getUsage: () => Promise<UsageResponse | { error: unknown }>
-  getHostedHapps: () => Promise<HApp[] | { error: unknown }>
+  getHostedHApps: () => Promise<HApp[] | { error: unknown }>
   getHAppDetails: (id: string) => Promise<HAppDetails | { error: unknown }>
   getHostEarnings: () => Promise<HostEarnings | { error: unknown }>
   getHostPreferences: () => Promise<HostPreferencesResponse | { error: unknown }>
@@ -396,7 +396,7 @@ export function useHposInterface(): HposInterface {
     }
   }
 
-  async function getHostedHapps(): Promise<HposHolochainCallResponse | { error: unknown }> {
+  async function getHostedHApps(): Promise<HposHolochainCallResponse | { error: unknown }> {
     try {
       const result = await hposHolochainCall({
         method: 'get',
@@ -408,13 +408,13 @@ export function useHposInterface(): HposInterface {
       })
 
       if (isHappArray(result)) {
-        return result.filter((happ) => happ.enabled)
+        return result
       } else {
-        console.error("getHostedHapps didn't return an array")
+        console.error("getHostedHApps didn't return an array")
         return []
       }
     } catch (error) {
-      console.error('getHostedHapps encountered an error: ', error)
+      console.error('getHostedHApps encountered an error: ', error)
       return { error }
     }
   }
@@ -425,10 +425,8 @@ export function useHposInterface(): HposInterface {
     try {
       const result = await hposHolochainCall({
         method: 'get',
-        path: '/happ',
-        params: {
-          id
-        }
+        pathPrefix: '/api/v2',
+        path: `/hosted_happs/${id}`
       })
 
       if (isHAppDetails(result)) {
@@ -776,7 +774,7 @@ export function useHposInterface(): HposInterface {
 
   return {
     getUsage,
-    getHostedHapps,
+    getHostedHApps,
     getHostEarnings,
     checkAuth,
     getUser,

diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
@@ -22,7 +22,7 @@ const userStore = useUserStore()
 
 const isLoadingEarnings = ref(false)
 const isLoadingUsage = ref(false)
-const isLoadingHostedHapps = ref(false)
+const isLoadingHostedHApps = ref(false)
 
 const holoFuel = computed(() =>
   isError(dashboardStore.hostEarnings)
@@ -42,10 +42,10 @@ const holoFuelCardData = computed((): HoloFuelCardData | Error => {
   }
 })
 
-const topHostedHapps = computed(() =>
-  isError(dashboardStore.hostedHapps)
-    ? dashboardStore.hostedHapps
-    : dashboardStore.hostedHapps.filter((hApp) => !hApp.enabled).slice(0, kTopHostedHAppsToDisplay)
+const topHostedHApps = computed(() =>
+  isError(dashboardStore.hostedHApps)
+    ? dashboardStore.hostedHApps
+    : dashboardStore.hostedHApps.filter((hApp) => hApp.enabled).slice(0, kTopHostedHAppsToDisplay)
 )
 
 const earnings = computed(() =>
@@ -63,9 +63,9 @@ const recentPayments = computed(() =>
 const usage = computed(() => dashboardStore.usage)
 
 async function getTopHostedHapps(): Promise<void> {
-  isLoadingHostedHapps.value = true
-  await dashboardStore.getHostedHapps()
-  isLoadingHostedHapps.value = false
+  isLoadingHostedHApps.value = true
+  await dashboardStore.getHostedHApps()
+  isLoadingHostedHApps.value = false
 }
 
 async function getEarnings(): Promise<void> {
@@ -83,7 +83,7 @@ async function getUsage(): Promise<void> {
 onMounted(async (): Promise<void> => {
   isLoadingEarnings.value = true
   isLoadingUsage.value = true
-  isLoadingHostedHapps.value = true
+  isLoadingHostedHApps.value = true
 
   await getEarnings()
   await getUsage()
@@ -115,8 +115,8 @@ onMounted(async (): Promise<void> => {
 
     <div class="row">
       <HappsCard
-        :data="topHostedHapps"
-        :is-loading="isLoadingHostedHapps"
+        :data="topHostedHApps"
+        :is-loading="isLoadingHostedHApps"
         with-more-button
         class="happs-card"
         data-test-dashboard-happs-card

diff --git a/src/pages/HappDetails.vue b/src/pages/HappDetails.vue
@@ -24,33 +24,12 @@ const breadcrumbs = computed(() => [
   }
 ])
 
-function getData(): void {
+async function getData(): Promise<void> {
   isError.value = false
-  isLoading.value = true
-
-  // const result = await getHAppDetails(currentRoute.params.id)
 
-  const result = {
-    id: '1',
-    name: 'My App',
-    description: 'hApp to make you smarter',
-    categories: ['education', 'business', 'social networking'],
-    enabled: true,
-    isPaused: false,
-    sourceChains: 497,
-    daysHosted: 34,
-    earnings: {
-      total: 1903458,
-      last7Days: 476005,
-      averageWeekly: 283
-    },
-    last7DaysUsage: {
-      bandwidth: 238000000000,
-      cpu: 9000000000099,
-      storage: 34000000000
-    },
-    hostingPlan: 'paid'
-  }
+  isLoading.value = true
+  const result = await getHAppDetails(currentRoute.params.id)
+  isLoading.value = false
 
   if (isErrorPredicate(result) && result.error) {
     isError.value = true

diff --git a/src/store/dashboard.ts b/src/store/dashboard.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
 
-const { getUsage, getHostedHapps, getHostEarnings } = useHposInterface()
+const { getUsage, getHostedHApps, getHostEarnings } = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
@@ -33,8 +33,8 @@ export const useDashboardStore = defineStore('dashboard', {
       this.usage = await getUsage()
     },
 
-    async getHostedHapps(): Promise<void> {
-      this.hostedHApps = await getHostedHapps()
+    async getHostedHApps(): Promise<void> {
+      this.hostedHApps = await getHostedHApps()
     },
 
     async getEarnings(): Promise<void> {