feat(sdk): [wip] partially stand up config listener

jeremyckahn · Oct 17, 2023 · bc53e4a · bc53e4a
1 parent aa53709
commit bc53e4a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/sdk/sdk.ts b/sdk/sdk.ts
@@ -1,3 +1,4 @@
+import { QueryParamKeys } from '../src/models/shell'
 import { iframeFeatureAllowList } from '../src/config/iframeFeatureAllowList'
 
 export const defaultRoot = 'https://chitchatter.im/'
@@ -27,7 +28,7 @@ class ChatEmbed extends HTMLElement {
     const roomName = encodeURIComponent(
       this.getAttribute(ChatEmbedAttributes.ROOM_NAME) ?? window.location.href
     )
-    const iframeSrc = `${rootUrl}public/${roomName}/?embed=1`
+    const iframeSrc = `${rootUrl}public/${roomName}/?${QueryParamKeys.IS_EMBEDDED}&${QueryParamKeys.WAIT_FOR_CONFIG}`
 
     iframe.setAttribute('src', iframeSrc)
     iframe.style.border = 'none'

diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
@@ -20,6 +20,7 @@ import { PublicRoom } from 'pages/PublicRoom'
 import { PrivateRoom } from 'pages/PrivateRoom'
 import { UserSettings } from 'models/settings'
 import { PersistedStorageKeys } from 'models/storage'
+import { QueryParamKeys } from 'models/shell'
 import { Shell } from 'components/Shell'
 
 export interface BootstrapProps {
@@ -31,6 +32,26 @@ const homepageUrl = new URL(
   process.env.REACT_APP_HOMEPAGE ?? 'https://chitchatter.im/'
 )
 
+const waitForConfig = () => {
+  return new Promise<UserSettings>((resolve, reject) => {
+    const configWaitTimeout = 3000
+
+    setTimeout(reject, configWaitTimeout)
+
+    window.addEventListener('message', (event: MessageEvent) => {
+      // FIXME: Make this work
+      //if (event.origin !== window.location.origin) return
+
+      if (event.data?.name === 'config') {
+        console.log('got config')
+        // FIXME: Use a specific origin here
+        window.postMessage({ name: 'receivedConfig' }, '*')
+        resolve(event.data.payload)
+      }
+    })
+  })
+}
+
 function Bootstrap({
   persistedStorage: persistedStorageProp = localforage.createInstance({
     name: 'chitchatter',
@@ -69,7 +90,25 @@ function Bootstrap({
         )
 
       if (persistedUserSettings) {
-        setUserSettings({ ...userSettings, ...persistedUserSettings })
+        const queryParams = new URLSearchParams(window.location.search)
+
+        let overrideConfig = {}
+
+        try {
+          if (queryParams.has(QueryParamKeys.WAIT_FOR_CONFIG)) {
+            overrideConfig = await waitForConfig()
+          }
+        } catch (e) {
+          console.error(
+            'Chitchatter configuration from parent frame could not be loaded'
+          )
+        }
+
+        setUserSettings({
+          ...userSettings,
+          ...persistedUserSettings,
+          ...overrideConfig,
+        })
       } else {
         await persistedStorageProp.setItem(
           PersistedStorageKeys.USER_SETTINGS,

diff --git a/src/models/shell.ts b/src/models/shell.ts
@@ -4,4 +4,5 @@ export type AlertOptions = Pick<AlertProps, 'severity'>
 
 export enum QueryParamKeys {
   IS_EMBEDDED = 'embed',
+  WAIT_FOR_CONFIG = 'waitForConfig',
 }