Qortal/chrome-extension
1
0
Fork 0
mirror of https://github.com/Qortal/chrome-extension.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix navigation issue

Browse Source
This commit is contained in:
PhilReact 2024-10-29 11:04:28 +02:00
parent 1560f25f1b
commit 2ba7341e2b
2 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Apps/AppViewer.tsx
View File

@ -17,7 +17,6 @@ export const AppViewer = React.forwardRef(({ app , hide}, iframeRef) => {
const { document, window: frameWindow } = useFrame(); const { document, window: frameWindow } = useFrame();
const {path, history, changeCurrentIndex} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId) const {path, history, changeCurrentIndex} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId)
const [url, setUrl] = useState('') const [url, setUrl] = useState('')
console.log('historyreact', history)
useEffect(()=> { useEffect(()=> {
setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}`) setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}`)
@ -53,16 +52,14 @@ export const AppViewer = React.forwardRef(({ app , hide}, iframeRef) => {
// Signal non-manual navigation // Signal non-manual navigation
iframeRef.current.contentWindow.postMessage( iframeRef.current.contentWindow.postMessage(
{ action: 'PERFORMING_NON_MANUAL' }, '*' { action: 'PERFORMING_NON_MANUAL', currentIndex: previousPageIndex}, '*'
); );
console.log('previousPageIndex', previousPageIndex)
// Update the current index locally // Update the current index locally
changeCurrentIndex(previousPageIndex); changeCurrentIndex(previousPageIndex);
// Create a navigation promise with a 200ms timeout // Create a navigation promise with a 200ms timeout
const navigationPromise = new Promise((resolve, reject) => { const navigationPromise = new Promise((resolve, reject) => {
function handleNavigationSuccess(event) { function handleNavigationSuccess(event) {
console.log('listeninghandlenav', event)
if (event.data?.action === 'NAVIGATION_SUCCESS' && event.data.path === previousPath) { if (event.data?.action === 'NAVIGATION_SUCCESS' && event.data.path === previousPath) {
frameWindow.removeEventListener('message', handleNavigationSuccess); frameWindow.removeEventListener('message', handleNavigationSuccess);
resolve(); resolve();
@ -86,12 +83,10 @@ export const AppViewer = React.forwardRef(({ app , hide}, iframeRef) => {
// Execute navigation promise and handle timeout fallback // Execute navigation promise and handle timeout fallback
try { try {
await navigationPromise; await navigationPromise;
console.log('Navigation succeeded within 200ms.');
} catch (error) { } catch (error) {
iframeRef.current.contentWindow.postMessage(
{ action: 'PERFORMING_NON_MANUAL' }, '*'
); setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${previousPath != null ? previousPath : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}&time=${new Date().getMilliseconds()}&isManualNavigation=false`)
setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.previousPath != null ? previousPath : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}&time=${new Date().getMilliseconds()}&isManualNavigation=false`)
// iframeRef.current.contentWindow.location.href = previousPath; // Fallback URL update // iframeRef.current.contentWindow.location.href = previousPath; // Fallback URL update
} }
} else { } else {
@ -119,7 +114,6 @@ export const AppViewer = React.forwardRef(({ app , hide}, iframeRef) => {
if (iframeRef.current && iframeRef.current.contentWindow) { if (iframeRef.current && iframeRef.current.contentWindow) {
console.log('iframeRef.contentWindow', iframeRef.current.contentWindow);
iframeRef.current.contentWindow.postMessage( iframeRef.current.contentWindow.postMessage(
{ action: 'NAVIGATE_FORWARD'}, { action: 'NAVIGATE_FORWARD'},
'*' '*'

6
src/components/Apps/useQortalMessageListener.tsx
View File

@ -349,6 +349,7 @@ isDOMContentLoaded: false
}) })
}, []) }, [])
const resetHistory = useCallback(()=> { const resetHistory = useCallback(()=> {
setHistory({ setHistory({
customQDNHistoryPaths: [], customQDNHistoryPaths: [],
@ -361,7 +362,6 @@ isDOMContentLoaded: false
useEffect(() => { useEffect(() => {
const listener = async (event) => { const listener = async (event) => {
console.log('eventreactt', event)
// event.preventDefault(); // Prevent default behavior // event.preventDefault(); // Prevent default behavior
// event.stopImmediatePropagation(); // Stop other listeners from firing // event.stopImmediatePropagation(); // Stop other listeners from firing
@ -426,15 +426,13 @@ isDOMContentLoaded: false
setHistory((prev)=> { setHistory((prev)=> {
const copyPrev = {...prev} const copyPrev = {...prev}
if((copyPrev?.customQDNHistoryPaths || []).at(-1) === (event?.data?.payload?.customQDNHistoryPaths || []).at(-1)) { if((copyPrev?.customQDNHistoryPaths || []).at(-1) === (event?.data?.payload?.customQDNHistoryPaths || []).at(-1)) {
console.log('customQDNHistoryPaths.length', prev?.customQDNHistoryPaths.length)
return { return {
...prev, ...prev,
currentIndex: prev.customQDNHistoryPaths.length - 1 === -1 ? 0 : prev.customQDNHistoryPaths.length - 1 currentIndex: prev.customQDNHistoryPaths.length - 1 === -1 ? 0 : prev.customQDNHistoryPaths.length - 1
} }
} }
const copyHistory = {...prev} const copyHistory = {...prev}
const paths = [...(copyHistory?.customQDNHistoryPaths || []), ...(event?.data?.payload?.customQDNHistoryPaths || [])] const paths = [...(copyHistory?.customQDNHistoryPaths.slice(0, copyHistory.currentIndex + 1) || []), ...(event?.data?.payload?.customQDNHistoryPaths || [])]
console.log('paths', paths)
return { return {
...prev, ...prev,
customQDNHistoryPaths: paths, customQDNHistoryPaths: paths,