From c2cae7e1719d0ae5e5b50be5f69dbc6bfc0e88bf Mon Sep 17 00:00:00 2001
From: Jori Lallo <jorilallo@Joris-MacBook.local>
Date: Sat, 27 Aug 2016 13:48:00 -0700
Subject: [PATCH] Fixed "scroll to anchor" issues

---
 .../scenes/DocumentScene/DocumentScene.js     | 38 +++++++++++--------
 .../DocumentScene/DocumentSceneStore.js       | 13 +++++--
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js
index e1fd7e9c4..fb05709b6 100644
--- a/frontend/scenes/DocumentScene/DocumentScene.js
+++ b/frontend/scenes/DocumentScene/DocumentScene.js
@@ -48,12 +48,15 @@ class DocumentScene extends React.Component {
     didScroll: false,
   }
 
-  componentDidMount = () => {
+  componentDidMount = async () => {
     const { id } = this.props.routeParams;
-    this.store.fetchDocument(id);
+    await this.store.fetchDocument(id, {
+      replaceUrl: !this.props.location.hash,
+    });
+    this.scrollTohash();
   }
 
-  componentWillReceiveProps = (nextProps) => {
+  componentWillReceiveProps = async (nextProps) => {
     const key = nextProps.keydown.event;
     if (key) {
       if (key.key === '/' && (key.metaKey || key.ctrl.Key)) {
@@ -73,20 +76,13 @@ class DocumentScene extends React.Component {
     const oldId = this.props.params.id;
     const newId = nextProps.params.id;
     if (oldId !== newId) {
-      this.store.fetchDocument(newId, true);
+      await this.store.fetchDocument(newId, {
+        softLoad: true,
+        replaceUrl: !this.props.location.hash,
+      });
     }
 
-    // Scroll to anchor after loading, and only once
-    const { hash } = this.props.location;
-
-    if (nextProps.doc && hash && !this.state.didScroll) {
-      const name = hash.split('#')[1];
-      setTimeout(() => {
-        this.setState({ didScroll: true });
-        const element = window.document.getElementsByName(name)[0];
-        if (element) element.scrollIntoView();
-      }, 0);
-    }
+    this.scrollTohash();
   }
 
   onEdit = () => {
@@ -121,6 +117,18 @@ class DocumentScene extends React.Component {
     a.click();
   }
 
+  scrollTohash = () => {
+    // Scroll to anchor after loading, and only once
+    const { hash } = this.props.location;
+
+    if (hash && !this.state.didScroll) {
+      const name = hash.slice(1);
+      this.setState({ didScroll: true });
+      const element = window.document.getElementsByName(name)[0];
+      if (element) element.scrollIntoView();
+    }
+  }
+
   render() {
     const {
       sidebar,
diff --git a/frontend/scenes/DocumentScene/DocumentSceneStore.js b/frontend/scenes/DocumentScene/DocumentSceneStore.js
index 3475808a6..1f5d42a85 100644
--- a/frontend/scenes/DocumentScene/DocumentSceneStore.js
+++ b/frontend/scenes/DocumentScene/DocumentSceneStore.js
@@ -43,7 +43,12 @@ class DocumentSceneStore {
 
   /* Actions */
 
-  @action fetchDocument = async (id, softLoad = false) => {
+  @action fetchDocument = async (id, options = {}) => {
+    options = {
+      softLoad: false,
+      replaceUrl: true,
+      ...options,
+    };
     let cacheHit = false;
     runInAction('retrieve document from cache', () => {
       const cachedValue = this.cache.fetchFromCache(id);
@@ -51,15 +56,15 @@ class DocumentSceneStore {
       if (cacheHit) this.document = cachedValue;
     });
 
-    this.isFetching = !softLoad;
-    this.updatingContent = softLoad && !cacheHit;
+    this.isFetching = !options.softLoad;
+    this.updatingContent = options.softLoad && !cacheHit;
 
     try {
       const res = await client.get('/documents.info', { id }, { cache: true });
       const { data } = res;
       runInAction('fetchDocument', () => {
         this.document = data;
-        browserHistory.replace(data.url);
+        if (options.replaceUrl) browserHistory.replace(data.url);
       });
     } catch (e) {
       console.error("Something went wrong");