diff --git a/packages/volto-hydra/src/components/Iframe/View.jsx b/packages/volto-hydra/src/components/Iframe/View.jsx index 2a154ae..585b562 100644 --- a/packages/volto-hydra/src/components/Iframe/View.jsx +++ b/packages/volto-hydra/src/components/Iframe/View.jsx @@ -20,7 +20,9 @@ const getDefualtUrl = () => * @returns {string} URL with the admin params */ const getUrlWithAdminParams = (url, token) => { - return `${url}${window.location.pathname.replace('/edit', '')}?access_token=${token}&_edit=true`; + return typeof window !== 'undefined' + ? `${url}${window.location.pathname.replace('/edit', '')}?access_token=${token}&_edit=true` + : null; }; function isValidUrl(string) { @@ -47,10 +49,37 @@ const Iframe = () => { ? getUrlWithAdminParams(savedUrl, token) : getUrlWithAdminParams(defaultUrl, token); - setUrl( - `${savedUrl || defaultUrl}${window.location.pathname.replace('/edit', '')}`, + const handleNavigateToUrl = useCallback( + (givenUrl = null) => { + if (!isValidUrl(givenUrl) && !isValidUrl(url)) { + return; + } + // Update adminUI URL with the new URL + const formattedUrl = givenUrl ? new URL(givenUrl) : new URL(url); + const newOrigin = formattedUrl.origin; + Cookies.set('iframe_url', newOrigin, { expires: 7 }); + + if (formattedUrl.pathname !== '/') { + history.push( + window.location.pathname.endsWith('/edit') + ? `${formattedUrl.pathname}/edit` + : `${formattedUrl.pathname}`, + ); + } else { + history.push( + window.location.pathname.endsWith('/edit') ? `/edit` : `/`, + ); + } + }, + [history, url], ); - setSrc(initialUrl); + + useEffect(() => { + setUrl( + `${savedUrl || defaultUrl}${window.location.pathname.replace('/edit', '')}`, + ); + setSrc(initialUrl); + }, [savedUrl, defaultUrl, initialUrl]); useEffect(() => { const initialUrlOrigin = new URL(initialUrl).origin; @@ -61,7 +90,6 @@ const Iframe = () => { const { type } = event.data; switch (type) { case 'URL_CHANGE': // URL change from the iframe - setUrl(event.data.url); handleNavigateToUrl(event.data.url); break; @@ -77,7 +105,7 @@ const Iframe = () => { return () => { window.removeEventListener('message', messageHandler); }; - }, [token]); + }, [handleNavigateToUrl, initialUrl, token]); useEffect(() => { if (Object.keys(form).length > 0 && isValidUrl(initialUrl)) { @@ -93,32 +121,6 @@ const Iframe = () => { setUrl(event.target.value); }; - const handleNavigateToUrl = useCallback( - (givenUrl = null) => { - if (!isValidUrl(givenUrl) && !isValidUrl(url)) { - return; - } - // Update adminUI URL with the new URL - const formattedUrl = givenUrl ? new URL(givenUrl) : new URL(url); - // setSrc(getUrlWithAdminParams(formattedUrl.origin, token)); - const newOrigin = formattedUrl.origin; - Cookies.set('iframe_url', newOrigin, { expires: 7 }); - - if (formattedUrl.pathname !== '/') { - history.push( - window.location.pathname.endsWith('/edit') - ? `${formattedUrl.pathname}/edit` - : `${formattedUrl.pathname}`, - ); - } else { - history.push( - window.location.pathname.endsWith('/edit') ? `/edit` : `/`, - ); - } - }, - [history, url], - ); - return (