refactor: replacing injectIntl with useIntl part 4 (#2301)

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx

@@ -11,11 +11,7 @@ import {
   ActionRow,
 } from '@openedx/paragon';
 import { FileUpload, MoreHoriz } from '@openedx/paragon/icons';
-import {
-  FormattedMessage,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from '../../../../../../data/redux';
 import * as hooks from './hooks';
@@ -32,8 +28,6 @@ import { RequestKeys } from '../../../../../../data/constants/requests';
  * Collapsible Form widget controlling video handouts
  */
 const HandoutWidget = ({
-  // injected
-  intl,
   // redux
   isLibrary,
   handout,
@@ -41,6 +35,7 @@ const HandoutWidget = ({
   updateField,
   isUploadError,
 }) => {
+  const intl = useIntl();
   const [error] = React.useContext(ErrorContext).handout;
   const { fileSizeError } = hooks.fileSizeError();
   const fileInput = hooks.fileInput({ fileSizeError });
@@ -114,8 +109,6 @@ const HandoutWidget = ({
 };
 
 HandoutWidget.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
   // redux
   isLibrary: PropTypes.bool.isRequired,
   handout: PropTypes.shape({}).isRequired,
@@ -135,4 +128,4 @@ export const mapDispatchToProps = (dispatch) => ({
 });
 
 export const HandoutWidgetInternal = HandoutWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(HandoutWidget));
+export default connect(mapStateToProps, mapDispatchToProps)(HandoutWidget);

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen, initializeMocks } from '@src/testUtils';
-import { formatMessage } from '@src/editors/testUtils';
 import { HandoutWidgetInternal as HandoutWidget } from '.';
 
 jest.mock('@src/editors/data/redux', () => ({
@@ -25,7 +24,6 @@ jest.mock('@src/editors/data/redux', () => ({
 
 describe('HandoutWidget', () => {
   const props = {
-    intl: { formatMessage },
     isLibrary: false,
     handout: '',
     isUploadError: false,

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx

@@ -12,10 +12,7 @@ import {
 } from '@openedx/paragon';
 import { DeleteOutline } from '@openedx/paragon/icons';
 
-import {
-  FormattedMessage,
-  injectIntl,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { thunkActions } from '../../../../../../data/redux';
 
 import TranscriptActionMenu from './TranscriptActionMenu';
@@ -125,4 +122,4 @@ export const mapDispatchToProps = {
 };
 
 export const TranscriptInternal = Transcript; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Transcript));
+export default connect(mapStateToProps, mapDispatchToProps)(Transcript);

src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  injectIntl,
-  FormattedMessage,
-  FormattedDate,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Stack,
   IconButton,
@@ -24,9 +19,8 @@ import messages from './messages';
 const FileInfoModalSidebar = ({
   asset,
   handleLockedAsset,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const [lockedState, setLockedState] = useState(asset?.locked);
   const handleLock = (e) => {
     const locked = e.target.checked;
@@ -123,8 +117,6 @@ FileInfoModalSidebar.propTypes = {
     usageLocations: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,
   handleLockedAsset: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(FileInfoModalSidebar);
+export default FileInfoModalSidebar;

src/files-and-videos/generic/table-components/RowStatus.jsx

@@ -1,12 +1,10 @@
 import React, { useContext } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { DataTableContext } from '@openedx/paragon';
 import { getCurrentViewRange } from './utils';
 
-const RowStatus = ({
-  // injected
-  intl,
-}) => {
+const RowStatus = () => {
+  const intl = useIntl();
   const { filteredRows, page, initialRows } = useContext(DataTableContext);
 
   return (
@@ -23,8 +21,4 @@ const RowStatus = ({
   );
 };
 
-RowStatus.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(RowStatus);
+export default RowStatus;

src/files-and-videos/generic/table-components/TableActions.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { isEmpty } from 'lodash';
 import { PropTypes } from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import {
   Button,
@@ -22,9 +22,8 @@ const TableActions = ({
   encodingsDownloadUrl,
   fileType,
   setInitialState,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const [isSortOpen, openSort, closeSort] = useToggle(false);
   const { state, clearSelection } = useContext(DataTableContext);
 
@@ -110,11 +109,10 @@ TableActions.propTypes = {
   handleSort: PropTypes.func.isRequired,
   fileType: PropTypes.string.isRequired,
   setInitialState: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
 TableActions.defaultProps = {
   encodingsDownloadUrl: null,
 };
 
-export default injectIntl(TableActions);
+export default TableActions;

src/files-and-videos/generic/table-components/TableActions.test.jsx

@@ -14,9 +14,6 @@ const defaultProps = {
   handleSort: jest.fn(),
   fileType: 'video',
   setInitialState: jest.fn(),
-  intl: {
-    formatMessage: (msg, values) => msg.defaultMessage.replace('{fileType}', values?.fileType ?? ''),
-  },
 };
 
 const mockColumns = [

src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.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 { Icon } from '@openedx/paragon';
 import { Info } from '@openedx/paragon/icons';
 import { TRANSCRIPT_FAILURE_STATUSES } from '../../../videos-page/data/constants';
@@ -34,4 +34,4 @@ TranscriptColumn.propTypes = {
   }.isRequired,
 };
 
-export default injectIntl(TranscriptColumn);
+export default TranscriptColumn;

src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
 import { Button, Stack } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { getLanguages, getSortedTranscripts } from '../data/utils';
@@ -20,9 +20,8 @@ import messages from './messages';
 
 const TranscriptTab = ({
   video,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const divRef = useRef(null);
   const { transcriptStatus, errors } = useSelector(state => state.videos);
@@ -145,8 +144,6 @@ TranscriptTab.propTypes = {
     id: PropTypes.string.isRequired,
     displayName: PropTypes.string.isRequired,
   }).isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(TranscriptTab);
+export default TranscriptTab;

src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
-import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Collapsible,
@@ -136,4 +136,4 @@ TranscriptSettings.propTypes = {
   courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(TranscriptSettings);
+export default TranscriptSettings;

src/import-page/import-sidebar/ImportSidebar.jsx

@@ -1,8 +1,5 @@
 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 { Hyperlink } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
@@ -11,7 +8,10 @@ import { HelpSidebar } from '../../generic/help-sidebar';
 import { useHelpUrls } from '../../help-urls/hooks';
 import messages from './messages';
 
-const ImportSidebar = ({ intl, courseId }) => {
+const ImportSidebar = ({
+  courseId,
+}) => {
+  const intl = useIntl();
   const { importCourse: importLearnMoreUrl } = useHelpUrls(['importCourse']);
   return (
     <HelpSidebar courseId={courseId}>
@@ -50,8 +50,7 @@ const ImportSidebar = ({ intl, courseId }) => {
 };
 
 ImportSidebar.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(ImportSidebar);
+export default ImportSidebar;

src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { StatefulButton } from '@openedx/paragon';
 
@@ -10,7 +10,8 @@ import { SAVING } from '../data/slice';
 import { AppConfigFormContext } from './AppConfigFormProvider';
 import { useModel } from '../../../generic/model-store';
 
-const AppConfigFormSaveButton = ({ intl, labelText }) => {
+const AppConfigFormSaveButton = ({ labelText }) => {
+  const intl = useIntl();
   const saveStatus = useSelector(state => state.discussions.saveStatus);
   const { selectedAppId } = useSelector((state) => state.discussions);
 
@@ -48,7 +49,6 @@ const AppConfigFormSaveButton = ({ intl, labelText }) => {
 };
 
 AppConfigFormSaveButton.propTypes = {
-  intl: intlShape.isRequired,
   labelText: PropTypes.string,
 };
 
@@ -56,4 +56,4 @@ AppConfigFormSaveButton.defaultProps = {
   labelText: '',
 };
 
-export default injectIntl(AppConfigFormSaveButton);
+export default AppConfigFormSaveButton;

src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.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 {
   Hyperlink, MailtoLink,
 } from '@openedx/paragon';
@@ -11,11 +11,11 @@ import messages from '../lti/messages';
 
 const AppExternalLinks = ({
   externalLinks,
-  intl,
   providerName,
   showLaunchIcon,
   customClasses,
 }) => {
+  const intl = useIntl();
   const { contactEmail, ...links } = externalLinks;
   const linkTypes = Object.keys(links).filter(key => links[key]);
   return (
@@ -71,7 +71,6 @@ AppExternalLinks.propTypes = {
     contactEmail: PropTypes.string,
   }).isRequired,
   providerName: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
   showLaunchIcon: PropTypes.bool,
   customClasses: PropTypes.string,
 };
@@ -81,4 +80,4 @@ AppExternalLinks.defaultProps = {
   customClasses: '',
 };
 
-export default injectIntl(AppExternalLinks);
+export default AppExternalLinks;

src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
 import AppConfigFormDivider from './AppConfigFormDivider';
 import messages from '../../messages';
 
-const ReportedContentEmailNotifications = ({ intl }) => {
+const ReportedContentEmailNotifications = () => {
+  const intl = useIntl();
   const {
     handleChange,
     handleBlur,
@@ -29,8 +30,4 @@ const ReportedContentEmailNotifications = ({ intl }) => {
   );
 };
 
-ReportedContentEmailNotifications.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ReportedContentEmailNotifications);
+export default ReportedContentEmailNotifications;