more PureComponent

src/components/atoms/SEO.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import Helmet from 'react-helmet'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
@@ -43,7 +43,19 @@ const query = graphql`
   }
 `
 
-const SEO = ({ project }) => (
+export default class SEO extends PureComponent {
+  static propTypes = {
+    project: PropTypes.object
+  }
+
+  static defaultProps = {
+    project: {}
+  }
+
+  render() {
+    const { project } = this.props
+
+    return (
       <StaticQuery
         query={query}
         render={data => {
@@ -89,13 +101,5 @@ const SEO = ({ project }) => (
         }}
       />
     )
-
-SEO.propTypes = {
-  project: PropTypes.object
   }
-
-SEO.defaultProps = {
-  project: {}
 }
-
-export default SEO

src/components/molecules/LogoUnit.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
 import { moveInBottom } from '../atoms/Transitions'
-
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './LogoUnit.module.scss'
 
@@ -19,37 +18,21 @@ const query = graphql`
 const Animation = posed.div(moveInBottom)
 
 export default class LogoUnit extends PureComponent {
-  state = { isMinimal: false }
-
   static propTypes = {
     minimal: PropTypes.bool
   }
 
-  checkMinimal = () => {
-    const { minimal } = this.props
-
-    this.setState({ isMinimal: minimal })
-  }
-
-  componentDidMount() {
-    this.checkMinimal()
-  }
-
-  componentDidUpdate() {
-    this.checkMinimal()
-  }
-
   render() {
     return (
       <StaticQuery
         query={query}
         render={data => {
           const { title, tagline } = data.dataYaml
-          const { isMinimal } = this.state
+          const { minimal } = this.props
 
           return (
             <Animation>
-              <div className={isMinimal ? styles.minimal : styles.logounit}>
+              <div className={minimal ? styles.minimal : styles.logounit}>
                 <Logo className={styles.logounit__logo} />
                 <h1 className={styles.logounit__title}>
                   {title.toLowerCase()}

src/templates/Project.jsx

@@ -27,19 +27,23 @@ class ProjectMeta extends PureComponent {
   }
 }
 
-const ProjectImages = ({ projectImages, title }) => (
+class ProjectImages extends PureComponent {
+  static propTypes = {
+    projectImages: PropTypes.array,
+    title: PropTypes.string
+  }
+
+  render() {
+    return (
       <FullWidth>
-    {projectImages.map(({ node }) => (
+        {this.props.projectImages.map(({ node }) => (
           <div className={styles.imageWrap} key={node.id}>
-        <ProjectImage fluid={node.fluid} alt={title} />
+            <ProjectImage fluid={node.fluid} alt={this.props.title} />
           </div>
         ))}
       </FullWidth>
     )
-
-ProjectImages.propTypes = {
-  projectImages: PropTypes.array,
-  title: PropTypes.string
+  }
 }
 
 export default class Project extends PureComponent {
@@ -49,9 +53,10 @@ export default class Project extends PureComponent {
   }
 
   render() {
-    const project = this.props.data.projectsYaml
-    const projectImages = this.props.data.projectImages.edges
-    const descriptionHtml = this.props.data.projectsYaml.fields.descriptionHtml
+    const { data } = this.props
+    const project = data.projectsYaml
+    const projectImages = data.projectImages.edges
+    const descriptionHtml = data.projectsYaml.fields.descriptionHtml
     const { title, links, techstack } = project
 
     return (
@@ -76,7 +81,7 @@ export default class Project extends PureComponent {
   }
 }
 
-export const projectAndProjectsQuery = graphql`
+export const projectQuery = graphql`
   query($slug: String!) {
     projectsYaml(slug: { eq: $slug }) {
       title