refactor: Replace of injectIntl with useIntl() part 7 (#2297)

2025-07-19 02:52:57 +05:00
parent 4f3904ea4c
commit 46d5917303
14 changed files with 106 additions and 129 deletions
--- a/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx
+++ b/src/accessibility-page/AccessibilityBody/AccessibilityBody.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 { Hyperlink, MailtoLink, Stack } from '@openedx/paragon';

 import messages from './messages';
@@ -95,4 +95,4 @@ AccessibilityBody.propTypes = {
  email: PropTypes.string.isRequired,
 };

-export default injectIntl(AccessibilityBody);
+export default AccessibilityBody;
--- a/src/advanced-settings/modal-error/ModalError.jsx
+++ b/src/advanced-settings/modal-error/ModalError.jsx
@@ -1,55 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActionRow, AlertModal, Button } from '@openedx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';

 import ModalErrorListItem from './ModalErrorListItem';
 import messages from './messages';

 const ModalError = ({
-  intl, isError, handleUndoChanges, showErrorModal, errorList, settingsData,
-}) => (
-  <AlertModal
-    title={intl.formatMessage(messages.modalErrorTitle)}
-    isOpen={isError}
-    variant="danger"
-    footerNode={(
-      <ActionRow>
-        <Button
-          variant="tertiary"
-          onClick={() => showErrorModal(!isError)}
-        >
-          {intl.formatMessage(messages.modalErrorButtonChangeManually)}
-        </Button>
-        <Button onClick={handleUndoChanges}>
-          {intl.formatMessage(messages.modalErrorButtonUndoChanges)}
-        </Button>
-      </ActionRow>
+  isError, handleUndoChanges, showErrorModal, errorList, settingsData,
+}) => {
+  const intl = useIntl();
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages.modalErrorTitle)}
+      isOpen={isError}
+      variant="danger"
+      footerNode={(
+        <ActionRow>
+          <Button
+            variant="tertiary"
+            onClick={() => showErrorModal(!isError)}
+          >
+            {intl.formatMessage(messages.modalErrorButtonChangeManually)}
+          </Button>
+          <Button onClick={handleUndoChanges}>
+            {intl.formatMessage(messages.modalErrorButtonUndoChanges)}
+          </Button>
+        </ActionRow>
    )}
-  >
-    <p>
-      <FormattedMessage
-        id="course-authoring.advanced-settings.modal.error.description"
-        defaultMessage="There was {errorCounter} while trying to save the course settings in the database.
+    >
+      <p>
+        <FormattedMessage
+          id="course-authoring.advanced-settings.modal.error.description"
+          defaultMessage="There was {errorCounter} while trying to save the course settings in the database.
            Please check the following validation feedbacks and reflect them in your course settings:"
