From 52f4d37b8ea9ad212dba5fb0dc640131547eeab9 Mon Sep 17 00:00:00 2001
From: Bilawal Hameed <bil@spotify.com>
Date: Fri, 3 Jul 2020 16:05:12 +0200
Subject: [PATCH] fix(techdocs): cleaned up useEffect in Reader

---
 .../techdocs/src/reader/components/Reader.tsx | 111 +++++++++---------
 1 file changed, 58 insertions(+), 53 deletions(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index d3aadae6aa..31ccbbb57a 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -77,66 +77,71 @@ export const Reader = () => {
   const state = useFetch(`${normalizedUrl}index.html`);
 
   React.useEffect(() => {
-    const divElement = shadowDomRef.current;
-    if (
-      divElement?.shadowRoot &&
-      state.value &&
-      !(state.value instanceof Error)
-    ) {
-      const transformedElement = transformer(state.value, [
-        addBaseUrl({
-          docStorageURL,
-          componentId,
-          path,
-        }),
-        rewriteDocLinks(),
-        modifyCss({
-          cssTransforms: {
-            '.md-main__inner': [{ 'margin-top': '0' }],
-            '.md-sidebar': [{ top: '0' }, { width: '20rem' }],
-            '.md-typeset': [{ 'font-size': '1rem' }],
-            '.md-nav': [{ 'font-size': '1rem' }],
-            '.md-grid': [{ 'max-width': '80vw' }],
-          },
-        }),
-        removeMkdocsHeader(),
-      ]);
-
-      divElement.shadowRoot.innerHTML = '';
-
-      if (transformedElement) {
-        divElement.shadowRoot.appendChild(transformedElement);
-        transformer(divElement.shadowRoot.children[0], [
-          dom => {
-            setTimeout(() => {
-              if (window.location.hash) {
-                const hash = window.location.hash.slice(1);
-                divElement.shadowRoot?.getElementById(hash)?.scrollIntoView();
-              }
-            }, 200);
-            return dom;
-          },
-          addLinkClickListener({
-            onClick: (_: MouseEvent, url: string) => {
-              const parsedUrl = new URL(url);
-              navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
-
-              divElement.shadowRoot
-                ?.querySelector(parsedUrl.hash)
-                ?.scrollIntoView();
-            },
-          }),
-        ]);
-      }
+    if (!shadowRoot) {
+      return; // Shadow DOM isn't ready
     }
-  }, [shadowDomRef, state, componentId, path, navigate]);
+
+    if (state.loading) {
+      return; // Page isn't ready
+    }
+
+    // Pre-render
+    const transformedElement = transformer(state.value as string, [
+      addBaseUrl({
+        docStorageURL,
+        componentId,
+        path,
+      }),
+      rewriteDocLinks(),
+      modifyCss({
+        cssTransforms: {
+          '.md-main__inner': [{ 'margin-top': '0' }],
+          '.md-sidebar': [{ top: '0' }, { width: '20rem' }],
+          '.md-typeset': [{ 'font-size': '1rem' }],
+          '.md-nav': [{ 'font-size': '1rem' }],
+          '.md-grid': [{ 'max-width': '80vw' }],
+        },
+      }),
+      removeMkdocsHeader(),
+    ]);
+
+    if (!transformedElement) {
+      return; // An unexpected error occurred
+    }
+
+    Array.from(shadowRoot.children).forEach(child =>
+      shadowRoot.removeChild(child),
+    );
+    shadowRoot.appendChild(transformedElement);
+
+    // Post-render
+    transformer(shadowRoot.children[0], [
+      dom => {
+        setTimeout(() => {
+          if (window.location.hash) {
+            const hash = window.location.hash.slice(1);
+            shadowRoot?.getElementById(hash)?.scrollIntoView();
+          }
+        }, 200);
+        return dom;
+      },
+      addLinkClickListener({
+        onClick: (_: MouseEvent, url: string) => {
+          const parsedUrl = new URL(url);
+          navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
+
+          shadowRoot?.querySelector(parsedUrl.hash)?.scrollIntoView();
+        },
+      }),
+    ]);
+  }, [componentId, path, shadowRoot, state]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (state.value instanceof Error) return <TechDocsNotFound />;
 
   return (
     <>
       <TechDocsPageWrapper title={componentId} subtitle={componentId}>
-        <div ref={shadowDomRef} />
+        <div ref={ref} />
       </TechDocsPageWrapper>
     </>
   );