Andal.LND/frontend-app-account
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Diana Villalvazo
2025-08-07 14:18:20 -06:00
committed by GitHub
parent 036b4be854
commit 03f8fdbdc3
7 changed files with 43 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/account-settings/name-change/NameChange.jsx
View File

@@ -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);

18
src/account-settings/name-change/test/NameChange.test.jsx
View File

@@ -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(<IntlNameChange {...props} />));
render(reduxWrapper(<NameChange {...props} />));
expect(getInput()).toBeNull();
const continueButton = screen.getByText('Continue');
@@ -89,7 +85,7 @@ describe('NameChange', () => {
name: 'edx edx',
},
};
render(reduxWrapper(<IntlNameChange {...formProps} />));
render(reduxWrapper(<NameChange {...formProps} />));
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
@@ -107,7 +103,7 @@ describe('NameChange', () => {
type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
};
render(reduxWrapper(<IntlNameChange {...props} />));
render(reduxWrapper(<NameChange {...props} />));
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
@@ -134,7 +130,7 @@ describe('NameChange', () => {
targetFormId: 'name',
};
render(reduxWrapper(<IntlNameChange {...formProps} />));
render(reduxWrapper(<NameChange {...formProps} />));
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(<IntlNameChange {...props} />));
render(reduxWrapper(<NameChange {...props} />));
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(<IntlNameChange {...props} />));
render(reduxWrapper(<NameChange {...props} />));
expect(window.location.pathname).toEqual('/id-verification');
});
});

10
src/account-settings/reset-password/ResetPassword.jsx
View File

@@ -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 (
<div className="form-group">
<h6 aria-level="3">
@@ -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);

26
src/head/Head.jsx
View File

@@ -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 }) => (
<Helmet>
<title>
{intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
</title>
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
</Helmet>
);
Head.propTypes = {
intl: intlShape.isRequired,
const Head = () => {
const intl = useIntl();
return (
<Helmet>
<title>
{intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
</title>
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
</Helmet>
);
};
export default injectIntl(Head);
export default Head;

3
src/head/Head.test.jsx
View File

@@ -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(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
render(<IntlProvider locale="en"><Head /></IntlProvider>);
const helmet = Helmet.peek();
expect(helmet.title).toEqual(`Account | ${getConfig().SITE_NAME}`);
expect(helmet.linkTags[0].rel).toEqual('shortcut icon');

25
src/id-verification/CollapsibleImageHelp.jsx
View File

@@ -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) => {
<Collapsible
styling="card"
title={useCameraForId
? props.intl.formatMessage(messages['id.verification.photo.upload.help.title'])
: props.intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
? intl.formatMessage(messages['id.verification.photo.upload.help.title'])
: intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
className="mb-4 shadow"
defaultOpen
>
<p data-testid="help-text">
{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'])}
</p>
<Button
title={useCameraForId ? 'Upload Photo' : 'Take Photo'} // TO-DO: translation
@@ -42,15 +43,11 @@ const CollapsibleImageHelp = (props) => {
style={{ marginTop: '0.5rem' }}
>
{useCameraForId
? props.intl.formatMessage(messages['id.verification.photo.upload.help.button'])
: props.intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
? intl.formatMessage(messages['id.verification.photo.upload.help.button'])
: intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
</Button>
</Collapsible>
);
};
CollapsibleImageHelp.propTypes = {
intl: intlShape.isRequired,
};
export default injectIntl(CollapsibleImageHelp);
export default CollapsibleImageHelp;

11
src/id-verification/tests/CollapsibleImageHelp.test.jsx
View File

@@ -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', () => {
<Router>
<IntlProvider locale="en">
<IdVerificationContext.Provider value={contextValue}>
<IntlCollapsible {...defaultProps} />
<CollapsibleImageHelp />
</IdVerificationContext.Provider>
</IntlProvider>
</Router>
@@ -56,7 +51,7 @@ describe('CollapsibleImageHelpPanel', () => {
<Router>
<IntlProvider locale="en">
<IdVerificationContext.Provider value={contextValue}>
<IntlCollapsible {...defaultProps} />
<CollapsibleImageHelp />
</IdVerificationContext.Provider>
</IntlProvider>
</Router>