package updates, kill constructor

package.json

@@ -22,7 +22,7 @@
     "last 3 versions"
   ],
   "dependencies": {
-    "gatsby": "^2.0.0-rc.9",
+    "gatsby": "^2.0.0-rc.13",
     "gatsby-awesome-pagination": "^0.1.1",
     "gatsby-image": "^2.0.0-rc.1",
     "gatsby-plugin-catch-links": "^2.0.2-rc.1",
@@ -30,7 +30,7 @@
     "gatsby-plugin-matomo": "^0.5.0",
     "gatsby-plugin-meta-redirect": "^1.1.0",
     "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
-    "gatsby-plugin-sass": "^2.0.0-rc.1",
+    "gatsby-plugin-sass": "^2.0.0-rc.2",
     "gatsby-plugin-sharp": "^2.0.0-rc.3",
     "gatsby-plugin-sitemap": "^2.0.0-rc.1",
     "gatsby-redirect-from": "0.1.0",
@@ -42,15 +42,15 @@
     "gatsby-source-filesystem": "^2.0.1-rc.1",
     "gatsby-transformer-remark": "^2.1.1-rc.1",
     "gatsby-transformer-sharp": "^2.1.1-rc.2",
-    "gatsby-transformer-yaml": "^2.1.1-rc.1",
+    "gatsby-transformer-yaml": "^2.1.1-rc.2",
     "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
     "node-sass": "^4.9.3",
     "nord": "^0.2.1",
     "prismjs": "^1.15.0",
-    "react": "^16.4.2",
+    "react": "^16.5.0",
     "react-clipboard.js": "^2.0.0",
-    "react-dom": "^16.4.2",
+    "react-dom": "^16.5.0",
     "react-helmet": "^5.2.0",
     "react-modal": "^3.5.1",
     "react-qr-svg": "^2.1.0",

src/components/atoms/Modal.jsx

@@ -6,7 +6,14 @@ import styles from './Modal.module.scss'
 
 ReactModal.setAppElement('#___gatsby')
 
-class Modal extends PureComponent {
+export default class Modal extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    isOpen: PropTypes.bool,
+    handleCloseModal: PropTypes.func.isRequired,
+    children: PropTypes.node.isRequired
+  }
+
   render() {
     if (!this.props.isOpen) {
       return null
@@ -31,12 +38,3 @@ class Modal extends PureComponent {
     )
   }
 }
-
-Modal.propTypes = {
-  title: PropTypes.string,
-  isOpen: PropTypes.bool,
-  handleCloseModal: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired
-}
-
-export default Modal

src/components/atoms/PostActions.jsx

@@ -6,13 +6,14 @@ import styles from './PostActions.module.scss'
 import Twitter from '../svg/Twitter'
 import Bitcoin from '../svg/Bitcoin'
 
-class PostActions extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+export default class PostActions extends PureComponent {
+  state = {
     showModal: false
   }
+
+  static propTypes = {
+    slug: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
   }
 
   toggleModal = () => {
@@ -55,10 +56,3 @@ class PostActions extends PureComponent {
     )
   }
 }
-
-PostActions.propTypes = {
-  slug: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired
-}
-
-export default PostActions

src/components/atoms/Typekit.jsx

@@ -17,15 +17,17 @@ const TypekitScript = typekitID => (
   </script>
 )
 
-const Typekit = () => (
-  <StaticQuery
-    query={graphql`
+const query = graphql`
   query {
     contentYaml {
       typekitID
     }
   }
-    `}
+`
+
+const Typekit = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const { typekitID } = data.contentYaml
 

src/components/molecules/Head.jsx

@@ -3,16 +3,18 @@ import Helmet from 'react-helmet'
 import { StaticQuery, graphql } from 'gatsby'
 import Typekit from '../atoms/Typekit'
 
-const Head = () => (
-  <StaticQuery
-    query={graphql`
+const query = graphql`
   query {
     contentYaml {
       title
       tagline
     }
   }
-    `}
+`
+
+const Head = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const { title, tagline } = data.contentYaml
 

src/components/molecules/Menu.jsx

@@ -4,14 +4,24 @@ import { Link, StaticQuery, graphql } from 'gatsby'
 import Hamburger from '../atoms/Hamburger'
 import styles from './Menu.module.scss'
 
-class Menu extends PureComponent {
-  constructor() {
-    super()
-
-    this.state = {
-      menuOpen: false
+const query = graphql`
+  query {
+    allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) {
+      edges {
+        node {
+          frontmatter {
+            type
           }
         }
+      }
+    }
+  }
+`
+
+export default class Menu extends PureComponent {
+  state = {
+    menuOpen: false
+  }
 
   toggleMenu = () => {
     this.setState(prevState => ({
@@ -28,21 +38,7 @@ class Menu extends PureComponent {
           <body className={this.isMenuOpen() ? 'has-menu-open' : null} />
         </Helmet>
         <StaticQuery
-          query={graphql`
-            query {
-              allMarkdownRemark(
-                sort: { fields: [fields___date], order: DESC }
-              ) {
-                edges {
-                  node {
-                    frontmatter {
-                      type
-                    }
-                  }
-                }
-              }
-            }
-          `}
+          query={query}
           render={data => {
             const posts = data.allMarkdownRemark.edges
             const typeSet = new Set()
@@ -75,5 +71,3 @@ class Menu extends PureComponent {
     )
   }
 }
-
-export default Menu

src/components/molecules/ModalThanks.jsx

@@ -7,9 +7,7 @@ import Modal from '../atoms/Modal'
 import IconClipboard from '../svg/Clipboard'
 import styles from './ModalThanks.module.scss'
 
-const ModalThanks = ({ ...props }) => (
-  <StaticQuery
-    query={graphql`
+const query = graphql`
   query {
     contentYaml {
       author {
@@ -18,7 +16,11 @@ const ModalThanks = ({ ...props }) => (
       }
     }
   }
-    `}
+`
+
+const ModalThanks = ({ ...props }) => (
+  <StaticQuery
+    query={query}
     render={data => {
       const { author } = data.contentYaml
 

src/components/molecules/Search.jsx

@@ -8,15 +8,15 @@ import SearchResults from '../atoms/SearchResults'
 
 import styles from './Search.module.scss'
 
-class Search extends PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+export default class Search extends PureComponent {
+  state = {
     searchOpen: false,
     query: '',
     results: []
   }
+
+  static propTypes = {
+    lng: PropTypes.string.isRequired
   }
 
   toggleSearch = () => {
@@ -86,9 +86,3 @@ class Search extends PureComponent {
     )
   }
 }
-
-Search.propTypes = {
-  lng: PropTypes.string.isRequired
-}
-
-export default Search

src/components/molecules/Subscribe.jsx

@@ -3,9 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import IconLinks from './IconLinks'
 import styles from './Subscribe.module.scss'
 
-const Subscribe = () => (
-  <StaticQuery
-    query={graphql`
+const query = graphql`
   query {
     contentYaml {
       author {
@@ -14,7 +12,11 @@ const Subscribe = () => (
       }
     }
   }
-    `}
+`
+
+const Subscribe = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const { rss, jsonfeed } = data.contentYaml.author
 

src/components/molecules/Vcard.jsx

@@ -4,9 +4,7 @@ import Img from 'gatsby-image'
 import IconLinks from './IconLinks'
 import styles from './Vcard.module.scss'
 
-const Vcard = () => (
-  <StaticQuery
-    query={graphql`
+const query = graphql`
   query {
     contentYaml {
       author {
@@ -25,7 +23,11 @@ const Vcard = () => (
       }
     }
   }
-    `}
+`
+
+const Vcard = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const {
         twitter,

src/components/organisms/Footer.jsx

@@ -11,15 +11,23 @@ import Bitcoin from '../svg/Bitcoin'
 
 import styles from './Footer.module.scss'
 
-class Footer extends PureComponent {
-  constructor(props) {
-    super(props)
+const query = graphql`
+  query {
+    contentYaml {
+      author {
+        name
+        uri
+        bitcoin
+      }
+    }
+  }
+`
 
-    this.state = {
+export default class Footer extends PureComponent {
+  state = {
     year: null,
     showModal: false
   }
-  }
 
   toggleModal = () => {
     this.setState({ showModal: !this.state.showModal })
@@ -33,17 +41,7 @@ class Footer extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
-          query {
-            contentYaml {
-              author {
-                name
-                uri
-                bitcoin
-              }
-            }
-          }
-        `}
+        query={query}
         render={data => {
           const { name, uri, bitcoin } = data.contentYaml.author
 
@@ -90,5 +88,3 @@ class Footer extends PureComponent {
     )
   }
 }
-
-export default Footer

src/components/organisms/Header.jsx

@@ -6,7 +6,7 @@ import Menu from '../molecules/Menu'
 
 import styles from './Header.module.scss'
 
-class Header extends PureComponent {
+export default class Header extends PureComponent {
   render() {
     return (
       <header role="banner" className={styles.header}>
@@ -28,7 +28,3 @@ class Header extends PureComponent {
     )
   }
 }
-
-Header.propTypes = {}
-
-export default Header