Updating Metadata to use hooks

src/components/Metadata/__snapshots__/test.js.snap

@@ -5,9 +5,7 @@ exports[`Metadata rendering 1`] = `
   <span
     data-component="HelmetWrapper"
     data-props="{
-  \\"htmlAttributes\\": {
+  \\"htmlAttributes\\": {}
-    \\"lang\\": \\"test-lang\\"
-  }
 }"
   >
     <title>
@@ -22,9 +20,7 @@ exports[`Metadata rendering with a title and description 1`] = `
   <span
     data-component="HelmetWrapper"
     data-props="{
-  \\"htmlAttributes\\": {
+  \\"htmlAttributes\\": {}
-    \\"lang\\": \\"test-lang\\"
-  }
 }"
   >
     <title>

src/components/Metadata/index.js

@@ -1,19 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 
-class Metadata extends React.PureComponent {
+const Metadata = ({ title, description }) => {
-  static propTypes = {
+  const { i18n } = useTranslation();
-    title: PropTypes.string,
-    description: PropTypes.string,
-    i18n: PropTypes.shape({
-      language: PropTypes.string.isRequired
-    }).isRequired
-  }
-
-  render() {
-    const { title, description, i18n } = this.props;
   const htmlAttributes = {
     lang: i18n.language
   };
@@ -22,8 +13,11 @@ class Metadata extends React.PureComponent {
     <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
     { description && <meta name="description" content={ description } /> }
   </Helmet>;
-  }
+};
-}
 
-export { Metadata };
+Metadata.propTypes = {
-export default withTranslation()(Metadata);
+  title: PropTypes.string,
+  description: PropTypes.string
+};
+
+export default Metadata;

src/components/Metadata/test.js

@@ -9,16 +9,12 @@ jest.mock('react-helmet', () => {
 import React from 'react';
 import { render } from 'react-testing-library';
 
-import { Metadata } from 'components/Metadata';
+import Metadata from 'components/Metadata';
-
-const commonProps = {
-  i18n: { language: 'test-lang' }
-};
 
 describe('Metadata', () => {
   test('rendering', () => {
     const { asFragment } = render(
-      <Metadata { ...commonProps } />
+      <Metadata/>
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -27,8 +23,7 @@ describe('Metadata', () => {
     const { asFragment } = render(
       <Metadata
         title="Testing"
-        description="Test description"
+        description="Test description" />
-        { ...commonProps } />
     );
     expect(asFragment()).toMatchSnapshot();
   });

src/pages/__snapshots__/404.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Error Page rendering 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Metadata)"
+    data-component="Metadata"
     data-props="{
   \\"title\\": \\"TRANSLATE(Page Not Found)\\"
 }"

src/pages/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Index Page rendering 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Metadata)"
+    data-component="Metadata"
     data-props="{
   \\"description\\": \\"Test description\\"
 }"
@@ -33,7 +33,7 @@ exports[`Index Page rendering 1`] = `
 exports[`Index Page rendering with an expression on the URL 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Metadata)"
+    data-component="Metadata"
     data-props="{
   \\"description\\": \\"Test description\\"
 }"

src/pages/__snapshots__/privacy.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Privacy Page rendering 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Metadata)"
+    data-component="Metadata"
     data-props="{
   \\"title\\": \\"TRANSLATE(Privacy Policy)\\"
 }"