Updating Header to use hooks

src/components/Header/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-modal';
 import { Link } from 'gatsby';
-import { withTranslation, Trans } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import GitlabIcon from 'react-feather/dist/icons/gitlab';
 
@@ -12,76 +12,66 @@ import PrivacyPolicy from 'components/PrivacyPolicy';
 
 import style from './style.module.css';
 
-class Header extends React.PureComponent {
+const Header = ({ banner }) => {
-  state = {
+  const [ showModal, updateShowModal] = useState(false);
-    showModal: false
+  const handleClose = useCallback(() => {
-  }
+    updateShowModal(false);
-
+  }, [updateShowModal]);
-  static propTypes = {
+  const handleOpen = useCallback(event => {
-    banner: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.string
-    ]).isRequired
-  }
-
-  handleOpen = event => {
     if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
       return;
     }
 
     event.preventDefault();
-    this.setState({ showModal: true });
+    updateShowModal(true);
-  }
+  }, [updateShowModal]);
 
-  handleClose = () => {
+  return <>
-    this.setState({ showModal: false });
+    <Modal
-  }
+      isOpen={ showModal }
+      onRequestClose={ handleClose }>
+      <PrivacyPolicy onClose={ handleClose } />
+    </Modal>
+    <header
+      className={ style.header }
+      data-banner={ banner || null }>
+      <h1>
+        <Link to="/">Regexper</Link>
+      </h1>
 
-  render() {
+      <ul className={ style.list }>
-    const { banner } = this.props;
+        <li>
-    const { showModal } = this.state;
+          <a href="https://gitlab.com/javallone/regexper-static"
+            rel="external noopener noreferrer"
+            target="_blank">
+            <GitlabIcon />
+            <Trans>Source on GitLab</Trans>
+          </a>
+        </li>
+        <li>
+          <Link to="/privacy"
+            data-testid="privacy-link"
+            onClick={ handleOpen }
+          >
+            <Trans>Privacy Policy</Trans>
+          </Link>
+        </li>
+        <li>
+          <InstallPrompt />
+        </li>
+        <li data-requires-js>
+          <LocaleSwitcher />
+        </li>
+      </ul>
+    </header>
+  </>;
+};
 
-    return <>
+Header.propTypes = {
-      <Modal
+  banner: PropTypes.oneOfType([
-        isOpen={ showModal }
+    PropTypes.bool,
-        onRequestClose={ this.handleClose }>
+    PropTypes.string
-        <PrivacyPolicy onClose={ this.handleClose } />
+  ]).isRequired
-      </Modal>
+};
-      <header
-        className={ style.header }
-        data-banner={ banner || null }>
-        <h1>
-          <Link to="/">Regexper</Link>
-        </h1>
 
-        <ul className={ style.list }>
+export default Header;
-          <li>
-            <a href="https://gitlab.com/javallone/regexper-static"
-              rel="external noopener noreferrer"
-              target="_blank">
-              <GitlabIcon />
-              <Trans>Source on GitLab</Trans>
-            </a>
-          </li>
-          <li>
-            <Link to="/privacy"
-              data-testid="privacy-link"
-              onClick={ this.handleOpen }
-            >
-              <Trans>Privacy Policy</Trans>
-            </Link>
-          </li>
-          <li>
-            <InstallPrompt />
-          </li>
-          <li data-requires-js>
-            <LocaleSwitcher />
-          </li>
-        </ul>
-      </header>
-    </>;
-  }
-}
-
-export { Header };
-export default withTranslation()(Header);

src/components/Header/test.js

@@ -12,7 +12,7 @@ jest.mock('components/PrivacyPolicy', () =>
 import React from 'react';
 import { render, fireEvent } from 'react-testing-library';
 
-import { Header } from 'components/Header';
+import Header from 'components/Header';
 
 describe('Header', () => {
   test('rendering', () => {

src/components/Layout/__snapshots__/test.js.snap

@@ -8,7 +8,7 @@ exports[`Layout rendering 1`] = `
   >
     <noscript />
     <span
-      data-component="withI18nextTranslation(Header)"
+      data-component="Header"
       data-props="{
   \\"banner\\": \\"Test Banner\\"
 }"