Making favicon store/restore more robust (#1093)

mattermost-plugin/webapp/src/index.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import {Store, Action} from 'redux'
 import {Provider as ReduxProvider} from 'react-redux'
 import {useHistory} from 'mm-react-router-dom'
 
 import {GlobalState} from 'mattermost-redux/types/store'
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences'
-import {getChannelByName} from 'mattermost-redux/selectors/entities/channels'
 
 const windowAny = (window as any)
 windowAny.baseURL = '/plugins/focalboard'
@@ -33,6 +32,8 @@ import {PluginRegistry} from './types/mattermost-webapp'
 import './plugin.scss'
 
 const MainApp = () => {
+    const [faviconStored, setFaviconStored] = useState(false)
+
     useEffect(() => {
         document.body.classList.add('focalboard-body')
         const root = document.getElementById('root')
@@ -49,23 +50,15 @@ const MainApp = () => {
     }, [])
 
     useEffect(() => {
-        const oldLink = document.querySelector("link[rel*='icon']") as HTMLLinkElement
-        if (!oldLink) {
+        const oldLinks = document.querySelectorAll("link[rel*='icon']") as NodeListOf<HTMLLinkElement>
+        if (!oldLinks) {
             return () => null
         }
+        setFaviconStored(true)
 
-        const restoreData = {
-            type: oldLink.type,
-            rel: oldLink.rel,
-            href: oldLink.href,
-        }
         return () => {
             document.querySelectorAll("link[rel*='icon']").forEach((n) => n.remove())
-            const link = document.createElement('link') as HTMLLinkElement
-            link.type = restoreData.type
-            link.rel = restoreData.rel
-            link.href = restoreData.href
-            document.getElementsByTagName('head')[0].appendChild(link)
+            oldLinks.forEach((link) => document.getElementsByTagName('head')[0].appendChild(link))
         }
     }, [])
 
@@ -73,7 +66,7 @@ const MainApp = () => {
         <ErrorBoundary>
             <ReduxProvider store={store}>
                 <div id='focalboard-app'>
-                    <App/>
+                    {faviconStored && <App/>}
                 </div>
                 <div id='focalboard-root-portal'/>
             </ReduxProvider>