refactor: replacing injectIntl with useIntl part 3 (#2300)

jacobo-dominguez-wgu · web-flow · commit 4f3904ea4ca4 · 2025-07-18T14:47:18.000-07:00
diff --git a/src/accessibility-page/AccessibilityPage.jsx b/src/accessibility-page/AccessibilityPage.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { Container } from '@openedx/paragon';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
@@ -11,32 +11,29 @@ import AccessibilityForm from './AccessibilityForm';
 
 import { COMMUNITY_ACCESSIBILITY_LINK, ACCESSIBILITY_EMAIL } from './constants';
 
-const AccessibilityPage = ({
-  // injected
-  intl,
-}) => (
-  <>
-    <Helmet>
-      <title>
-        {intl.formatMessage(messages.pageTitle, {
-          siteName: process.env.SITE_NAME,
-        })}
-      </title>
-    </Helmet>
-    <Header isHiddenMainMenu />
-    <Container size="xl" classNamae="px-4">
-      <AccessibilityBody
-        {...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
-      />
-      <AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
-    </Container>
-    <StudioFooterSlot />
-  </>
-);
-
-AccessibilityPage.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
+const AccessibilityPage = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <Helmet>
+        <title>
+          {intl.formatMessage(messages.pageTitle, {
+            siteName: process.env.SITE_NAME,
+          })}
+        </title>
+      </Helmet>
+      <Header isHiddenMainMenu />
+      <Container size="xl" classNamae="px-4">
+        <AccessibilityBody
+          {...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
+        />
+        <AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
+      </Container>
+      <StudioFooterSlot />
+    </>
+  );
 };
 
-export default injectIntl(AccessibilityPage);
+AccessibilityPage.propTypes = {};
+
+export default AccessibilityPage;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
@@ -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 { answerOptionProps } from '../../../../../../../data/services/cms/types';
 import FeedbackControl from './FeedbackControl';
@@ -15,9 +15,8 @@ export const FeedbackBox = ({
   images,
   isLibrary,
   learningContextId,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const props = {
     answer,
     intl,
@@ -70,7 +69,6 @@ FeedbackBox.propTypes = {
   images: PropTypes.shape({}).isRequired,
   learningContextId: PropTypes.string.isRequired,
   isLibrary: PropTypes.bool.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(FeedbackBox);
+export default FeedbackBox;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 import {
   Button, Collapsible,
@@ -228,4 +228,4 @@ export const mapDispatchToProps = {
 };
 
 export const SettingsWidgetInternal = SettingsWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SettingsWidget));
+export default connect(mapStateToProps, mapDispatchToProps)(SettingsWidget);
diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx
@@ -6,7 +6,7 @@ import {
   Spinner,
   Toast,
 } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { getConfig } from '@edx/frontend-platform';
 import { actions, selectors } from '../../data/redux';
@@ -32,9 +32,8 @@ const TextEditor = ({
   learningContextId,
   images,
   isLibrary,
-  // inject
-  intl,
 }) => {
+  const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
   const initialContent = blockValue ? blockValue.data.data : '';
   const newContent = replaceStaticWithAsset({
@@ -123,8 +122,6 @@ TextEditor.propTypes = {
   learningContextId: PropTypes.string, // This should be required but is NULL when the store is in initial state :/
   images: PropTypes.shape({}).isRequired,
   isLibrary: PropTypes.bool.isRequired,
-  // inject
-  intl: intlShape.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -144,4 +141,4 @@ export const mapDispatchToProps = {
 };
 
 export const TextEditorInternal = TextEditor; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextEditor));
+export default connect(mapStateToProps, mapDispatchToProps)(TextEditor);
diff --git a/src/editors/containers/TextEditor/index.test.tsx b/src/editors/containers/TextEditor/index.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen, initializeMocks } from '@src/testUtils';
-import { formatMessage } from '../../testUtils';
 import { actions, selectors } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';
 import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.';
@@ -53,8 +52,6 @@ describe('TextEditor', () => {
     learningContextId: 'course+org+run',
     images: {},
     isLibrary: false,
-    // inject
-    intl: { formatMessage },
   };
 
   afterAll(() => jest.restoreAllMocks());
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
@@ -1,12 +1,13 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon } from '@openedx/paragon';
 import { ClosedCaptionOff, ClosedCaption } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import React from 'react';
 import messages from '../messages';
 import { hooks as transcriptHooks } from '../TranscriptWidget';
 
-const LanguageNamesWidget = ({ transcripts, intl }) => {
+const LanguageNamesWidget = ({ transcripts }) => {
+  const intl = useIntl();
   let icon = ClosedCaptionOff;
   const hasTranscripts = transcriptHooks.hasTranscripts(transcripts);
   let message = intl.formatMessage(messages.noTranscriptsAdded);
@@ -25,8 +26,7 @@ const LanguageNamesWidget = ({ transcripts, intl }) => {
 };
 
 LanguageNamesWidget.propTypes = {
-  intl: intlShape.isRequired,
   transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default injectIntl(LanguageNamesWidget);
+export default LanguageNamesWidget;
diff --git a/src/export-page/export-modal-error/ExportModalError.jsx b/src/export-page/export-modal-error/ExportModalError.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useDispatch, useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
@@ -11,9 +11,9 @@ import { updateIsErrorModalOpen } from '../data/slice';
 import messages from './messages';
 
 const ExportModalError = ({
-  intl,
   courseId,
 }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const isErrorModalOpen = useSelector(getIsErrorModalOpen);
   const { msg: errorMessage, unitUrl: unitErrorUrl } = useSelector(getError);
@@ -47,10 +47,9 @@ const ExportModalError = ({
 };
 
 ExportModalError.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
 ExportModalError.defaultProps = {};
 
-export default injectIntl(ExportModalError);
+export default ExportModalError;
diff --git a/src/files-and-videos/files-page/FileValidationModal.jsx b/src/files-and-videos/files-page/FileValidationModal.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Button,
@@ -14,9 +14,8 @@ import messages from './messages';
 
 const FileValidationModal = ({
   handleFileOverwrite,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const [isOpen, open, close] = useToggle();
 
   const { duplicateFiles } = useSelector(state => state.assets);
@@ -61,8 +60,6 @@ const FileValidationModal = ({
 
 FileValidationModal.propTypes = {
   handleFileOverwrite: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(FileValidationModal);
+export default FileValidationModal;
diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { CheckboxFilter, Container } from '@openedx/paragon';
 import Placeholder from '../../editors/Placeholder';
 
@@ -36,9 +36,8 @@ import './FilesPage.scss';
 
 const FilesPage = ({
   courseId,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const courseDetails = useModel('courseDetails', courseId);
   document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
@@ -222,8 +221,6 @@ const FilesPage = ({
 
 FilesPage.propTypes = {
   courseId: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(FilesPage);
+export default FilesPage;
diff --git a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
@@ -1,11 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  FormattedDate,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Stack } from '@openedx/paragon';
 import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import SelectableBox from '../../../editors/sharedComponents/SelectableBox';
@@ -25,9 +20,8 @@ const OrderTranscriptForm = ({
   transcriptionPlans,
   errorMessages,
   transcriptStatus,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const [data, setData] = useState(activeTranscriptPreferences || { videoSourceLanguage: '' });
 
   const [validCieloTranscriptionPlan, validThreePlayTranscriptionPlan] = checkTranscriptionPlans(transcriptionPlans);
@@ -200,12 +194,10 @@ OrderTranscriptForm.propTypes = {
       languages: PropTypes.shape({}),
     }).isRequired,
   }).isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 OrderTranscriptForm.defaultProps = {
   activeTranscriptPreferences: null,
 };
 
-export default injectIntl(OrderTranscriptForm);
+export default OrderTranscriptForm;
diff --git a/src/generic/course-stepper/index.jsx b/src/generic/course-stepper/index.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { injectIntl } from '@edx/frontend-platform/i18n';
 import {
   Settings as SettingsIcon,
   ManageHistory as SuccessIcon,
@@ -115,4 +114,4 @@ CourseStepper.propTypes = {
   hasError: PropTypes.bool,
 };
 
-export default injectIntl(CourseStepper);
+export default CourseStepper;
diff --git a/src/optimizer-page/CourseOptimizerPage.tsx b/src/optimizer-page/CourseOptimizerPage.tsx
@@ -180,6 +180,7 @@ const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => {
                     <CourseStepper
                       // @ts-ignore
                       steps={courseStepperSteps}
+                      // @ts-ignore
                       activeKey={currentStage}
                       hasError={currentStage === 1 && !!errorMessage}
                       errorMessage={errorMessage}
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
@@ -1,37 +1,38 @@
 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 FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
 import messages from '../../messages';
 import AppConfigFormDivider from './AppConfigFormDivider';
 
 const AnonymousPostingFields = ({
   onBlur,
   onChange,
-  intl,
   values,
-}) => (
-  <>
-    <h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
-    <AppConfigFormDivider />
-    <FormSwitchGroup
-      onChange={onChange}
-      onBlur={onBlur}
-      id="allowAnonymousPostsPeers"
-      checked={values.allowAnonymousPostsPeers}
-      label={intl.formatMessage(messages.allowAnonymousPostsPeersLabel)}
-      helpText={intl.formatMessage(messages.allowAnonymousPostsPeersHelp)}
-    />
-  </>
-);
+}) => {
+  const intl = useIntl();
+  return (
+    <>
+      <h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
+      <AppConfigFormDivider />
+      <FormSwitchGroup
+        onChange={onChange}
+        onBlur={onBlur}
+        id="allowAnonymousPostsPeers"
+        checked={values.allowAnonymousPostsPeers}
+        label={intl.formatMessage(messages.allowAnonymousPostsPeersLabel)}
+        helpText={intl.formatMessage(messages.allowAnonymousPostsPeersHelp)}
+      />
+    </>
+  );
+};
 
 AnonymousPostingFields.propTypes = {
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     allowAnonymousPostsPeers: PropTypes.bool,
   }).isRequired,
 };
 
-export default injectIntl(AnonymousPostingFields);
+export default AnonymousPostingFields;
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx
