Skip to content

Commit

Permalink
Refactoring of types, variable names
Browse files Browse the repository at this point in the history
  • Loading branch information
@sisou
sisou committed Jan 24, 2022
1 parent 60874a3 commit 3f22464
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 85 deletions.
60 changes: 23 additions & 37 deletions src/components/Tour.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<button @click="tour.previousStep" v-if="!isMobile">
{{ $t("Previous step") }}
</button>
<button class="right" @click="tour.steps[tour.currentStep].button.fn()"
<button class="right" @click="() => tour.steps[tour.currentStep].button.fn()"
v-if="tour.steps[tour.currentStep].button">
{{ $t(tour.steps[tour.currentStep].button.text) }}
</button>
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -128,11 +128,7 @@ export default defineComponent({
const nSteps: Ref<number> = ref(0);
const disableNextStep = ref(true);
let unmounted: (
(args?: { goingForward: boolean, ending?: boolean }) => Promise<null>)
| Promise<null>
| ((args?: { goingForward: boolean, ending?: boolean }) => null)
| null = null;
let unmounted: MountedReturnFn | void;
onMounted(() => {
tourSetup();
Expand All @@ -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;
}
Expand All @@ -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');
}
});
Expand All @@ -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
Expand All @@ -227,7 +217,7 @@ export default defineComponent({
_addAttributes(futureUI, futureStepIndex);
if (futurePage !== currentPage) {
if (futurePath !== currentPath) {
await sleep(500);
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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
Expand Down
87 changes: 39 additions & 48 deletions src/composables/useTour.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,7 @@ export interface LifecycleArgs {
goingForward: boolean;
}

export type MountedFnReturn =
Promise<(args?: { goingForward: boolean, ending?: boolean }) => Promise<null>>
| Promise<(args?: { goingForward: boolean, ending?: boolean }) => null>
| ((args?: { goingForward: boolean, ending?: boolean }) => Promise<null>)
| Promise<null>
| null;
export type MountedReturnFn = ((args?: { goingForward: boolean, ending?: boolean }) => Promise<void> | void);

export interface TourStep {
path: '/' | '/transactions' | '/?sidebar=true' | '/network';
Expand All @@ -61,7 +56,7 @@ export interface TourStep {

lifecycle?: {
created?: (args: LifecycleArgs) => Promise<void> | void,
mounted?: (args: LifecycleArgs) => MountedFnReturn,
mounted?: (args: LifecycleArgs) => MountedReturnFn | Promise<MountedReturnFn | void> | void,
};

ui: {
Expand All @@ -83,12 +78,12 @@ export type TourSteps<T extends number> = {
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,
Expand Down Expand Up @@ -160,7 +155,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
await root.$nextTick();
}
addressButton!.removeEventListener('click', onClick, true);
return null;
};
},
},
Expand Down Expand Up @@ -192,40 +186,41 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard

if (Object.values(transactions.value || []).length === 0) {
const unwatch = root.$watch(() => 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: {
Expand Down Expand Up @@ -255,14 +250,13 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
created: async () => {
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;
};
},
},
Expand Down Expand Up @@ -364,8 +358,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
.querySelector('.account-overview .mobile-menu-bar > button.reset') as HTMLButtonElement;

hamburguerIcon!.addEventListener('click', () => goToNextStep(), { once: true, capture: true });

return null;
},
},
ui: {
Expand Down Expand Up @@ -414,7 +406,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
closeBtn.click();

await sleep(500); // TODO Check this random value
return null;
};
},
},
Expand Down

0 comments on commit 3f22464

Please sign in to comment.