refactor: move HomeScreen to React component

samuelmaddock · Mar 7, 2021 · ead85f8 · ead85f8
1 parent 8793c7b
commit ead85f8
Show file tree

Hide file tree

Showing 12 changed files with 456 additions and 339 deletions.
diff --git a/packages/metastream-app/src/assets/homescreen.html b/packages/metastream-app/src/assets/homescreen.html
diff --git a/packages/metastream-app/src/assets/webview.html b/packages/metastream-app/src/assets/webview.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Metastream Webview</title>
+    <link rel="icon" type="image/png" href="/images/icon-192.png" sizes="192x192" />
+    <link rel="icon" type="image/png" href="/images/icon-512.png" sizes="512x512" />
+  </head>
+  <body></body>
+</html>
diff --git a/packages/metastream-app/src/components/Popup.tsx b/packages/metastream-app/src/components/Popup.tsx
@@ -4,10 +4,10 @@ import { HighlightButton } from './common/button'
 import { t } from 'locale'
 import { Trans } from 'react-i18next'
 import { isFirefox } from 'utils/browser'
-import { createPortal } from 'react-dom'
 import { Remote } from './remote'
 import { dispatchExtensionMessage } from 'utils/extension'
 import { ASSETS_PATH } from 'utils/appUrl'
+import { Portal } from './Portal'
 
 const POPUP_WIDTH = 336 // px
 
@@ -111,7 +111,6 @@ export class PopupWindow extends Component<Props, State> {
   }
 
   private intervalId?: number
-  private stylesheetObserver?: MutationObserver
 
   componentWillUnmount() {
     this.closeWindows()
@@ -140,11 +139,6 @@ export class PopupWindow extends Component<Props, State> {
       PopupWindow.mediaWindowRef = null
     }
 
-    if (this.stylesheetObserver) {
-      this.stylesheetObserver.disconnect()
-      this.stylesheetObserver = undefined
-    }
-
     clearInterval(this.intervalId)
     this.intervalId = undefined
 
@@ -186,39 +180,6 @@ export class PopupWindow extends Component<Props, State> {
       remotePopupReady: Boolean(PopupWindow.remoteWindowRef && !PopupWindow.remoteWindowRef.closed),
       mediaPopupReady: Boolean(PopupWindow.mediaWindowRef && !PopupWindow.mediaWindowRef.closed)
     })
-
-    if (this.stylesheetObserver) {
-      this.stylesheetObserver.disconnect()
-    }
-
-    this.stylesheetObserver = new MutationObserver(this.onHeadMutation)
-    this.stylesheetObserver.observe(document.head, { childList: true })
-
-    this.copyStyleSheets()
-  }
-
-  private onHeadMutation: MutationCallback = list => {
-    const shouldCopyStyles = list.some(record => record.type === 'childList')
-    if (shouldCopyStyles) {
-      this.copyStyleSheets()
-    }
-  }
-
-  private copyStyleSheets() {
-    const remoteDocument = PopupWindow.remoteWindowRef && PopupWindow.remoteWindowRef.document
-    if (remoteDocument) {
-      // remove existing stylesheets
-      Array.from(remoteDocument.styleSheets).forEach(stylesheet => {
-        if (stylesheet.ownerNode) stylesheet.ownerNode.remove()
-      })
-
-      // add all stylesheets from main document
-      Array.from(document.styleSheets).forEach(stylesheet => {
-        if (stylesheet.ownerNode) {
-          remoteDocument.head.appendChild(stylesheet.ownerNode.cloneNode(true))
-        }
-      })
-    }
   }
 
   private openWindows = () => {
@@ -322,7 +283,11 @@ export class PopupWindow extends Component<Props, State> {
     const root = remoteDocument.getElementById('root')
     if (!root) return
 
-    return createPortal(<Remote />, root)
+    return (
+      <Portal container={root}>
+        <Remote />
+      </Portal>
+    )
   }
 
   private renderPopupIcon() {

diff --git a/packages/metastream-app/src/components/Portal.tsx b/packages/metastream-app/src/components/Portal.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface Props {
+  container: HTMLElement
+  children: React.ReactNode
+}
+
+export const Portal = ({ children, container }: Props) => {
+  const [isReady, setIsReady] = useState(false)
+
+  const copyStyleSheets = () => {
+    const remoteDocument = container.ownerDocument
+    if (remoteDocument) {
+      // remove existing stylesheets
+      Array.from(remoteDocument.styleSheets).forEach(stylesheet => {
+        if (stylesheet.ownerNode) stylesheet.ownerNode.remove()
+      })
+
+      // add all stylesheets from main document
+      Array.from(document.styleSheets).forEach(stylesheet => {
+        if (stylesheet.ownerNode) {
+          remoteDocument.head.appendChild(stylesheet.ownerNode.cloneNode(true))
+        }
+      })
+    }
+  }
+
+  useEffect(function componentDidMount() {
+    const stylesheetObserver = new MutationObserver(list => {
+      const shouldCopyStyles = list.some(record => record.type === 'childList')
+      if (shouldCopyStyles) {
+        copyStyleSheets()
+      }
+    })
+
+    stylesheetObserver.observe(document.head, { childList: true })
+
+    copyStyleSheets()
+
+    // Need to wait a bit for stylesheets to load to prevent flashing content.
+    let timeoutId = setTimeout(() => {
+      setIsReady(true)
+    }, 60)
+
+    return function componentWillUnmount() {
+      stylesheetObserver.disconnect()
+
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [])
+
+  return createPortal(isReady ? children : <></>, container)
+}