refactor

.codeclimate.yml

@@ -0,0 +1,2 @@
+exclude_patterns:
+  - src/lib/vcf/

src/components/molecules/ProjectNav.jsx

@@ -7,34 +7,33 @@ import { ReactComponent as Index } from '../../images/index.svg'
 import '../atoms/Icons.scss'
 import './ProjectNav.scss'
 
-const ProjectNav = ({ previous, next }) => (
+const ProjectNavLink = ({ previous, next }) => {
-  <nav className="project__nav full-width">
+  const slug = previous ? previous.slug : next.slug
-    {previous && (
+  const title = previous ? previous.title : next.title
+  const img = previous ? previous.img : next.img
+
+  return (
     <div className="project__nav__item">
-        <Link className="project__nav__link prev" to={previous.slug}>
+      <Link className="project__nav__link prev" to={slug}>
         <Img
           className="project__nav__image"
-            sizes={previous.img.childImageSharp.sizes}
+          sizes={img.childImageSharp.sizes}
-            alt={previous.title}
+          alt={title}
         />
-          <h1 className="project__nav__title">{previous.title}</h1>
+        <h1 className="project__nav__title">{title}</h1>
       </Link>
     </div>
-    )}
+  )
+}
+
+const ProjectNav = ({ previous, next }) => (
+  <nav className="project__nav full-width">
+    {previous && <ProjectNavLink previous={previous} />}
     <Link className="project__nav__index" title="Back to projects" to={'/'}>
       <Index className="icon" />
     </Link>
     {next ? (
-      <div className="project__nav__item">
+      <ProjectNavLink next={next} />
-        <Link className="project__nav__link next" to={next.slug}>
-          <Img
-            className="project__nav__image"
-            sizes={next.img.childImageSharp.sizes}
-            alt={next.title}
-          />
-          <h1 className="project__nav__title">{next.title}</h1>
-        </Link>
-      </div>
     ) : (
       <div className="project__nav__item project__nav__item--end">
         <div className="project__nav__end">
@@ -46,6 +45,11 @@ const ProjectNav = ({ previous, next }) => (
   </nav>
 )
 
+ProjectNavLink.propTypes = {
+  previous: PropTypes.object,
+  next: PropTypes.object
+}
+
 ProjectNav.propTypes = {
   previous: PropTypes.object,
   next: PropTypes.object

src/components/molecules/ThemeSwitch.jsx

@@ -1,10 +1,25 @@
 import React, { PureComponent, Fragment } from 'react'
+import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { FadeIn } from '../atoms/Animations'
 import { ReactComponent as Day } from '../../images/day.svg'
 import { ReactComponent as Night } from '../../images/night.svg'
 import './ThemeSwitch.scss'
 
+const ThemeToggle = props => {
+  return (
+    <span
+      id="toggle"
+      className="checkbox__faux-container"
+      aria-live="assertive"
+    >
+      <Day className={props.dark ? 'icon' : 'icon active'} />
+      <span className="checkbox__faux" />
+      <Night className={props.dark ? 'icon active' : 'icon'} />
+    </span>
+  )
+}
+
 class ThemeSwitch extends PureComponent {
   constructor(props) {
     super(props)
@@ -44,15 +59,7 @@ class ThemeSwitch extends PureComponent {
                 aria-describedby="toggle"
                 checked={this.state.dark}
               />
-              <span
+              <ThemeToggle dark={this.state.dark} />
-                id="toggle"
-                className="checkbox__faux-container"
-                aria-live="assertive"
-              >
-                <Day className={this.state.dark ? 'icon' : 'icon active'} />
-                <span className="checkbox__faux" />
-                <Night className={this.state.dark ? 'icon active' : 'icon'} />
-              </span>
             </label>
           </aside>
         </FadeIn>
@@ -61,4 +68,8 @@ class ThemeSwitch extends PureComponent {
   }
 }
 
+ThemeToggle.propTypes = {
+  dark: PropTypes.bool
+}
+
 export default ThemeSwitch

src/templates/Project.jsx

@@ -22,6 +22,14 @@ const ProjectMeta = props => {
   )
 }
 
+const ProjectImages = props => (
+  <FullWidth>
+    {props.projectImages.map(({ node }) => (
+      <ProjectImage key={node.id} sizes={node.sizes} alt={props.title} />
+    ))}
+  </FullWidth>
+)
+
 class Project extends Component {
   constructor(props) {
     super(props)
@@ -43,9 +51,7 @@ class Project extends Component {
 
     return (
       <Fragment>
-        <Helmet>
+        <Helmet title={title} />
-          <title>{title}</title>
-        </Helmet>
 
         <SEO project={project} meta={meta} />
 
@@ -56,13 +62,7 @@ class Project extends Component {
               source={this.state.descriptionWithLineBreaks}
               className="project__description"
             />
-
+            <ProjectImages projectImages={projectImages} title={title} />
-            <FullWidth>
-              {projectImages.map(({ node }) => (
-                <ProjectImage key={node.id} sizes={node.sizes} alt={title} />
-              ))}
-            </FullWidth>
-
             <ProjectMeta links={links} techstack={techstack} />
           </Content>
         </article>
@@ -78,6 +78,11 @@ ProjectMeta.propTypes = {
   techstack: PropTypes.array
 }
 
+ProjectImages.propTypes = {
+  projectImages: PropTypes.array,
+  title: PropTypes.string
+}
+
 Project.propTypes = {
   data: PropTypes.object.isRequired,
   pathContext: PropTypes.object.isRequired