refactor: replacing injectIntl with useIntl part 2 (#2299)

src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  injectIntl, FormattedMessage, intlShape, FormattedDate, FormattedTime,
+  FormattedMessage, FormattedDate, FormattedTime, useIntl,
 } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, Alert, Form, Stack, StatefulButton,
@@ -15,9 +15,8 @@ import messages from './messages';
 
 const AccessibilityForm = ({
   accessibilityEmail,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const {
     errors,
     values,
@@ -139,8 +138,6 @@ const AccessibilityForm = ({
 
 AccessibilityForm.propTypes = {
   accessibilityEmail: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(AccessibilityForm);
+export default AccessibilityForm;

src/advanced-settings/setting-card/SettingCard.jsx

@@ -11,7 +11,7 @@ import {
 import { InfoOutline, Warning } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { capitalize } from 'lodash';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import messages from './messages';
@@ -25,9 +25,8 @@ const SettingCard = ({
   saveSettingsPrompt,
   isEditableState,
   setIsEditableState,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const { deprecated, help, displayName } = settingData;
   const initialValue = JSON.stringify(settingData.value, null, 4);
   const [isOpen, open, close] = useToggle(false);
@@ -115,7 +114,6 @@ const SettingCard = ({
 };
 
 SettingCard.propTypes = {
-  intl: intlShape.isRequired,
   settingData: PropTypes.shape({
     deprecated: PropTypes.bool,
     help: PropTypes.string,
@@ -137,4 +135,4 @@ SettingCard.propTypes = {
   setIsEditableState: PropTypes.func.isRequired,
 };
 
-export default injectIntl(SettingCard);
+export default SettingCard;

src/advanced-settings/setting-card/SettingCard.test.jsx

@@ -29,7 +29,6 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
 const RootWrapper = () => (
   <IntlProvider locale="en">
     <SettingCard
-      intl={{}}
       isOn
       name="settingName"
       setEdited={setEdited}
@@ -58,7 +57,6 @@ describe('<SettingCard />', () => {
     const { getByText } = render(
       <IntlProvider locale="en">
         <SettingCard
-          intl={{}}
           isOn
           name="settingName"
           setEdited={setEdited}

src/course-outline/drag-helper/SortableItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { intlShape, injectIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import {
@@ -17,9 +17,8 @@ const SortableItem = ({
   isDroppable,
   componentStyle,
   children,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const {
     attributes,
     listeners,
@@ -94,8 +93,6 @@ SortableItem.propTypes = {
   isDraggable: PropTypes.bool,
   children: PropTypes.node.isRequired,
   componentStyle: PropTypes.shape({}),
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(SortableItem);
+export default SortableItem;

src/export-page/export-stepper/ExportStepper.jsx

@@ -1,9 +1,5 @@
 import React, { useEffect } from 'react';
-import {
-  FormattedDate,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '@openedx/paragon';
@@ -17,7 +13,8 @@ import { EXPORT_STAGES } from '../data/constants';
 import { RequestStatus } from '../../data/constants';
 import messages from './messages';
 
-const ExportStepper = ({ intl, courseId }) => {
+const ExportStepper = ({ courseId }) => {
+  const intl = useIntl();
   const currentStage = useSelector(getCurrentStage);
   const downloadPath = useSelector(getDownloadPath);
   const successDate = useSelector(getSuccessDate);
@@ -96,8 +93,7 @@ const ExportStepper = ({ intl, courseId }) => {
 };
 
 ExportStepper.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(ExportStepper);
+export default ExportStepper;

src/export-page/export-stepper/ExportStepper.test.jsx

@@ -14,7 +14,7 @@ let store;
 const RootWrapper = () => (
   <AppProvider store={store}>
     <IntlProvider locale="en" messages={{}}>
-      <ExportStepper intl={{ formatMessage: jest.fn() }} courseId={courseId} />
+      <ExportStepper courseId={courseId} />
     </IntlProvider>
   </AppProvider>
 );

src/files-and-videos/generic/FileTable.jsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   CardView,
   DataTable,
@@ -42,9 +42,8 @@ const FileTable = ({
   maxFileSize,
   thumbnailPreview,
   infoModalSidebar,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const pageCount = Math.ceil(files.length / 50);
   const columnSizes = {
     xs: 12,
@@ -327,8 +326,6 @@ FileTable.propTypes = {
   maxFileSize: PropTypes.number.isRequired,
   thumbnailPreview: PropTypes.func.isRequired,
   infoModalSidebar: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 FileTable.defaultProps = {
@@ -336,4 +333,4 @@ FileTable.defaultProps = {
   handleLockFile: () => {},
 };
 
-export default injectIntl(FileTable);
+export default FileTable;

src/files-and-videos/generic/InfoModal.jsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  injectIntl,
-  intlShape,
-  FormattedMessage,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Icon,
   ModalDialog,
@@ -28,9 +24,8 @@ const InfoModal = ({
   usagePathStatus,
   error,
   sidebar,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const [activeTab, setActiveTab] = useState('fileInfo');
   const showTranscriptionError = TRANSCRIPT_FAILURE_STATUSES.includes(file?.transcriptionStatus)
     && activeTab !== 'fileInfo';
@@ -119,12 +114,10 @@ InfoModal.propTypes = {
   error: PropTypes.arrayOf(PropTypes.string).isRequired,
   thumbnailPreview: PropTypes.func.isRequired,
   sidebar: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 InfoModal.defaultProps = {
   file: null,
 };
 
-export default injectIntl(InfoModal);
+export default InfoModal;

src/files-and-videos/generic/table-components/table-custom-columns/ActiveColumn.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
 import { isNil } from 'lodash';
-import { injectIntl } from '@edx/frontend-platform/i18n';
 import { Icon } from '@openedx/paragon';
 import { Check } from '@openedx/paragon/icons';
 import { RequestStatus } from '../../../../data/constants';
@@ -25,4 +24,4 @@ ActiveColumn.propTypes = {
   pageLoadStatus: PropTypes.string.isRequired,
 };
 
-export default injectIntl(ActiveColumn);
+export default ActiveColumn;

src/files-and-videos/videos-page/VideoThumbnail.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 { VideoFile } from '@openedx/paragon/icons';
 import {
   Badge,
@@ -22,9 +22,8 @@ const VideoThumbnail = ({
   videoImageSettings,
   status,
   pageLoadStatus,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const fileInputControl = useFileInput({
     onAddFile: (files) => {
       const [file] = files;
@@ -119,12 +118,10 @@ VideoThumbnail.propTypes = {
   }).isRequired,
   status: PropTypes.string.isRequired,
   pageLoadStatus: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 VideoThumbnail.defaultProps = {
   thumbnail: null,
 };
 
-export default injectIntl(VideoThumbnail);
+export default VideoThumbnail;

src/generic/configure-modal/AdvancedTab.jsx

@@ -5,7 +5,7 @@ import { Alert, Form, Hyperlink } from '@openedx/paragon';
 import {
   Warning as WarningIcon,
 } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
 import PrereqSettings from './PrereqSettings';
@@ -275,4 +275,4 @@ AdvancedTab.propTypes = {
   onlineProctoringRules: PropTypes.string,
 };
 
-export default injectIntl(AdvancedTab);
+export default AdvancedTab;

src/generic/configure-modal/PrereqSettings.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { 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 FormikControl from '../FormikControl';
@@ -114,4 +114,4 @@ PrereqSettings.propTypes = {
   setFieldValue: PropTypes.func.isRequired,
 };
 
-export default injectIntl(PrereqSettings);
+export default PrereqSettings;

src/grading-settings/assignment-section/assignments/AssignmentTypeName.jsx

@@ -1,15 +1,18 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/paragon';
 
 import { ASSIGNMENT_TYPES, DUPLICATE_ASSIGNMENT_NAME } from '../utils/enum';
 import messages from '../messages';
 
 const AssignmentTypeName = ({
-  intl, value, errorEffort, onChange,
+  value,
+  errorEffort,
+  onChange,
 }) => {
+  const intl = useIntl();
   const initialAssignmentName = useRef(value);
 
   return (
@@ -60,10 +63,9 @@ AssignmentTypeName.defaultProps = {
 };
 
 AssignmentTypeName.propTypes = {
-  intl: intlShape.isRequired,
   onChange: PropTypes.func.isRequired,
   errorEffort: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
 };
 
-export default injectIntl(AssignmentTypeName);
+export default AssignmentTypeName;

src/pages-and-resources/discussions/app-list/FeaturesTable.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Remove, Check } from '@openedx/paragon/icons';
 import { DataTable } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import groupBy from 'lodash/groupBy';
 
 import messages from './messages';
@@ -10,7 +10,8 @@ import appMessages from '../app-config-form/messages';
 import { FEATURE_TYPES } from '../data/constants';
 import './FeaturesTable.scss';
 
-const FeaturesTable = ({ apps, features, intl }) => {
+const FeaturesTable = ({ apps, features }) => {
+  const intl = useIntl();
   const {
     basic, partial, full, common,
   } = groupBy(features, (feature) => feature.featureSupportType);
@@ -89,10 +90,9 @@ const FeaturesTable = ({ apps, features, intl }) => {
   );
 };
 
-export default injectIntl(FeaturesTable);
+export default FeaturesTable;
 
 FeaturesTable.propTypes = {
   apps: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   features: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  intl: intlShape.isRequired,
 };