diff --git a/src/account-settings/DOBForm.jsx b/src/account-settings/DOBForm.jsx index d503187..2be346c 100644 --- a/src/account-settings/DOBForm.jsx +++ b/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); diff --git a/src/account-settings/EditableSelectField.jsx b/src/account-settings/EditableSelectField.jsx index bc1757e..1044c27 100644 --- a/src/account-settings/EditableSelectField.jsx +++ b/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); diff --git a/src/account-settings/JumpNav.jsx b/src/account-settings/JumpNav.jsx index 5aa76be..20d36d4 100644 --- a/src/account-settings/JumpNav.jsx +++ b/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; diff --git a/src/account-settings/test/EditableSelectField.test.jsx b/src/account-settings/test/EditableSelectField.test.jsx index 911749b..d930656 100644 --- a/src/account-settings/test/EditableSelectField.test.jsx +++ b/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()).toJSON(); + const tree = renderer.create(reduxWrapper()).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -98,7 +95,7 @@ describe('EditableSelectField', () => { isEditing: true, }; - const tree = renderer.create(reduxWrapper()).toJSON(); + const tree = renderer.create(reduxWrapper()).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -107,7 +104,7 @@ describe('EditableSelectField', () => { ...props, error: 'This is an error message', }; - const tree = renderer.create(reduxWrapper()).toJSON(); + const tree = renderer.create(reduxWrapper()).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -126,7 +123,7 @@ describe('EditableSelectField', () => { }, ], }; - const tree = renderer.create(reduxWrapper()).toJSON(); + const tree = renderer.create(reduxWrapper()).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -140,7 +137,7 @@ describe('EditableSelectField', () => { }, ], }; - const tree = renderer.create(reduxWrapper()).toJSON(); + const tree = renderer.create(reduxWrapper()).toJSON(); expect(tree).toMatchSnapshot(); }); @@ -163,7 +160,7 @@ describe('EditableSelectField', () => { }, ], }; - const tree = renderer.create(reduxWrapper()).toJSON(); + const tree = renderer.create(reduxWrapper()).toJSON(); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/account-settings/test/JumpNav.test.jsx b/src/account-settings/test/JumpNav.test.jsx index 901689b..8f73e30 100644 --- a/src/account-settings/test/JumpNav.test.jsx +++ b/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( - + , ); @@ -58,14 +51,10 @@ describe('JumpNav', () => { ENABLE_ACCOUNT_DELETION: true, }); - props = { - ...props, - }; - render( - + , );