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,40 +12,25 @@ import PrivacyPolicy from 'components/PrivacyPolicy';
 
 import style from './style.module.css';
 
-class Header extends React.PureComponent {
-  state = {
-    showModal: false
-  }
-
-  static propTypes = {
-    banner: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.string
-    ]).isRequired
-  }
-
-  handleOpen = event => {
+const Header = ({ banner }) => {
+  const [ showModal, updateShowModal] = useState(false);
+  const handleClose = useCallback(() => {
+    updateShowModal(false);
+  }, [updateShowModal]);
+  const handleOpen = useCallback(event => {
     if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
       return;
     }
 
     event.preventDefault();
-    this.setState({ showModal: true });
-  }
-
-  handleClose = () => {
-    this.setState({ showModal: false });
-  }
-
-  render() {
-    const { banner } = this.props;
-    const { showModal } = this.state;
+    updateShowModal(true);
+  }, [updateShowModal]);
 
   return <>
     <Modal
       isOpen={ showModal }
-        onRequestClose={ this.handleClose }>
-        <PrivacyPolicy onClose={ this.handleClose } />
+      onRequestClose={ handleClose }>
+      <PrivacyPolicy onClose={ handleClose } />
     </Modal>
     <header
       className={ style.header }
@@ -66,7 +51,7 @@ class Header extends React.PureComponent {
         <li>
           <Link to="/privacy"
             data-testid="privacy-link"
-              onClick={ this.handleOpen }
+            onClick={ handleOpen }
           >
             <Trans>Privacy Policy</Trans>
           </Link>
@@ -80,8 +65,13 @@ class Header extends React.PureComponent {
       </ul>
     </header>
   </>;
-  }
-}
+};
 
-export { Header };
-export default withTranslation()(Header);
+Header.propTypes = {
+  banner: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string
+  ]).isRequired
+};
+
+export default 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\\"
 }"