refactor: Replace of injectIntl with useIntl() (#1305)

src/account-settings/DOBForm.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, StatefulButton, ModalDialog, ActionRow, useToggle, Button,
 } from '@openedx/paragon';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import messages from './AccountSettingsPage.messages';
 import { YEAR_OF_BIRTH_OPTIONS } from './data/constants';
@@ -11,11 +11,11 @@ import { editableFieldSelector } from './data/selectors';
 import { saveSettingsReset } from './data/actions';
 
 const DOBModal = (props) => {
+  const intl = useIntl();
   const {
     saveState,
     error,
     onSubmit,
-    intl,
   } = props;
 
   const dispatch = useDispatch();
@@ -151,7 +151,6 @@ DOBModal.propTypes = {
   saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),
   error: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
 DOBModal.defaultProps = {
@@ -159,4 +158,4 @@ DOBModal.defaultProps = {
   error: undefined,
 };
 
-export default connect(editableFieldSelector)(injectIntl(DOBModal));
+export default connect(editableFieldSelector)(DOBModal);

src/account-settings/EditableSelectField.jsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Form, StatefulButton,
 } from '@openedx/paragon';
@@ -19,6 +18,7 @@ import { editableFieldSelector } from './data/selectors';
 import CertificatePreference from './certificate-preference/CertificatePreference';
 
 const EditableSelectField = (props) => {
+  const intl = useIntl();
   const {
     name,
     label,
@@ -39,7 +39,6 @@ const EditableSelectField = (props) => {
     isEditing,
     isEditable,
     isGrayedOut,
-    intl,
     ...others
   } = props;
   const id = `field-${name}`;
@@ -227,7 +226,6 @@ EditableSelectField.propTypes = {
   isEditing: PropTypes.bool,
   isEditable: PropTypes.bool,
   isGrayedOut: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
 EditableSelectField.defaultProps = {
@@ -249,4 +247,4 @@ EditableSelectField.defaultProps = {
 export default connect(editableFieldSelector, {
   onEdit: openForm,
   onCancel: closeForm,
-})(injectIntl(EditableSelectField));
+})(EditableSelectField);

src/account-settings/JumpNav.jsx

@@ -1,15 +1,13 @@
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
 import classNames from 'classnames';
-import React from 'react';
 import { NavHashLink } from 'react-router-hash-link';
 import Scrollspy from 'react-scrollspy';
 import messages from './AccountSettingsPage.messages';
 
-const JumpNav = ({
-  intl,
-}) => {
+const JumpNav = () => {
+  const intl = useIntl();
   const stickToTop = useWindowSize().width > breakpoints.small.minWidth;
 
   return (
@@ -71,8 +69,4 @@ const JumpNav = ({
   );
 };
 
-JumpNav.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(JumpNav);
+export default JumpNav;

src/account-settings/test/EditableSelectField.test.jsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 
-import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import EditableSelectField from '../EditableSelectField';
 
@@ -17,8 +16,6 @@ jest.mock('react-redux', () => ({
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
 
-const IntlEditableSelectField = injectIntl(EditableSelectField);
-
 const mockStore = configureStore();
 
 describe('EditableSelectField', () => {
@@ -88,7 +85,7 @@ describe('EditableSelectField', () => {
   afterEach(() => jest.clearAllMocks());
 
   it('renders EditableSelectField correctly with editing disabled', () => {
-    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<EditableSelectField {...props} />)).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -98,7 +95,7 @@ describe('EditableSelectField', () => {
       isEditing: true,
     };
 
-    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<EditableSelectField {...props} />)).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -107,7 +104,7 @@ describe('EditableSelectField', () => {
       ...props,
       error: 'This is an error message',
     };
-    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...errorProps} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<EditableSelectField {...errorProps} />)).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -126,7 +123,7 @@ describe('EditableSelectField', () => {
         },
       ],
     };
-    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroup} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithGroup} />)).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -140,7 +137,7 @@ describe('EditableSelectField', () => {
         },
       ],
     };
-    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithoutGroup} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithoutGroup} />)).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -163,7 +160,7 @@ describe('EditableSelectField', () => {
         },
       ],
     };
-    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroups} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithGroups} />)).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/account-settings/test/JumpNav.test.jsx

@@ -1,20 +1,16 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp, mergeConfig, setConfig } from '@edx/frontend-platform';
 
 import JumpNav from '../JumpNav';
 import configureStore from '../../data/configureStore';
 
-const IntlJumpNav = injectIntl(JumpNav);
-
 describe('JumpNav', () => {
   mergeConfig({
     ENABLE_ACCOUNT_DELETION: true,
   });
 
-  let props = {};
   let store;
 
   beforeEach(() => {
@@ -27,9 +23,6 @@ describe('JumpNav', () => {
       },
     });
 
-    props = {
-      intl: {},
-    };
     store = configureStore({
       notificationPreferences: {
         showPreferences: false,
@@ -45,7 +38,7 @@ describe('JumpNav', () => {
     render(
       <IntlProvider locale="en">
         <AppProvider store={store}>
-          <IntlJumpNav {...props} />
+          <JumpNav />
         </AppProvider>
       </IntlProvider>,
     );
@@ -58,14 +51,10 @@ describe('JumpNav', () => {
       ENABLE_ACCOUNT_DELETION: true,
     });
 
-    props = {
-      ...props,
-    };
-
     render(
       <IntlProvider locale="en">
         <AppProvider store={store}>
-          <IntlJumpNav {...props} />
+          <JumpNav />
         </AppProvider>
       </IntlProvider>,
     );