From 3f22464cc573536d27350d8cf63390f8b46c1fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren?= Date: Mon, 24 Jan 2022 11:27:19 +0100 Subject: [PATCH] Refactoring of types, variable names --- src/components/Tour.vue | 60 ++++++++++---------------- src/composables/useTour.ts | 87 +++++++++++++++++--------------------- 2 files changed, 62 insertions(+), 85 deletions(-) diff --git a/src/components/Tour.vue b/src/components/Tour.vue index c8783f4bb..31102148e 100644 --- a/src/components/Tour.vue +++ b/src/components/Tour.vue @@ -34,7 +34,7 @@ - @@ -98,7 +98,7 @@ import { } from '@vue/composition-api'; import Vue from 'vue'; import VueTour from 'vue-tour'; -import { TourStep, TourStepIndex, TourSteps, useFakeTx, useTour } from '../composables/useTour'; +import { MountedReturnFn, TourStep, TourStepIndex, TourSteps, useFakeTx, useTour } from '../composables/useTour'; import { useWindowSize } from '../composables/useWindowSize'; import CaretRightIcon from './icons/CaretRightIcon.vue'; @@ -128,11 +128,7 @@ export default defineComponent({ const nSteps: Ref = ref(0); const disableNextStep = ref(true); - let unmounted: ( - (args?: { goingForward: boolean, ending?: boolean }) => Promise) - | Promise - | ((args?: { goingForward: boolean, ending?: boolean }) => null) - | null = null; + let unmounted: MountedReturnFn | void; onMounted(() => { tourSetup(); @@ -145,29 +141,27 @@ export default defineComponent({ async function tourSetup() { await context.root.$nextTick(); // to ensure the DOM is ready + const step = steps[currentStep.value]; + // Update state nSteps.value = Object.keys(steps).length; disableNextStep.value = currentStep.value >= nSteps.value - 1 - || !!steps[currentStep.value].ui.isNextStepDisabled; + || !!step.ui.isNextStepDisabled; - if (steps[currentStep.value].lifecycle?.created) { - await steps[currentStep.value].lifecycle!.created!({ goToNextStep, goingForward: true }); - } + await step.lifecycle?.created?.({ goToNextStep, goingForward: true }); - _addAttributes(steps[currentStep.value].ui, currentStep.value); + _addAttributes(step.ui, currentStep.value); - if (steps[currentStep.value].lifecycle?.mounted) { - unmounted = await steps[currentStep.value].lifecycle!.mounted!({ goToNextStep, goingForward: true }); - } + unmounted = await step.lifecycle?.mounted?.({ goToNextStep, goingForward: true }); - if (context.root.$route.path !== steps[currentStep.value].path) { - context.root.$router.push(steps[currentStep.value].path); + if (context.root.$route.path !== step.path) { + context.root.$router.push(step.path); } await sleep(500); tour = context.root.$tours['nimiq-tour']; - tour!.start(`${currentStep.value}`); + tour.start(`${currentStep.value}`); loading.value = false; } @@ -177,9 +171,9 @@ export default defineComponent({ const app = document.querySelector('#app main') as HTMLDivElement; if (loading.value || disconnected.value) { - app!.setAttribute('data-non-interactable', ''); + app.setAttribute('data-non-interactable', ''); } else { - app!.removeAttribute('data-non-interactable'); + app.removeAttribute('data-non-interactable'); } }); @@ -201,24 +195,20 @@ export default defineComponent({ ) { const goingForward = futureStepIndex > currentStepIndex; - const { path: currentPage } = steps[currentStepIndex]; - const { path: futurePage, ui: futureUI, lifecycle: futureLifecycle } = steps[futureStepIndex]; + const { path: currentPath } = steps[currentStepIndex]; + const { path: futurePath, ui: futureUI, lifecycle: futureLifecycle } = steps[futureStepIndex]; loading.value = true; tour!.stop(); - if (unmounted) { - await (await unmounted)!({ goingForward }); - } + await unmounted?.({ goingForward }); - if (futureLifecycle?.created) { - await (futureLifecycle.created!)({ goToNextStep, goingForward }); - } + await futureLifecycle?.created?.({ goToNextStep, goingForward }); - if (futurePage !== currentPage && context.root.$route.fullPath !== futurePage) { + if (futurePath !== currentPath && context.root.$route.fullPath !== futurePath) { try { // Default prepare DOM - context.root.$router.push(futurePage); + context.root.$router.push(futurePath); await context.root.$nextTick(); } catch { // Ignore error @@ -227,7 +217,7 @@ export default defineComponent({ _addAttributes(futureUI, futureStepIndex); - if (futurePage !== currentPage) { + if (futurePath !== currentPath) { await sleep(500); } @@ -244,11 +234,7 @@ export default defineComponent({ loading.value = false; disableNextStep.value = futureStepIndex >= nSteps.value - 1 || !!futureUI.isNextStepDisabled; - if (futureLifecycle?.mounted) { - unmounted = await futureLifecycle!.mounted!({ goToNextStep, goingForward }); - } else { - unmounted = null; - } + unmounted = await futureLifecycle?.mounted?.({ goToNextStep, goingForward }); currentStep.value = futureStepIndex; } @@ -285,7 +271,7 @@ export default defineComponent({ _removeAttributes(currentStep.value); if (unmounted) { - await (await unmounted)!({ ending: true, goingForward: false }); + await unmounted({ ending: true, goingForward: false }); } // If user finalizes tour while it is loading, allow interaction again diff --git a/src/composables/useTour.ts b/src/composables/useTour.ts index 0c30ac4f5..119848835 100644 --- a/src/composables/useTour.ts +++ b/src/composables/useTour.ts @@ -36,12 +36,7 @@ export interface LifecycleArgs { goingForward: boolean; } -export type MountedFnReturn = - Promise<(args?: { goingForward: boolean, ending?: boolean }) => Promise> - | Promise<(args?: { goingForward: boolean, ending?: boolean }) => null> - | ((args?: { goingForward: boolean, ending?: boolean }) => Promise) - | Promise - | null; +export type MountedReturnFn = ((args?: { goingForward: boolean, ending?: boolean }) => Promise | void); export interface TourStep { path: '/' | '/transactions' | '/?sidebar=true' | '/network'; @@ -61,7 +56,7 @@ export interface TourStep { lifecycle?: { created?: (args: LifecycleArgs) => Promise | void, - mounted?: (args: LifecycleArgs) => MountedFnReturn, + mounted?: (args: LifecycleArgs) => MountedReturnFn | Promise | void, }; ui: { @@ -83,12 +78,12 @@ export type TourSteps = { export function useFakeTx(): Transaction { return { transactionHash: '0x123', - format: 'nim', + format: 'basic', timestamp: 1532739000, - sender: useAddressStore().activeAddress.value || '', - recipient: '0x123', - senderType: 'nim', - recipientType: 'nim', + sender: 'NQ02 YP68 BA76 0KR3 QY9C SF0K LP8Q THB6 LTKU', + recipient: useAddressStore().activeAddress.value || 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000', + senderType: 'basic', + recipientType: 'basic', blockHeight: 1, blockHash: '0x123456789ABCDEF', value: 100_000, @@ -160,7 +155,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps useTransactionsStore().state.transactions, (txs) => { - if (Object.values(txs).length > 0) { - // Once the user has at least one transaction, tooltip in step TRANSACTIONS_LIST - // is modified - steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].tooltip = { - target: '.vue-recycle-scroller__item-wrapper', - content: ['This is where all your transactions will appear.'], - params: { - placement: 'bottom', - }, - }; - steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].ui.isNextStepDisabled = false; - toggleDisabledAttribute('.address-overview .transaction-list a button', true); - steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].lifecycle = { - created: async () => { - await toggleDisabledAttribute( - '.address-overview .transaction-list a button', true); - }, - async mounted() { - return (args) => { - if (args?.ending || !args?.goingForward) { - setTimeout(() => { - toggleDisabledAttribute( - '.address-overview .transaction-list a button', false); - }, args?.ending ? 0 : 1000); - } - return null; - }; - }, - }; + if (!Object.values(txs).length) { + unwatch(); + return; } + + // Once the user has at least one transaction, tooltip in step TRANSACTIONS_LIST + // is modified + steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].tooltip = { + target: '.vue-recycle-scroller__item-wrapper', + content: ['This is where all your transactions will appear.'], + params: { + placement: 'bottom', + }, + }; + steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].ui.isNextStepDisabled = false; + toggleDisabledAttribute('.address-overview .transaction-list a button', true); + steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].lifecycle = { + created: async () => { + await toggleDisabledAttribute( + '.address-overview .transaction-list a button', true); + }, + mounted() { + return (args) => { + if (args?.ending || !args?.goingForward) { + setTimeout(() => { + toggleDisabledAttribute( + '.address-overview .transaction-list a button', false); + }, args?.ending ? 0 : 1000); + } + }; + }, + }; unwatch(); }); } - return null; }, }, ui: { @@ -255,14 +250,13 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps { await toggleDisabledAttribute('.address-overview .transaction-list a button', true); }, - async mounted() { + mounted() { return (args) => { if (args?.ending || args?.goingForward) { setTimeout(() => { toggleDisabledAttribute('.address-overview .transaction-list a button', false); }, args?.ending ? 0 : 1000); } - return null; }; }, }, @@ -364,8 +358,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps button.reset') as HTMLButtonElement; hamburguerIcon!.addEventListener('click', () => goToNextStep(), { once: true, capture: true }); - - return null; }, }, ui: { @@ -414,7 +406,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps