Merge pull request #104 from kremalicious/feature/project-nav

center current project in project nav

package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "file-saver": "^2.0.1",
-    "gatsby": "^2.3.3",
+    "gatsby": "^2.3.4",
     "gatsby-image": "^2.0.35",
     "gatsby-plugin-favicon": "^3.1.5",
     "gatsby-plugin-matomo": "^0.6.0",
@@ -32,19 +32,19 @@
     "gatsby-plugin-react-helmet": "^3.0.11",
     "gatsby-plugin-sass": "^2.0.11",
     "gatsby-plugin-sharp": "^2.0.32",
-    "gatsby-plugin-sitemap": "^2.0.10",
+    "gatsby-plugin-sitemap": "^2.0.11",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-source-filesystem": "^2.0.28",
     "gatsby-transformer-json": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.17",
     "gatsby-transformer-yaml": "^2.1.11",
     "giphy-js-sdk-core": "^1.0.6",
-    "graphql": "^14.1.1",
+    "graphql": "^14.2.0",
     "intersection-observer": "^0.5.1",
     "js-yaml": "^3.13.0",
     "node-sass": "^4.11.0",
-    "react": "^16.8.5",
+    "react": "^16.8.6",
-    "react-dom": "^16.8.5",
+    "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
     "react-pose": "^4.0.8",
     "remark": "^10.0.1",

src/components/molecules/Availability.jsx

@@ -29,21 +29,15 @@ export default class Availability extends PureComponent {
         render={data => {
           const { availability } = data.dataYaml
           const { status, available, unavailable } = availability
+          const className = status
+            ? `${styles.availability} ${styles.available}`
+            : `${styles.availability}`
+          const html = status ? available : unavailable
 
           return (
             !this.props.hide && (
-              <Animation
+              <Animation className={className}>
-                className={
+                <p dangerouslySetInnerHTML={{ __html: html }} />
-                  status
-                    ? `${styles.availability} ${styles.available}`
-                    : `${styles.availability}`
-                }
-              >
-                <p
-                  dangerouslySetInnerHTML={{
-                    __html: status ? available : unavailable
-                  }}
-                />
               </Animation>
             )
           )

src/components/molecules/ProjectNav.jsx

@@ -24,70 +24,75 @@ const query = graphql`
   }
 `
 
-class ProjectLink extends PureComponent {
+class Project extends PureComponent {
+  static propTypes = {
+    node: PropTypes.object.isRequired,
+    currentSlug: PropTypes.string.isRequired,
+    refCurrentItem: PropTypes.any
+  }
+
   render() {
-    const { node } = this.props
+    const { node, currentSlug, refCurrentItem } = this.props
+    const isCurrent = node.slug === currentSlug
 
     return (
-      <Link className={styles.link} to={node.slug}>
+      <div className={styles.item} ref={isCurrent ? refCurrentItem : null}>
-        <Img
+        <Link className={styles.link} to={node.slug}>
-          className={styles.image}
+          <Img
-          fluid={node.img.childImageSharp.fluid}
+            className={styles.image}
-          alt={node.title}
+            fluid={node.img.childImageSharp.fluid}
-        />
+            alt={node.title}
-        <h1 className={styles.title}>{node.title}</h1>
+          />
-      </Link>
+          <h1 className={styles.title}>{node.title}</h1>
-    )
+        </Link>
-  }
-}
-
-ProjectLink.propTypes = {
-  node: PropTypes.object
-}
-
-export default class ProjectNav extends PureComponent {
-  state = {
-    scrolledToCurrent: false
-  }
-
-  componentDidMount() {
-    // this.scrollToCurrent()
-    this.setState({ scrolledToCurrent: true })
-  }
-
-  componentDidUpdate() {
-    // this.scrollToCurrent()
-  }
-
-  componentWillUnmount() {
-    this.setState({ scrolledToCurrent: false })
-  }
-
-  scrollToCurrent = () => {
-    const current = this.currentItem
-    const currentLeft = current.getBoundingClientRect().left
-    const currentWidth = current.clientWidth
-    const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
-
-    this.scrollContainer.scrollLeft += finalPosition
-  }
-
-  Project({ node }) {
-    // const current = node.slug === slug
-
-    return (
-      <div
-        className={styles.item}
-        key={node.slug}
-        // ref={node => current && (this.currentItem = node)}
-      >
-        <ProjectLink node={node} />
       </div>
     )
   }
+}
+
+export default class ProjectNav extends PureComponent {
+  static propTypes = {
+    currentSlug: PropTypes.string.isRequired
+  }
+
+  state = {
+    scrollLeftPosition: 0
+  }
+
+  scrollContainer = React.createRef()
+  currentItem = React.createRef()
+
+  componentDidMount() {
+    this.scrollToCurrent()
+  }
+
+  componentDidUpdate() {
+    this.scrollToCurrent()
+  }
+
+  scrollToCurrent = () => {
+    const scrollContainer = this.scrollContainer.current
+    const activeItem = this.currentItem.current
+    const scrollRect = scrollContainer.getBoundingClientRect()
+    const activeRect = activeItem.getBoundingClientRect()
+    const scrollLeftPosition =
+      activeRect.left -
+      scrollRect.left -
+      scrollRect.width / 2 +
+      activeRect.width / 2
+
+    scrollContainer.scrollLeft += this.state.scrollLeftPosition
+
+    this.setState(state => {
+      return {
+        ...state,
+        scrollLeftPosition
+      }
+    })
+  }
 
   render() {
-    const { slug } = this.props
+    const { currentSlug } = this.props
 
     return (
       <StaticQuery
@@ -96,12 +101,14 @@ export default class ProjectNav extends PureComponent {
           const projects = data.allProjectsYaml.edges
 
           return (
-            <nav
+            <nav className={styles.projectNav} ref={this.scrollContainer}>
-              className={styles.projectNav}
-              // ref={node => (this.scrollContainer = node)}
-            >
               {projects.map(({ node }) => (
-                <this.Project key={node.id} node={node} slug={slug} />
+                <Project
+                  key={node.id}
+                  node={node}
+                  currentSlug={currentSlug}
+                  refCurrentItem={this.currentItem}
+                />
               ))}
             </nav>
           )
@@ -110,7 +117,3 @@ export default class ProjectNav extends PureComponent {
     )
   }
 }
-
-ProjectNav.propTypes = {
-  slug: PropTypes.string
-}

src/templates/Project.jsx

@@ -75,7 +75,7 @@ export default class Project extends PureComponent {
           <ProjectMeta links={links} techstack={techstack} />
         </article>
 
-        <ProjectNav slug={project.slug} />
+        <ProjectNav currentSlug={project.slug} />
       </>
     )
   }