Skip to content

Commit

Permalink
feat(happ-unhosting): hook up API
Browse files Browse the repository at this point in the history
  • Loading branch information
mateuszRybczonek committed Nov 15, 2023
1 parent 43afece commit 7260b97
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 40 deletions.
58 changes: 29 additions & 29 deletions src/components/StopHostingModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import { EButtonType } from '@uicommon/types/ui'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { EModal } from '@/constants/ui'
import { HAppDetails } from '@/interfaces/HposInterface'
import { HAppDetails, useHposInterface } from '@/interfaces/HposInterface'
import { isError as isErrorPredicate } from '@/types/predicates'
const { t } = useI18n()
const { stopHostingHApp, startHostingHApp } = useHposInterface()
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
const { showModal } = useModals()
Expand All @@ -18,34 +20,40 @@ const props = defineProps<{
hApp: HAppDetails
}>()
const emit = defineEmits(['close'])
const emit = defineEmits(['close', 'update:hosting'])
const isConfirmed = ref(false)
const isBusy = ref(false)
const isError = ref(false)
function confirm(): void {
async function confirm(): Promise<void> {
isBusy.value = true
let result = null
if (props.hApp.enabled) {
result = await stopHostingHApp(props.hApp.id)
} else {
result = await startHostingHApp(props.hApp.id)
}
// If failed
if (isErrorPredicate(result)) {
emit('close')
setTimeout(() => {
if (props.hApp.enabled) {
stopHostingHApp()
} else {
startHostingHApp()
}
// If failed
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
// showModal(EModal.error_modal)
// emit('close')
//
// isBusy.value = false
// isConfirmed.value = false
// If success
isBusy.value = false
isConfirmed.value = true
}, 2000)
isConfirmed.value = false
setTimeout(() => {
showModal(EModal.error_modal)
}, 300)
return
}
// If success
isBusy.value = false
isConfirmed.value = true
emit('update:hosting', !props.hApp.enabled)
}
function close(): void {
Expand All @@ -54,14 +62,6 @@ function close(): void {
isError.value = false
emit('close')
}
function startHostingHApp(): void {
console.log('NOT YET IMPLEMENTED: Starting hosting happ', props.hApp.name)
}
function stopHostingHApp(): void {
console.log('NOT YET IMPLEMENTED: Stopping hosting happ', props.hApp.name)
}
</script>

<template>
Expand Down
15 changes: 11 additions & 4 deletions src/components/hAppDetails/HAppDetailsContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@ const { t } = useI18n()
const props = defineProps<{
hApp: HAppDetails
}>()
const emit = defineEmits(['update:hosting'])
function updateHosting(isEnabled: boolean): void {
emit('update:hosting', isEnabled)
}
</script>

<template>
Expand Down Expand Up @@ -77,6 +83,7 @@ const props = defineProps<{
<HAppDetailsStopHosting
:h-app="props.hApp"
class="happ-details__main-column-stop-hosting"
@update:hosting="updateHosting"
/>
</div>

Expand Down Expand Up @@ -161,10 +168,10 @@ const props = defineProps<{
flex-direction: column;
}
&-header {
display: flex;
justify-content: space-between;
}
&-header {
display: flex;
justify-content: space-between;
}
&-name {
margin: 0 0 40px 0;
Expand Down
7 changes: 7 additions & 0 deletions src/components/hAppDetails/HAppDetailsStopHosting.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ const props = defineProps<{
hApp: HAppDetails
}>()
const emit = defineEmits(['update:hosting'])
const isHostingModalVisible = ref(false)
const isDisableHostingTooltipVisible = ref(false)
Expand All @@ -24,6 +26,10 @@ function openHostingModal(): void {
function closeHostingModal(): void {
isHostingModalVisible.value = false
}
function updateHosting(isEnabled: boolean): void {
emit('update:hosting', isEnabled)
}
</script>

<template>
Expand Down Expand Up @@ -55,6 +61,7 @@ function closeHostingModal(): void {
:h-app="props.hApp"
:is-visible="isHostingModalVisible"
:h-app-name="hApp?.name || ''"
@update:hosting="updateHosting"
@close="closeHostingModal"
/>
</div>
Expand Down
38 changes: 38 additions & 0 deletions src/interfaces/HposInterface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ interface HposInterface {
getUsage: () => Promise<UsageResponse | { error: unknown }>
getHostedHApps: () => Promise<HApp[] | { error: unknown }>
getHAppDetails: (id: string) => Promise<HAppDetails | { error: unknown }>
startHostingHApp: (id: string) => Promise<void | { error: unknown }>
stopHostingHApp: (id: string) => Promise<void | { error: unknown }>
getHostEarnings: () => Promise<HostEarnings | { error: unknown }>
getHostPreferences: () => Promise<HostPreferencesResponse | { error: unknown }>
checkAuth: (email: string, password: string, authToken: string) => Promise<CheckAuthResponse>
Expand Down Expand Up @@ -441,6 +443,40 @@ export function useHposInterface(): HposInterface {
}
}

async function startHostingHApp(
id: string
): Promise<HposHolochainCallResponse | { error: unknown }> {
try {
const result = await hposHolochainCall({
method: 'post',
pathPrefix: '/api/v2',
path: `/hosted_happs/${id}/enable`
})

return result
} catch (error) {
console.error('startHostingHApp encountered an error: ', error)
return { error }
}
}

async function stopHostingHApp(
id: string
): Promise<HposHolochainCallResponse | { error: unknown }> {
try {
const result = await hposHolochainCall({
method: 'post',
pathPrefix: '/api/v2',
path: `/hosted_happs/${id}/disable`
})

return result
} catch (error) {
console.error('stopHostingHApp encountered an error: ', error)
return { error }
}
}

async function getHostEarnings(): Promise<HposHolochainCallResponse | { error: unknown }> {
try {
return await hposHolochainCall({
Expand Down Expand Up @@ -790,6 +826,8 @@ export function useHposInterface(): HposInterface {
redeemHoloFuel,
getKycLevel,
getHAppDetails,
startHostingHApp,
stopHostingHApp,
HPOS_API_URL
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ export default {
identicon_explanation:
'This Identicon design and hash ID are both unique representations of this Host Console and associated HoloFuel address. Consider this address like a bank account, or crypto wallet. When you see this identicon, you know it’s your account.',
learn_more: 'Learn more',
loading: 'Loading...',
logout: 'Logout',
next: 'Next',
something_went_wrong: 'Something went wrong',
storage: 'Storage',
terms_of_service: 'Terms of Service',
try_again: 'Try again'
Expand Down
22 changes: 15 additions & 7 deletions src/pages/HappDetails.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import HAppDetailsContent from '@/components/hAppDetails/HAppDetailsContent.vue'
import PrimaryLayout from '@/components/PrimaryLayout.vue'
Expand All @@ -10,6 +11,8 @@ import { isError as isErrorPredicate } from '@/types/predicates'
const { getHAppDetails } = useHposInterface()
const currentRoute = useRoute()
const { t } = useI18n()
const hApp = ref<HAppDetails>()
const isLoading = ref(false)
const isError = ref(false)
Expand All @@ -20,16 +23,15 @@ const breadcrumbs = computed(() => [
path: '/happs'
},
{
label: isLoading.value ? 'Loading...' : hApp.value?.name ?? 'Something went wrong'
label: isLoading.value ? t('$.loading') : hApp.value?.name ?? t('$.something_went_wrong')
}
])
async function getData(): Promise<void> {
isError.value = false
isLoading.value = true
const result = await getHAppDetails(currentRoute.params.id)
isLoading.value = false
if (isErrorPredicate(result) && result.error) {
isError.value = true
Expand All @@ -42,11 +44,16 @@ async function getData(): Promise<void> {
isLoading.value = false
}
onMounted(() => {
getData()
})
function updateHosting(isEnabled: boolean): void {
hApp.value = {
...hApp.value,
enabled: isEnabled
}
}
onMounted(async () => {})
onMounted(async () => {
await getData()
})
</script>

<template>
Expand All @@ -59,6 +66,7 @@ onMounted(async () => {})
<HAppDetailsContent
v-if="hApp"
:h-app="hApp"
@update:hosting="updateHosting"
/>
</template>
</PrimaryLayout>
Expand Down

0 comments on commit 7260b97

Please sign in to comment.