refactor project nav

package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-beta.6",
+    "gatsby": "^2.0.0-beta.9",
     "gatsby-image": "^2.0.0-beta.2",
     "gatsby-plugin-favicon": "^2.1.1",
     "gatsby-plugin-matomo": "^0.4.0",

src/components/molecules/ProjectNav.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'gatsby'
+import { Link, graphql, StaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
 import styles from './ProjectNav.module.scss'
 
@@ -15,6 +15,31 @@ const ProjectLink = ({ node }) => (
   </Link>
 )
 
+const ProjectNavQuery = ({ render }) => (
+  <StaticQuery
+    query={graphql`
+      query ProjectsNavQuery {
+        allProjectsYaml {
+          edges {
+            node {
+              title
+              slug
+              img {
+                childImageSharp {
+                  fluid(maxWidth: 500, quality: 85) {
+                    ...GatsbyImageSharpFluid_noBase64
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={render}
+  />
+)
+
 class ProjectNav extends Component {
   constructor(props) {
     super(props)
@@ -40,31 +65,39 @@ class ProjectNav extends Component {
   }
 
   render() {
-    const { projects, project } = this.props
+    const { slug } = this.props
 
     return (
-      <nav
-        className={styles.projectNav}
-        ref={node => {
-          this.scrollContainer = node
-        }}
-      >
-        {projects.map(({ node }) => {
-          const current = node.slug === project.slug
+      <ProjectNavQuery
+        render={data => {
+          const projects = data.allProjectsYaml.edges
 
           return (
-            <div
-              className={styles.item}
-              key={node.slug}
+            <nav
+              className={styles.projectNav}
               ref={node => {
-                if (current) this.currentItem = node
+                this.scrollContainer = node
               }}
             >
-              <ProjectLink node={node} />
-            </div>
+              {projects.map(({ node }) => {
+                const current = node.slug === slug
+
+                return (
+                  <div
+                    className={styles.item}
+                    key={node.slug}
+                    ref={node => {
+                      if (current) this.currentItem = node
+                    }}
+                  >
+                    <ProjectLink node={node} />
+                  </div>
+                )
+              })}
+            </nav>
           )
-        })}
-      </nav>
+        }}
+      />
     )
   }
 }
@@ -74,8 +107,11 @@ ProjectLink.propTypes = {
 }
 
 ProjectNav.propTypes = {
-  projects: PropTypes.array,
-  project: PropTypes.object
+  slug: PropTypes.string
+}
+
+ProjectNavQuery.propTypes = {
+  render: PropTypes.any
 }
 
 export default ProjectNav

src/pages/404.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import Link from 'gatsby'
+import { Link } from 'gatsby'
 import giphyAPI from 'giphy-js-sdk-core'
 import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'

src/templates/Project.jsx

@@ -45,7 +45,6 @@ class Project extends Component {
 
   render() {
     const meta = this.props.data.dataYaml
-    const projects = this.props.data.allProjectsYaml.edges
     const project = this.props.data.projectsYaml
     const projectImages = this.props.data.projectImages.edges
     const { title, links, techstack } = project
@@ -68,7 +67,7 @@ class Project extends Component {
           </Content>
         </article>
 
-        <ProjectNav projects={projects} project={project} />
+        <ProjectNav slug={project.slug} />
       </Layout>
     )
   }
@@ -123,11 +122,6 @@ export const projectAndProjectsQuery = graphql`
         GitHub
         Dribbble
       }
-      availability {
-        status
-        available
-        unavailable
-      }
       img {
         childImageSharp {
           resize(width: 980) {
@@ -148,21 +142,5 @@ export const projectAndProjectsQuery = graphql`
         }
       }
     }
-
-    allProjectsYaml {
-      edges {
-        node {
-          title
-          slug
-          img {
-            childImageSharp {
-              fluid(maxWidth: 500, quality: 85) {
-                ...GatsbyImageSharpFluid_noBase64
-              }
-            }
-          }
-        }
-      }
-    }
   }
 `