Qortal-Hub/src/hooks/useHandleTutorials.tsx
2025-05-18 21:42:19 +02:00

213 lines
6.6 KiB
TypeScript

import { useCallback, useEffect, useMemo, useState } from 'react';
import { saveToLocalStorage } from '../components/Apps/AppsNavBarDesktop';
import creationImg from '../components/Tutorials/img/creation.webp';
import dashboardImg from '../components/Tutorials/img/dashboard.webp';
import groupsImg from '../components/Tutorials/img/groups.webp';
import importantImg from '../components/Tutorials/img/important.webp';
import navigationImg from '../components/Tutorials/img/navigation.webp';
import overviewImg from '../components/Tutorials/img/overview.webp';
import startedImg from '../components/Tutorials/img/started.webp';
import obtainingImg from '../components/Tutorials/img/obtaining-qort.jpg';
import { useTranslation } from 'react-i18next';
const checkIfGatewayIsOnline = async () => {
try {
const url = `https://ext-node.qortal.link/admin/status`;
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
if (data?.height) {
return true;
}
return false;
} catch (error) {
return false;
}
};
export const useHandleTutorials = () => {
const [openTutorialModal, setOpenTutorialModal] = useState<any>(null);
const [shownTutorials, setShowTutorials] = useState(null);
const { t } = useTranslation(['core', 'tutorial']);
useEffect(() => {
try {
const storedData = localStorage.getItem('shown-tutorials');
if (storedData) {
setShowTutorials(JSON.parse(storedData));
} else {
setShowTutorials({});
}
} catch (error) {
//error
}
}, []);
const saveShowTutorial = useCallback((type) => {
try {
setShowTutorials((prev) => {
return {
...(prev || {}),
[type]: true,
};
});
saveToLocalStorage('shown-tutorials', type, true);
} catch (error) {
//error
}
}, []);
const showTutorial = useCallback(
async (type, isForce) => {
try {
const isOnline = await checkIfGatewayIsOnline();
if (!isOnline) return;
switch (type) {
case 'create-account':
{
if ((shownTutorials || {})['create-account'] && !isForce) return;
saveShowTutorial('create-account');
setOpenTutorialModal({
title: 'Account Creation',
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'account-creation-hub',
poster: creationImg,
},
});
}
break;
case 'important-information':
{
if ((shownTutorials || {})['important-information'] && !isForce)
return;
saveShowTutorial('important-information');
setOpenTutorialModal({
title: 'Important Information!',
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'important-information-hub',
poster: importantImg,
},
});
}
break;
case 'getting-started':
{
if ((shownTutorials || {})['getting-started'] && !isForce) return;
saveShowTutorial('getting-started');
setOpenTutorialModal({
multi: [
{
title: t('tutorial:1_getting_started', {
postProcess: 'capitalizeFirstChar',
}),
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'getting-started-hub',
poster: startedImg,
},
},
{
title: t('tutorial:2_overview', {
postProcess: 'capitalizeFirstChar',
}),
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'overview-hub',
poster: overviewImg,
},
},
{
title: t('tutorial:3_groups', {
postProcess: 'capitalizeFirstChar',
}),
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'groups-hub',
poster: groupsImg,
},
},
{
title: t('tutorial:4_obtain_qort', {
postProcess: 'capitalizeFirstChar',
}),
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'obtaining-qort',
poster: obtainingImg,
},
},
],
});
}
break;
case 'qapps':
{
if ((shownTutorials || {})['qapps'] && !isForce) return;
saveShowTutorial('qapps');
setOpenTutorialModal({
multi: [
{
title: t('tutorial:apps.dashboard', {
postProcess: 'capitalizeFirstChar',
}),
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'apps-dashboard-hub',
poster: dashboardImg,
},
},
{
title: t('tutorial:apps.navigation', {
postProcess: 'capitalizeFirstChar',
}),
resource: {
name: 'a-test',
service: 'VIDEO',
identifier: 'apps-navigation-hub',
poster: navigationImg,
},
},
],
});
}
break;
default:
break;
}
} catch (error) {
//error
}
},
[shownTutorials]
);
return useMemo(
() => ({
showTutorial,
hasSeenGettingStarted:
shownTutorials === null
? null
: !!(shownTutorials || {})['getting-started'],
openTutorialModal,
setOpenTutorialModal,
shownTutorialsInitiated: !!shownTutorials,
}),
[showTutorial, openTutorialModal, setOpenTutorialModal, shownTutorials]
);
};