From 40ea41fb0437c8b9e0dfe36d58420592b9e6dad9 Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Fri, 10 Nov 2023 08:47:21 +0100 Subject: [PATCH 1/3] feat(top-hosting-happs): filter only enabled hApps --- src/interfaces/HposInterface.ts | 26 -------------------------- src/pages/DashboardPage.vue | 9 +++++++-- src/store/dashboard.ts | 6 +++--- 3 files changed, 10 insertions(+), 31 deletions(-) diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts index 901c641b..193caadf 100644 --- a/src/interfaces/HposInterface.ts +++ b/src/interfaces/HposInterface.ts @@ -10,7 +10,6 @@ import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement' interface HposInterface { getUsage: () => Promise - getTopHostedHapps: () => Promise getHostedHapps: () => Promise getHostEarnings: () => Promise getHostPreferences: () => Promise @@ -369,30 +368,6 @@ export function useHposInterface(): HposInterface { } } - async function getTopHostedHapps(): Promise { - try { - // NB: the `/hosted_happs` endpoint returns happs sorted by earnings in descending order - const result = await hposHolochainCall({ - method: 'get', - path: '/hosted_happs', - params: { - usage_interval: 7, - quantity: kTopHappsToDisplay - } - }) - - if (isHappArray(result)) { - return result.filter((happ: HApp) => happ.enabled) - } else { - console.error("getTopHostedHapps didn't return an array") - return [] - } - } catch (error) { - console.error('getTopHostedHapps encountered an error: ', error) - return { error } - } - } - async function getHostedHapps(): Promise { try { const result = await hposHolochainCall({ @@ -748,7 +723,6 @@ export function useHposInterface(): HposInterface { return { getUsage, - getTopHostedHapps, getHostedHapps, getHostEarnings, checkAuth, diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue index 51855022..a764a957 100644 --- a/src/pages/DashboardPage.vue +++ b/src/pages/DashboardPage.vue @@ -14,6 +14,7 @@ import { isError } from '@/types/predicates' import type { HoloFuelCardData, Error } from '@/types/types' const kPaymentsToDisplay = 3 +const kTopHostedHAppsToDisplay = 3 const router = useRouter() const dashboardStore = useDashboardStore() @@ -41,7 +42,11 @@ const holoFuelCardData = computed((): HoloFuelCardData | Error => { } }) -const topHostedHapps = computed(() => dashboardStore.hostedHapps) +const topHostedHapps = computed(() => + isError(dashboardStore.hostedHapps) + ? dashboardStore.hostedHapps + : dashboardStore.hostedHapps.filter((hApp) => hApp.enabled).slice(0, kTopHostedHAppsToDisplay) +) const earnings = computed(() => isError(dashboardStore.hostEarnings) @@ -59,7 +64,7 @@ const usage = computed(() => dashboardStore.usage) async function getTopHostedHapps(): Promise { isLoadingHostedHapps.value = true - await dashboardStore.getTopHostedHapps() + await dashboardStore.getHostedHapps() isLoadingHostedHapps.value = false } diff --git a/src/store/dashboard.ts b/src/store/dashboard.ts index c629901e..c8fa0a51 100644 --- 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, getTopHostedHapps, 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 getTopHostedHapps(): Promise { - this.hostedHapps = await getTopHostedHapps() + async getHostedHapps(): Promise { + this.hostedHapps = await getHostedHapps() }, async getEarnings(): Promise { From 1e95c6b99765d682f2c6b508633845795776193c Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Fri, 10 Nov 2023 08:47:45 +0100 Subject: [PATCH 2/3] feat(translations): update no hApps translations --- src/components/dashboard/HappsCard.vue | 3 ++- src/locales/en.ts | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/dashboard/HappsCard.vue b/src/components/dashboard/HappsCard.vue index 80e19116..0f1b4a93 100644 --- a/src/components/dashboard/HappsCard.vue +++ b/src/components/dashboard/HappsCard.vue @@ -27,7 +27,7 @@ const emit = defineEmits(['try-again-clicked']) v-if="!props.data || props.data.length === 0" class="no-happs" > - {{ $t('hosted_happs.no_happs') }} + {{ $t('hosted_happs.no_active_happs') }}
diff --git a/src/locales/en.ts b/src/locales/en.ts index 32f7cbd5..6e3be0b6 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -49,8 +49,8 @@ export default { }, hosted_happs: { hosted_for: 'Hosted for', - no_active_happs: 'You’re not hosting any hApps', - no_inactive_happs: 'You do not have any inactive hApps', + no_active_happs: 'You have not enabled any hApps for hosting', + no_inactive_happs: 'You have not disabled any hApps', no_filtered_happs: 'No hApps match your search', title: 'Top Hosted hApps' }, From ab8b51d6013699d3e04ecdf8e1fad920d58dcddd Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Fri, 10 Nov 2023 08:57:14 +0100 Subject: [PATCH 3/3] feat(translations): update active/inactive => enabled/disabled hApps --- src/components/dashboard/HappsCard.vue | 3 ++- src/locales/en.ts | 6 ++++-- src/pages/DashboardPage.vue | 2 +- src/pages/HAppsPage.vue | 26 ++++++++++++++++---------- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/components/dashboard/HappsCard.vue b/src/components/dashboard/HappsCard.vue index 0f1b4a93..af0abf64 100644 --- a/src/components/dashboard/HappsCard.vue +++ b/src/components/dashboard/HappsCard.vue @@ -27,7 +27,7 @@ const emit = defineEmits(['try-again-clicked']) v-if="!props.data || props.data.length === 0" class="no-happs" > - {{ $t('hosted_happs.no_active_happs') }} + {{ $t('hosted_happs.no_enabled_happs') }}
diff --git a/src/locales/en.ts b/src/locales/en.ts index 6e3be0b6..fc10c8b0 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -48,9 +48,11 @@ export default { ...commonTranslations.holofuel_modal }, hosted_happs: { + disabled: 'Disabled hApps', + enabled: 'Enabled hApps', hosted_for: 'Hosted for', - no_active_happs: 'You have not enabled any hApps for hosting', - no_inactive_happs: 'You have not disabled any hApps', + no_enabled_happs: 'You have not enabled any hApps for hosting', + no_disabled_happs: 'You have not disabled any hApps', no_filtered_happs: 'No hApps match your search', title: 'Top Hosted hApps' }, diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue index a764a957..48a02548 100644 --- a/src/pages/DashboardPage.vue +++ b/src/pages/DashboardPage.vue @@ -45,7 +45,7 @@ const holoFuelCardData = computed((): HoloFuelCardData | Error => { const topHostedHapps = computed(() => isError(dashboardStore.hostedHapps) ? dashboardStore.hostedHapps - : dashboardStore.hostedHapps.filter((hApp) => hApp.enabled).slice(0, kTopHostedHAppsToDisplay) + : dashboardStore.hostedHapps.filter((hApp) => !hApp.enabled).slice(0, kTopHostedHAppsToDisplay) ) const earnings = computed(() => diff --git a/src/pages/HAppsPage.vue b/src/pages/HAppsPage.vue index 51ad66f2..f589c973 100644 --- a/src/pages/HAppsPage.vue +++ b/src/pages/HAppsPage.vue @@ -4,6 +4,7 @@ import BaseSearchInput from '@uicommon/components/BaseSearchInput.vue' import HAppCard from '@uicommon/components/HAppCard.vue' import { EChipType } from '@uicommon/types/ui' import { computed, onMounted, ref } from 'vue' +import { useI18n } from 'vue-i18n' import BaseTabSelect from '@/components/BaseTabSelect.vue' import SortByDropdown from '@/components/hApps/SortByDropdown.vue' import PrimaryLayout from '@/components/PrimaryLayout.vue' @@ -13,18 +14,23 @@ import { isError as isErrorPredicate } from '@/types/predicates' const { getHostedHapps } = useHposInterface() +const { t } = useI18n() + const isLoading = ref(false) const isError = ref(false) -const selectedTab = ref('active') +const selectedTab = ref('enabled') const tabs = computed(() => [ - { value: 'active', name: 'Active hApps', current: selectedTab.value === 'active' }, { - value: 'inactive', - name: 'Inactive hApps', - href: '#', - current: selectedTab.value === 'inactive' + value: 'enabled', + name: t('hosted_happs.enabled'), + current: selectedTab.value === 'enabled' + }, + { + value: 'disabled', + name: t('hosted_happs.disabled'), + current: selectedTab.value === 'disabled' } ]) @@ -49,9 +55,9 @@ const happs = ref([]) const sortBy = ref(kSortOptions.alphabetical.value) const filteredHapps = computed((): HApp[] => { - let hAppsFilteredByActivity: HApp[] = [] + let hAppsFilteredByActivity: HApp[] = [] - const sortByLogic: (a: HApp, b: HApp) => number = + const sortByLogic: (a: HApp, b: HApp) => number = // Sorting by earnings is not available now as we don't have a property // like that in the HApp, we use 'sourceChains' for now sortBy.value === kSortOptions.earnings.value @@ -64,7 +70,7 @@ const filteredHapps = computed((): HApp[] => { } else if (!isErrorPredicate(happs.value)) { // If hApps are hosted filter them by activity hAppsFilteredByActivity = - selectedTab.value === 'active' + selectedTab.value === 'enabled' ? happs.value.filter((hApp: HApp) => hApp.enabled) : happs.value.filter((hApp: HApp) => !hApp.enabled) } @@ -164,7 +170,7 @@ onMounted(async () => { >