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,29 +1,23 @@
 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,
+  const htmlAttributes = {
-    description: PropTypes.string,
+    lang: i18n.language
-    i18n: PropTypes.shape({
+  };
-      language: PropTypes.string.isRequired
-    }).isRequired
-  }
 
-  render() {
+  return <Helmet htmlAttributes={ htmlAttributes }>
-    const { title, description, i18n } = this.props;
+    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
-    const htmlAttributes = {
+    { description && <meta name="description" content={ description } /> }
-      lang: i18n.language
+  </Helmet>;
-    };
+};
 
-    return <Helmet htmlAttributes={ htmlAttributes }>
+Metadata.propTypes = {
-      <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
+  title: PropTypes.string,
-      { description && <meta name="description" content={ description } /> }
+  description: PropTypes.string
-    </Helmet>;
+};
-  }
-}
 
-export { Metadata };
+export default Metadata;
-export default withTranslation()(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)\\"
 }"