Merge pull request #217 from Automattic/instanceId

Correctly remember last url when multiple blocks are on the same page

Author: psrpinto

frontend/block/block.json

@@ -8,6 +8,10 @@
   "icon": "format-chat",
   "description": "Matrix client",
   "attributes": {
+    "instanceId": {
+      "type": "string",
+      "default": ""
+    },
     "defaultHomeserver": {
       "type": "string",
       "default": ""

frontend/block/edit.tsx

@@ -1,6 +1,6 @@
 import { useBlockProps } from "@wordpress/block-editor";
 import { ResizableBox } from "@wordpress/components";
-import { WPElement } from '@wordpress/element';
+import { useEffect, WPElement } from '@wordpress/element';
 import { getIframeUrl } from "../app";
 import { Block, BlockProps, parseAttributes } from "../components/block";
 import './editor.scss';
@@ -11,13 +11,30 @@ interface Props {
     setAttributes: Function,
 }
 
+let instanceIds: string[] = [];
+
 export default function Edit(props: Props): WPElement {
     const { attributes, setAttributes } = props;
-    const parsedAttributes = parseAttributes(attributes);
 
+    // Set instanceId if it's not set, or if it already exists on the page (which happens when the block is duplicated).
+    useEffect(() => {
+        // @ts-ignore
+        let { instanceId } = attributes;
+        const hasInstanceId = instanceId && instanceId !== "";
+        const isInstanceIdDuplicated = hasInstanceId && instanceIds.includes(instanceId);
+
+        if (!hasInstanceId || isInstanceIdDuplicated) {
+            instanceId = (Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)).toString();
+            setAttributes({ instanceId });
+        }
+
+        instanceIds.push(instanceId);
+    }, []);
+
+    const parsedAttributes = parseAttributes(attributes);
     const blockProps: BlockProps = {
         focusable: true,
-        attributes,
+        attributes: parsedAttributes,
         iframeUrl: getIframeUrl(),
     };
 

frontend/block/view.ts

@@ -1,4 +1,5 @@
 import { BlockProps, renderBlock } from "../app";
+import { parseAttributes } from "../components/block";
 
 window.addEventListener('DOMContentLoaded', () => {
     renderAllBlocks().catch(error => {
@@ -13,10 +14,16 @@ async function renderAllBlocks() {
     const containers = <HTMLCollectionOf<HTMLElement>>document.getElementsByClassName('wp-block-automattic-chatrix');
     for (const container of containers) {
         const config = getConfigFromDataAttribute(container);
+        const attributes = parseAttributes(config.attributes);
         const props: BlockProps = {
-            attributes: config.attributes,
+            attributes: attributes,
         };
 
+        if (!attributes.instanceId) {
+            // In earlier versions of the block, there was no instanceId attribute, so it can be undefined.
+            console.warn('Chatrix block is missing the instanceId attribute. Re-save the page to fix this.');
+        }
+
         renderBlock(container, props);
     }
 }

frontend/components/block/attributes.ts

@@ -1,6 +1,7 @@
 import { Unit, ValueWithUnit } from "./unit";
 
-interface Attributes {
+export interface BlockAttributes {
+    instanceId: string,
     defaultHomeserver?: string,
     roomId?: string,
     height?: Height,
@@ -10,15 +11,27 @@ interface Attributes {
     borderColor?: string,
 }
 
-export function parseAttributes(attributes): Attributes {
+export function parseAttributes(attributes): BlockAttributes {
+    const {
+        instanceId,
+        defaultHomeserver,
+        roomId,
+        height,
+        borderWidth,
+        borderRadius,
+        borderStyle,
+        borderColor,
+    } = attributes;
+
     return {
-        defaultHomeserver: attributes.defaultHomeserver ?? '',
-        roomId: attributes.roomId ?? '',
-        height: attributes.height ? new Height(attributes.height.value, attributes.height.unit) : undefined,
-        borderWidth: attributes.borderWidth ? new BorderWidth(attributes.borderWidth.value, attributes.borderWidth.unit) : undefined,
-        borderRadius: attributes.borderRadius ? new BorderRadius(attributes.borderRadius.value, attributes.borderRadius.unit) : undefined,
-        borderStyle: attributes.borderStyle,
-        borderColor: attributes.borderColor,
+        instanceId,
+        defaultHomeserver: defaultHomeserver ?? '',
+        roomId: roomId ?? '',
+        height: height ? new Height(height.value, height.unit) : undefined,
+        borderWidth: borderWidth ? new BorderWidth(borderWidth.value, borderWidth.unit) : undefined,
+        borderRadius: borderRadius ? new BorderRadius(borderRadius.value, borderRadius.unit) : undefined,
+        borderStyle,
+        borderColor,
     };
 }
 

frontend/components/block/block.tsx

@@ -1,28 +1,39 @@
 import { Chat, ChatProps } from "../chat";
-import { parseAttributes } from "./attributes";
+import { BlockAttributes } from "./attributes";
 
 export interface BlockProps {
     focusable?: boolean,
-    attributes: object,
+    attributes: BlockAttributes,
     iframeUrl: URL,
 }
 
 export function Block(props: BlockProps) {
-    const attributes = parseAttributes(props.attributes);
+    const { focusable, iframeUrl } = props;
+    const {
+        instanceId,
+        defaultHomeserver,
+        roomId,
+        height,
+        borderWidth,
+        borderRadius,
+        borderStyle,
+        borderColor,
+    } = props.attributes;
 
     const style = {
-        height: attributes.height ? attributes.height.toString() : '',
-        borderWidth: attributes.borderWidth ? attributes.borderWidth.toString() : 0,
-        borderRadius: attributes.borderRadius ? attributes.borderRadius.toString() : "",
-        borderStyle: attributes.borderStyle ?? '',
-        borderColor: attributes.borderColor ?? '',
+        height: height ? height.toString() : '',
+        borderWidth: borderWidth ? borderWidth.toString() : 0,
+        borderRadius: borderRadius ? borderRadius.toString() : "",
+        borderStyle: borderStyle ?? '',
+        borderColor: borderColor ?? '',
     };
 
     const chatProps: ChatProps = {
-        focusable: props.focusable,
-        iframeUrl: props.iframeUrl,
-        defaultHomeserver: attributes.defaultHomeserver,
-        roomId: attributes.roomId,
+        focusable,
+        iframeUrl,
+        instanceId,
+        defaultHomeserver,
+        roomId,
     };
 
     return (

frontend/components/chat/chat.tsx

@@ -4,24 +4,33 @@ import { IframeUrl } from "./url";
 export interface ChatProps {
     focusable?: boolean,
     iframeUrl: URL,
+    instanceId: string,
     defaultHomeserver?: string,
     roomId?: string,
 }
 
 export function Chat(props: ChatProps) {
-    const ref = props.focusable ? useFocusableIframe() : undefined;
+    const {
+        focusable,
+        iframeUrl,
+        instanceId,
+        defaultHomeserver,
+        roomId
+    } = props;
 
-    const iframeUrl = new IframeUrl(props.iframeUrl, {
-        defaultHomeserver: props.defaultHomeserver,
-        roomId: props.roomId,
+    const ref = focusable ? useFocusableIframe() : undefined;
+    const url = new IframeUrl(iframeUrl, {
+        instanceId,
+        defaultHomeserver,
+        roomId,
     });
 
     return (
         <div className={"chatrix-component-chat"}>
             <iframe
                 // @ts-ignore
                 ref={ref}
-                src={iframeUrl.toString()}
+                src={url.toString()}
             ></iframe>
         </div>
     );

frontend/components/chat/url.ts

@@ -1,6 +1,7 @@
 const LOGIN_TOKEN_PARAM_NAME = "loginToken";
 
 type IframeParams = {
+    instanceId: string,
     defaultHomeserver?: string
     roomId?: string,
 }

frontend/iframe/config/ConfigFactory.ts

@@ -12,6 +12,7 @@ export class ConfigFactory {
         };
 
         return {
+            instanceId: getQueryParam("instanceId") ?? "",
             defaultHomeserver: getQueryParam("defaultHomeserver") ?? "",
             roomId: getQueryParam("roomId") ?? "",
             themeManifests: [

frontend/iframe/config/IConfig.ts

@@ -1,4 +1,10 @@
 export interface IConfig {
+    /**
+     * Unique identifier for this instance of the client.
+     * When multiple clients are embedded on the same page, this is used to distinguish them.
+     */
+    instanceId: string;
+
     /**
      * The default homeserver used by Hydrogen; autofilled in the login UI.
      * eg: https://matrix.org

frontend/iframe/platform/History.ts

@@ -1,10 +1,12 @@
 import { History as BaseHistory } from "hydrogen-web/src/platform/web/dom/History";
 
 export class History extends BaseHistory {
+    private readonly _instanceId: string;
     private _lastSessionHash: string | null | undefined;
 
-    constructor() {
+    constructor(instanceId: string) {
         super();
+        this._instanceId = instanceId;
     }
 
     get() {
@@ -21,16 +23,20 @@ export class History extends BaseHistory {
     }
 
     onSubscribeFirst() {
-        this._lastSessionHash = window.localStorage?.getItem("chatrix_last_url_hash");
+        this._lastSessionHash = window.localStorage?.getItem(this.urlHashKey);
         // @ts-ignore
         window.addEventListener('hashchange', this);
     }
 
     _storeHash(hash) {
-        window.localStorage?.setItem("chatrix_last_url_hash", hash);
+        window.localStorage?.setItem(this.urlHashKey, hash);
     }
 
     replaceUrlSilently(url) {
         super.replaceUrlSilently(url);
     }
+
+    private get urlHashKey(): string {
+        return `chatrix_${this._instanceId}_last_url_hash`;
+    }
 }