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 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 {
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 });
}
updateShowModal(true);
}, [updateShowModal]);
handleClose = () => {
this.setState({ showModal: false });
}
return <>
<Modal
isOpen={ showModal }
onRequestClose={ handleClose }>
<PrivacyPolicy onClose={ handleClose } />
</Modal>
<header
className={ style.header }
data-banner={ banner || null }>
<h1>
<Link to="/">Regexper</Link>
</h1>
render() {
const { banner } = this.props;
const { showModal } = this.state;
<ul className={ style.list }>
<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={ handleOpen }
>
<Trans>Privacy Policy</Trans>
</Link>
</li>
<li>
<InstallPrompt />
</li>
<li data-requires-js>
<LocaleSwitcher />
</li>
</ul>
</header>
</>;
};
return <>
<Modal
isOpen={ showModal }
onRequestClose={ this.handleClose }>
<PrivacyPolicy onClose={ this.handleClose } />
</Modal>
<header
className={ style.header }
data-banner={ banner || null }>
<h1>
<Link to="/">Regexper</Link>
</h1>
Header.propTypes = {
banner: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string
]).isRequired
};
<ul className={ style.list }>
<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);
export default Header;

View File

@ -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', () => {

View File

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