refactor availability component

src/components/molecules/Availability.jsx

@@ -4,13 +4,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import { MoveIn } from '../atoms/Animations'
 import styles from './Availability.module.scss'
 
-class Availability extends PureComponent {
+const AvailabilityElementQuery = ({ render }) => (
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    return (
   <StaticQuery
     query={graphql`
       query AvailabilityQuery {
@@ -23,6 +17,18 @@ class Availability extends PureComponent {
         }
       }
     `}
+    render={render}
+  />
+)
+
+class Availability extends PureComponent {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <AvailabilityElementQuery
         render={data => {
           const { availability } = data.dataYaml
           const { status, available, unavailable } = availability
@@ -58,4 +64,8 @@ Availability.propTypes = {
   hide: PropTypes.bool
 }
 
+AvailabilityElementQuery.propTypes = {
+  render: PropTypes.func
+}
+
 export default Availability

src/components/molecules/ProjectNav.jsx

@@ -111,7 +111,7 @@ ProjectNav.propTypes = {
 }
 
 ProjectNavQuery.propTypes = {
-  render: PropTypes.any
+  render: PropTypes.func
 }
 
 export default ProjectNav