init bridge at every page to access its onEditChange method

collective · Jul 4, 2024 · fab8b46 · fab8b46
1 parent 508de9a
commit fab8b46
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -269,7 +269,9 @@ function handleEditChange(updatedData) {
 }
 
 // Set up the onEditChange listener
-onEditChange(handleEditChange);
+//After initiating the bridge you can use its onEditChange method
+const bridge = initBridge('https://hydra.pretagov.com');
+bridge.onEditChange(handleEditChange);
 ```
 
 ### Level 4: Enable Managing Blocks directly on your frontend

diff --git a/examples/hydra-nextjs/src/app/[blogs]/[slug]/page.js b/examples/hydra-nextjs/src/app/[blogs]/[slug]/page.js
@@ -1,19 +1,20 @@
-"use client";
-import { notFound } from "next/navigation";
-import { usePathname } from "next/navigation";
-import { onEditChange, getTokenFromCookie } from "@volto-hydra/hydra-js";
-import { useEffect, useState } from "react";
-import BlocksList from "@/components/BlocksList";
+'use client';
+import { notFound } from 'next/navigation';
+import { usePathname } from 'next/navigation';
+import { initBridge, getTokenFromCookie } from '#utils/hydra';
+import { useEffect, useState } from 'react';
+import BlocksList from '@/components/BlocksList';
 import { fetchContent } from '#utils/api';
 
 export default function Blog({ params }) {
+  const bridge = initBridge('https://hydra.pretagov.com');
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const pathname = usePathname();
   useEffect(() => {
     async function getData(token = null) {
       try {
-        const apiPath = "https://hydra.pretagov.com";
+        const apiPath = 'https://hydra.pretagov.com';
         const path = pathname;
         const content = await fetchContent(apiPath, { token, path });
         setData(content);
@@ -26,19 +27,19 @@ export default function Blog({ params }) {
 
     const url = new URL(window.location.href);
     const tokenFromUrl =
-      url.searchParams.get("access_token") || getTokenFromCookie();
+      url.searchParams.get('access_token') || getTokenFromCookie();
     getData(tokenFromUrl);
   }, [pathname]);
 
   const [value, setValue] = useState(data);
 
   useEffect(() => {
-    onEditChange((updatedData) => {
+    bridge.onEditChange((updatedData) => {
       if (updatedData) {
         setValue(updatedData);
       }
     });
-  },[]);
+  }, [bridge]);
 
   if (loading) {
     return <div>Loading...</div>;
@@ -59,5 +60,5 @@ export default function Blog({ params }) {
     return notFound();
   }
 
-  return "";
+  return '';
 }
diff --git a/examples/hydra-nextjs/src/app/[blogs]/page.js b/examples/hydra-nextjs/src/app/[blogs]/page.js
@@ -1,19 +1,20 @@
-"use client";
-import { notFound } from "next/navigation";
-import { useEffect, useState } from "react";
-import { onEditChange, getTokenFromCookie } from "@volto-hydra/hydra-js";
-import BlocksList from "@/components/BlocksList";
+'use client';
+import { notFound } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { initBridge, getTokenFromCookie } from '#utils/hydra';
+import BlocksList from '@/components/BlocksList';
 import { fetchContent } from '#utils/api';
 
 export default function Home({ params }) {
+  const bridge = initBridge('https://hydra.pretagov.com');
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [value, setValue] = useState(data);
 
   useEffect(() => {
     async function getData(token = null) {
       try {
-        const apiPath = "https://hydra.pretagov.com";
+        const apiPath = 'https://hydra.pretagov.com';
         const path = `${params.blogs}`;
         const content = await fetchContent(apiPath, { token, path });
         setData(content);
@@ -26,17 +27,17 @@ export default function Home({ params }) {
 
     const url = new URL(window.location.href);
     const tokenFromUrl =
-      url.searchParams.get("access_token") || getTokenFromCookie();
+      url.searchParams.get('access_token') || getTokenFromCookie();
     getData(tokenFromUrl);
   }, [params.blogs]);
 
   useEffect(() => {
-    onEditChange((updatedData) => {
+    bridge.onEditChange((updatedData) => {
       if (updatedData) {
         setValue(updatedData);
       }
     });
-  },[]);
+  }, [bridge]);
 
   if (loading) {
     return <div>Loading...</div>;

diff --git a/examples/hydra-nextjs/src/app/layout.js b/examples/hydra-nextjs/src/app/layout.js
@@ -1,17 +1,11 @@
-"use client";
-import "../styles.css";
-import "semantic-ui-css/semantic.min.css";
-import { useEffect } from "react";
-import { initBridge } from "@volto-hydra/hydra-js";
-import TranstackProviders from "@/providers/TranstackProviders";
-import { Container } from "semantic-ui-react";
-import Menu from "@/components/Menu";
+'use client';
+import '../styles.css';
+import 'semantic-ui-css/semantic.min.css';
+import TranstackProviders from '@/providers/TranstackProviders';
+import { Container } from 'semantic-ui-react';
+import Menu from '@/components/Menu';
 
 export default function RootLayout({ children }) {
-  useEffect(() => {
-    initBridge("https://hydra.pretagov.com");
-  }, []);
-
   return (
     <>
       <html lang="en">

diff --git a/examples/hydra-nextjs/src/app/page.js b/examples/hydra-nextjs/src/app/page.js
@@ -1,19 +1,20 @@
-"use client";
-import { notFound } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { getTokenFromCookie, onEditChange } from "@volto-hydra/hydra-js";
-import { fetchContent } from "#utils/api";
-import BlocksList from "@/components/BlocksList";
+'use client';
+import { notFound } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import { getTokenFromCookie, initBridge } from '#utils/hydra';
+import { fetchContent } from '#utils/api';
+import BlocksList from '@/components/BlocksList';
 
 export default function Home() {
+  const brige = initBridge('https://hydra.pretagov.com');
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function getData(token = null) {
       try {
-        const apiPath = "https://hydra.pretagov.com";
-        const path = "";
+        const apiPath = 'https://hydra.pretagov.com';
+        const path = '';
         const content = await fetchContent(apiPath, { token, path });
         setData(content);
       } catch (error) {
@@ -25,19 +26,19 @@ export default function Home() {
 
     const url = new URL(window.location.href);
     const tokenFromUrl =
-      url.searchParams.get("access_token") || getTokenFromCookie();
+      url.searchParams.get('access_token') || getTokenFromCookie();
     getData(tokenFromUrl);
   }, []);
 
   const [value, setValue] = useState(data);
 
   useEffect(() => {
-    onEditChange((updatedData) => {
+    brige.onEditChange((updatedData) => {
       if (updatedData) {
         setValue(updatedData);
       }
     });
-  }, []);
+  }, [brige]);
 
   if (loading) {
     return <div>Loading...</div>;

diff --git a/examples/hydra-nextjs/src/components/BlocksList/BlocksList.js b/examples/hydra-nextjs/src/components/BlocksList/BlocksList.js
@@ -1,22 +1,33 @@
-import React from "react";
-import SlateBlock from "@/components/SlateBlock";
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+import SlateBlock from '@/components/SlateBlock';
 
 const BlocksList = ({ data }) => {
   return (
     <ul className="blog-list">
       {data.blocks_layout.items.map((id) => {
-        if (data.blocks[id]["@type"] === "slate") {
+        if (data.blocks[id]['@type'] === 'slate') {
           const slateValue = data.blocks[id].value;
           return (
             <li key={id} className="blog-list-item" data-block-uid={`${id}`}>
               <SlateBlock value={slateValue} />
             </li>
           );
-        } else if (data.blocks[id]["@type"] === "image") {
-          const image_url = data.blocks[id].url;
+        } else if (data.blocks[id]['@type'] === 'image') {
+          const image_url = data.blocks[id]?.image_scales
+            ? `${data.blocks[id].url}/++api++/${data.blocks[id]?.image_scales.image[0].download}`
+            : data.blocks[id].url;
+          const size = data.blocks[id].size;
+          const align = data.blocks[id].align;
           return (
             <li key={id} className="blog-list-item" data-block-uid={`${id}`}>
-              <img src={image_url} alt="" width={100} height={100} />
+              <img
+                src={image_url}
+                className={`blog-list-item-img image-size-${size} image-align-${align}`}
+                alt=""
+                width={100}
+                height={100}
+              />
             </li>
           );
         }

diff --git a/packages/hydra-js/hydra.js b/packages/hydra-js/hydra.js
@@ -11,6 +11,8 @@ class Bridge {
     this.deleteButton = null;
     this.clickOnBtn = false;
     this.quantaToolbar = null;
+    this.currentPathname =
+      typeof window !== 'undefined' ? window.location.pathname : null;
     this.init();
   }
 
@@ -20,11 +22,19 @@ class Bridge {
     }
 
     if (window.self !== window.top) {
-      this.navigationHandler = (event) => {
-        window.parent.postMessage(
-          { type: 'URL_CHANGE', url: event.destination.url },
-          this.adminOrigin,
-        );
+      // Handle URL changes generically (no chromium-specific code here)
+      this.navigationHandler = (e) => {
+        const newPathname = new URL(e.destination.url).pathname;
+        if (
+          newPathname !== this.currentPathname ||
+          this.currentPathname === null
+        ) {
+          this.currentUrl = newPathname;
+          window.parent.postMessage(
+            { type: 'URL_CHANGE', url: e.destination.url },
+            this.adminOrigin,
+          );
+        }
       };
 
       // Ensure we don't add multiple listeners