ES7 constructor kill

src/components/atoms/LogoUnit.jsx

@@ -14,10 +14,10 @@ const query = graphql`
 `
 
 class LogoUnit extends PureComponent {
-  constructor(props) {
+  state = { minimal: false }
-    super(props)
 
-    this.state = { minimal: false }
+  static propTypes = {
+    minimal: PropTypes.bool
   }
 
   checkMinimal = () => {
@@ -60,8 +60,4 @@ class LogoUnit extends PureComponent {
   }
 }
 
-LogoUnit.propTypes = {
-  minimal: PropTypes.bool
-}
-
 export default LogoUnit

src/components/atoms/Vcard.jsx

@@ -37,56 +37,9 @@ const Vcard = () => (
     render={data => {
       const meta = data.dataYaml
 
-      const constructVcard = () => {
-        const contact = new vCard()
-        const photoSrc = meta.avatar.childImageSharp.original.src
-
-        // first, convert the avatar to base64,
-        // then construct all vCard elements
-        toDataURL(
-          photoSrc,
-          dataUrl => {
-            // stripping this data out of base64 string is required
-            // for vcard to actually display the image for whatever reason
-            const dataUrlCleaned = dataUrl
-              .split('data:image/jpeg;base64,')
-              .join('')
-            contact.set('photo', dataUrlCleaned, {
-              encoding: 'b',
-              type: 'JPEG'
-            })
-            contact.set('fn', meta.title)
-            contact.set('title', meta.tagline)
-            contact.set('email', meta.email)
-            contact.set('url', meta.url, { type: 'Portfolio' })
-            contact.add('url', meta.social.Blog, { type: 'Blog' })
-            contact.set('nickname', 'kremalicious')
-            contact.add('x-socialprofile', meta.social.Twitter, {
-              type: 'twitter'
-            })
-            contact.add('x-socialprofile', meta.social.GitHub, {
-              type: 'GitHub'
-            })
-
-            const vcard = contact.toString('3.0')
-
-            downloadVcard(vcard)
-          },
-          'image/jpeg'
-        )
-      }
-
-      // Construct the download from a blob of the just constructed vCard,
-      // and save it to user's file system
-      const downloadVcard = vcard => {
-        const name = meta.addressbook.split('/').join('')
-        const blob = new Blob([vcard], { type: 'text/x-vcard' })
-        FileSaver.saveAs(blob, name)
-      }
-
       const handleAddressbookClick = e => {
         e.preventDefault()
-        constructVcard()
+        constructVcard(meta)
       }
 
       return (
@@ -103,6 +56,43 @@ const Vcard = () => (
   />
 )
 
+// Construct the download from a blob of the just constructed vCard,
+// and save it to user's file system
+const downloadVcard = (vcard, meta) => {
+  const name = meta.addressbook.split('/').join('')
+  const blob = new Blob([vcard], { type: 'text/x-vcard' })
+  FileSaver.saveAs(blob, name)
+}
+
+const constructVcard = meta => {
+  const contact = new vCard()
+  const photoSrc = meta.avatar.childImageSharp.original.src
+
+  // first, convert the avatar to base64, then construct all vCard elements
+  toDataURL(
+    photoSrc,
+    dataUrl => {
+      // stripping this data out of base64 string is required
+      // for vcard to actually display the image for whatever reason
+      const dataUrlCleaned = dataUrl.split('data:image/jpeg;base64,').join('')
+      contact.set('photo', dataUrlCleaned, { encoding: 'b', type: 'JPEG' })
+      contact.set('fn', meta.title)
+      contact.set('title', meta.tagline)
+      contact.set('email', meta.email)
+      contact.set('url', meta.url, { type: 'Portfolio' })
+      contact.add('url', meta.social.Blog, { type: 'Blog' })
+      contact.set('nickname', 'kremalicious')
+      contact.add('x-socialprofile', meta.social.Twitter, { type: 'twitter' })
+      contact.add('x-socialprofile', meta.social.GitHub, { type: 'GitHub' })
+
+      const vcard = contact.toString('3.0')
+
+      downloadVcard(vcard, meta)
+    },
+    'image/jpeg'
+  )
+}
+
 // Helper function to create base64 string from avatar image
 // without the need to read image file from file system
 const toDataURL = (src, callback, outputFormat) => {

src/components/molecules/Availability.jsx

@@ -16,10 +16,8 @@ const query = graphql`
   }
 `
 
-class Availability extends PureComponent {
+export default class Availability extends PureComponent {
-  constructor(props) {
+  static propTypes = { hide: PropTypes.bool }
-    super(props)
-  }
 
   render() {
     return (
@@ -55,9 +53,3 @@ class Availability extends PureComponent {
     )
   }
 }
-
-Availability.propTypes = {
-  hide: PropTypes.bool
-}
-
-export default Availability

src/components/molecules/Networks.jsx

@@ -43,13 +43,14 @@ const NetworkIcon = props => {
   }
 }
 
-class Network extends PureComponent {
+export default class Network extends PureComponent {
-  constructor(props) {
+  static propTypes = {
-    super(props)
+    minimal: PropTypes.bool,
+    hide: PropTypes.bool
+  }
 
-    this.state = {
+  state = {
-      classes: styles.networks
+    classes: styles.networks
-    }
   }
 
   componentDidMount() {
@@ -94,10 +95,3 @@ class Network extends PureComponent {
     )
   }
 }
-
-Network.propTypes = {
-  minimal: PropTypes.bool,
-  hide: PropTypes.bool
-}
-
-export default Network

src/components/molecules/ProjectNav.jsx

@@ -36,15 +36,9 @@ const ProjectLink = ({ node }) => (
   </Link>
 )
 
-class ProjectNav extends Component {
+export default class ProjectNav extends Component {
-  constructor(props) {
+  state = {
-    super(props)
+    scrolledToCurrent: false
-
-    this.state = {
-      scrolledToCurrent: false
-    }
-
-    this.scrollToCurrent = this.scrollToCurrent.bind(this)
   }
 
   componentDidMount() {
@@ -113,5 +107,3 @@ ProjectLink.propTypes = {
 ProjectNav.propTypes = {
   slug: PropTypes.string
 }
-
-export default ProjectNav

src/components/molecules/ThemeSwitch.jsx

@@ -5,20 +5,20 @@ import Day from '../svg/Day'
 import Night from '../svg/Night'
 import styles from './ThemeSwitch.module.scss'
 
-const ThemeToggle = props => (
+const ThemeToggle = ({ dark }) => (
   <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
-    <Day className={props.dark ? null : 'active'} />
+    <Day className={dark ? null : 'active'} />
     <span className={styles.checkboxFake} />
-    <Night className={props.dark ? 'active' : null} />
+    <Night className={dark ? 'active' : null} />
   </span>
 )
 
-class ThemeSwitch extends PureComponent {
+ThemeToggle.propTypes = {
-  constructor(props) {
+  dark: PropTypes.bool
-    super(props)
+}
 
-    this.state = { dark: null }
+export default class ThemeSwitch extends PureComponent {
-  }
+  state = { dark: null }
 
   isDark = () => this.state.dark === true
 
@@ -78,9 +78,3 @@ class ThemeSwitch extends PureComponent {
     )
   }
 }
-
-ThemeToggle.propTypes = {
-  dark: PropTypes.bool
-}
-
-export default ThemeSwitch

src/components/organisms/Footer.jsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../atoms/LogoUnit'
@@ -22,12 +23,32 @@ const query = graphql`
   }
 `
 
-class Footer extends PureComponent {
+const FooterMarkup = ({ meta, pkg, year }) => (
-  constructor(props) {
+  <footer className={styles.footer}>
-    super(props)
+    <LogoUnit minimal />
+    <Networks minimal />
 
-    this.state = { year: new Date().getFullYear() }
+    <p className={styles.footer__actions}>
-  }
+      <Vcard />
+      <a href={meta.gpg}>PGP/GPG key</a>
+      <a href={pkg.bugs}>Found a bug?</a>
+    </p>
+    <p className={styles.footer__copyright}>
+      <small>
+        &copy; {year} {meta.title} &mdash; All Rights Reserved
+      </small>
+    </p>
+  </footer>
+)
+
+FooterMarkup.propTypes = {
+  meta: PropTypes.object,
+  pkg: PropTypes.object,
+  year: PropTypes.number
+}
+
+export default class Footer extends PureComponent {
+  state = { year: new Date().getFullYear() }
 
   render() {
     return (
@@ -37,28 +58,9 @@ class Footer extends PureComponent {
           const pkg = data.portfolioJson
           const meta = data.dataYaml
 
-          return (
+          return <FooterMarkup year={this.state.year} pkg={pkg} meta={meta} />
-            <footer className={styles.footer}>
-              <LogoUnit minimal />
-              <Networks minimal />
-
-              <p className={styles.footer__actions}>
-                <Vcard />
-                <a href={meta.gpg}>PGP/GPG key</a>
-                <a href={pkg.bugs}>Found a bug?</a>
-              </p>
-              <p className={styles.footer__copyright}>
-                <small>
-                  &copy; {this.state.year} {meta.title} &mdash; All Rights
-                  Reserved
-                </small>
-              </p>
-            </footer>
-          )
         }}
       />
     )
   }
 }
-
-export default Footer

src/components/organisms/Header.jsx

@@ -17,12 +17,8 @@ const query = graphql`
   }
 `
 
-class Header extends PureComponent {
+export default class Header extends PureComponent {
-  constructor(props) {
+  state = { minimal: false }
-    super(props)
-
-    this.state = { minimal: false }
-  }
 
   checkMinimal = () => {
     const { isHomepage } = this.props
@@ -70,5 +66,3 @@ class Header extends PureComponent {
 Header.propTypes = {
   isHomepage: PropTypes.bool
 }
-
-export default Header

src/pages/404.jsx

@@ -12,10 +12,11 @@ import './404.scss'
 const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
 const tag = 'fail-cat'
 
-class NotFound extends Component {
+export default class NotFound extends Component {
-  constructor(props) {
+  state = { gif: '' }
-    super(props)
+
-    this.state = { gif: '' }
+  static propTypes = {
+    location: PropTypes.object
   }
 
   componentDidMount() {
@@ -62,9 +63,3 @@ class NotFound extends Component {
     )
   }
 }
-
-NotFound.propTypes = {
-  location: PropTypes.object
-}
-
-export default NotFound