refactor availability component

src/components/molecules/Availability.jsx

@@ -4,6 +4,23 @@ import { StaticQuery, graphql } from 'gatsby'
 import { MoveIn } from '../atoms/Animations'
 import styles from './Availability.module.scss'
 
+const AvailabilityElementQuery = ({ render }) => (
+  <StaticQuery
+    query={graphql`
+      query AvailabilityQuery {
+        dataYaml {
+          availability {
+            status
+            available
+            unavailable
+          }
+        }
+      }
+    `}
+    render={render}
+  />
+)
+
 class Availability extends PureComponent {
   constructor(props) {
     super(props)
@@ -11,18 +28,7 @@ class Availability extends PureComponent {
 
   render() {
     return (
-      <StaticQuery
+      <AvailabilityElementQuery
-        query={graphql`
-          query AvailabilityQuery {
-            dataYaml {
-              availability {
-                status
-                available
-                unavailable
-              }
-            }
-          }
-        `}
         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