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

Author: ahtesham-quraish

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;

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;

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,14 +19,14 @@ import messages from '../messages';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
 
 const SequenceNavigation = ({
-  intl,
   courseId,
   unitId,
   sequenceId,
   className,
   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;

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;

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

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

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;

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;

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;

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,14 +16,14 @@ const MIN_NUMBER_VALUE = 0;
 const MAX_NUMBER_VALUE = 100;
 
 const AssignmentSection = ({
-  intl,
   handleRemoveAssignment,
   setShowSavePrompt,
   graders,
   setGradingData,
   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;