Updating Header to use hooks

This commit is contained in:
Jeff Avallone 2019-03-28 06:35:00 -04:00
parent 1621e0e16a
commit 14c1e14f51
3 changed files with 58 additions and 68 deletions

View File

@ -1,8 +1,8 @@
import React from 'react'; import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Modal from 'react-modal'; import Modal from 'react-modal';
import { Link } from 'gatsby'; import { Link } from 'gatsby';
import { withTranslation, Trans } from 'react-i18next'; import { Trans } from 'react-i18next';
import GitlabIcon from 'react-feather/dist/icons/gitlab'; import GitlabIcon from 'react-feather/dist/icons/gitlab';
@ -12,76 +12,66 @@ import PrivacyPolicy from 'components/PrivacyPolicy';
import style from './style.module.css'; 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) { if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
return; return;
} }
event.preventDefault(); 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);

View File

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

View File

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