Make this.props.children a function in layouts so can control which p…

…age is rendered as child

examples/gatsbygram/gatsby-node.js

@@ -54,7 +54,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           // as a template component. The `context` is
           // optional but is often necessary so the template
           // can query data specific to each page.
-          path: slug(edge.node.id),
+          path: `/${slug(edge.node.id)}/`,
           component: slash(postTemplate),
           context: {
             id: edge.node.id,

examples/gatsbygram/src/components/modal.js

@@ -1,11 +1,11 @@
 import React from "react"
 import Modal from "react-modal"
-import browserHistory from "react-router/lib/browserHistory"
 import CaretRight from "react-icons/lib/fa/caret-right"
 import CaretLeft from "react-icons/lib/fa/caret-left"
 import Close from "react-icons/lib/md/close"
 import findIndex from "lodash/findIndex"
 import mousetrap from "mousetrap"
+import * as PropTypes from "prop-types"
 
 import { rhythm } from "../utils/typography"
 
@@ -16,6 +16,10 @@ 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())
@@ -51,7 +55,7 @@ class GatsbyGramModal extends React.Component {
       } else {
         nextPost = posts[currentIndex + 1]
       }
-      browserHistory.push(`/${nextPost.id}/`)
+      this.context.router.history.push(`/${nextPost.id}/`)
     }
   }
 
@@ -69,15 +73,17 @@ class GatsbyGramModal extends React.Component {
       } else {
         previousPost = posts[currentIndex - 1]
       }
