Skip to content

Commit 872c9a4

Browse files
sisouonmax
sisou
authored and
onmax
committed
Refactoring of types, variable names
1 parent 38fdebd commit 872c9a4

File tree

2 files changed

+62
-85
lines changed

2 files changed

+62
-85
lines changed

‎src/components/Tour.vue‎

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<button @click="tour.previousStep" v-if="!isMobile">
3535
{{ $t("Previous step") }}
3636
</button>
37-
<button class="right" @click="tour.steps[tour.currentStep].button.fn()"
37+
<button class="right" @click="() => tour.steps[tour.currentStep].button.fn()"
3838
v-if="tour.steps[tour.currentStep].button">
3939
{{ $t(tour.steps[tour.currentStep].button.text) }}
4040
</button>
@@ -98,7 +98,7 @@ import {
9898
} from '@vue/composition-api';
9999
import Vue from 'vue';
100100
import VueTour from 'vue-tour';
101-
import { TourStep, TourStepIndex, TourSteps, useFakeTx, useTour } from '../composables/useTour';
101+
import { MountedReturnFn, TourStep, TourStepIndex, TourSteps, useFakeTx, useTour } from '../composables/useTour';
102102
import { useWindowSize } from '../composables/useWindowSize';
103103
import CaretRightIcon from './icons/CaretRightIcon.vue';
104104
@@ -128,11 +128,7 @@ export default defineComponent({
128128
const nSteps: Ref<number> = ref(0);
129129
const disableNextStep = ref(true);
130130
131-
let unmounted: (
132-
(args?: { goingForward: boolean, ending?: boolean }) => Promise<null>)
133-
| Promise<null>
134-
| ((args?: { goingForward: boolean, ending?: boolean }) => null)
135-
| null = null;
131+
let unmounted: MountedReturnFn | void;
136132
137133
onMounted(() => {
138134
tourSetup();
@@ -145,29 +141,27 @@ export default defineComponent({
145141
async function tourSetup() {
146142
await context.root.$nextTick(); // to ensure the DOM is ready
147143
144+
const step = steps[currentStep.value];
145+
148146
// Update state
149147
nSteps.value = Object.keys(steps).length;
150148
disableNextStep.value = currentStep.value >= nSteps.value - 1
151-
|| !!steps[currentStep.value].ui.isNextStepDisabled;
149+
|| !!step.ui.isNextStepDisabled;
152150
153-
if (steps[currentStep.value].lifecycle?.created) {
154-
await steps[currentStep.value].lifecycle!.created!({ goToNextStep, goingForward: true });
155-
}
151+
await step.lifecycle?.created?.({ goToNextStep, goingForward: true });
156152
157-
_addAttributes(steps[currentStep.value].ui, currentStep.value);
153+
_addAttributes(step.ui, currentStep.value);
158154
159-
if (steps[currentStep.value].lifecycle?.mounted) {
160-
unmounted = await steps[currentStep.value].lifecycle!.mounted!({ goToNextStep, goingForward: true });
161-
}
155+
unmounted = await step.lifecycle?.mounted?.({ goToNextStep, goingForward: true });
162156
163-
if (context.root.$route.path !== steps[currentStep.value].path) {
164-
context.root.$router.push(steps[currentStep.value].path);
157+
if (context.root.$route.path !== step.path) {
158+
context.root.$router.push(step.path);
165159
}
166160
167161
await sleep(500);
168162
169163
tour = context.root.$tours['nimiq-tour'];
170-
tour!.start(`${currentStep.value}`);
164+
tour.start(`${currentStep.value}`);
171165
loading.value = false;
172166
}
173167
@@ -177,9 +171,9 @@ export default defineComponent({
177171
const app = document.querySelector('#app main') as HTMLDivElement;
178172
179173
if (loading.value || disconnected.value) {
180-
app!.setAttribute('data-non-interactable', '');
174+
app.setAttribute('data-non-interactable', '');
181175
} else {
182-
app!.removeAttribute('data-non-interactable');
176+
app.removeAttribute('data-non-interactable');
183177
}
184178
});
185179
@@ -201,24 +195,20 @@ export default defineComponent({
201195
) {
202196
const goingForward = futureStepIndex > currentStepIndex;
203197
204-
const { path: currentPage } = steps[currentStepIndex];
205-
const { path: futurePage, ui: futureUI, lifecycle: futureLifecycle } = steps[futureStepIndex];
198+
const { path: currentPath } = steps[currentStepIndex];
199+
const { path: futurePath, ui: futureUI, lifecycle: futureLifecycle } = steps[futureStepIndex];
206200
207201
loading.value = true;
208202
tour!.stop();
209203
210-
if (unmounted) {
211-
await (await unmounted)!({ goingForward });
212-
}
204+
await unmounted?.({ goingForward });
213205
214-
if (futureLifecycle?.created) {
215-
await (futureLifecycle.created!)({ goToNextStep, goingForward });
216-
}
206+
await futureLifecycle?.created?.({ goToNextStep, goingForward });
217207
218-
if (futurePage !== currentPage && context.root.$route.fullPath !== futurePage) {
208+
if (futurePath !== currentPath && context.root.$route.fullPath !== futurePath) {
219209
try {
220210
// Default prepare DOM
221-
context.root.$router.push(futurePage);
211+
context.root.$router.push(futurePath);
222212
await context.root.$nextTick();
223213
} catch {
224214
// Ignore error
@@ -227,7 +217,7 @@ export default defineComponent({
227217
228218
_addAttributes(futureUI, futureStepIndex);
229219
230-
if (futurePage !== currentPage) {
220+
if (futurePath !== currentPath) {
231221
await sleep(500);
232222
}
233223
@@ -244,11 +234,7 @@ export default defineComponent({
244234
loading.value = false;
245235
disableNextStep.value = futureStepIndex >= nSteps.value - 1 || !!futureUI.isNextStepDisabled;
246236
247-
if (futureLifecycle?.mounted) {
248-
unmounted = await futureLifecycle!.mounted!({ goToNextStep, goingForward });
249-
} else {
250-
unmounted = null;
251-
}
237+
unmounted = await futureLifecycle?.mounted?.({ goToNextStep, goingForward });
252238
253239
currentStep.value = futureStepIndex;
254240
}
@@ -285,7 +271,7 @@ export default defineComponent({
285271
_removeAttributes(currentStep.value);
286272
287273
if (unmounted) {
288-
await (await unmounted)!({ ending: true, goingForward: false });
274+
await unmounted({ ending: true, goingForward: false });
289275
}
290276
291277
// If user finalizes tour while it is loading, allow interaction again

‎src/composables/useTour.ts‎

Lines changed: 39 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,7 @@ export interface LifecycleArgs {
3636
goingForward: boolean;
3737
}
3838

39-
export type MountedFnReturn =
40-
Promise<(args?: { goingForward: boolean, ending?: boolean }) => Promise<null>>
41-
| Promise<(args?: { goingForward: boolean, ending?: boolean }) => null>
42-
| ((args?: { goingForward: boolean, ending?: boolean }) => Promise<null>)
43-
| Promise<null>
44-
| null;
39+
export type MountedReturnFn = ((args?: { goingForward: boolean, ending?: boolean }) => Promise<void> | void);
4540

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

6257
lifecycle?: {
6358
created?: (args: LifecycleArgs) => Promise<void> | void,
64-
mounted?: (args: LifecycleArgs) => MountedFnReturn,
59+
mounted?: (args: LifecycleArgs) => MountedReturnFn | Promise<MountedReturnFn | void> | void,
6560
};
6661

6762
ui: {
@@ -83,12 +78,12 @@ export type TourSteps<T extends number> = {
8378
export function useFakeTx(): Transaction {
8479
return {
8580
transactionHash: '0x123',
86-
format: 'nim',
81+
format: 'basic',
8782
timestamp: 1532739000,
88-
sender: useAddressStore().activeAddress.value || '',
89-
recipient: '0x123',
90-
senderType: 'nim',
91-
recipientType: 'nim',
83+
sender: 'NQ02 YP68 BA76 0KR3 QY9C SF0K LP8Q THB6 LTKU',
84+
recipient: useAddressStore().activeAddress.value || 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000',
85+
senderType: 'basic',
86+
recipientType: 'basic',
9287
blockHeight: 1,
9388
blockHash: '0x123456789ABCDEF',
9489
value: 100_000,
@@ -160,7 +155,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
160155
await root.$nextTick();
161156
}
162157
addressButton!.removeEventListener('click', onClick, true);
163-
return null;
164158
};
165159
},
166160
},
@@ -192,40 +186,41 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
192186

193187
if (Object.values(transactions.value || []).length === 0) {
194188
const unwatch = root.$watch(() => useTransactionsStore().state.transactions, (txs) => {
195-
if (Object.values(txs).length > 0) {
196-
// Once the user has at least one transaction, tooltip in step TRANSACTIONS_LIST
197-
// is modified
198-
steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].tooltip = {
199-
target: '.vue-recycle-scroller__item-wrapper',
200-
content: ['This is where all your transactions will appear.'],
201-
params: {
202-
placement: 'bottom',
203-
},
204-
};
205-
steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].ui.isNextStepDisabled = false;
206-
toggleDisabledAttribute('.address-overview .transaction-list a button', true);
207-
steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].lifecycle = {
208-
created: async () => {
209-
await toggleDisabledAttribute(
210-
'.address-overview .transaction-list a button', true);
211-
},
212-
async mounted() {
213-
return (args) => {
214-
if (args?.ending || !args?.goingForward) {
215-
setTimeout(() => {
216-
toggleDisabledAttribute(
217-
'.address-overview .transaction-list a button', false);
218-
}, args?.ending ? 0 : 1000);
219-
}
220-
return null;
221-
};
222-
},
223-
};
189+
if (!Object.values(txs).length) {
190+
unwatch();
191+
return;
224192
}
193+
194+
// Once the user has at least one transaction, tooltip in step TRANSACTIONS_LIST
195+
// is modified
196+
steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].tooltip = {
197+
target: '.vue-recycle-scroller__item-wrapper',
198+
content: ['This is where all your transactions will appear.'],
199+
params: {
200+
placement: 'bottom',
201+
},
202+
};
203+
steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].ui.isNextStepDisabled = false;
204+
toggleDisabledAttribute('.address-overview .transaction-list a button', true);
205+
steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].lifecycle = {
206+
created: async () => {
207+
await toggleDisabledAttribute(
208+
'.address-overview .transaction-list a button', true);
209+
},
210+
mounted() {
211+
return (args) => {
212+
if (args?.ending || !args?.goingForward) {
213+
setTimeout(() => {
214+
toggleDisabledAttribute(
215+
'.address-overview .transaction-list a button', false);
216+
}, args?.ending ? 0 : 1000);
217+
}
218+
};
219+
},
220+
};
225221
unwatch();
226222
});
227223
}
228-
return null;
229224
},
230225
},
231226
ui: {
@@ -255,14 +250,13 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
255250
created: async () => {
256251
await toggleDisabledAttribute('.address-overview .transaction-list a button', true);
257252
},
258-
async mounted() {
253+
mounted() {
259254
return (args) => {
260255
if (args?.ending || args?.goingForward) {
261256
setTimeout(() => {
262257
toggleDisabledAttribute('.address-overview .transaction-list a button', false);
263258
}, args?.ending ? 0 : 1000);
264259
}
265-
return null;
266260
};
267261
},
268262
},
@@ -364,8 +358,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
364358
.querySelector('.account-overview .mobile-menu-bar > button.reset') as HTMLButtonElement;
365359

366360
hamburguerIcon!.addEventListener('click', () => goToNextStep(), { once: true, capture: true });
367-
368-
return null;
369361
},
370362
},
371363
ui: {
@@ -414,7 +406,6 @@ function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboard
414406
closeBtn.click();
415407

416408
await sleep(500); // TODO Check this random value
417-
return null;
418409
};
419410
},
420411
},

0 commit comments

Comments
 (0)