From e01b6d424e0ad12001d2e6b420376ffd14a294b4 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Tue, 26 Mar 2019 20:38:07 -0400
Subject: [PATCH] Updating SentryError to use hooks

---
 .../SentryBoundary/__snapshots__/test.js.snap   |  2 +-
 src/components/SentryError/index.js             | 17 +++++++----------
 src/components/SentryError/test.js              |  9 ++++-----
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/SentryBoundary/__snapshots__/test.js.snap b/src/components/SentryBoundary/__snapshots__/test.js.snap
index 330b19e..7386a44 100644
--- a/src/components/SentryBoundary/__snapshots__/test.js.snap
+++ b/src/components/SentryBoundary/__snapshots__/test.js.snap
@@ -9,7 +9,7 @@ exports[`SentryBoundary error handling 1`] = `
 exports[`SentryBoundary error handling 2`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(SentryError)"
+    data-component="SentryError"
     data-props="{}"
   />
 </DocumentFragment>
diff --git a/src/components/SentryError/index.js b/src/components/SentryError/index.js
index e0c1d94..a1fe62d 100644
--- a/src/components/SentryError/index.js
+++ b/src/components/SentryError/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as Sentry from '@sentry/browser';
-import { withTranslation, Trans } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import Message from 'components/Message';
 
@@ -13,19 +12,17 @@ const reportError = event => {
   }
 };
 
-export const SentryError = ({ t }) => (
-  <Message type="error" heading={ t('An error has occurred') }>
+export const SentryError = () => {
+  const { t } = useTranslation();
+
+  return <Message type="error" heading={ t('An error has occurred') }>
     <p>
       <Trans>This error has been logged. You may also <a
         href="#error-report"
         data-testid="error-report"
         onClick={ reportError }>fill out a report</a>.</Trans>
     </p>
-  </Message>
-);
-
-SentryError.propTypes = {
-  t: PropTypes.func.isRequired
+  </Message>;
 };
 
-export default withTranslation()(SentryError);
+export default SentryError;
diff --git a/src/components/SentryError/test.js b/src/components/SentryError/test.js
index dfb1641..e162fb8 100644
--- a/src/components/SentryError/test.js
+++ b/src/components/SentryError/test.js
@@ -7,13 +7,12 @@ import React from 'react';
 import { render, fireEvent } from 'react-testing-library';
 import * as Sentry from '@sentry/browser';
 
-import { mockT } from 'i18n';
-import { SentryError } from 'components/SentryError';
+import SentryError from 'components/SentryError';
 
 describe('SentryError', () => {
   test('rendering', () => {
     const { asFragment } = render(
-      <SentryError t={ mockT }/>
+      <SentryError/>
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -22,7 +21,7 @@ describe('SentryError', () => {
     test('fill out a report when an event has been logged', () => {
       Sentry.lastEventId.mockReturnValue(1);
       const { getByTestId } = render(
-        <SentryError t={ mockT } />
+        <SentryError/>
       );
       const event = new MouseEvent('click', { bubbles: true });
       jest.spyOn(event, 'preventDefault');
@@ -35,7 +34,7 @@ describe('SentryError', () => {
     test('fill out a report when an event has not been logged', () => {
       Sentry.lastEventId.mockReturnValue(false);
       const { getByTestId } = render(
-        <SentryError t={ mockT } />
+        <SentryError/>
       );
       const event = new MouseEvent('click', { bubbles: true });
       jest.spyOn(event, 'preventDefault');