Converting IndexPage to a class

src/pages/index.js

@@ -39,36 +39,44 @@ const readURLHash = (location, defaultSyntax) => {
   }
 };
 
-export const IndexPage = ({
+class IndexPage extends React.PureComponent {
-  location,
+  static propTypes = {
-  data: { site: { siteMetadata } }
+    location: PropTypes.object,
-}) => <>
+    data: PropTypes.shape({
-  <Metadata/>
+      site: PropTypes.shape({
-  <noscript>
+        siteMetadata: PropTypes.shape({
-    <Message type="error" heading="JavaScript Required">
+          defaultSyntax: PropTypes.string,
-      <p>You need JavaScript to use Regexper.</p>
+          syntaxList: PropTypes.arrayOf(PropTypes.shape({
-      <p>If you have concerns regarding the use of tracking code on Regexper,
+            id: PropTypes.string,
-        please see the <Link to="/privacy">Privacy Policy</Link>.</p>
+            label: PropTypes.string
-    </Message>
+          }))
-  </noscript>
+        })
-  <App
-    syntaxList={ siteMetadata.syntaxList }
-    { ...readURLHash(location, siteMetadata.defaultSyntax) } />
-</>;
-
-IndexPage.propTypes = {
-  location: PropTypes.object,
-  data: PropTypes.shape({
-    site: PropTypes.shape({
-      siteMetadata: PropTypes.shape({
-        defaultSyntax: PropTypes.string,
-        syntaxList: PropTypes.arrayOf(PropTypes.shape({
-          id: PropTypes.string,
-          label: PropTypes.string
-        }))
       })
     })
-  })
+  }
-};
+
+  render() {
+    const {
+      location,
+      data: { site: { siteMetadata } }
+    } = this.props;
+
+    return <>
+      <Metadata/>
+      <noscript>
+        <Message type="error" heading="JavaScript Required">
+          <p>You need JavaScript to use Regexper.</p>
+          <p>
+            If you have concerns regarding the use of tracking code on Regexper,
+            please see the <Link to="/privacy">Privacy Policy</Link>.
+          </p>
+        </Message>
+      </noscript>
+      <App
+        syntaxList={ siteMetadata.syntaxList }
+        { ...readURLHash(location, siteMetadata.defaultSyntax) } />
+    </>;
+  }
+}
 
 export default IndexPage;

src/pages/index.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { IndexPage } from 'pages/index';
+import IndexPage from 'pages/index';
 
 const queryResult = {
   site: {