95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import { useState, useCallback, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import type { Step, CallBackProps } from 'react-joyride';
|
|
import { ACTIONS, EVENTS, STATUS } from 'react-joyride';
|
|
|
|
const STORAGE_KEY = 'tutorial_completed';
|
|
|
|
export function useTutorial(initialLoading: boolean, isMobile: boolean, blocked = false) {
|
|
const { t } = useTranslation();
|
|
|
|
const steps: Step[] = useMemo(
|
|
() => [
|
|
{
|
|
target: '[data-tutorial="filters"]',
|
|
title: t('tutorial.step1Title'),
|
|
content: t('tutorial.step1Content'),
|
|
placement: 'right' as const,
|
|
disableBeacon: true,
|
|
},
|
|
{
|
|
target: '[data-tutorial="ai-filters"]',
|
|
title: t('tutorial.step2Title'),
|
|
content: t('tutorial.step2Content'),
|
|
placement: 'right' as const,
|
|
disableBeacon: true,
|
|
},
|
|
{
|
|
target: '[data-tutorial="map"]',
|
|
title: t('tutorial.step3Title'),
|
|
content: t('tutorial.step3Content'),
|
|
placement: 'bottom' as const,
|
|
disableBeacon: true,
|
|
},
|
|
{
|
|
target: '[data-tutorial="search"]',
|
|
title: t('tutorial.step4Title'),
|
|
content: t('tutorial.step4Content'),
|
|
placement: 'bottom' as const,
|
|
disableBeacon: true,
|
|
},
|
|
{
|
|
target: '[data-tutorial="right-pane"]',
|
|
title: t('tutorial.step5Title'),
|
|
content: t('tutorial.step5Content'),
|
|
placement: 'left' as const,
|
|
disableBeacon: true,
|
|
},
|
|
{
|
|
target: '[data-tutorial="poi-button"]',
|
|
title: t('tutorial.step6Title'),
|
|
content: t('tutorial.step6Content'),
|
|
placement: 'left' as const,
|
|
disableBeacon: true,
|
|
styles: { tooltip: { transform: 'translateY(-50px)' } },
|
|
},
|
|
],
|
|
[t]
|
|
);
|
|
|
|
const [run, setRun] = useState(() => {
|
|
if (isMobile) return false;
|
|
return !localStorage.getItem(STORAGE_KEY);
|
|
});
|
|
|
|
const shouldRun = run && !initialLoading && !isMobile && !blocked;
|
|
|
|
const handleCallback = useCallback((data: CallBackProps) => {
|
|
const { status, action, type } = data;
|
|
|
|
if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
|
|
localStorage.setItem(STORAGE_KEY, '1');
|
|
setRun(false);
|
|
}
|
|
// Also stop if user closes a tooltip via the X button
|
|
if (action === ACTIONS.CLOSE && type === EVENTS.STEP_AFTER) {
|
|
localStorage.setItem(STORAGE_KEY, '1');
|
|
setRun(false);
|
|
}
|
|
}, []);
|
|
|
|
const resetTutorial = useCallback(() => {
|
|
localStorage.removeItem(STORAGE_KEY);
|
|
setRun(true);
|
|
}, []);
|
|
|
|
return useMemo(
|
|
() => ({
|
|
steps,
|
|
run: shouldRun,
|
|
handleCallback,
|
|
resetTutorial,
|
|
}),
|
|
[steps, shouldRun, handleCallback, resetTutorial]
|
|
);
|
|
}
|