From a4a036fe0587543548d95240763c6cc4efb03402 Mon Sep 17 00:00:00 2001
From: Erez Rokah <erezrokah@users.noreply.github.com>
Date: Thu, 19 Mar 2020 16:07:21 +0200
Subject: [PATCH] docs: scroll to widget on load, fix widget navigation history
 (#3441)

---
 website/netlify.toml              |  2 +-
 website/src/components/widgets.js | 22 ++++++++++++++--------
 website/src/templates/doc-page.js |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/website/netlify.toml b/website/netlify.toml
index 85ea18e9..fe668aa7 100644
--- a/website/netlify.toml
+++ b/website/netlify.toml
@@ -4,4 +4,4 @@
   publish = "dist/"
 
   [build.environment]
-    NODE_VERSION = "8"
+    NODE_VERSION = "12"
diff --git a/website/src/components/widgets.js b/website/src/components/widgets.js
index f541a0ee..b409d684 100644
--- a/website/src/components/widgets.js
+++ b/website/src/components/widgets.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 
 import WidgetDoc from './widget-doc';
@@ -21,20 +21,26 @@ const WidgetsContent = styled.div`
   border-radius: 4px;
 `;
 
-const Widgets = ({ widgets }) => {
+const Widgets = ({ widgets, location }) => {
+  const initialLoadRef = useRef(true);
+  const navRef = useRef(null);
   const [currentWidget, setWidget] = useState(null);
 
   useEffect(() => {
-    const hash = window.location.hash ? window.location.hash.replace('#', '') : '';
+    const hash = location.hash ? location.hash.replace('#', '') : '';
 
     const widgetsContainHash = widgets.edges.some(w => w.node.frontmatter.title === hash);
 
     if (widgetsContainHash) {
-      return setWidget(hash);
+      setWidget(hash);
+      if (initialLoadRef.current) {
+        navRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    } else {
+      setWidget(widgets.edges[0].node.frontmatter.title);
     }
-
-    setWidget(widgets.edges[0].node.frontmatter.title);
-  }, []);
+    initialLoadRef.current = false;
+  }, [widgets, location.hash]);
 
   const handleWidgetChange = (event, title) => {
     event.preventDefault();
@@ -46,7 +52,7 @@ const Widgets = ({ widgets }) => {
 
   return (
     <section>
-      <WidgetsNav>
+      <WidgetsNav ref={navRef}>
         {widgets.edges.map(({ node }) => {
           const { label, title } = node.frontmatter;
           return (
diff --git a/website/src/templates/doc-page.js b/website/src/templates/doc-page.js
index 15f9f0e1..24200dad 100644
--- a/website/src/templates/doc-page.js
+++ b/website/src/templates/doc-page.js
@@ -48,7 +48,7 @@ export const DocsTemplate = ({
         {filename && <EditLink collection={`docs_${group}`} filename={filename} />}
         <h1>{title}</h1>
         <Markdown body={body} html={html} />
-        {showWidgets && <Widgets widgets={widgets} />}
+        {showWidgets && <Widgets widgets={widgets} location={location} />}
       </article>
     </SidebarLayout>
   </Container>