-        values={{ errorCounter: <strong>{errorList.length} validation error </strong> }}
-      />
-    </p>
-    <hr />
-    <ul className="p-0">
-      {errorList.map((settingName) => (
-        <ModalErrorListItem
-          key={settingName.key}
-          settingName={settingName}
-          settingsData={settingsData}
+          values={{ errorCounter: <strong>{errorList.length} validation error </strong> }}
        />
-      ))}
-    </ul>
-  </AlertModal>
-);
+      </p>
+      <hr />
+      <ul className="p-0">
+        {errorList.map((settingName) => (
+          <ModalErrorListItem
+            key={settingName.key}
+            settingName={settingName}
+            settingsData={settingsData}
+          />
+        ))}
+      </ul>
+    </AlertModal>
+  );
+};

 ModalError.propTypes = {
-  intl: intlShape.isRequired,
  isError: PropTypes.bool.isRequired,
  handleUndoChanges: PropTypes.func.isRequired,
  showErrorModal: PropTypes.func.isRequired,
@@ -60,4 +62,4 @@ ModalError.propTypes = {
  settingsData: PropTypes.shape({}).isRequired,
 };

-export default injectIntl(ModalError);
+export default ModalError;
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
-  injectIntl, intlShape, isRtl, getLocale,
+  useIntl, isRtl, getLocale,
 } from '@edx/frontend-platform/i18n';
 import { Button, useWindowSize, breakpoints } from '@openedx/paragon';
 import {
@@ -19,7 +19,6 @@ import messages from '../messages';
 import SequenceNavigationTabs from './SequenceNavigationTabs';

 const SequenceNavigation = ({
-  intl,
  courseId,
  unitId,
  sequenceId,
@@ -27,6 +26,7 @@ const SequenceNavigation = ({
  handleCreateNewCourseXBlock,
  showPasteUnit,
 }) => {
+  const intl = useIntl();
  const sequenceStatus = useSelector(getSequenceStatus);
  const {
    isFirstUnit, isLastUnit, nextLink, previousLink,
@@ -106,7 +106,6 @@ const SequenceNavigation = ({
 };

 SequenceNavigation.propTypes = {
-  intl: intlShape.isRequired,
  courseId: PropTypes.string.isRequired,
  unitId: PropTypes.string,
  className: PropTypes.string,
@@ -121,4 +120,4 @@ SequenceNavigation.defaultProps = {
  className: undefined,
 };

-export default injectIntl(SequenceNavigation);
+export default SequenceNavigation;
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';

 import messages from './messages';
 import { ProblemTypes } from '../../../../../data/constants/problem';
@@ -10,9 +10,8 @@ import AnswersContainer from './AnswersContainer';
 const AnswerWidget = ({
  // Redux
  problemType,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const problemStaticData = ProblemTypes[problemType];
  return (
    <div>
@@ -31,8 +30,6 @@ const AnswerWidget = ({

 AnswerWidget.propTypes = {
  problemType: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 export const AnswerWidgetInternal = AnswerWidget; // For testing only
-export default injectIntl(AnswerWidget);
+export default AnswerWidget;
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';

 import { selectors } from '../../../../../data/redux';
@@ -16,9 +16,8 @@ const QuestionWidget = ({
  images,
  isLibrary,
  blockId,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const { editorRef, refReady, setEditorRef } = prepareEditorRef();
  const initialContent = question;
  const newContent = replaceStaticWithAsset({
@@ -62,8 +61,6 @@ QuestionWidget.propTypes = {
  images: PropTypes.shape({}).isRequired,
  isLibrary: PropTypes.bool.isRequired,
  blockId: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 export const mapStateToProps = (state) => ({
  question: selectors.problem.question(state),
@@ -74,4 +71,4 @@ export const mapStateToProps = (state) => ({
 });

 export const QuestionWidgetInternal = QuestionWidget; // For testing only
-export default injectIntl(connect(mapStateToProps)(QuestionWidget));
+export default connect(mapStateToProps)(QuestionWidget);
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
@@ -3,8 +3,7 @@ import { connect, useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
  FormattedMessage,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import {
  Form,
@@ -91,9 +90,8 @@ const TranscriptWidget = ({
  updateField,
  isUploadError,
  isDeleteError,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const [error] = React.useContext(ErrorContext).transcripts;
  const [showImportCard, setShowImportCard] = React.useState(true);
  const fullTextLanguages = module.hooks.transcriptLanguages(transcripts, intl);
@@ -224,7 +222,6 @@ TranscriptWidget.propTypes = {
  updateField: PropTypes.func.isRequired,
  isUploadError: PropTypes.bool.isRequired,
  isDeleteError: PropTypes.bool.isRequired,
-  intl: PropTypes.shape(intlShape).isRequired,
 };
 export const mapStateToProps = (state) => ({
  transcripts: selectors.video.transcripts(state),
@@ -241,4 +238,4 @@ export const mapDispatchToProps = (dispatch) => ({
 });

 export const TranscriptWidgetInternal = TranscriptWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TranscriptWidget));
+export default connect(mapStateToProps, mapDispatchToProps)(TranscriptWidget);
--- a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
  ActionRow,
  Button,
@@ -18,9 +18,8 @@ const SortAndFilterModal = ({
  isSortOpen,
  closeSort,
  handleSort,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const {
    state, setAllFilters, columns, gotoPage,
  } = useContext(DataTableContext);
@@ -178,8 +177,6 @@ SortAndFilterModal.propTypes = {
  handleSort: PropTypes.func.isRequired,
  isSortOpen: PropTypes.bool.isRequired,
  closeSort: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };

-export default injectIntl(SortAndFilterModal);
+export default SortAndFilterModal;
--- a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { PropTypes } from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
  Button,
  Icon,
@@ -21,9 +21,8 @@ const MoreInfoColumn = ({
  handleOpenFileInfo,
  handleOpenDeleteConfirmation,
  fileType,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const [isOpen, , close, toggle] = useToggle();
  const [target, setTarget] = useState(null);

@@ -144,12 +143,10 @@ MoreInfoColumn.propTypes = {
  handleOpenFileInfo: PropTypes.func.isRequired,
  handleOpenDeleteConfirmation: PropTypes.func.isRequired,
  fileType: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };

 MoreInfoColumn.defaultProps = {
  handleLock: null,
 };

-export default injectIntl(MoreInfoColumn);
+export default MoreInfoColumn;
--- a/src/files-and-videos/videos-page/VideosPage.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.jsx
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  injectIntl,
+  useIntl,
  FormattedMessage,
-  intlShape,
 } from '@edx/frontend-platform/i18n';
 import {
  ActionRow,
@@ -51,9 +50,8 @@ import UploadModal from './upload-modal';

 const VideosPage = ({
  courseId,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const dispatch = useDispatch();
  const [
    isTranscriptSettingsOpen,
@@ -331,8 +329,6 @@ const VideosPage = ({

 VideosPage.propTypes = {
  courseId: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };

-export default injectIntl(VideosPage);
+export default VideosPage;
--- a/src/grading-settings/assignment-section/index.jsx
+++ b/src/grading-settings/assignment-section/index.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
 import { Button } from '@openedx/paragon';
 import { CheckCircle, Warning } from '@openedx/paragon/icons';

@@ -15,7 +16,6 @@ const MIN_NUMBER_VALUE = 0;
 const MAX_NUMBER_VALUE = 100;

 const AssignmentSection = ({
-  intl,
  handleRemoveAssignment,
  setShowSavePrompt,
  graders,
@@ -23,6 +23,7 @@ const AssignmentSection = ({
  courseAssignmentLists,
  setShowSuccessAlert,
 }) => {
+  const intl = useIntl();
  const [errorList, setErrorList] = useState({});
  const {
    type, weight, minCount, dropCount,
@@ -201,7 +202,6 @@ AssignmentSection.defaultProps = {
 };

 AssignmentSection.propTypes = {
-  intl: intlShape.isRequired,
  handleRemoveAssignment: PropTypes.func.isRequired,
  setGradingData: PropTypes.func.isRequired,
  setShowSavePrompt: PropTypes.func.isRequired,
@@ -212,4 +212,4 @@ AssignmentSection.propTypes = {
  ),
 };

-export default injectIntl(AssignmentSection);
+export default AssignmentSection;
--- a/src/grading-settings/grading-sidebar/index.jsx
+++ b/src/grading-settings/grading-sidebar/index.jsx
@@ -1,39 +1,41 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';

 import { HelpSidebar } from '../../generic/help-sidebar';
 import messages from './messages';

-const GradingSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
-  <HelpSidebar
-    courseId={courseId}
-    showOtherSettings
-    proctoredExamSettingsUrl={proctoredExamSettingsUrl}
-  >
-    <h4 className="help-sidebar-about-title">
-      {intl.formatMessage(messages.gradingSidebarTitle)}
-    </h4>
-    <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.gradingSidebarAbout1)}
-    </p>
-    <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.gradingSidebarAbout2)}
-    </p>
-    <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.gradingSidebarAbout3)}
-    </p>
-  </HelpSidebar>
-);
+const GradingSidebar = ({ courseId, proctoredExamSettingsUrl }) => {
+  const intl = useIntl();
+  return (
+    <HelpSidebar
+      courseId={courseId}
+      showOtherSettings
+      proctoredExamSettingsUrl={proctoredExamSettingsUrl}
+    >
+      <h4 className="help-sidebar-about-title">
+        {intl.formatMessage(messages.gradingSidebarTitle)}
+      </h4>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.gradingSidebarAbout1)}
+      </p>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.gradingSidebarAbout2)}
+      </p>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.gradingSidebarAbout3)}
+      </p>
+    </HelpSidebar>
+  );
+};

 GradingSidebar.defaultProps = {
  proctoredExamSettingsUrl: '',
 };

 GradingSidebar.propTypes = {
-  intl: intlShape.isRequired,
  courseId: PropTypes.string.isRequired,
  proctoredExamSettingsUrl: PropTypes.string,
 };

-export default injectIntl(GradingSidebar);
+export default GradingSidebar;
--- a/src/import-page/import-stepper/ImportStepper.jsx
+++ b/src/import-page/import-stepper/ImportStepper.jsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import {
  FormattedDate,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
@@ -18,7 +17,8 @@ import {
 } from '../data/selectors';
 import messages from './messages';

-const ImportStepper = ({ intl, courseId }) => {
+const ImportStepper = ({ courseId }) => {
+  const intl = useIntl();
  const currentStage = useSelector(getCurrentStage);
  const fileName = useSelector(getFileName);
  const { hasError, message: errorMessage } = useSelector(getError);
@@ -109,8 +109,7 @@ const ImportStepper = ({ intl, courseId }) => {
 };

 ImportStepper.propTypes = {
-  intl: intlShape.isRequired,
  courseId: PropTypes.string.isRequired,
 };

-export default injectIntl(ImportStepper);
+export default ImportStepper;
--- a/src/pages-and-resources/discussions/app-list/AppList.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppList.jsx
@@ -1,7 +1,7 @@
 import React, {
  useCallback, useEffect, useMemo, useState, useContext,
 } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
  CardGrid, Container, breakpoints, Form, ActionRow, AlertModal, Button, StatefulButton,
 } from '@openedx/paragon';
@@ -22,7 +22,8 @@ import { saveProviderConfig, fetchDiscussionSettings } from '../data/thunks';
 import { PagesAndResourcesContext } from '../../PagesAndResourcesProvider';
 import { discussionRestriction } from '../data/constants';

-const AppList = ({ intl }) => {
+const AppList = () => {
+  const intl = useIntl();
  const dispatch = useDispatch();
  const { courseId } = useContext(PagesAndResourcesContext);
  const {
@@ -190,11 +191,7 @@ const AppList = ({ intl }) => {
  );
 };

-AppList.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-const IntlAppList = injectIntl(AppList);
+const IntlAppList = AppList;

 IntlAppList.NextButton = AppListNextButton;

--- a/src/studio-home/organization-section/index.jsx
+++ b/src/studio-home/organization-section/index.jsx
@@ -3,14 +3,15 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
 import { Button, Form, FormLabel } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import TypeaheadDropdown from '../../editors/sharedComponents/TypeaheadDropdown';
 import { getOrganizations } from '../../generic/data/selectors';
 import { fetchOrganizationsQuery } from '../../generic/data/thunks';
 import messages from '../messages';

-const OrganizationSection = ({ intl }) => {
+const OrganizationSection = () => {
+  const intl = useIntl();
  const dispatch = useDispatch();
  const location = useLocation();
  const navigate = useNavigate();
@@ -70,8 +71,4 @@ const OrganizationSection = ({ intl }) => {
  );
 };

-OrganizationSection.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(OrganizationSection);
+export default OrganizationSection;