Expose navigateTo on gatsby-link for programmatic navigation

gatsbyjs · May 11, 2017 · 54c3aab · 54c3aab
1 parent 7efee0b
commit 54c3aab
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 60 deletions.
diff --git a/examples/gatsbygram/src/components/modal.js b/examples/gatsbygram/src/components/modal.js
@@ -6,6 +6,7 @@ import Close from "react-icons/lib/md/close"
 import findIndex from "lodash/findIndex"
 import mousetrap from "mousetrap"
 import * as PropTypes from "prop-types"
+import { navigateTo } from "gatsby-link"
 
 import { rhythm } from "../utils/typography"
 
@@ -16,10 +17,6 @@ class GatsbyGramModal extends React.Component {
     posts: React.PropTypes.array.isRequired,
   }
 
-  static contextTypes = {
-    router: PropTypes.Object,
-  }
-
   componentDidMount() {
     mousetrap.bind(`left`, () => this.previous())
     mousetrap.bind(`right`, () => this.next())
@@ -55,7 +52,7 @@ class GatsbyGramModal extends React.Component {
       } else {
         nextPost = posts[currentIndex + 1]
       }
-      this.context.router.history.push(`/${nextPost.id}/`)
+      navigateTo(`/${nextPost.id}/`)
     }
   }
 
@@ -73,17 +70,17 @@ class GatsbyGramModal extends React.Component {
       } else {
         previousPost = posts[currentIndex - 1]
       }
