Updating Header to use hooks
This commit is contained in:
parent
1621e0e16a
commit
14c1e14f51
@ -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;
|
||||
|
@ -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', () => {
|
||||
|
@ -8,7 +8,7 @@ exports[`Layout rendering 1`] = `
|
||||
>
|
||||
<noscript />
|
||||
<span
|
||||
data-component="withI18nextTranslation(Header)"
|
||||
data-component="Header"
|
||||
data-props="{
|
||||
\\"banner\\": \\"Test Banner\\"
|
||||
}"
|
||||
|
Loading…
Reference in New Issue
Block a user