Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-14 20:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format code

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-18 16:28:43 +02:00
parent ab1ed13cdc
commit 1ff13589ad
5 changed files with 300 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
src/components/Apps/Apps.tsx
View File

@ -1,45 +1,47 @@
import React, { useEffect, useMemo, useRef, useState } from "react"; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { AppsHome } from "./AppsHome"; import { AppsHome } from './AppsHome';
import { Spacer } from "../../common/Spacer"; import { Spacer } from '../../common/Spacer';
import { getBaseApiReact } from "../../App"; import { getBaseApiReact } from '../../App';
import { AppInfo } from "./AppInfo"; import { AppInfo } from './AppInfo';
import { import {
executeEvent, executeEvent,
subscribeToEvent, subscribeToEvent,
unsubscribeFromEvent, unsubscribeFromEvent,
} from "../../utils/events"; } from '../../utils/events';
import { AppsParent } from "./Apps-styles"; import { AppsParent } from './Apps-styles';
import AppViewerContainer from "./AppViewerContainer"; import AppViewerContainer from './AppViewerContainer';
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from 'short-unique-id';
import { AppPublish } from "./AppPublish"; import { AppPublish } from './AppPublish';
import { AppsCategory } from "./AppsCategory"; import { AppsCategory } from './AppsCategory';
import { AppsLibrary } from "./AppsLibrary"; import { AppsLibrary } from './AppsLibrary';
const uid = new ShortUniqueId({ length: 8 }); 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 [availableQapps, setAvailableQapps] = useState([]);
const [selectedAppInfo, setSelectedAppInfo] = useState(null); const [selectedAppInfo, setSelectedAppInfo] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null) const [selectedCategory, setSelectedCategory] = useState(null);
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
const [selectedTab, setSelectedTab] = useState(null); const [selectedTab, setSelectedTab] = useState(null);
const [isNewTabWindow, setIsNewTabWindow] = useState(false); const [isNewTabWindow, setIsNewTabWindow] = useState(false);
const [categories, setCategories] = useState([]) const [categories, setCategories] = useState([]);
const iframeRefs = useRef({}); const iframeRefs = useRef({});
const myApp = useMemo(() => {
return availableQapps.find(
(app) => app.name === myName && app.service === 'APP'
);
}, [myName, availableQapps]);
const myApp = useMemo(()=> { const myWebsite = useMemo(() => {
return availableQapps.find(
return availableQapps.find((app)=> app.name === myName && app.service === 'APP') (app) => app.name === myName && app.service === 'WEBSITE'
}, [myName, availableQapps]) );
const myWebsite = useMemo(()=> { }, [myName, availableQapps]);
return availableQapps.find((app)=> app.name === myName && app.service === 'WEBSITE')
}, [myName, availableQapps])
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
executeEvent("setTabsToNav", { executeEvent('setTabsToNav', {
data: { data: {
tabs: tabs, tabs: tabs,
selectedTab: selectedTab, selectedTab: selectedTab,
@ -54,17 +56,17 @@ export const Apps = ({ mode, setMode, show , myName}) => {
const url = `${getBaseApiReact()}/arbitrary/categories`; const url = `${getBaseApiReact()}/arbitrary/categories`;
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
}); });
if (!response?.ok) return; if (!response?.ok) return;
const responseData = await response.json(); const responseData = await response.json();
setCategories(responseData); setCategories(responseData);
} catch (error) { } catch (error) {
console.log(error);
} finally { } finally {
// dispatch(setIsLoadingGlobal(false)) // 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 url = `${getBaseApiReact()}/arbitrary/resources/search?service=APP&mode=ALL&limit=0&includestatus=true&includemetadata=true`;
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
}); });
if (!response?.ok) return; if (!response?.ok) return;
@ -88,9 +90,9 @@ export const Apps = ({ mode, setMode, show , myName}) => {
const urlWebsites = `${getBaseApiReact()}/arbitrary/resources/search?service=WEBSITE&mode=ALL&limit=0&includestatus=true&includemetadata=true`; const urlWebsites = `${getBaseApiReact()}/arbitrary/resources/search?service=WEBSITE&mode=ALL&limit=0&includestatus=true&includemetadata=true`;
const responseWebsites = await fetch(urlWebsites, { const responseWebsites = await fetch(urlWebsites, {
method: "GET", method: 'GET',
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
}, },
}); });
if (!responseWebsites?.ok) return; if (!responseWebsites?.ok) return;
@ -101,62 +103,71 @@ export const Apps = ({ mode, setMode, show , myName}) => {
const combine = [...apps, ...websites]; const combine = [...apps, ...websites];
setAvailableQapps(combine); setAvailableQapps(combine);
} catch (error) { } catch (error) {
console.log(error);
} finally { } finally {
// dispatch(setIsLoadingGlobal(false)) // dispatch(setIsLoadingGlobal(false))
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
getQapps(); getQapps();
getCategories() getCategories();
}, [getQapps, getCategories]); }, [getQapps, getCategories]);
const selectedAppInfoFunc = (e) => { const selectedAppInfoFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
setSelectedAppInfo(data); setSelectedAppInfo(data);
setMode("appInfo"); setMode('appInfo');
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("selectedAppInfo", selectedAppInfoFunc); subscribeToEvent('selectedAppInfo', selectedAppInfoFunc);
return () => { return () => {
unsubscribeFromEvent("selectedAppInfo", selectedAppInfoFunc); unsubscribeFromEvent('selectedAppInfo', selectedAppInfoFunc);
}; };
}, []); }, []);
const selectedAppInfoCategoryFunc = (e) => { const selectedAppInfoCategoryFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
setSelectedAppInfo(data); setSelectedAppInfo(data);
setMode("appInfo-from-category"); setMode('appInfo-from-category');
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); subscribeToEvent('selectedAppInfoCategory', selectedAppInfoCategoryFunc);
return () => { return () => {
unsubscribeFromEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); unsubscribeFromEvent(
'selectedAppInfoCategory',
selectedAppInfoCategoryFunc
);
}; };
}, []); }, []);
const selectedCategoryFunc = (e) => { const selectedCategoryFunc = (e) => {
const data = e.detail?.data; const data = e.detail?.data;
setSelectedCategory(data); setSelectedCategory(data);
setMode("category"); setMode('category');
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("selectedCategory", selectedCategoryFunc); subscribeToEvent('selectedCategory', selectedCategoryFunc);
return () => { return () => {
unsubscribeFromEvent("selectedCategory", selectedCategoryFunc); unsubscribeFromEvent('selectedCategory', selectedCategoryFunc);
}; };
}, []); }, []);
const navigateBackFunc = (e) => { 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 // Handle the various modes as needed
if (mode === 'category') { if (mode === 'category') {
setMode('library'); setMode('library');
@ -174,16 +185,16 @@ export const Apps = ({ mode, setMode, show , myName}) => {
} else if (mode === 'publish') { } else if (mode === 'publish') {
setMode('library'); setMode('library');
} }
} else if(selectedTab?.tabId) { } else if (selectedTab?.tabId) {
executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
} }
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("navigateBack", navigateBackFunc); subscribeToEvent('navigateBack', navigateBackFunc);
return () => { return () => {
unsubscribeFromEvent("navigateBack", navigateBackFunc); unsubscribeFromEvent('navigateBack', navigateBackFunc);
}; };
}, [mode, selectedTab]); }, [mode, selectedTab]);
@ -195,16 +206,16 @@ export const Apps = ({ mode, setMode, show , myName}) => {
}; };
setTabs((prev) => [...prev, newTab]); setTabs((prev) => [...prev, newTab]);
setSelectedTab(newTab); setSelectedTab(newTab);
setMode("viewer"); setMode('viewer');
setIsNewTabWindow(false); setIsNewTabWindow(false);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("addTab", addTabFunc); subscribeToEvent('addTab', addTabFunc);
return () => { return () => {
unsubscribeFromEvent("addTab", addTabFunc); unsubscribeFromEvent('addTab', addTabFunc);
}; };
}, [tabs]); }, [tabs]);
@ -213,7 +224,7 @@ export const Apps = ({ mode, setMode, show , myName}) => {
setSelectedTab(data); setSelectedTab(data);
setTimeout(() => { setTimeout(() => {
executeEvent("setTabsToNav", { executeEvent('setTabsToNav', {
data: { data: {
tabs: tabs, tabs: tabs,
selectedTab: data, selectedTab: data,
@ -225,10 +236,10 @@ export const Apps = ({ mode, setMode, show , myName}) => {
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("setSelectedTab", setSelectedTabFunc); subscribeToEvent('setSelectedTab', setSelectedTabFunc);
return () => { return () => {
unsubscribeFromEvent("setSelectedTab", setSelectedTabFunc); unsubscribeFromEvent('setSelectedTab', setSelectedTabFunc);
}; };
}, [tabs, isNewTabWindow]); }, [tabs, isNewTabWindow]);
@ -236,14 +247,14 @@ export const Apps = ({ mode, setMode, show , myName}) => {
const data = e.detail?.data; const data = e.detail?.data;
const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId); const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId);
if (copyTabs?.length === 0) { if (copyTabs?.length === 0) {
setMode("home"); setMode('home');
} else { } else {
setSelectedTab(copyTabs[0]); setSelectedTab(copyTabs[0]);
} }
setTabs(copyTabs); setTabs(copyTabs);
setSelectedTab(copyTabs[0]); setSelectedTab(copyTabs[0]);
setTimeout(() => { setTimeout(() => {
executeEvent("setTabsToNav", { executeEvent('setTabsToNav', {
data: { data: {
tabs: copyTabs, tabs: copyTabs,
selectedTab: copyTabs[0], selectedTab: copyTabs[0],
@ -253,59 +264,74 @@ export const Apps = ({ mode, setMode, show , myName}) => {
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("removeTab", removeTabFunc); subscribeToEvent('removeTab', removeTabFunc);
return () => { return () => {
unsubscribeFromEvent("removeTab", removeTabFunc); unsubscribeFromEvent('removeTab', removeTabFunc);
}; };
}, [tabs]); }, [tabs]);
const setNewTabWindowFunc = (e) => { const setNewTabWindowFunc = (e) => {
setIsNewTabWindow(true); setIsNewTabWindow(true);
setSelectedTab(null) setSelectedTab(null);
}; };
useEffect(() => { useEffect(() => {
subscribeToEvent("newTabWindow", setNewTabWindowFunc); subscribeToEvent('newTabWindow', setNewTabWindowFunc);
return () => { return () => {
unsubscribeFromEvent("newTabWindow", setNewTabWindowFunc); unsubscribeFromEvent('newTabWindow', setNewTabWindowFunc);
}; };
}, [tabs]); }, [tabs]);
return ( return (
<AppsParent <AppsParent
sx={{ sx={{
display: !show && "none", display: !show && 'none',
}} }}
> >
{mode !== "viewer" && !selectedTab && <Spacer height="30px" />} {mode !== 'viewer' && !selectedTab && <Spacer height="30px" />}
{mode === "home" && ( {mode === 'home' && (
<AppsHome availableQapps={availableQapps} setMode={setMode} myApp={myApp} myWebsite={myWebsite} /> <AppsHome
)}
<AppsLibrary
isShow={mode === "library" && !selectedTab}
availableQapps={availableQapps} availableQapps={availableQapps}
setMode={setMode} setMode={setMode}
myName={myName} myApp={myApp}
hasPublishApp={!!(myApp || myWebsite)} myWebsite={myWebsite}
categories={categories}
/> />
)}
{mode === "appInfo" && !selectedTab && <AppInfo app={selectedAppInfo} myName={myName} />} <AppsLibrary
{mode === "appInfo-from-category" && !selectedTab && <AppInfo app={selectedAppInfo} myName={myName} />} isShow={mode === 'library' && !selectedTab}
<AppsCategory availableQapps={availableQapps} isShow={mode === 'category' && !selectedTab} category={selectedCategory} myName={myName} /> availableQapps={availableQapps}
{mode === "publish" && !selectedTab && <AppPublish names={myName ? [myName] : []} categories={categories} />} setMode={setMode}
myName={myName}
hasPublishApp={!!(myApp || myWebsite)}
categories={categories}
/>
{mode === 'appInfo' && !selectedTab && (
<AppInfo app={selectedAppInfo} myName={myName} />
)}
{mode === 'appInfo-from-category' && !selectedTab && (
<AppInfo app={selectedAppInfo} myName={myName} />
)}
<AppsCategory
availableQapps={availableQapps}
isShow={mode === 'category' && !selectedTab}
category={selectedCategory}
myName={myName}
/>
{mode === 'publish' && !selectedTab && (
<AppPublish names={myName ? [myName] : []} categories={categories} />
)}
{tabs.map((tab) => { {tabs.map((tab) => {
if (!iframeRefs.current[tab.tabId]) { if (!iframeRefs.current[tab.tabId]) {
iframeRefs.current[tab.tabId] = React.createRef(); iframeRefs.current[tab.tabId] = React.createRef();
} }
return ( return (
<AppViewerContainer <AppViewerContainer
key={tab?.tabId} key={tab?.tabId}
hide={isNewTabWindow} hide={isNewTabWindow}
isSelected={tab?.tabId === selectedTab?.tabId} isSelected={tab?.tabId === selectedTab?.tabId}
app={tab} app={tab}
@ -314,13 +340,18 @@ export const Apps = ({ mode, setMode, show , myName}) => {
); );
})} })}
{isNewTabWindow && mode === "viewer" && ( {isNewTabWindow && mode === 'viewer' && (
<> <>
<Spacer height="30px" /> <Spacer height="30px" />
<AppsHome availableQapps={availableQapps} setMode={setMode} myApp={myApp} myWebsite={myWebsite} /> <AppsHome
availableQapps={availableQapps}
setMode={setMode}
myApp={myApp}
myWebsite={myWebsite}
/>
</> </>
)} )}
{mode !== "viewer" && !selectedTab && <Spacer height="180px" />} {mode !== 'viewer' && !selectedTab && <Spacer height="180px" />}
</AppsParent> </AppsParent>
); );
}; };

5
src/components/Group/QMailMessages.tsx
View File

@ -89,7 +89,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
rej(error.message || 'An error occurred'); rej(error.message || 'An error occurred');
}); });
}); });
} catch (error) {} } catch (error) {
console.log(error);
}
}; };
useEffect(() => { useEffect(() => {
@ -168,6 +170,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
/> />
)} )}
</ButtonBase> </ButtonBase>
<Collapse in={isExpanded} timeout="auto" unmountOnExit> <Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Box <Box
className="scrollable-container" className="scrollable-container"

1
src/components/QMailStatus.tsx
View File

@ -24,6 +24,7 @@ export const QMailStatus = () => {
return true; return true;
return false; return false;
}, [lastEnteredTimestamp, mails]); }, [lastEnteredTimestamp, mails]);
return ( return (
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {

127
src/components/TaskManager/TaskManager.tsx
View File

@ -5,14 +5,14 @@ import {
ListItemText, ListItemText,
Collapse, Collapse,
IconButton, IconButton,
} from "@mui/material"; } from '@mui/material';
import React, { useContext, useEffect, useRef } from "react"; import React, { useContext, useEffect, useRef } from 'react';
import PendingIcon from "@mui/icons-material/Pending"; import PendingIcon from '@mui/icons-material/Pending';
import TaskAltIcon from "@mui/icons-material/TaskAlt"; import TaskAltIcon from '@mui/icons-material/TaskAlt';
import ExpandLess from "@mui/icons-material/ExpandLess"; import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from "@mui/icons-material/ExpandMore"; import ExpandMore from '@mui/icons-material/ExpandMore';
import { MyContext, getBaseApiReact, isMobile } from "../../App"; import { MyContext, getBaseApiReact, isMobile } from '../../App';
import { executeEvent } from "../../utils/events"; import { executeEvent } from '../../utils/events';
export const TaskManager = ({ getUserInfo }) => { export const TaskManager = ({ getUserInfo }) => {
const { txList, setTxList, memberGroups } = useContext(MyContext); const { txList, setTxList, memberGroups } = useContext(MyContext);
@ -71,7 +71,7 @@ export const TaskManager = ({ getUserInfo }) => {
let previousData = [...prev]; let previousData = [...prev];
memberGroups.forEach((group) => { memberGroups.forEach((group) => {
const findGroup = txList.findIndex( 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) { if (findGroup !== -1 && !previousData[findGroup]?.done) {
previousData[findGroup].done = true; previousData[findGroup].done = true;
@ -81,7 +81,7 @@ export const TaskManager = ({ getUserInfo }) => {
memberGroups.forEach((group) => { memberGroups.forEach((group) => {
const findGroup = txList.findIndex( const findGroup = txList.findIndex(
(tx) => (tx) =>
tx?.type === "created-group" && tx?.groupName === group.groupName tx?.type === 'created-group' && tx?.groupName === group.groupName
); );
if (findGroup !== -1 && !previousData[findGroup]?.done) { if (findGroup !== -1 && !previousData[findGroup]?.done) {
previousData[findGroup].done = true; previousData[findGroup].done = true;
@ -90,49 +90,52 @@ export const TaskManager = ({ getUserInfo }) => {
prev.forEach((tx, index) => { prev.forEach((tx, index) => {
if ( if (
tx?.type === "leave-group" && tx?.type === 'leave-group' &&
memberGroups.findIndex((group) => tx?.groupId === group.groupId) === -1 memberGroups.findIndex((group) => tx?.groupId === group.groupId) ===
-1
) { ) {
previousData[index].done = true; previousData[index].done = true;
} }
}); });
return previousData; return previousData;
}); });
}, [memberGroups, getUserInfo]); }, [memberGroups, getUserInfo]);
useEffect(()=> { useEffect(() => {
txList.forEach((tx) => {
txList.forEach((tx) => { if (
if ( [
["created-common-secret", "joined-group-request", "join-request-accept"].includes( 'created-common-secret',
tx?.type 'joined-group-request',
) && 'join-request-accept',
tx?.signature && ].includes(tx?.type) &&
!tx.done tx?.signature &&
) { !tx.done
if (!intervals.current[tx.signature]) { ) {
getStatus({ signature: tx.signature }); if (!intervals.current[tx.signature]) {
} getStatus({ signature: tx.signature });
} }
if (tx?.type === "register-name" && tx?.signature && !tx.done) { }
if (!intervals.current[tx.signature]) { if (tx?.type === 'register-name' && tx?.signature && !tx.done) {
getStatus({ signature: tx.signature }, getUserInfo); 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]) { if (
const sendEventForRewardShare = ()=> { (tx?.type === 'remove-rewardShare' || tx?.type === 'add-rewardShare') &&
executeEvent('refresh-rewardshare-list', {}) tx?.signature &&
} !tx.done
getStatus({ signature: tx.signature }, sendEventForRewardShare); ) {
} 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)) if (isMobile || txList?.length === 0 || txList.every((item) => item?.done))
return null; return null;
@ -146,40 +149,48 @@ export const TaskManager = ({ getUserInfo }) => {
// position: "fixed", // position: "fixed",
// bottom: 16, // bottom: 16,
// right: 16, // right: 16,
bgcolor: "primary.main", bgcolor: 'primary.main',
color: "white", color: 'white',
":hover": { bgcolor: "primary.dark" }, ':hover': { bgcolor: 'primary.dark' },
}} }}
> >
{txList.some((item) => !item.done) ? <PendingIcon /> : <TaskAltIcon />} {txList.some((item) => !item.done) ? (
<PendingIcon />
) : (
<TaskAltIcon />
)}
</IconButton> </IconButton>
)} )}
{open && ( {open && (
<List <List
sx={{ sx={{
position: "fixed", position: 'fixed',
bottom: 16, bottom: 16,
right: 16, right: 16,
width: "300px", width: '300px',
maxHeight: "400px", maxHeight: '400px',
bgcolor: "background.paper", bgcolor: 'background.paper',
boxShadow: 4, boxShadow: 4,
overflow: "auto", overflow: 'auto',
zIndex: 10, zIndex: 10,
padding: '0px' padding: '0px',
}} }}
component="nav" component="nav"
> >
<ListItemButton onClick={handleClick}> <ListItemButton onClick={handleClick}>
<ListItemIcon> <ListItemIcon>
{txList.some((item) => !item.done) ? ( {txList.some((item) => !item.done) ? (
<PendingIcon sx={{ <PendingIcon
color:'white' sx={{
}} /> color: 'white',
}}
/>
) : ( ) : (
<TaskAltIcon sx={{ <TaskAltIcon
color:'white' sx={{
}} /> color: 'white',
}}
/>
)} )}
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Ongoing Transactions" /> <ListItemText primary="Ongoing Transactions" />

179
src/useQortalGetSaveSettings.tsx
View File

@ -1,97 +1,130 @@
import React, { useCallback, useEffect } from 'react' import React, { useCallback, useEffect } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil'; 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 { getArbitraryEndpointReact, getBaseApiReact } from './App';
import { decryptResource } from './components/Group/Group'; import { decryptResource } from './components/Group/Group';
import { base64ToUint8Array, uint8ArrayToObject } from './backgroundFunctions/encryption'; import {
base64ToUint8Array,
uint8ArrayToObject,
} from './backgroundFunctions/encryption';
function fetchFromLocalStorage(key) { function fetchFromLocalStorage(key) {
try { try {
const serializedValue = localStorage.getItem(key); const serializedValue = localStorage.getItem(key);
if (serializedValue === null) { if (serializedValue === null) {
console.log(`No data found for key: ${key}`); console.log(`No data found for key: ${key}`);
return null; return null;
}
return JSON.parse(serializedValue);
} catch (error) {
console.error('Error fetching from localStorage:', error);
return null;
} }
return JSON.parse(serializedValue);
} catch (error) {
console.error('Error fetching from localStorage:', error);
return null;
}
} }
const getPublishRecord = async (myName) => { const getPublishRecord = async (myName) => {
// const validApi = await findUsableApi(); // 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 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); const response = await fetch(url);
if (!response.ok) { if (!response.ok) {
throw new Error("network error"); throw new Error('network error');
} }
const publishData = await response.json(); 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} return { hasPublishRecord: false };
}; };
const getPublish = async (myName) => { const getPublish = async (myName) => {
try { try {
let data let data;
const res = await fetch( const res = await fetch(
`${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${myName}/ext_saved_settings?encoding=base64` `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${myName}/ext_saved_settings?encoding=base64`
); );
data = await res.text(); data = await res.text();
if(!data) throw new Error('Unable to fetch publish') if (!data) throw new Error('Unable to fetch publish');
const decryptedKey: any = await decryptResource(data); const decryptedKey: any = await decryptResource(data);
const dataint8Array = base64ToUint8Array(decryptedKey.data); const dataint8Array = base64ToUint8Array(decryptedKey.data);
const decryptedKeyToObject = uint8ArrayToObject(dataint8Array); const decryptedKeyToObject = uint8ArrayToObject(dataint8Array);
return decryptedKeyToObject return decryptedKeyToObject;
} catch (error) { } catch (error) {
return null return null;
} }
}; };
export const useQortalGetSaveSettings = (myName, isAuthenticated) => { export const useQortalGetSaveSettings = (myName, isAuthenticated) => {
const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom); const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom);
const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom); const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom);
const setSettingsQDNLastUpdated = useSetRecoilState(settingsQDNLastUpdatedAtom); const setSettingsQDNLastUpdated = useSetRecoilState(
const [settingsLocalLastUpdated] = useRecoilState(settingsLocalLastUpdatedAtom); settingsQDNLastUpdatedAtom
const [isUsingImportExportSettings] = useRecoilState(isUsingImportExportSettingsAtom); );
const [settingsLocalLastUpdated] = useRecoilState(
settingsLocalLastUpdatedAtom
);
const [isUsingImportExportSettings] = useRecoilState(
isUsingImportExportSettingsAtom
);
const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom) const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom);
const getSavedSettings = useCallback(async (myName, settingsLocalLastUpdated)=> { const getSavedSettings = useCallback(
try { async (myName, settingsLocalLastUpdated) => {
const {hasPublishRecord, timestamp} = await getPublishRecord(myName) try {
if(hasPublishRecord){ const { hasPublishRecord, timestamp } = await getPublishRecord(myName);
const settings = await getPublish(myName) if (hasPublishRecord) {
if(settings?.sortablePinnedApps && timestamp > settingsLocalLastUpdated){ const settings = await getPublish(myName);
setSortablePinnedApps(settings.sortablePinnedApps) if (
settings?.sortablePinnedApps &&
setSettingsQDNLastUpdated(timestamp || 0) timestamp > settingsLocalLastUpdated
} else if(settings?.sortablePinnedApps){ ) {
setSettingsQDNLastUpdated(timestamp || 0) setSortablePinnedApps(settings.sortablePinnedApps);
setOldPinnedApps(settings.sortablePinnedApps)
}
if(!settings){
// set -100 to indicate that it couldn't fetch the publish
setSettingsQDNLastUpdated(-100)
}
} 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);
} }
}, []) setCanSave(true);
useEffect(()=> { } catch (error) {}
if(!myName || !settingsLocalLastUpdated || !isAuthenticated || isUsingImportExportSettings === null) return },
if(isUsingImportExportSettings) return []
getSavedSettings(myName, settingsLocalLastUpdated) );
}, [getSavedSettings, myName, settingsLocalLastUpdated, isAuthenticated, isUsingImportExportSettings]) useEffect(() => {
if (
} !myName ||
!settingsLocalLastUpdated ||
!isAuthenticated ||
isUsingImportExportSettings === null
)
return;
if (isUsingImportExportSettings) return;
getSavedSettings(myName, settingsLocalLastUpdated);
}, [
getSavedSettings,
myName,
settingsLocalLastUpdated,
isAuthenticated,
isUsingImportExportSettings,
]);
};