diff --git a/src/components/Apps/Apps.tsx b/src/components/Apps/Apps.tsx index b444c22..b4e6f67 100644 --- a/src/components/Apps/Apps.tsx +++ b/src/components/Apps/Apps.tsx @@ -1,45 +1,47 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; -import { AppsHome } from "./AppsHome"; -import { Spacer } from "../../common/Spacer"; -import { getBaseApiReact } from "../../App"; -import { AppInfo } from "./AppInfo"; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { AppsHome } from './AppsHome'; +import { Spacer } from '../../common/Spacer'; +import { getBaseApiReact } from '../../App'; +import { AppInfo } from './AppInfo'; import { executeEvent, subscribeToEvent, unsubscribeFromEvent, -} from "../../utils/events"; -import { AppsParent } from "./Apps-styles"; -import AppViewerContainer from "./AppViewerContainer"; -import ShortUniqueId from "short-unique-id"; -import { AppPublish } from "./AppPublish"; -import { AppsCategory } from "./AppsCategory"; -import { AppsLibrary } from "./AppsLibrary"; +} from '../../utils/events'; +import { AppsParent } from './Apps-styles'; +import AppViewerContainer from './AppViewerContainer'; +import ShortUniqueId from 'short-unique-id'; +import { AppPublish } from './AppPublish'; +import { AppsCategory } from './AppsCategory'; +import { AppsLibrary } from './AppsLibrary'; const uid = new ShortUniqueId({ length: 8 }); -export const Apps = ({ mode, setMode, show , myName}) => { +export const Apps = ({ mode, setMode, show, myName }) => { const [availableQapps, setAvailableQapps] = useState([]); const [selectedAppInfo, setSelectedAppInfo] = useState(null); - const [selectedCategory, setSelectedCategory] = useState(null) + const [selectedCategory, setSelectedCategory] = useState(null); const [tabs, setTabs] = useState([]); const [selectedTab, setSelectedTab] = useState(null); const [isNewTabWindow, setIsNewTabWindow] = useState(false); - const [categories, setCategories] = useState([]) + const [categories, setCategories] = useState([]); const iframeRefs = useRef({}); + const myApp = useMemo(() => { + return availableQapps.find( + (app) => app.name === myName && app.service === 'APP' + ); + }, [myName, availableQapps]); - const myApp = useMemo(()=> { - - return availableQapps.find((app)=> app.name === myName && app.service === 'APP') - }, [myName, availableQapps]) - const myWebsite = useMemo(()=> { - - return availableQapps.find((app)=> app.name === myName && app.service === 'WEBSITE') - }, [myName, availableQapps]) + const myWebsite = useMemo(() => { + return availableQapps.find( + (app) => app.name === myName && app.service === 'WEBSITE' + ); + }, [myName, availableQapps]); useEffect(() => { setTimeout(() => { - executeEvent("setTabsToNav", { + executeEvent('setTabsToNav', { data: { tabs: tabs, selectedTab: selectedTab, @@ -54,17 +56,17 @@ export const Apps = ({ mode, setMode, show , myName}) => { const url = `${getBaseApiReact()}/arbitrary/categories`; const response = await fetch(url, { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, }); if (!response?.ok) return; const responseData = await response.json(); - + setCategories(responseData); - } catch (error) { + console.log(error); } finally { // dispatch(setIsLoadingGlobal(false)) } @@ -78,9 +80,9 @@ export const Apps = ({ mode, setMode, show , myName}) => { const url = `${getBaseApiReact()}/arbitrary/resources/search?service=APP&mode=ALL&limit=0&includestatus=true&includemetadata=true`; const response = await fetch(url, { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, }); if (!response?.ok) return; @@ -88,75 +90,84 @@ export const Apps = ({ mode, setMode, show , myName}) => { const urlWebsites = `${getBaseApiReact()}/arbitrary/resources/search?service=WEBSITE&mode=ALL&limit=0&includestatus=true&includemetadata=true`; const responseWebsites = await fetch(urlWebsites, { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, }); if (!responseWebsites?.ok) return; const responseDataWebsites = await responseWebsites.json(); - + apps = responseData; websites = responseDataWebsites; const combine = [...apps, ...websites]; setAvailableQapps(combine); } catch (error) { + console.log(error); } finally { // dispatch(setIsLoadingGlobal(false)) } }, []); useEffect(() => { getQapps(); - getCategories() + getCategories(); }, [getQapps, getCategories]); const selectedAppInfoFunc = (e) => { const data = e.detail?.data; setSelectedAppInfo(data); - setMode("appInfo"); + setMode('appInfo'); }; useEffect(() => { - subscribeToEvent("selectedAppInfo", selectedAppInfoFunc); + subscribeToEvent('selectedAppInfo', selectedAppInfoFunc); return () => { - unsubscribeFromEvent("selectedAppInfo", selectedAppInfoFunc); + unsubscribeFromEvent('selectedAppInfo', selectedAppInfoFunc); }; }, []); const selectedAppInfoCategoryFunc = (e) => { const data = e.detail?.data; setSelectedAppInfo(data); - setMode("appInfo-from-category"); + setMode('appInfo-from-category'); }; useEffect(() => { - subscribeToEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); + subscribeToEvent('selectedAppInfoCategory', selectedAppInfoCategoryFunc); return () => { - unsubscribeFromEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); + unsubscribeFromEvent( + 'selectedAppInfoCategory', + selectedAppInfoCategoryFunc + ); }; }, []); - - const selectedCategoryFunc = (e) => { const data = e.detail?.data; setSelectedCategory(data); - setMode("category"); + setMode('category'); }; useEffect(() => { - subscribeToEvent("selectedCategory", selectedCategoryFunc); + subscribeToEvent('selectedCategory', selectedCategoryFunc); return () => { - unsubscribeFromEvent("selectedCategory", selectedCategoryFunc); + unsubscribeFromEvent('selectedCategory', selectedCategoryFunc); }; }, []); - const navigateBackFunc = (e) => { - if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) { + if ( + [ + 'category', + 'appInfo-from-category', + 'appInfo', + 'library', + 'publish', + ].includes(mode) + ) { // Handle the various modes as needed if (mode === 'category') { setMode('library'); @@ -174,16 +185,16 @@ export const Apps = ({ mode, setMode, show , myName}) => { } else if (mode === 'publish') { setMode('library'); } - } else if(selectedTab?.tabId) { - executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) + } else if (selectedTab?.tabId) { + executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}); } }; useEffect(() => { - subscribeToEvent("navigateBack", navigateBackFunc); + subscribeToEvent('navigateBack', navigateBackFunc); return () => { - unsubscribeFromEvent("navigateBack", navigateBackFunc); + unsubscribeFromEvent('navigateBack', navigateBackFunc); }; }, [mode, selectedTab]); @@ -195,16 +206,16 @@ export const Apps = ({ mode, setMode, show , myName}) => { }; setTabs((prev) => [...prev, newTab]); setSelectedTab(newTab); - setMode("viewer"); + setMode('viewer'); setIsNewTabWindow(false); }; useEffect(() => { - subscribeToEvent("addTab", addTabFunc); + subscribeToEvent('addTab', addTabFunc); return () => { - unsubscribeFromEvent("addTab", addTabFunc); + unsubscribeFromEvent('addTab', addTabFunc); }; }, [tabs]); @@ -213,7 +224,7 @@ export const Apps = ({ mode, setMode, show , myName}) => { setSelectedTab(data); setTimeout(() => { - executeEvent("setTabsToNav", { + executeEvent('setTabsToNav', { data: { tabs: tabs, selectedTab: data, @@ -225,10 +236,10 @@ export const Apps = ({ mode, setMode, show , myName}) => { }; useEffect(() => { - subscribeToEvent("setSelectedTab", setSelectedTabFunc); + subscribeToEvent('setSelectedTab', setSelectedTabFunc); return () => { - unsubscribeFromEvent("setSelectedTab", setSelectedTabFunc); + unsubscribeFromEvent('setSelectedTab', setSelectedTabFunc); }; }, [tabs, isNewTabWindow]); @@ -236,14 +247,14 @@ export const Apps = ({ mode, setMode, show , myName}) => { const data = e.detail?.data; const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId); if (copyTabs?.length === 0) { - setMode("home"); + setMode('home'); } else { setSelectedTab(copyTabs[0]); } setTabs(copyTabs); setSelectedTab(copyTabs[0]); setTimeout(() => { - executeEvent("setTabsToNav", { + executeEvent('setTabsToNav', { data: { tabs: copyTabs, selectedTab: copyTabs[0], @@ -253,59 +264,74 @@ export const Apps = ({ mode, setMode, show , myName}) => { }; useEffect(() => { - subscribeToEvent("removeTab", removeTabFunc); + subscribeToEvent('removeTab', removeTabFunc); return () => { - unsubscribeFromEvent("removeTab", removeTabFunc); + unsubscribeFromEvent('removeTab', removeTabFunc); }; }, [tabs]); const setNewTabWindowFunc = (e) => { setIsNewTabWindow(true); - setSelectedTab(null) + setSelectedTab(null); }; useEffect(() => { - subscribeToEvent("newTabWindow", setNewTabWindowFunc); + subscribeToEvent('newTabWindow', setNewTabWindowFunc); return () => { - unsubscribeFromEvent("newTabWindow", setNewTabWindowFunc); + unsubscribeFromEvent('newTabWindow', setNewTabWindowFunc); }; }, [tabs]); - return ( - {mode !== "viewer" && !selectedTab && } - {mode === "home" && ( - - )} - - } + {mode === 'home' && ( + - - {mode === "appInfo" && !selectedTab && } - {mode === "appInfo-from-category" && !selectedTab && } - - {mode === "publish" && !selectedTab && } + )} + + + + {mode === 'appInfo' && !selectedTab && ( + + )} + {mode === 'appInfo-from-category' && !selectedTab && ( + + )} + + {mode === 'publish' && !selectedTab && ( + + )} {tabs.map((tab) => { - if (!iframeRefs.current[tab.tabId]) { - iframeRefs.current[tab.tabId] = React.createRef(); - } + if (!iframeRefs.current[tab.tabId]) { + iframeRefs.current[tab.tabId] = React.createRef(); + } return ( { ); })} - {isNewTabWindow && mode === "viewer" && ( + {isNewTabWindow && mode === 'viewer' && ( <> - + )} - {mode !== "viewer" && !selectedTab && } + {mode !== 'viewer' && !selectedTab && } ); }; diff --git a/src/components/Group/QMailMessages.tsx b/src/components/Group/QMailMessages.tsx index 504e766..f51517d 100644 --- a/src/components/Group/QMailMessages.tsx +++ b/src/components/Group/QMailMessages.tsx @@ -89,7 +89,9 @@ export const QMailMessages = ({ userName, userAddress }) => { rej(error.message || 'An error occurred'); }); }); - } catch (error) {} + } catch (error) { + console.log(error); + } }; useEffect(() => { @@ -168,6 +170,7 @@ export const QMailMessages = ({ userName, userAddress }) => { /> )} + { return true; return false; }, [lastEnteredTimestamp, mails]); + return ( { diff --git a/src/components/TaskManager/TaskManager.tsx b/src/components/TaskManager/TaskManager.tsx index a835ae1..c995cd5 100644 --- a/src/components/TaskManager/TaskManager.tsx +++ b/src/components/TaskManager/TaskManager.tsx @@ -5,14 +5,14 @@ import { ListItemText, Collapse, IconButton, -} from "@mui/material"; -import React, { useContext, useEffect, useRef } from "react"; -import PendingIcon from "@mui/icons-material/Pending"; -import TaskAltIcon from "@mui/icons-material/TaskAlt"; -import ExpandLess from "@mui/icons-material/ExpandLess"; -import ExpandMore from "@mui/icons-material/ExpandMore"; -import { MyContext, getBaseApiReact, isMobile } from "../../App"; -import { executeEvent } from "../../utils/events"; +} from '@mui/material'; +import React, { useContext, useEffect, useRef } from 'react'; +import PendingIcon from '@mui/icons-material/Pending'; +import TaskAltIcon from '@mui/icons-material/TaskAlt'; +import ExpandLess from '@mui/icons-material/ExpandLess'; +import ExpandMore from '@mui/icons-material/ExpandMore'; +import { MyContext, getBaseApiReact, isMobile } from '../../App'; +import { executeEvent } from '../../utils/events'; export const TaskManager = ({ getUserInfo }) => { const { txList, setTxList, memberGroups } = useContext(MyContext); @@ -71,7 +71,7 @@ export const TaskManager = ({ getUserInfo }) => { let previousData = [...prev]; memberGroups.forEach((group) => { const findGroup = txList.findIndex( - (tx) => tx?.type === "joined-group" && tx?.groupId === group.groupId + (tx) => tx?.type === 'joined-group' && tx?.groupId === group.groupId ); if (findGroup !== -1 && !previousData[findGroup]?.done) { previousData[findGroup].done = true; @@ -81,7 +81,7 @@ export const TaskManager = ({ getUserInfo }) => { memberGroups.forEach((group) => { const findGroup = txList.findIndex( (tx) => - tx?.type === "created-group" && tx?.groupName === group.groupName + tx?.type === 'created-group' && tx?.groupName === group.groupName ); if (findGroup !== -1 && !previousData[findGroup]?.done) { previousData[findGroup].done = true; @@ -90,49 +90,52 @@ export const TaskManager = ({ getUserInfo }) => { prev.forEach((tx, index) => { if ( - tx?.type === "leave-group" && - memberGroups.findIndex((group) => tx?.groupId === group.groupId) === -1 + tx?.type === 'leave-group' && + memberGroups.findIndex((group) => tx?.groupId === group.groupId) === + -1 ) { previousData[index].done = true; } }); - - return previousData; }); }, [memberGroups, getUserInfo]); - useEffect(()=> { - - txList.forEach((tx) => { - if ( - ["created-common-secret", "joined-group-request", "join-request-accept"].includes( - tx?.type - ) && - tx?.signature && - !tx.done - ) { - if (!intervals.current[tx.signature]) { - getStatus({ signature: tx.signature }); - } + useEffect(() => { + txList.forEach((tx) => { + if ( + [ + 'created-common-secret', + 'joined-group-request', + 'join-request-accept', + ].includes(tx?.type) && + tx?.signature && + !tx.done + ) { + if (!intervals.current[tx.signature]) { + getStatus({ signature: tx.signature }); } - if (tx?.type === "register-name" && tx?.signature && !tx.done) { - if (!intervals.current[tx.signature]) { - getStatus({ signature: tx.signature }, getUserInfo); - } + } + if (tx?.type === 'register-name' && tx?.signature && !tx.done) { + if (!intervals.current[tx.signature]) { + getStatus({ signature: tx.signature }, getUserInfo); } - if((tx?.type === "remove-rewardShare" || tx?.type === "add-rewardShare") && tx?.signature && !tx.done){ - if (!intervals.current[tx.signature]) { - const sendEventForRewardShare = ()=> { - executeEvent('refresh-rewardshare-list', {}) - } - getStatus({ signature: tx.signature }, sendEventForRewardShare); - } + } + if ( + (tx?.type === 'remove-rewardShare' || tx?.type === 'add-rewardShare') && + tx?.signature && + !tx.done + ) { + if (!intervals.current[tx.signature]) { + const sendEventForRewardShare = () => { + executeEvent('refresh-rewardshare-list', {}); + }; + getStatus({ signature: tx.signature }, sendEventForRewardShare); } - }); - - }, [txList]) + } + }); + }, [txList]); if (isMobile || txList?.length === 0 || txList.every((item) => item?.done)) return null; @@ -146,40 +149,48 @@ export const TaskManager = ({ getUserInfo }) => { // position: "fixed", // bottom: 16, // right: 16, - bgcolor: "primary.main", - color: "white", - ":hover": { bgcolor: "primary.dark" }, + bgcolor: 'primary.main', + color: 'white', + ':hover': { bgcolor: 'primary.dark' }, }} > - {txList.some((item) => !item.done) ? : } + {txList.some((item) => !item.done) ? ( + + ) : ( + + )} )} {open && ( - + {txList.some((item) => !item.done) ? ( - + ) : ( - + )} diff --git a/src/useQortalGetSaveSettings.tsx b/src/useQortalGetSaveSettings.tsx index 532e049..e4e2945 100644 --- a/src/useQortalGetSaveSettings.tsx +++ b/src/useQortalGetSaveSettings.tsx @@ -1,97 +1,130 @@ -import React, { useCallback, useEffect } from 'react' +import React, { useCallback, useEffect } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; -import { canSaveSettingToQdnAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from './atoms/global'; +import { + canSaveSettingToQdnAtom, + isUsingImportExportSettingsAtom, + oldPinnedAppsAtom, + settingsLocalLastUpdatedAtom, + settingsQDNLastUpdatedAtom, + sortablePinnedAppsAtom, +} from './atoms/global'; import { getArbitraryEndpointReact, getBaseApiReact } from './App'; import { decryptResource } from './components/Group/Group'; -import { base64ToUint8Array, uint8ArrayToObject } from './backgroundFunctions/encryption'; +import { + base64ToUint8Array, + uint8ArrayToObject, +} from './backgroundFunctions/encryption'; function fetchFromLocalStorage(key) { - try { - const serializedValue = localStorage.getItem(key); - if (serializedValue === null) { - console.log(`No data found for key: ${key}`); - return null; - } - return JSON.parse(serializedValue); - } catch (error) { - console.error('Error fetching from localStorage:', error); - return null; + try { + const serializedValue = localStorage.getItem(key); + if (serializedValue === null) { + console.log(`No data found for key: ${key}`); + return null; } + return JSON.parse(serializedValue); + } catch (error) { + console.error('Error fetching from localStorage:', error); + return null; + } } const getPublishRecord = async (myName) => { - // const validApi = await findUsableApi(); - const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=ext_saved_settings&exactmatchnames=true&limit=1&prefix=true&name=${myName}`; - const response = await fetch(url); - if (!response.ok) { - throw new Error("network error"); - } - const publishData = await response.json(); + // const validApi = await findUsableApi(); + const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=ext_saved_settings&exactmatchnames=true&limit=1&prefix=true&name=${myName}`; + const response = await fetch(url); + if (!response.ok) { + throw new Error('network error'); + } + const publishData = await response.json(); - if(publishData?.length > 0) return {hasPublishRecord: true, timestamp: publishData[0]?.updated || publishData[0].created} + if (publishData?.length > 0) + return { + hasPublishRecord: true, + timestamp: publishData[0]?.updated || publishData[0].created, + }; - return {hasPublishRecord: false} - }; - const getPublish = async (myName) => { - try { - let data + return { hasPublishRecord: false }; +}; +const getPublish = async (myName) => { + try { + let data; const res = await fetch( - `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${myName}/ext_saved_settings?encoding=base64` - ); - data = await res.text(); - - if(!data) throw new Error('Unable to fetch publish') + `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${myName}/ext_saved_settings?encoding=base64` + ); + data = await res.text(); + + if (!data) throw new Error('Unable to fetch publish'); const decryptedKey: any = await decryptResource(data); const dataint8Array = base64ToUint8Array(decryptedKey.data); const decryptedKeyToObject = uint8ArrayToObject(dataint8Array); - return decryptedKeyToObject - } catch (error) { - return null - } - }; - + return decryptedKeyToObject; + } catch (error) { + return null; + } +}; export const useQortalGetSaveSettings = (myName, isAuthenticated) => { - const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom); - const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom); - const setSettingsQDNLastUpdated = useSetRecoilState(settingsQDNLastUpdatedAtom); - const [settingsLocalLastUpdated] = useRecoilState(settingsLocalLastUpdatedAtom); - const [isUsingImportExportSettings] = useRecoilState(isUsingImportExportSettingsAtom); + const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom); + const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom); + const setSettingsQDNLastUpdated = useSetRecoilState( + settingsQDNLastUpdatedAtom + ); + const [settingsLocalLastUpdated] = useRecoilState( + settingsLocalLastUpdatedAtom + ); + const [isUsingImportExportSettings] = useRecoilState( + isUsingImportExportSettingsAtom + ); - const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom) + const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom); - const getSavedSettings = useCallback(async (myName, settingsLocalLastUpdated)=> { - try { - const {hasPublishRecord, timestamp} = await getPublishRecord(myName) - if(hasPublishRecord){ - const settings = await getPublish(myName) - if(settings?.sortablePinnedApps && timestamp > settingsLocalLastUpdated){ - setSortablePinnedApps(settings.sortablePinnedApps) - - setSettingsQDNLastUpdated(timestamp || 0) - } else if(settings?.sortablePinnedApps){ - setSettingsQDNLastUpdated(timestamp || 0) - setOldPinnedApps(settings.sortablePinnedApps) - } - if(!settings){ - // set -100 to indicate that it couldn't fetch the publish - setSettingsQDNLastUpdated(-100) + const getSavedSettings = useCallback( + async (myName, settingsLocalLastUpdated) => { + try { + const { hasPublishRecord, timestamp } = await getPublishRecord(myName); + if (hasPublishRecord) { + const settings = await getPublish(myName); + if ( + settings?.sortablePinnedApps && + timestamp > settingsLocalLastUpdated + ) { + setSortablePinnedApps(settings.sortablePinnedApps); - } - } else { - setSettingsQDNLastUpdated( 0) - } - setCanSave(true) - } catch (error) { - + setSettingsQDNLastUpdated(timestamp || 0); + } else if (settings?.sortablePinnedApps) { + setSettingsQDNLastUpdated(timestamp || 0); + setOldPinnedApps(settings.sortablePinnedApps); + } + if (!settings) { + // set -100 to indicate that it couldn't fetch the publish + setSettingsQDNLastUpdated(-100); + } + } else { + setSettingsQDNLastUpdated(0); } - }, []) - useEffect(()=> { - if(!myName || !settingsLocalLastUpdated || !isAuthenticated || isUsingImportExportSettings === null) return - if(isUsingImportExportSettings) return - getSavedSettings(myName, settingsLocalLastUpdated) - }, [getSavedSettings, myName, settingsLocalLastUpdated, isAuthenticated, isUsingImportExportSettings]) - -} + setCanSave(true); + } catch (error) {} + }, + [] + ); + useEffect(() => { + if ( + !myName || + !settingsLocalLastUpdated || + !isAuthenticated || + isUsingImportExportSettings === null + ) + return; + if (isUsingImportExportSettings) return; + getSavedSettings(myName, settingsLocalLastUpdated); + }, [ + getSavedSettings, + myName, + settingsLocalLastUpdated, + isAuthenticated, + isUsingImportExportSettings, + ]); +};