From c4f7d150de5056803ad12fde5a533d9a69b799b3 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 13:53:57 +0200 Subject: [PATCH] Use desktop file --- src/components/Apps/AppInfo.tsx | 350 +++++++++--------- src/components/Apps/AppInfoSnippet.tsx | 292 ++++++++------- src/components/Apps/SortablePinnedApps.tsx | 2 +- src/components/ContextMenuPinnedApps.tsx | 300 ++++++++------- src/components/Save/Save.tsx | 2 +- .../Tutorials/useHandleTutorials.tsx | 334 ++++++++--------- 6 files changed, 682 insertions(+), 598 deletions(-) diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index ad36163..b1254d5 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState } from 'react'; import { AppCircle, AppCircleContainer, @@ -19,191 +19,211 @@ import { AppsLibraryContainer, AppsParent, AppsWidthLimiter, -} from "./Apps-styles"; -import { Avatar, Box, ButtonBase, InputBase } from "@mui/material"; -import { Add } from "@mui/icons-material"; -import { getBaseApiReact, isMobile } from "../../App"; -import LogoSelected from "../../assets/svgs/LogoSelected.svg"; +} from './Apps-styles'; +import { Avatar, Box, ButtonBase, InputBase } from '@mui/material'; +import { Add } from '@mui/icons-material'; +import { getBaseApiReact, isMobile } from '../../App'; +import LogoSelected from '../../assets/svgs/LogoSelected.svg'; -import { Spacer } from "../../common/Spacer"; -import { executeEvent } from "../../utils/events"; -import { AppRating } from "./AppRating"; -import { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom } from "../../atoms/global"; -import { saveToLocalStorage } from "./AppsNavBar"; -import { useRecoilState, useSetRecoilState } from "recoil"; +import { Spacer } from '../../common/Spacer'; +import { executeEvent } from '../../utils/events'; +import { AppRating } from './AppRating'; +import { + settingsLocalLastUpdatedAtom, + sortablePinnedAppsAtom, +} from '../../atoms/global'; +import { saveToLocalStorage } from './AppsNavBarDesktop'; +import { useRecoilState, useSetRecoilState } from 'recoil'; export const AppInfo = ({ app, myName }) => { - const isInstalled = app?.status?.status === "READY"; - const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom); + const isInstalled = app?.status?.status === 'READY'; + const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( + sortablePinnedAppsAtom + ); - const isSelectedAppPinned = !!sortablePinnedApps?.find((item)=> item?.name === app?.name && item?.service === app?.service) - const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom); + const isSelectedAppPinned = !!sortablePinnedApps?.find( + (item) => item?.name === app?.name && item?.service === app?.service + ); + const setSettingsLocalLastUpdated = useSetRecoilState( + settingsLocalLastUpdatedAtom + ); return ( - - - - {!isMobile && } - - - - + {!isMobile && } + + + - - - center-icon - - - - - - {app?.metadata?.title || app?.name} - - - {app?.name} - - - - - - - - { - setSortablePinnedApps((prev) => { - let updatedApps; - - if (isSelectedAppPinned) { - // Remove the selected app if it is pinned - updatedApps = prev.filter( - (item) => !(item?.name === app?.name && item?.service === app?.service) + alt={app?.name} + src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${ + app?.name + }/qortal_avatar?async=true`} + > + center-icon + + + + + + {app?.metadata?.title || app?.name} + + + {app?.name} + + + + + + + + { + setSortablePinnedApps((prev) => { + let updatedApps; + + if (isSelectedAppPinned) { + // Remove the selected app if it is pinned + updatedApps = prev.filter( + (item) => + !( + item?.name === app?.name && + item?.service === app?.service + ) + ); + } else { + // Add the selected app if it is not pinned + updatedApps = [ + ...prev, + { + name: app?.name, + service: app?.service, + }, + ]; + } + + saveToLocalStorage( + 'ext_saved_settings', + 'sortablePinnedApps', + updatedApps ); - } else { - // Add the selected app if it is not pinned - updatedApps = [...prev, { - name: app?.name, - service: app?.service, - }]; - } - - saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', updatedApps) - return updatedApps; - }); - setSettingsLocalLastUpdated(Date.now()) - }} - sx={{ - backgroundColor: "#359ff7ff", - width: "100%", - maxWidth: "320px", - height: "29px", - opacity: isSelectedAppPinned ? 0.6 : 1 - }} - > - - {!isMobile ? ( - <> - {isSelectedAppPinned ? 'Unpin from dashboard' : 'Pin to dashboard'} - - ) : ( - <> - {isSelectedAppPinned ? 'Unpin' : 'Pin'} - - )} - - - - { - executeEvent("addTab", { - data: app, - }); - }} - sx={{ - backgroundColor: isInstalled ? "#0091E1" : "#247C0E", - width: "100%", - maxWidth: "320px", - height: "29px", - }} - > - - {isInstalled ? "Open" : "Download"} - - - - - - - - - - - - - - Category: - - - {app?.metadata?.categoryName || "none"} - - - - - About this Q-App - - - - {app?.metadata?.description || "No description"} - + return updatedApps; + }); + setSettingsLocalLastUpdated(Date.now()); + }} + sx={{ + backgroundColor: '#359ff7ff', + width: '100%', + maxWidth: '320px', + height: '29px', + opacity: isSelectedAppPinned ? 0.6 : 1, + }} + > + + {!isMobile ? ( + <> + {isSelectedAppPinned + ? 'Unpin from dashboard' + : 'Pin to dashboard'} + + ) : ( + <>{isSelectedAppPinned ? 'Unpin' : 'Pin'} + )} + + + { + executeEvent('addTab', { + data: app, + }); + }} + sx={{ + backgroundColor: isInstalled ? '#0091E1' : '#247C0E', + width: '100%', + maxWidth: '320px', + height: '29px', + }} + > + + {isInstalled ? 'Open' : 'Download'} + + + + + + + + + + + + + Category: + + + {app?.metadata?.categoryName || 'none'} + + + + + About this Q-App + + + + {app?.metadata?.description || 'No description'} + ); diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx index 4870474..4cef858 100644 --- a/src/components/Apps/AppInfoSnippet.tsx +++ b/src/components/Apps/AppInfoSnippet.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; import { AppCircle, AppCircleContainer, @@ -10,148 +10,180 @@ import { AppInfoSnippetMiddle, AppInfoSnippetRight, AppInfoUserName, -} from "./Apps-styles"; -import { Avatar, ButtonBase } from "@mui/material"; -import { getBaseApiReact, isMobile } from "../../App"; -import LogoSelected from "../../assets/svgs/LogoSelected.svg"; +} from './Apps-styles'; +import { Avatar, ButtonBase } from '@mui/material'; +import { getBaseApiReact, isMobile } from '../../App'; +import LogoSelected from '../../assets/svgs/LogoSelected.svg'; -import { Spacer } from "../../common/Spacer"; -import { executeEvent } from "../../utils/events"; -import { AppRating } from "./AppRating"; -import { useRecoilState, useSetRecoilState } from "recoil"; -import { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom } from "../../atoms/global"; -import { saveToLocalStorage } from "./AppsNavBar"; +import { Spacer } from '../../common/Spacer'; +import { executeEvent } from '../../utils/events'; +import { AppRating } from './AppRating'; +import { useRecoilState, useSetRecoilState } from 'recoil'; +import { + settingsLocalLastUpdatedAtom, + sortablePinnedAppsAtom, +} from '../../atoms/global'; +import { saveToLocalStorage } from './AppsNavBarDesktop'; -export const AppInfoSnippet = ({ app, myName, isFromCategory, parentStyles = {} }) => { +export const AppInfoSnippet = ({ + app, + myName, + isFromCategory, + parentStyles = {}, +}) => { + const isInstalled = app?.status?.status === 'READY'; + const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( + sortablePinnedAppsAtom + ); - const isInstalled = app?.status?.status === 'READY' - const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom); - - const isSelectedAppPinned = !!sortablePinnedApps?.find((item)=> item?.name === app?.name && item?.service === app?.service) - const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom); + const isSelectedAppPinned = !!sortablePinnedApps?.find( + (item) => item?.name === app?.name && item?.service === app?.service + ); + const setSettingsLocalLastUpdated = useSetRecoilState( + settingsLocalLastUpdatedAtom + ); return ( - + - { - if(isFromCategory){ - executeEvent("selectedAppInfoCategory", { + { + if (isFromCategory) { + executeEvent('selectedAppInfoCategory', { + data: app, + }); + return; + } + executeEvent('selectedAppInfo', { data: app, }); - return - } - executeEvent("selectedAppInfo", { - data: app, - }); - }} - > - - + + + + center-icon + + + + + + { + if (isFromCategory) { + executeEvent('selectedAppInfoCategory', { + data: app, + }); + return; + } + executeEvent('selectedAppInfo', { + data: app, + }); }} > - - center-icon - - - - - - - { - if(isFromCategory){ - executeEvent("selectedAppInfoCategory", { - data: app, - }); - return - } - executeEvent("selectedAppInfo", { - data: app, - }); - }}> - - {app?.metadata?.title || app?.name} - - - - - { app?.name} - + {app?.metadata?.title || app?.name} + + + {app?.name} - + - + {!isMobile && ( - { - - setSortablePinnedApps((prev) => { - let updatedApps; - - if (isSelectedAppPinned) { - // Remove the selected app if it is pinned - updatedApps = prev.filter( - (item) => !(item?.name === app?.name && item?.service === app?.service) - ); - } else { - // Add the selected app if it is not pinned - updatedApps = [...prev, { - name: app?.name, - service: app?.service, - }]; - } - - saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', updatedApps) - return updatedApps; - }); - setSettingsLocalLastUpdated(Date.now()) - }} sx={{ - backgroundColor: '#359ff7ff', - opacity: isSelectedAppPinned ? 0.6 : 1 - - }}> - {isSelectedAppPinned ? 'Unpin' : 'Pin'} - - )} - - { - - executeEvent("addTab", { - data: app - }) - }} sx={{ - backgroundColor: isInstalled ? '#0091E1' : '#247C0E', - - }}> - {isInstalled ? 'Open' : 'Download'} + { + setSortablePinnedApps((prev) => { + let updatedApps; + + if (isSelectedAppPinned) { + // Remove the selected app if it is pinned + updatedApps = prev.filter( + (item) => + !( + item?.name === app?.name && + item?.service === app?.service + ) + ); + } else { + // Add the selected app if it is not pinned + updatedApps = [ + ...prev, + { + name: app?.name, + service: app?.service, + }, + ]; + } + + saveToLocalStorage( + 'ext_saved_settings', + 'sortablePinnedApps', + updatedApps + ); + return updatedApps; + }); + setSettingsLocalLastUpdated(Date.now()); + }} + sx={{ + backgroundColor: '#359ff7ff', + opacity: isSelectedAppPinned ? 0.6 : 1, + }} + > + + {' '} + {isSelectedAppPinned ? 'Unpin' : 'Pin'} + + + )} + + { + executeEvent('addTab', { + data: app, + }); + }} + sx={{ + backgroundColor: isInstalled ? '#0091E1' : '#247C0E', + }} + > + + {isInstalled ? 'Open' : 'Download'} + diff --git a/src/components/Apps/SortablePinnedApps.tsx b/src/components/Apps/SortablePinnedApps.tsx index 30dcec7..f9a24a7 100644 --- a/src/components/Apps/SortablePinnedApps.tsx +++ b/src/components/Apps/SortablePinnedApps.tsx @@ -23,7 +23,7 @@ import { sortablePinnedAppsAtom, } from '../../atoms/global'; import { useRecoilState, useSetRecoilState } from 'recoil'; -import { saveToLocalStorage } from './AppsNavBar'; +import { saveToLocalStorage } from './AppsNavBarDesktop'; import { ContextMenuPinnedApps } from '../ContextMenuPinnedApps'; import LockIcon from '@mui/icons-material/Lock'; import { useHandlePrivateApps } from './useHandlePrivateApps'; diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx index bb64a4c..7dad268 100644 --- a/src/components/ContextMenuPinnedApps.tsx +++ b/src/components/ContextMenuPinnedApps.tsx @@ -1,152 +1,182 @@ import React, { useState, useRef } from 'react'; -import { ListItemIcon, Menu, MenuItem, Typography, styled } from '@mui/material'; +import { + ListItemIcon, + Menu, + MenuItem, + Typography, + styled, +} from '@mui/material'; import PushPinIcon from '@mui/icons-material/PushPin'; -import { saveToLocalStorage } from './Apps/AppsNavBar'; +import { saveToLocalStorage } from './Apps/AppsNavBarDesktop'; import { useRecoilState } from 'recoil'; import { sortablePinnedAppsAtom } from '../atoms/global'; const CustomStyledMenu = styled(Menu)(({ theme }) => ({ - '& .MuiPaper-root': { - backgroundColor: '#f9f9f9', - borderRadius: '12px', - padding: theme.spacing(1), - boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', - }, - '& .MuiMenuItem-root': { - fontSize: '14px', - color: '#444', - transition: '0.3s background-color', - '&:hover': { - backgroundColor: '#f0f0f0', - }, + '& .MuiPaper-root': { + backgroundColor: '#f9f9f9', + borderRadius: '12px', + padding: theme.spacing(1), + boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', + }, + '& .MuiMenuItem-root': { + fontSize: '14px', + color: '#444', + transition: '0.3s background-color', + '&:hover': { + backgroundColor: '#f0f0f0', }, + }, })); export const ContextMenuPinnedApps = ({ children, app, isMine }) => { - const [menuPosition, setMenuPosition] = useState(null); - const longPressTimeout = useRef(null); - const maxHoldTimeout = useRef(null); - const preventClick = useRef(false); - const startTouchPosition = useRef({ x: 0, y: 0 }); // Track initial touch position - const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom); + const [menuPosition, setMenuPosition] = useState(null); + const longPressTimeout = useRef(null); + const maxHoldTimeout = useRef(null); + const preventClick = useRef(false); + const startTouchPosition = useRef({ x: 0, y: 0 }); // Track initial touch position + const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( + sortablePinnedAppsAtom + ); - const handleContextMenu = (event) => { - if(isMine) return - event.preventDefault(); - event.stopPropagation(); - preventClick.current = true; - setMenuPosition({ - mouseX: event.clientX, - mouseY: event.clientY, - }); - }; + const handleContextMenu = (event) => { + if (isMine) return; + event.preventDefault(); + event.stopPropagation(); + preventClick.current = true; + setMenuPosition({ + mouseX: event.clientX, + mouseY: event.clientY, + }); + }; - const handleTouchStart = (event) => { - if(isMine) return + const handleTouchStart = (event) => { + if (isMine) return; - const { clientX, clientY } = event.touches[0]; - startTouchPosition.current = { x: clientX, y: clientY }; + const { clientX, clientY } = event.touches[0]; + startTouchPosition.current = { x: clientX, y: clientY }; - longPressTimeout.current = setTimeout(() => { - preventClick.current = true; - - event.stopPropagation(); - setMenuPosition({ - mouseX: clientX, - mouseY: clientY, + longPressTimeout.current = setTimeout(() => { + preventClick.current = true; + + event.stopPropagation(); + setMenuPosition({ + mouseX: clientX, + mouseY: clientY, + }); + }, 500); + + // Set a maximum hold duration (e.g., 1.5 seconds) + maxHoldTimeout.current = setTimeout(() => { + clearTimeout(longPressTimeout.current); + }, 1500); + }; + + const handleTouchMove = (event) => { + if (isMine) return; + + const { clientX, clientY } = event.touches[0]; + const { x, y } = startTouchPosition.current; + + // Determine if the touch has moved beyond a small threshold (e.g., 10px) + const movedEnough = + Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10; + + if (movedEnough) { + clearTimeout(longPressTimeout.current); + clearTimeout(maxHoldTimeout.current); + } + }; + + const handleTouchEnd = (event) => { + if (isMine) return; + + clearTimeout(longPressTimeout.current); + clearTimeout(maxHoldTimeout.current); + if (preventClick.current) { + event.preventDefault(); + event.stopPropagation(); + preventClick.current = false; + } + }; + + const handleClose = (e) => { + if (isMine) return; + + e.preventDefault(); + e.stopPropagation(); + setMenuPosition(null); + }; + + return ( +
+ {children} + { + e.stopPropagation(); + }} + > + { + handleClose(e); + setSortablePinnedApps((prev) => { + if (app?.isPrivate) { + const updatedApps = prev.filter( + (item) => + !( + item?.privateAppProperties?.name === + app?.privateAppProperties?.name && + item?.privateAppProperties?.service === + app?.privateAppProperties?.service && + item?.privateAppProperties?.identifier === + app?.privateAppProperties?.identifier + ) + ); + saveToLocalStorage( + 'ext_saved_settings', + 'sortablePinnedApps', + updatedApps + ); + return updatedApps; + } else { + const updatedApps = prev.filter( + (item) => + !( + item?.name === app?.name && item?.service === app?.service + ) + ); + saveToLocalStorage( + 'ext_saved_settings', + 'sortablePinnedApps', + updatedApps + ); + return updatedApps; + } }); - }, 500); - - // Set a maximum hold duration (e.g., 1.5 seconds) - maxHoldTimeout.current = setTimeout(() => { - clearTimeout(longPressTimeout.current); - }, 1500); - }; - - const handleTouchMove = (event) => { - if(isMine) return - - const { clientX, clientY } = event.touches[0]; - const { x, y } = startTouchPosition.current; - - // Determine if the touch has moved beyond a small threshold (e.g., 10px) - const movedEnough = Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10; - - if (movedEnough) { - clearTimeout(longPressTimeout.current); - clearTimeout(maxHoldTimeout.current); - } - }; - - const handleTouchEnd = (event) => { - if(isMine) return - - clearTimeout(longPressTimeout.current); - clearTimeout(maxHoldTimeout.current); - if (preventClick.current) { - event.preventDefault(); - event.stopPropagation(); - preventClick.current = false; - } - }; - - const handleClose = (e) => { - if(isMine) return - - e.preventDefault(); - e.stopPropagation(); - setMenuPosition(null); - }; - - return ( -
- {children} - { - e.stopPropagation(); - }} - > - { - handleClose(e); - setSortablePinnedApps((prev) => { - if(app?.isPrivate){ - const updatedApps = prev.filter( - (item) => !(item?.privateAppProperties?.name === app?.privateAppProperties?.name && item?.privateAppProperties?.service === app?.privateAppProperties?.service && item?.privateAppProperties?.identifier === app?.privateAppProperties?.identifier) - ); - saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', updatedApps); - return updatedApps; - } else { - const updatedApps = prev.filter( - (item) => !(item?.name === app?.name && item?.service === app?.service) - ); - saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', updatedApps); - return updatedApps; - } - }); - }}> - - - - - Unpin app - - - -
- ); + + + + + Unpin app + + + +
+ ); }; diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx index cf8dba6..c8196d8 100644 --- a/src/components/Save/Save.tsx +++ b/src/components/Save/Save.tsx @@ -19,7 +19,7 @@ import { SaveIcon } from '../../assets/Icons/SaveIcon'; import { IconWrapper } from '../Desktop/DesktopFooter'; import { Spacer } from '../../common/Spacer'; import { LoadingButton } from '@mui/lab'; -import { saveToLocalStorage } from '../Apps/AppsNavBar'; +import { saveToLocalStorage } from '../Apps/AppsNavBarDesktop'; import { decryptData, encryptData } from '../../qortalRequests/get'; import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet'; import { diff --git a/src/components/Tutorials/useHandleTutorials.tsx b/src/components/Tutorials/useHandleTutorials.tsx index 2fabfa0..1df8626 100644 --- a/src/components/Tutorials/useHandleTutorials.tsx +++ b/src/components/Tutorials/useHandleTutorials.tsx @@ -1,192 +1,194 @@ -import React, { useCallback, useEffect, useState } from "react"; -import { saveToLocalStorage } from "../Apps/AppsNavBar"; -import creationImg from './img/creation.webp' -import dashboardImg from './img/dashboard.webp' -import groupsImg from './img/groups.webp' -import importantImg from './img/important.webp' -import navigationImg from './img/navigation.webp' -import overviewImg from './img/overview.webp' -import startedImg from './img/started.webp' -import obtainingImg from './img/obtaining-qort.jpg' +import { useCallback, useEffect, useState } from 'react'; +import { saveToLocalStorage } from '../Apps/AppsNavBarDesktop'; +import creationImg from './img/creation.webp'; +import dashboardImg from './img/dashboard.webp'; +import groupsImg from './img/groups.webp'; +import importantImg from './img/important.webp'; +import navigationImg from './img/navigation.webp'; +import overviewImg from './img/overview.webp'; +import startedImg from './img/started.webp'; +import obtainingImg from './img/obtaining-qort.jpg'; 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 - - } + 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(null); -const [shownTutorials, setShowTutorials] = useState(null) + const [shownTutorials, setShowTutorials] = useState(null); -useEffect(()=> { + useEffect(() => { try { - const storedData = localStorage.getItem('shown-tutorials'); + const storedData = localStorage.getItem('shown-tutorials'); - - if (storedData) { - setShowTutorials(JSON.parse(storedData)); - } else { - setShowTutorials({}) - } + if (storedData) { + setShowTutorials(JSON.parse(storedData)); + } else { + setShowTutorials({}); + } } catch (error) { - //error + //error } -}, []) + }, []); - const saveShowTutorial = useCallback((type)=> { + const saveShowTutorial = useCallback((type) => { try { - - setShowTutorials((prev)=> { - return { - ...(prev || {}), - [type]: true - } - }) - saveToLocalStorage('shown-tutorials', type, true) + setShowTutorials((prev) => { + return { + ...(prev || {}), + [type]: true, + }; + }); + saveToLocalStorage('shown-tutorials', type, true); } catch (error) { - //error + //error } - }, []) - const showTutorial = useCallback(async (type, isForce) => { - try { - const isOnline = await checkIfGatewayIsOnline() - if(!isOnline) return + }, []); + 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') + 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({ + 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: "1. Getting Started", - resource: { - name: "a-test", - service: "VIDEO", - identifier: "getting-started-hub", - poster: startedImg - }, - }, - { - title: "2. Overview", - resource: { - name: "a-test", - service: "VIDEO", - identifier: "overview-hub", - poster: overviewImg - }, - }, - { - title: "3. Qortal Groups", - resource: { - name: "a-test", - service: "VIDEO", - identifier: "groups-hub", - poster: groupsImg - }, - }, - { - title: "4. Obtaining Qort", - resource: { - name: "a-test", - service: "VIDEO", - identifier: "obtaining-qort", - poster: obtainingImg - }, - }, - ], - }); - } - break; - case "qapps": + setOpenTutorialModal({ + multi: [ { - if((shownTutorials || {})['qapps'] && !isForce) return - saveShowTutorial('qapps') + title: '1. Getting Started', + resource: { + name: 'a-test', + service: 'VIDEO', + identifier: 'getting-started-hub', + poster: startedImg, + }, + }, + { + title: '2. Overview', + resource: { + name: 'a-test', + service: 'VIDEO', + identifier: 'overview-hub', + poster: overviewImg, + }, + }, + { + title: '3. Qortal Groups', + resource: { + name: 'a-test', + service: 'VIDEO', + identifier: 'groups-hub', + poster: groupsImg, + }, + }, + { + title: '4. Obtaining Qort', + resource: { + name: 'a-test', + service: 'VIDEO', + identifier: 'obtaining-qort', + poster: obtainingImg, + }, + }, + ], + }); + } + break; + case 'qapps': + { + if ((shownTutorials || {})['qapps'] && !isForce) return; + saveShowTutorial('qapps'); - setOpenTutorialModal({ - multi: [ - { - title: "1. Apps Dashboard", - resource: { - name: "a-test", - service: "VIDEO", - identifier: "apps-dashboard-hub", - poster: dashboardImg - }, - }, - { - title: "2. Apps Navigation", - resource: { - name: "a-test", - service: "VIDEO", - identifier: "apps-navigation-hub", - poster: navigationImg - }, - } - ], - }); - } - break; - default: - break; - } - } catch (error) { + setOpenTutorialModal({ + multi: [ + { + title: '1. Apps Dashboard', + resource: { + name: 'a-test', + service: 'VIDEO', + identifier: 'apps-dashboard-hub', + poster: dashboardImg, + }, + }, + { + title: '2. Apps Navigation', + resource: { + name: 'a-test', + service: 'VIDEO', + identifier: 'apps-navigation-hub', + poster: navigationImg, + }, + }, + ], + }); + } + break; + default: + break; + } + } catch (error) { //error - } - }, [shownTutorials]); + } + }, + [shownTutorials] + ); return { showTutorial, - hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'], + hasSeenGettingStarted: + shownTutorials === null + ? null + : !!(shownTutorials || {})['getting-started'], openTutorialModal, setOpenTutorialModal, - shownTutorialsInitiated: !!shownTutorials + shownTutorialsInitiated: !!shownTutorials, }; };