-      this.context.router.history.push(`/${previousPost.id}/`)
+      navigateTo(`/${previousPost.id}/`)
     }
   }
 
   render() {
     console.log(this.props)
-    console.log("context", this.context)
+    console.log(`context`, this.context)
     return (
       <Modal
         isOpen={this.props.isOpen}
-        onRequestClose={() => this.context.router.history.push(`/`)}
+        onRequestClose={() => navigateTo(`/`)}
         style={{
           overlay: {
             position: `fixed`,
@@ -109,7 +106,7 @@ class GatsbyGramModal extends React.Component {
         contentLabel="Modal"
       >
         <div
-          onClick={() => this.context.router.history.push(`/`)}
+          onClick={() => navigateTo(`/`)}
           css={{
             display: `flex`,
             position: `relative`,
@@ -135,7 +132,7 @@ class GatsbyGramModal extends React.Component {
               }}
               onClick={e => this.previous(e)}
             />
-            {console.log("rendering modal")}
+            {console.log(`rendering modal`)}
             {console.log(this.props.children)}
             {this.props.children({
               location: { pathname: this.props.location.pathname },
@@ -151,7 +148,7 @@ class GatsbyGramModal extends React.Component {
             />
           </div>
           <Close
-            onClick={() => this.context.router.history.push(`/`)}
+            onClick={() => navigateTo(`/`)}
             css={{
               cursor: `pointer`,
               color: `rgba(255,255,255,0.8)`,

diff --git a/examples/gatsbygram/src/layouts/index.js b/examples/gatsbygram/src/layouts/index.js
@@ -33,40 +33,22 @@ class DefaultLayout extends React.Component {
 
     // Cache the window width.
     this.windowWidth = window.innerWidth
-    console.log("componentDidMount", this.windowWidth)
   }
   componentWillReceiveProps(nextProps) {
-    console.log(this.props.children === nextProps.children)
-    console.log("nextProps", nextProps)
     // if we're changing to a non-homepage page, put things in
     // a modal (unless we're on mobile).
     if (
       nextProps.location.pathname !== `/` &&
       nextProps.location.pathname !== `/about/` &&
       this.windowWidth > 750
     ) {
-      console.log("put things in a modal")
       // Freeze the background from scrolling.
       this.htmlElement.style.overflow = `hidden`
       this.bodyElement.style.overflow = `hidden`
 
       // Always set overflow-y to scroll so the scrollbar stays visible avoiding
       // weird jumping.
       this.htmlElement.style.overflowY = `scroll`
-
-      this.isModal = true
-      // Save the homepage if we haven't already.
-      // console.log("this.modalBackgroundChildren", this.modalBackgroundChildren)
-      // console.log("this.props.children", this.props.children)
-      // if (!this.modalBackgroundChildren) {
-      // this.modalBackgroundChildren = nextProps.children
-      // this.modalBackgroundChildren = React.createElement(
-      // this.props.children.type.WrappedComponent,
-      // {
-      // location: { pathname: `/` },
-      // }
-      // )
-      // }
     } else {
       // Otherwise we're navigating back home so delete old home so the
       // modal can be destroyed.
@@ -81,25 +63,15 @@ class DefaultLayout extends React.Component {
   }
 
   render() {
-    console.log(this.props.children)
     const { location } = this.props
     let isModal = false
-    console.log(this.props.location.pathname)
-    console.log(this.windowWidth)
     if (
       this.props.location.pathname !== `/` &&
       this.props.location.pathname !== `/about/` &&
       this.windowWidth > 750
     ) {
       isModal = true
     }
-    // const isModal = this.isModal
-    console.log("isModal", isModal)
-    // console.log("------render---------")
-    // console.log("render props", this.props)
-    console.log(location.pathname)
-    // console.log("modalBackgroundChildren", isModal)
-    // console.log("layout props", this.props)
 
     return (
       <div

diff --git a/examples/gatsbygram/src/templates/post-page.js b/examples/gatsbygram/src/templates/post-page.js
@@ -9,7 +9,7 @@ class PostTemplate extends React.Component {
     }),
   }
   render() {
-    console.log("template-post-page", this.props)
+    console.log(`template-post-page`, this.props)
     return (
       // PostDetail is used for this detail page and
       // also in the modal.

diff --git a/examples/hn/src/layouts/default.js b/examples/hn/src/layouts/default.js
@@ -84,7 +84,7 @@ class DefaultLayout extends React.Component {
           <tr style={{ height: `10px` }} />
           <tr>
             <td>
-              {this.props.children}
+              {this.props.children()}
             </td>
           </tr>
           <tr>

diff --git a/examples/using-drupal/src/layouts/index.js b/examples/using-drupal/src/layouts/index.js
@@ -21,7 +21,7 @@ class DefaultLayout extends React.Component {
             Example of using Drupal as a data source for a Gatsby site
           </h3>
         </Link>
-        {this.props.children}
+        {this.props.children()}
         <hr />
         <p>
           The src for this website is at

diff --git a/packages/gatsby-link/src/index.js b/packages/gatsby-link/src/index.js
@@ -40,9 +40,7 @@ class GatsbyLink extends React.Component {
           // loaded before continuing.
           if (process.env.NODE_ENV === `production`) {
             e.preventDefault()
-            window.___loadScriptsForPath(this.props.to, () => {
-              this.context.router.history.push(this.props.to)
-            })
+            window.___navigateTo(this.props.to)
           }
         }}
         {...this.props}
@@ -57,3 +55,7 @@ GatsbyLink.contextTypes = {
 }
 
 module.exports = GatsbyLink
+
+exports.navigateTo = pathname => {
+  window.___navigateTo(pathname)
+}
diff --git a/packages/gatsby-plugin-catch-links/src/gatsby-browser.js b/packages/gatsby-plugin-catch-links/src/gatsby-browser.js
@@ -1,8 +1,7 @@
+import { navigateTo } from "gatsby-link"
+
 import catchLinks from "./catch-links"
 
 catchLinks(window, href => {
-  console.log(href)
-  window.___loadScriptsForPath(href, () => {
-    window.___history.push(href)
-  })
+  navigateTo(href)
 })
diff --git a/packages/gatsby/lib/cache-dir/production-app.js b/packages/gatsby/lib/cache-dir/production-app.js
@@ -61,7 +61,14 @@ const loadScriptsForPath = (path, cb = () => {}) => {
   })
 }
 
+const navigateTo = pathname => {
+  loadScriptsForPath(pathname, () => {
+    window.___history.push(pathname)
+  })
+}
+
 window.___loadScriptsForPath = loadScriptsForPath
+window.___navigateTo = navigateTo
 
 const history = createHistory()
 history.listen((location, action) => {
@@ -127,8 +134,8 @@ loadScriptsForPath(window.location.pathname, scripts => {
           children: layoutProps => {
             return $(Route, {
               component: routeProps => {
+                window.___history = routeProps.history
                 const props = layoutProps ? layoutProps : routeProps
-                window.___history = props.history
                 return renderPage(props)
               },
             })

diff --git a/packages/gatsby/lib/cache-dir/root.js b/packages/gatsby/lib/cache-dir/root.js
@@ -57,6 +57,12 @@ const addNotFoundRoute = () => {
   }
 }
 
+const navigateTo = pathname => {
+  window.___history.push(pathname)
+}
+
+window.___navigateTo = navigateTo
+
 const Root = () =>
   $(
     Router,
@@ -69,16 +75,7 @@ const Root = () =>
           return $(Route, {
             component: routeProps => {
               window.___history = routeProps.history
-              if (layoutProps) {
-                console.log("layoutProps", layoutProps.location.pathname)
-              }
-              console.log("routeProps", routeProps.location.pathname)
               const props = layoutProps ? layoutProps : routeProps
-              console.log(
-                "child function props",
-                props,
-                props.location.pathname
-              )
               const page = routes.find(
                 route => route.path === props.location.pathname
               )

diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -250,7 +250,7 @@ module.exports = React.createClass({
               },
             }}
           >
-            {this.props.children}
+            {this.props.children()}
           </div>
         </div>
         <div
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,7 +84,7 @@ class DefaultLayout extends React.Component { @@
               <tr style={{ height: `10px` }} />
               <tr>
                 <td>
-                  {this.props.children}
+                  {this.props.children()}
                 </td>
               </tr>
               <tr>
@@ Expand Down @@