root
/
regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Converting 404 page to use hooks

This commit is contained in:
Jeff Avallone 2019-03-26 18:26:39 -04:00
parent 280412e2db
commit aa10ecf18c
2 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/404.js
View File

@ -1,19 +1,18 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import { useTranslation, Trans } from 'react-i18next';
import { withTranslation, Trans } from 'react-i18next';
import Metadata from 'components/Metadata'; import Metadata from 'components/Metadata';
import Message from 'components/Message'; import Message from 'components/Message';
export const ErrorPage = ({ t }) => <> export const ErrorPage = () => {
<Metadata title={ t('Page Not Found') } /> const { t } = useTranslation();
<Message type="error" heading={ t('404 Page Not Found') }>
<p><Trans>The page you have requested could not be found.</Trans></p>
</Message>
</>;
ErrorPage.propTypes = { return <>
t: PropTypes.func.isRequired <Metadata title={ t('Page Not Found') } />
<Message type="error" heading={ t('404 Page Not Found') }>
<p><Trans>The page you have requested could not be found.</Trans></p>
</Message>
</>;
}; };
export default withTranslation()(ErrorPage); export default ErrorPage;

5
src/pages/404.test.js
View File

@ -6,13 +6,12 @@ jest.mock('components/Message', () =>
import React from 'react'; import React from 'react';
import { render } from 'react-testing-library'; import { render } from 'react-testing-library';
import { mockT } from 'i18n'; import ErrorPage from 'pages/404';
import { ErrorPage } from 'pages/404';
describe('Error Page', () => { describe('Error Page', () => {
test('rendering', () => { test('rendering', () => {
const { asFragment } = render( const { asFragment } = render(
<ErrorPage t={ mockT } /> <ErrorPage/>
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });