Skip to content

refactor: replace injectIntl with useIntl #2290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor: replace injectIntl with useIntl #2290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cf8e19
refactor: replace injectIntl with useIntl
anmolsah Jul 16, 2025
529bb17
refactor: replace injectIntl with useIntl
anmolsah Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/course-checklist/CourseChecklist.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Helmet } from 'react-helmet';
import { useDispatch, useSelector } from 'react-redux';
import { Container, Stack } from '@openedx/paragon';
Expand All @@ -18,8 +18,8 @@ import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
const CourseChecklist = ({
courseId,
// injected,
intl,
}) => {
const intl = useIntl();
const dispatch = useDispatch();
const courseDetails = useModel('courseDetails', courseId);
const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true';
Expand Down Expand Up @@ -98,7 +98,6 @@ const CourseChecklist = ({
CourseChecklist.propTypes = {
courseId: PropTypes.string.isRequired,
// injected
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dont forget to remove the // injected comment related to the intl prop, I see it in some of the modified files.

intl: intlShape.isRequired,
};

export default injectIntl(CourseChecklist);
export default CourseChecklist;
16 changes: 9 additions & 7 deletions src/editors/containers/GameEditor/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
import PropTypes from 'prop-types';

import { Spinner } from '@openedx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';

import EditorContainer from '../EditorContainer';
// This 'module' self-import hack enables mocking during tests.
Expand All @@ -24,6 +24,7 @@
import { actions, selectors } from '../../data/redux';
import { RequestKeys } from '../../data/constants/requests';


Check failure on line 27 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

More than 1 blank line not allowed
export const hooks = {
getContent: () => ({
some: 'content',
Expand All @@ -40,16 +41,17 @@
initializeEditor,
exampleValue,
// inject
intl,
}) => (
<EditorContainer
}) => {
const intl = useIntl();

Check failure on line 45 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

React Hook "useIntl" is called in function "thumbEditor" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
return (
<EditorContainer
getContent={module.hooks.getContent}

Check failure on line 48 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected indentation of 6 space characters but found 4
onClose={onClose}

Check failure on line 49 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected indentation of 6 space characters but found 4
>

Check failure on line 50 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

The closing bracket must be aligned with the line containing the opening tag (expected column 5)
<div>

Check failure on line 51 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected indentation of 6 space characters but found 4
{exampleValue}
</div>
<div className="editor-body h-75 overflow-auto">

Check failure on line 54 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected indentation of 6 space characters but found 4
{!blockFinished
? (
<div className="text-center p-6">
Expand All @@ -69,8 +71,9 @@
</p>
)}
</div>
</EditorContainer>

Check failure on line 74 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected indentation of 4 space characters but found 2

Check failure on line 74 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected closing tag to match indentation of opening
);
)

Check failure on line 75 in src/editors/containers/GameEditor/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Missing semicolon
};
thumbEditor.defaultProps = {
blockValue: null,
lmsEndpointUrl: null,
Expand All @@ -86,7 +89,6 @@
blockFinished: PropTypes.bool.isRequired,
initializeEditor: PropTypes.func.isRequired,
// inject
intl: intlShape.isRequired,
};

export const mapStateToProps = (state) => ({
Expand All @@ -103,4 +105,4 @@
// TODO fill with dispatches here if needed
};

export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(thumbEditor));
export default connect(mapStateToProps, mapDispatchToProps)(thumbEditor);
7 changes: 3 additions & 4 deletions ...itor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Form } from '@openedx/paragon';
import PropTypes from 'prop-types';
import SettingsOption from '../../SettingsOption';
Expand All @@ -12,8 +12,8 @@ export const RandomizationCard = ({
defaultValue,
updateSettings,
// inject
intl,
}) => {
const intl = useIntl();
const curretRandomization = randomization || defaultValue;
const { summary, handleChange } = useRandomizationSettingStatus({
randomization: curretRandomization,
Expand Down Expand Up @@ -56,7 +56,6 @@ RandomizationCard.propTypes = {
defaultValue: PropTypes.string.isRequired,
randomization: PropTypes.string.isRequired,
updateSettings: PropTypes.func.isRequired,
intl: intlShape.isRequired,
};

export default injectIntl(RandomizationCard);
export default RandomizationCard;
7 changes: 3 additions & 4 deletions .../containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { Col, Form } from '@openedx/paragon';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';

import { actions, selectors } from '../../../../../../data/redux';
import { keyStore } from '../../../../../../utils';
Expand All @@ -22,8 +22,8 @@ const DurationWidget = ({
duration,
updateField,
// injected
intl,
}) => {
const intl = useIntl();
const {
unsavedDuration,
onBlur,
Expand Down Expand Up @@ -89,7 +89,6 @@ DurationWidget.propTypes = {
duration: PropTypes.objectOf(PropTypes.number).isRequired,
updateField: PropTypes.func.isRequired,
// injected
intl: intlShape.isRequired,
};

export const mapStateToProps = (state) => ({
Expand All @@ -101,4 +100,4 @@ export const mapDispatchToProps = {
};

export const DurationWidgetInternal = DurationWidget; // For testing only
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DurationWidget));
export default connect(mapStateToProps, mapDispatchToProps)(DurationWidget);
8 changes: 3 additions & 5 deletions ...ntainers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {
FormattedMessage,
injectIntl,
intlShape,
useIntl
} from '@edx/frontend-platform/i18n';
import {
Hyperlink,
Expand All @@ -21,7 +20,6 @@ import * as hooks from './hooks';
*/
const SocialShareWidget = ({
// injected
intl,
// redux
allowVideoSharing,
isLibrary,
Expand All @@ -30,6 +28,7 @@ const SocialShareWidget = ({
videoSharingLearnMoreLink,
updateField,
}) => {
const intl = useIntl();
const isSetByCourse = allowVideoSharing.level === 'course';
const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse;
const learnMoreLink = videoSharingLearnMoreLink || 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/social_sharing.html';
Expand Down Expand Up @@ -91,7 +90,6 @@ SocialShareWidget.defaultProps = {

SocialShareWidget.propTypes = {
// injected
intl: intlShape.isRequired,
// redux
allowVideoSharing: PropTypes.shape({
level: PropTypes.string.isRequired,
Expand All @@ -117,4 +115,4 @@ export const mapDispatchToProps = (dispatch) => ({
});

export const SocialShareWidgetInternal = SocialShareWidget; // For testing only
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget));
export default connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget);
7 changes: 3 additions & 4 deletions src/editors/sharedComponents/CodeEditor/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
Button,
} from '@openedx/paragon';

import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl} from '@edx/frontend-platform/i18n';
import messages from './messages';
import './index.scss';

Expand All @@ -16,8 +16,8 @@ const CodeEditor = ({
value,
lang,
// injected
intl,
}) => {
const intl = useIntl();
const DOMref = useRef();
const btnRef = useRef();
hooks.createCodeMirrorDomNode({
Expand Down Expand Up @@ -49,9 +49,8 @@ CodeEditor.propTypes = {
PropTypes.shape({ current: PropTypes.any }),
]).isRequired,
value: PropTypes.string.isRequired,
intl: intlShape.isRequired,
lang: PropTypes.string.isRequired,
};

export const CodeEditorInternal = CodeEditor; // For testing only
export default injectIntl(CodeEditor);
export default CodeEditor;
18 changes: 7 additions & 11 deletions src/export-page/export-footer/ExportFooter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React from 'react';
import {
injectIntl,
intlShape,
} from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Layout } from '@openedx/paragon';

import messages from './messages';

const ExportFooter = ({ intl }) => (
<footer className="mt-4 small">
const ExportFooter = () => {
const intl = useIntl();
return (
<footer className="mt-4 small">
<Layout
lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
Expand Down Expand Up @@ -40,10 +39,7 @@ const ExportFooter = ({ intl }) => (
</Layout.Element>
</Layout>
</footer>
);

ExportFooter.propTypes = {
intl: intlShape.isRequired,
)
};

export default injectIntl(ExportFooter);
export default ExportFooter;
15 changes: 8 additions & 7 deletions src/files-and-videos/generic/FileMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Dropdown,
IconButton,
Expand All @@ -20,9 +20,10 @@ const FileMenu = ({
id,
fileType,
// injected
intl,
}) => (
<Dropdown data-testid={`file-menu-dropdown-${id}`}>
}) => {
const intl = useIntl();
return (
<Dropdown data-testid={`file-menu-dropdown-${id}`}>
<Dropdown.Toggle
id={`file-menu-dropdown-${id}`}
as={IconButton}
Expand Down Expand Up @@ -70,7 +71,8 @@ const FileMenu = ({
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
)
};

FileMenu.propTypes = {
externalUrl: PropTypes.string,
Expand All @@ -83,7 +85,6 @@ FileMenu.propTypes = {
id: PropTypes.string.isRequired,
fileType: PropTypes.string.isRequired,
// injected
intl: intlShape.isRequired,
};

FileMenu.defaultProps = {
Expand All @@ -93,4 +94,4 @@ FileMenu.defaultProps = {
portableUrl: null,
};

export default injectIntl(FileMenu);
export default FileMenu;
7 changes: 3 additions & 4 deletions src/files-and-videos/generic/UsageMetricsMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import PropTypes from 'prop-types';
import {
Expand All @@ -17,8 +17,8 @@ const UsageMetricsMessage = ({
usageLocations,
error,
// injected
intl,
}) => {
const intl = useIntl();
let usageMessage;
if (usagePathStatus === RequestStatus.SUCCESSFUL) {
usageMessage = isEmpty(usageLocations) ? (
Expand Down Expand Up @@ -66,7 +66,6 @@ UsageMetricsMessage.propTypes = {
usageLocations: PropTypes.arrayOf(PropTypes.string).isRequired,
error: PropTypes.arrayOf(PropTypes.string).isRequired,
// injected
intl: intlShape.isRequired,
};

export default injectIntl(UsageMetricsMessage);
export default UsageMetricsMessage;
16 changes: 8 additions & 8 deletions src/generic/SaveFormConnectionErrorAlert.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React from 'react';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import { Alert } from '@openedx/paragon';
import { getConfig } from '@edx/frontend-platform';

import messages from '../messages';

const SaveFormConnectionErrorAlert = ({ intl }) => (
<Alert variant="danger" data-testid="connectionErrorAlert">
const SaveFormConnectionErrorAlert = () => {
const intl = useIntl();
retrun (
<Alert variant="danger" data-testid="connectionErrorAlert">
<FormattedMessage
id="authoring.alert.save.error.connection"
defaultMessage="We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help."
Expand All @@ -19,10 +21,8 @@ const SaveFormConnectionErrorAlert = ({ intl }) => (
}}
/>
</Alert>
);

SaveFormConnectionErrorAlert.propTypes = {
intl: intlShape.isRequired,
)
};

export default injectIntl(SaveFormConnectionErrorAlert);

export default SaveFormConnectionErrorAlert;
4 changes: 2 additions & 2 deletions src/generic/configure-modal/VisibilityTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Alert, Form } from '@openedx/paragon';
import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import messages from './messages';
import { COURSE_BLOCK_NAMES } from '../../constants';

Expand Down Expand Up @@ -146,4 +146,4 @@ VisibilityTab.defaultProps = {
isSelfPaced: false,
};

export default injectIntl(VisibilityTab);
export default VisibilityTab;
8 changes: 4 additions & 4 deletions src/pages-and-resources/discussions/app-list/AppCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import Responsive from 'react-responsive';
import {
Card, CheckboxControl, breakpoints,
Expand All @@ -12,8 +12,9 @@ import appMessages from '../app-config-form/messages';
import FeaturesList from './FeaturesList';

const AppCard = ({
app, onClick, intl, selected, features,
app, onClick, selected, features,
}) => {
const intl = useIntl();
const { canChangeProviders } = useSelector(state => state.courseDetail);
const supportText = app.hasFullSupport
? intl.formatMessage(messages.appFullSupport)
Expand Down Expand Up @@ -72,8 +73,7 @@ AppCard.propTypes = {
}).isRequired,
onClick: PropTypes.func.isRequired,
selected: PropTypes.bool.isRequired,
intl: intlShape.isRequired,
features: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};

export default injectIntl(AppCard);
export default AppCard;
Loading