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 {
+export default class PostActions extends PureComponent {
-  constructor(props) {
+  state = {
-    super(props)
+    showModal: false
+  }
 
-    this.state = {
+  static propTypes = {
-      showModal: false
+    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 query = graphql`
+  query {
+    contentYaml {
+      typekitID
+    }
+  }
+`
+
 const Typekit = () => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        contentYaml {
-          typekitID
-        }
-      }
-    `}
     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 query = graphql`
+  query {
+    contentYaml {
+      title
+      tagline
+    }
+  }
+`
+
 const Head = () => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        contentYaml {
-          title
-          tagline
-        }
-      }
-    `}
     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 {
+const query = graphql`
-  constructor() {
+  query {
-    super()
+    allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) {
-
+      edges {
-    this.state = {
+        node {
-      menuOpen: false
+          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={query}
-            query {
-              allMarkdownRemark(
-                sort: { fields: [fields___date], order: DESC }
-              ) {
-                edges {
-                  node {
-                    frontmatter {
-                      type
-                    }
-                  }
-                }
-              }
-            }
-          `}
           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,18 +7,20 @@ import Modal from '../atoms/Modal'
 import IconClipboard from '../svg/Clipboard'
 import styles from './ModalThanks.module.scss'
 
+const query = graphql`
+  query {
+    contentYaml {
+      author {
+        bitcoin
+        ether
+      }
+    }
+  }
+`
+
 const ModalThanks = ({ ...props }) => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        contentYaml {
-          author {
-            bitcoin
-            ether
-          }
-        }
-      }
-    `}
     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 {
+export default class Search extends PureComponent {
-  constructor(props) {
+  state = {
-    super(props)
+    searchOpen: false,
+    query: '',
+    results: []
+  }
 
-    this.state = {
+  static propTypes = {
-      searchOpen: false,
+    lng: PropTypes.string.isRequired
-      query: '',
-      results: []
-    }
   }
 
   toggleSearch = () => {
@@ -86,9 +86,3 @@ class Search extends PureComponent {
     )
   }
 }
-
-Search.propTypes = {
-  lng: PropTypes.string.isRequired
-}
-
-export default Search

src/components/molecules/Subscribe.jsx

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

src/components/molecules/Vcard.jsx

@@ -4,28 +4,30 @@ import Img from 'gatsby-image'
 import IconLinks from './IconLinks'
 import styles from './Vcard.module.scss'
 
-const Vcard = () => (
+const query = graphql`
-  <StaticQuery
+  query {
-    query={graphql`
+    contentYaml {
-      query {
+      author {
-        contentYaml {
+        name
-          author {
+        uri
-            name
+        twitter
-            uri
+        github
-            twitter
+        facebook
-            github
+        avatar {
-            facebook
+          childImageSharp {
-            avatar {
+            fixed(width: 80, height: 80) {
-              childImageSharp {
+              ...GatsbyImageSharpFixed
-                fixed(width: 80, height: 80) {
-                  ...GatsbyImageSharpFixed
-                }
-              }
             }
           }
         }
       }
-    `}
+    }
+  }
+`
+
+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 {
+const query = graphql`
-  constructor(props) {
+  query {
-    super(props)
+    contentYaml {
-
+      author {
-    this.state = {
+        name
-      year: null,
+        uri
-      showModal: false
+        bitcoin
+      }
     }
   }
+`
+
+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={query}
-          query {
-            contentYaml {
-              author {
-                name
-                uri
-                bitcoin
-              }
-            }
-          }
-        `}
         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