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

Adding i18next

Browse Source
This commit is contained in:
Jeff Avallone
2018-02-11 18:37:07 -05:00
parent 63766e84e9
commit 355ef79d20
24 changed files with 195 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.js
+11 -7
View File
@@ -1,20 +1,24 @@
import React from 'react';
import { translate, Trans } from 'react-i18next';
const Footer = () => (
<footer>
<ul className="inline with-separator">
<li>
Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
<Trans>Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a></Trans>
</li>
<li>
Generated images licensed: <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
<img
alt="Creative Commons CC-BY-3.0 License"
src="https://licensebuttons.net/l/by/3.0/80x15.png" />
</a>
<Trans i18nKey="Generated images licensed">
Generated images licensed: <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
<img
alt="Creative Commons CC-BY-3.0 License"
src="https://licensebuttons.net/l/by/3.0/80x15.png" />
</a>
</Trans>
</li>
</ul>
</footer>
);
export default Footer;
export default translate()(Footer);
export { Footer };
src/components/Footer.test.js
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import Footer from './Footer';
import { Footer } from './Footer';
test('Footer rendering', () => {
const component = shallow(
src/components/Header.js
+4 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { translate, Trans } from 'react-i18next';
import GithubIcon from 'feather-icons/dist/icons/github.svg';
@@ -10,10 +11,11 @@ const Header = () => (
<ul className="inline">
<li><a href="https://github.com/javallone/regexper-static">
<GithubIcon/>Source on GitHub
<GithubIcon/><Trans>Source on GitHub</Trans>
</a></li>
</ul>
</header>
);
export default Header;
export default translate()(Header);
export { Header };
src/components/Header.test.js
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import Header from './Header';
import { Header } from './Header';
const env = { ...process.env };
src/components/PageTemplate.js
-5
View File
@@ -4,9 +4,6 @@ import PropTypes from 'prop-types';
import pkg from '../../package.json';
import Header from '../components/Header';
import Footer from '../components/Footer';
const PageTemplate = ({ title, children }) => (
<html>
<head>
@@ -20,9 +17,7 @@ const PageTemplate = ({ title, children }) => (
</head>
<body data-build-id={ process.env.BUILD_ID }>
<div id="root">
<Header/>
{ children }
<Footer/>
</div>
</body>
</html>
src/components/RavenBoundary.js
-1
View File
@@ -21,7 +21,6 @@ class RavenBoundary extends React.Component {
if (error) {
const errorProps = {
heading: 'An error has occurred.',
details: { extra: errorInfo },
error
};
src/components/RavenError.js
+9 -5
View File
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { translate, Trans } from 'react-i18next';
import { Raven } from '../sentry';
import Message from './Message';
@@ -20,10 +21,12 @@ class RavenError extends React.Component {
}
render() {
const { heading } = this.props;
const { t } = this.props;
return <Message className="error" icon={ AlertIcon } heading={ heading }>
<p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
return <Message className="error" icon={ AlertIcon } heading={ t('An error has occurred') }>
<p><Trans i18nKey="This error has been logged">
This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.
</Trans></p>
</Message>;
}
}
@@ -31,7 +34,8 @@ class RavenError extends React.Component {
RavenError.propTypes = {
error: PropTypes.object.isRequired,
details: PropTypes.object.isRequired,
heading: PropTypes.string.isRequired
t: PropTypes.func
};
export default RavenError;
export default translate()(RavenError);
export { RavenError };
src/components/RavenError.test.js
+5 -4
View File
@@ -3,11 +3,12 @@ import { shallow } from 'enzyme';
jest.mock('../sentry');
import RavenError from './RavenError';
import { RavenError } from './RavenError';
import { Raven } from '../sentry';
const testError = { error: 'test error' };
const testDetails = { details: 'test details' };
const translate = v => `translate(${ v })`;
describe('RavenError', () => {
test('rendering', () => {
@@ -15,7 +16,7 @@ describe('RavenError', () => {
<RavenError
error={ testError }
details={ testDetails }
heading="Test error"/>
t={ translate }/>
);
expect(component).toMatchSnapshot();
});
@@ -25,7 +26,7 @@ describe('RavenError', () => {
<RavenError
error={ testError }
details={ testDetails }
heading="Test error"/>
t={ translate }/>
);
expect(Raven.captureException).toHaveBeenCalledWith(testError, testDetails);
});
@@ -36,7 +37,7 @@ describe('RavenError', () => {
<RavenError
error={ testError }
details={ testDetails }
heading="Test error"/>
t={ translate }/>
);
const eventObj = { preventDefault: jest.fn() };
component.find('a').simulate('click', eventObj);
src/components/__snapshots__/Footer.test.js.snap
+21 -15
View File
@@ -6,24 +6,30 @@ exports[`Footer rendering 1`] = `
className="inline with-separator"
>
<li>
Created by
<a
href="mailto:jeff.avallone@gmail.com"
>
Jeff Avallone
</a>
<Trans>
Created by
<a
href="mailto:jeff.avallone@gmail.com"
>
Jeff Avallone
</a>
</Trans>
</li>
<li>
Generated images licensed:
<a
href="http://creativecommons.org/licenses/by/3.0/"
rel="license"
<Trans
i18nKey="Generated images licensed"
>
<img
alt="Creative Commons CC-BY-3.0 License"
src="https://licensebuttons.net/l/by/3.0/80x15.png"
/>
</a>
Generated images licensed:
<a
href="http://creativecommons.org/licenses/by/3.0/"
rel="license"
>
<img
alt="Creative Commons CC-BY-3.0 License"
src="https://licensebuttons.net/l/by/3.0/80x15.png"
/>
</a>
</Trans>
</li>
</ul>
</footer>
src/components/__snapshots__/Header.test.js.snap
+3 -1
View File
@@ -20,7 +20,9 @@ exports[`Header rendering 1`] = `
href="https://github.com/javallone/regexper-static"
>
<Component />
Source on GitHub
<Trans>
Source on GitHub
</Trans>
</a>
</li>
</ul>
src/components/__snapshots__/PageTemplate.test.js.snap
-4
View File
@@ -28,11 +28,9 @@ exports[`PageTemplate rendering 1`] = `
<div
id="root"
>
<Header />
<p>
Content
</p>
<Footer />
</div>
</body>
</html>
@@ -67,11 +65,9 @@ exports[`PageTemplate rendering with title 1`] = `
<div
id="root"
>
<Header />
<p>
Content
</p>
<Footer />
</div>
</body>
</html>
src/components/__snapshots__/RavenBoundary.test.js.snap
+1 -2
View File
@@ -3,7 +3,7 @@
exports[`RavenBoundary rendering (with error) 1`] = `<Child />`;
exports[`RavenBoundary rendering (with error) 2`] = `
<RavenError
<Translate(RavenError)
details={
Object {
"extra": Object {
@@ -16,7 +16,6 @@ exports[`RavenBoundary rendering (with error) 2`] = `
"error": "test error",
}
}
heading="An error has occurred."
/>
`;
src/components/__snapshots__/RavenError.test.js.snap
+12 -8
View File
@@ -3,18 +3,22 @@
exports[`RavenError rendering 1`] = `
<Message
className="error"
heading="Test error"
heading="translate(An error has occurred)"
icon={[Function]}
>
<p>
This error has been logged. You may also
<a
href="#error-report"
onClick={[Function]}
<Trans
i18nKey="This error has been logged"
>
fill out a report
</a>
.
This error has been logged. You may also
<a
href="#error-report"
onClick={[Function]}
>
fill out a report
</a>
.
</Trans>
</p>
</Message>
`;