window ref error fix

collective · Jun 20, 2024 · 29ee46c · 29ee46c
1 parent f3825b2
commit 29ee46c
Showing 1 changed file with 34 additions and 32 deletions.
diff --git 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 (
     <div id="iframeContainer">
       <div className="input-container">