-      browserHistory.push(`/${previousPost.id}/`)
+      this.context.router.history.push(`/${previousPost.id}/`)
     }
   }
 
   render() {
+    console.log(this.props)
+    console.log("context", this.context)
     return (
       <Modal
         isOpen={this.props.isOpen}
-        onRequestClose={() => browserHistory.push(`/`)}
+        onRequestClose={() => this.context.router.history.push(`/`)}
         style={{
           overlay: {
             position: `fixed`,
@@ -103,7 +109,7 @@ class GatsbyGramModal extends React.Component {
         contentLabel="Modal"
       >
         <div
-          onClick={() => browserHistory.push(`/`)}
+          onClick={() => this.context.router.history.push(`/`)}
           css={{
             display: `flex`,
             position: `relative`,
@@ -129,7 +135,11 @@ class GatsbyGramModal extends React.Component {
               }}
               onClick={e => this.previous(e)}
             />
-            {this.props.children}
+            {console.log("rendering modal")}
+            {console.log(this.props.children)}
+            {this.props.children({
+              location: { pathname: this.props.location.pathname },
+            })}
             <CaretRight
               css={{
                 cursor: `pointer`,
@@ -141,7 +151,7 @@ class GatsbyGramModal extends React.Component {
             />
           </div>
           <Close
-            onClick={() => browserHistory.push(`/`)}
+            onClick={() => this.context.router.history.push(`/`)}
             css={{
               cursor: `pointer`,
               color: `rgba(255,255,255,0.8)`,

examples/gatsbygram/src/layouts/default.js → examples/gatsbygram/src/layouts/index.js

@@ -33,15 +33,19 @@ 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`
@@ -50,10 +54,19 @@ class DefaultLayout extends React.Component {
       // weird jumping.
       this.htmlElement.style.overflowY = `scroll`
 
+      this.isModal = true
       // Save the homepage if we haven't already.
-      if (!this.modalBackgroundChildren) {
-        this.modalBackgroundChildren = this.props.children
-      }
+      // 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.
@@ -68,8 +81,25 @@ class DefaultLayout extends React.Component {
   }
 
   render() {
+    console.log(this.props.children)
     const { location } = this.props
-    const isModal = this.modalBackgroundChildren
+    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
@@ -151,12 +181,21 @@ class DefaultLayout extends React.Component {
             },
           }}
         >
-          {isModal ? this.modalBackgroundChildren : this.props.children}
+          <div>
+            {isModal
+              ? this.props.children({
+                  ...this.props,
+                  location: { pathname: `/` },
+                })
+              : this.props.children()}
+          </div>
 
-          {isModal &&
-            <Modal isOpen={true} posts={this.posts} location={location}>
-              {this.props.children}
-            </Modal>}
+          <div>
+            {isModal &&
+              <Modal isOpen={true} posts={this.posts} location={location}>
+                {this.props.children}
+              </Modal>}
+          </div>
         </div>
       </div>
     )

examples/gatsbygram/src/pages/index.js

@@ -64,6 +64,7 @@ class Index extends React.Component {
   }
 
   render() {
+    console.log(this.props)
     let { allPostsJson, user } = this.props.data
 
     const posts = allPostsJson.edges.map(e => e.node)
@@ -128,9 +129,10 @@ class Index extends React.Component {
           </div>
         </div>
         {/* posts */}
-        {chunk(posts.slice(0, this.state.postsToShow), 3).map(chunk => {
+        {chunk(posts.slice(0, this.state.postsToShow), 3).map((chunk, i) => {
           return (
             <div
+              key={`chunk-${i}`}
               css={{
                 display: `flex`,
                 alignItems: `stretch`,

examples/gatsbygram/src/templates/post-page.js

@@ -9,6 +9,7 @@ class PostTemplate extends React.Component {
     }),
   }
   render() {
+    console.log("template-post-page", this.props)
     return (
       // PostDetail is used for this detail page and
       // also in the modal.

examples/using-drupal/src/pages/index.js

@@ -14,7 +14,7 @@ class IndexPage extends React.Component {
             name = article.author.name
           }
           return (
-            <div>
+            <div key={article.nid}>
               <Link to={`/node/${article.nid}/`}>
                 <h4>
                   <span style={{ color: `gray` }}>{article.created}</span>

packages/gatsby-link/src/index.js

@@ -20,9 +20,9 @@ class GatsbyLink extends React.Component {
     // that don't support service workers *cough* Safari/IE *cough*.
     // TODO also add check if user is using SW, e.g. window.caches
     if (
-      (process.env.NODE_ENV === `production` &&
-        !(`serviceWorker` in navigator)) ||
-      window.location.protocol !== `https:`
+      process.env.NODE_ENV === `production` &&
+      (!(`serviceWorker` in window.navigator) ||
+        window.location.protocol !== `https:`)
     ) {
       requestUserIdle(() => {
         console.log(`the user is idle`)

packages/gatsby-plugin-preact/package.json

@@ -15,8 +15,8 @@
   "author": "Kyle Mathews <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "preact": "^7.1.0",
-    "preact-compat": "^3.11.0"
+    "preact": "^8.1.0",
+    "preact-compat": "^3.16.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1"

packages/gatsby/lib/cache-dir/production-app.js

@@ -4,7 +4,7 @@ apiRunner(`clientEntry`)
 
 import React from "react"
 import ReactDOM from "react-dom"
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
+import { BrowserRouter as Router, Route, withRouter } from "react-router-dom"
 import { ScrollContext } from "react-router-scroll"
 import createHistory from "history/createBrowserHistory"
 import routes from "./routes.json"
@@ -29,6 +29,11 @@ const loadScriptsForPath = (path, cb = () => {}) => {
   }
 
   const page = routes.find(r => r.path === path)
+
+  if (!page) {
+    return cb()
+  }
+
   console.time(`load scripts`)
   let scripts = {
     layout: false,
@@ -94,11 +99,13 @@ const renderPage = props => {
       ...props,
       ...scriptsCache[props.location.pathname].pageData,
     })
-  } else {
-    $(notFoundScripts.component, {
+  } else if (notFoundScripts) {
+    return $(notFoundScripts.component, {
       ...props,
       ...notFoundScripts.pageData,
     })
+  } else {
+    return null
   }
 }
 
@@ -108,20 +115,22 @@ const renderSite = ({ scripts, props }) => {
 
 const $ = React.createElement
 
-loadScriptsForPath(window.location.pathname, () => {
+loadScriptsForPath(window.location.pathname, scripts => {
   const Root = () =>
     $(
       Router,
       null,
       $(
         ScrollContext,
         { shouldUpdateScroll },
-        $(Route, {
-          component: props => {
-            window.___history = props.history
-            return renderSite({
-              scripts: scriptsCache[props.location.pathname],
-              props,
+        $(withRouter(scripts.layout), {
+          children: layoutProps => {
+            return $(Route, {
+              component: routeProps => {
+                const props = layoutProps ? layoutProps : routeProps
+                window.___history = props.history
+                return renderPage(props)
+              },
             })
           },
         })