Updating Loader to use hooks

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

@@ -119,7 +119,7 @@ exports[`App rendering an expression 2`] = `
 }"
   />
   <span
-    data-component="withI18nextTranslation(Loader)"
+    data-component="Loader"
     data-props="{}"
   />
 </DocumentFragment>
@@ -200,7 +200,7 @@ exports[`App rendering with an invalid syntax 2`] = `
 }"
   />
   <span
-    data-component="withI18nextTranslation(Loader)"
+    data-component="Loader"
     data-props="{}"
   />
 </DocumentFragment>

src/components/Loader/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
-import { withTranslation } from 'react-i18next';
 
 import LoaderIcon from 'react-feather/dist/icons/loader';
 
 import style from './style.module.css';
 
-const Loader = ({ t }) => (
+const Loader = () => {
-  <div className={ style.loader }>
+  const { t } = useTranslation();
+
+  return <div className={ style.loader }>
     <LoaderIcon />
     <div className={ style.message }>{ t('Loading...') }</div>
-  </div>
+  </div>;
-);
-
-Loader.propTypes = {
-  t: PropTypes.func.isRequired
 };
 
-export { Loader };
+export default Loader;
-export default withTranslation()(Loader);

src/components/Loader/test.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { render } from 'react-testing-library';
 
-import { mockT } from 'i18n';
+import Loader from 'components/Loader';
-import { Loader } from 'components/Loader';
 
 describe('Loader', () => {
   test('rendering', () => {
     // Using full rendering here since styles for this depend on the structure
     // of the SVG.
     const { asFragment } = render(
-      <Loader t={ mockT } />
+      <Loader/>
     );
     expect(asFragment()).toMatchSnapshot();
   });