diff --git a/src/account-settings/name-change/NameChange.jsx b/src/account-settings/name-change/NameChange.jsx index d08a840..5c6c957 100644 --- a/src/account-settings/name-change/NameChange.jsx +++ b/src/account-settings/name-change/NameChange.jsx @@ -1,10 +1,10 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { connect, useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import PropTypes from 'prop-types'; import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { ActionRow, Alert, @@ -25,7 +25,6 @@ const NameChangeModal = ({ targetFormId, errors, formValues, - intl, saveState, }) => { const dispatch = useDispatch(); @@ -33,6 +32,7 @@ const NameChangeModal = ({ const { username } = getAuthenticatedUser(); const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || ''); const [confirmedWarning, setConfirmedWarning] = useState(false); + const intl = useIntl(); const resetLocalState = useCallback(() => { setConfirmedWarning(false); @@ -193,11 +193,10 @@ NameChangeModal.propTypes = { verified_name: PropTypes.string, }).isRequired, saveState: PropTypes.string, - intl: intlShape.isRequired, }; NameChangeModal.defaultProps = { saveState: null, }; -export default connect(nameChangeSelector)(injectIntl(NameChangeModal)); +export default connect(nameChangeSelector)(NameChangeModal); diff --git a/src/account-settings/name-change/test/NameChange.test.jsx b/src/account-settings/name-change/test/NameChange.test.jsx index 194425b..10ce01c 100644 --- a/src/account-settings/name-change/test/NameChange.test.jsx +++ b/src/account-settings/name-change/test/NameChange.test.jsx @@ -1,5 +1,4 @@ /* eslint-disable no-import-assign */ -import React from 'react'; import { Provider } from 'react-redux'; import { BrowserRouter as Router } from 'react-router-dom'; import configureStore from 'redux-mock-store'; @@ -10,7 +9,7 @@ import { } from '@testing-library/react'; import * as auth from '@edx/frontend-platform/auth'; -import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; // Modal creates a portal. Overriding createPortal allows portals to be tested in jest. jest.mock('react-dom', () => ({ @@ -29,8 +28,6 @@ jest.mock('react-redux', () => ({ jest.mock('@edx/frontend-platform/auth'); jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) }))); -const IntlNameChange = injectIntl(NameChange); - const mockStore = configureStore(); describe('NameChange', () => { @@ -55,7 +52,6 @@ describe('NameChange', () => { verified_name: 'edX Verified', }, saveState: null, - intl: {}, }; auth.getAuthenticatedHttpClient = jest.fn(() => ({ @@ -72,7 +68,7 @@ describe('NameChange', () => { it('renders populated input after clicking continue if verified_name in form data', async () => { const getInput = () => screen.queryByPlaceholderText('Enter the name on your photo ID'); - render(reduxWrapper()); + render(reduxWrapper()); expect(getInput()).toBeNull(); const continueButton = screen.getByText('Continue'); @@ -89,7 +85,7 @@ describe('NameChange', () => { name: 'edx edx', }, }; - render(reduxWrapper()); + render(reduxWrapper()); const continueButton = screen.getByText('Continue'); fireEvent.click(continueButton); @@ -107,7 +103,7 @@ describe('NameChange', () => { type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE', }; - render(reduxWrapper()); + render(reduxWrapper()); const continueButton = screen.getByText('Continue'); fireEvent.click(continueButton); @@ -134,7 +130,7 @@ describe('NameChange', () => { targetFormId: 'name', }; - render(reduxWrapper()); + render(reduxWrapper()); const continueButton = screen.getByText('Continue'); fireEvent.click(continueButton); @@ -150,7 +146,7 @@ describe('NameChange', () => { it('does not dispatch action while pending', async () => { props.saveState = 'pending'; - render(reduxWrapper()); + render(reduxWrapper()); const continueButton = screen.getByText('Continue'); fireEvent.click(continueButton); @@ -166,7 +162,7 @@ describe('NameChange', () => { it('routes to IDV when name change request is successful', async () => { props.saveState = 'complete'; - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.pathname).toEqual('/id-verification'); }); }); diff --git a/src/account-settings/reset-password/ResetPassword.jsx b/src/account-settings/reset-password/ResetPassword.jsx index 1af2ff1..ea0a75f 100644 --- a/src/account-settings/reset-password/ResetPassword.jsx +++ b/src/account-settings/reset-password/ResetPassword.jsx @@ -1,7 +1,6 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { StatefulButton } from '@openedx/paragon'; import { resetPassword } from './data/actions'; @@ -10,7 +9,9 @@ import ConfirmationAlert from './ConfirmationAlert'; import RequestInProgressAlert from './RequestInProgressAlert'; const ResetPassword = (props) => { - const { email, intl, status } = props; + const { email, status } = props; + const intl = useIntl(); + return (
@@ -51,7 +52,6 @@ const ResetPassword = (props) => { ResetPassword.propTypes = { email: PropTypes.string, - intl: intlShape.isRequired, resetPassword: PropTypes.func.isRequired, status: PropTypes.string, }; @@ -68,4 +68,4 @@ export default connect( { resetPassword, }, -)(injectIntl(ResetPassword)); +)(ResetPassword); diff --git a/src/head/Head.jsx b/src/head/Head.jsx index fe0e983..e0a692b 100644 --- a/src/head/Head.jsx +++ b/src/head/Head.jsx @@ -1,21 +1,19 @@ -import React from 'react'; import { Helmet } from 'react-helmet'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import messages from './messages'; -const Head = ({ intl }) => ( - - - {intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })} - - - -); - -Head.propTypes = { - intl: intlShape.isRequired, +const Head = () => { + const intl = useIntl(); + return ( + + + {intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })} + + + + ); }; -export default injectIntl(Head); +export default Head; diff --git a/src/head/Head.test.jsx b/src/head/Head.test.jsx index b28364c..8ba47a3 100644 --- a/src/head/Head.test.jsx +++ b/src/head/Head.test.jsx @@ -6,9 +6,8 @@ import { getConfig } from '@edx/frontend-platform'; import Head from './Head'; describe('Head', () => { - const props = {}; it('should match render title tag and fivicon with the site configuration values', () => { - render(); + render(); const helmet = Helmet.peek(); expect(helmet.title).toEqual(`Account | ${getConfig().SITE_NAME}`); expect(helmet.linkTags[0].rel).toEqual('shortcut icon'); diff --git a/src/id-verification/CollapsibleImageHelp.jsx b/src/id-verification/CollapsibleImageHelp.jsx index 701b2e5..6e550d0 100644 --- a/src/id-verification/CollapsibleImageHelp.jsx +++ b/src/id-verification/CollapsibleImageHelp.jsx @@ -1,12 +1,13 @@ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import { sendTrackEvent } from '@edx/frontend-platform/analytics'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Button, Collapsible } from '@openedx/paragon'; import IdVerificationContext from './IdVerificationContext'; import messages from './IdVerification.messages'; -const CollapsibleImageHelp = (props) => { +const CollapsibleImageHelp = () => { + const intl = useIntl(); const { userId, useCameraForId, setUseCameraForId, } = useContext(IdVerificationContext); @@ -25,15 +26,15 @@ const CollapsibleImageHelp = (props) => {

{useCameraForId - ? props.intl.formatMessage(messages['id.verification.photo.upload.help.text']) - : props.intl.formatMessage(messages['id.verification.photo.camera.help.text'])} + ? intl.formatMessage(messages['id.verification.photo.upload.help.text']) + : intl.formatMessage(messages['id.verification.photo.camera.help.text'])}

); }; -CollapsibleImageHelp.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(CollapsibleImageHelp); +export default CollapsibleImageHelp; diff --git a/src/id-verification/tests/CollapsibleImageHelp.test.jsx b/src/id-verification/tests/CollapsibleImageHelp.test.jsx index 181ee16..74d2c5b 100644 --- a/src/id-verification/tests/CollapsibleImageHelp.test.jsx +++ b/src/id-verification/tests/CollapsibleImageHelp.test.jsx @@ -1,9 +1,8 @@ -import React from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; import { render, cleanup, screen, act, } from '@testing-library/react'; -import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import * as analytics from '@edx/frontend-platform/analytics'; import IdVerificationContext from '../IdVerificationContext'; import CollapsibleImageHelp from '../CollapsibleImageHelp'; @@ -17,11 +16,7 @@ analytics.sendTrackEvent = jest.fn(); window.HTMLMediaElement.prototype.play = () => {}; -const IntlCollapsible = injectIntl(CollapsibleImageHelp); - describe('CollapsibleImageHelpPanel', () => { - const defaultProps = { intl: {} }; - const contextValue = { useCameraForId: true, setUseCameraForId: jest.fn(), @@ -36,7 +31,7 @@ describe('CollapsibleImageHelpPanel', () => { - + @@ -56,7 +51,7 @@ describe('CollapsibleImageHelpPanel', () => { - +