refactor

README.md

@@ -9,6 +9,7 @@
 </p>
 <p align="center">
   <a href="https://travis-ci.com/kremalicious/portfolio"><img src="https://travis-ci.com/kremalicious/portfolio.svg?branch=master" /></a>
+  <a href="https://codeclimate.com/github/kremalicious/portfolio/maintainability"><img src="https://api.codeclimate.com/v1/badges/8f561ec93e0f8c6b15d9/maintainability" /></a>
   <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/portfolio.svg" /></a>
 </p>
 

src/components/atoms/Animations.jsx

@@ -2,21 +2,19 @@ import React from 'react'
 import CSSTransition from 'react-transition-group/CSSTransition'
 import './Animations.scss'
 
+const Animation = props => <CSSTransition appear={true} in={true} {...props} />
+
 export const FadeIn = props => (
-  <CSSTransition
+  <Animation
     classNames="fadein"
-    appear={true}
-    in={true}
     timeout={{ enter: 200, exit: 200, appear: 200 }}
     {...props}
   />
 )
 
 export const MoveIn = props => (
-  <CSSTransition
+  <Animation
     classNames="movein"
-    appear={true}
-    in={true}
     timeout={{ enter: 300, exit: 200, appear: 300 }}
     {...props}
   />

src/templates/Project.jsx

@@ -11,6 +11,17 @@ import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
 import './Project.scss'
 
+const ProjectMeta = props => {
+  const { links, techstack } = props
+
+  return (
+    <footer className="project__meta">
+      {!!links && <ProjectLinks links={links} />}
+      {!!techstack && <ProjectTechstack techstack={techstack} />}
+    </footer>
+  )
+}
+
 class Project extends Component {
   constructor(props) {
     super(props)
@@ -27,7 +38,6 @@ class Project extends Component {
     const project = this.props.data.projectsYaml
     const projectImages = this.props.data.projectImages.edges
     const pathContext = this.props.pathContext
-
     const { title, links, techstack } = project
     const { next, previous } = pathContext
 
@@ -53,10 +63,7 @@ class Project extends Component {
               ))}
             </FullWidth>
 
-            <footer className="project__meta">
-              {!!links && <ProjectLinks links={links} />}
-              {!!techstack && <ProjectTechstack techstack={techstack} />}
-            </footer>
+            <ProjectMeta links={links} techstack={techstack} />
           </Content>
         </article>
 
@@ -66,6 +73,11 @@ class Project extends Component {
   }
 }
 
+ProjectMeta.propTypes = {
+  links: PropTypes.array,
+  techstack: PropTypes.array
+}
+
 Project.propTypes = {
   data: PropTypes.object.isRequired,
   pathContext: PropTypes.object.isRequired