From 2ae594f23cf6a3cd889dc3a396a2f6676c8d68e3 Mon Sep 17 00:00:00 2001 From: Jacobo Dominguez Date: Tue, 22 Jul 2025 10:49:33 -0600 Subject: [PATCH] refactor: replacing injectIntl with useIntl part 4 (#2301) --- .../components/HandoutWidget/index.jsx | 13 +++---------- .../components/HandoutWidget/index.test.tsx | 2 -- .../components/TranscriptWidget/Transcript.jsx | 7 ++----- .../files-page/FileInfoModalSidebar.jsx | 14 +++----------- .../generic/table-components/RowStatus.jsx | 14 ++++---------- .../generic/table-components/TableActions.jsx | 8 +++----- .../generic/table-components/TableActions.test.jsx | 3 --- .../table-custom-columns/TranscriptColumn.jsx | 4 ++-- .../videos-page/info-sidebar/TranscriptTab.jsx | 9 +++------ .../transcript-settings/TranscriptSettings.jsx | 4 ++-- src/import-page/import-sidebar/ImportSidebar.jsx | 13 ++++++------- .../app-config-form/AppConfigFormSaveButton.jsx | 8 ++++---- .../apps/shared/AppExternalLinks.jsx | 7 +++---- .../shared/ReportedContentEmailNotifications.jsx | 11 ++++------- 14 files changed, 39 insertions(+), 78 deletions(-) diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx index 799c06a0c..dd2cffbbb 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx +++ b/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); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx index 076800fc1..fe3231451 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx +++ b/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, diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx index 6300fee19..1d28e7d1a 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx +++ b/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); diff --git a/src/files-and-videos/files-page/FileInfoModalSidebar.jsx b/src/files-and-videos/files-page/FileInfoModalSidebar.jsx index 2b4246d4b..9ba44ccb7 100644 --- a/src/files-and-videos/files-page/FileInfoModalSidebar.jsx +++ b/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; diff --git a/src/files-and-videos/generic/table-components/RowStatus.jsx b/src/files-and-videos/generic/table-components/RowStatus.jsx index e22e496e0..3ddc7b9ee 100644 --- a/src/files-and-videos/generic/table-components/RowStatus.jsx +++ b/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; diff --git a/src/files-and-videos/generic/table-components/TableActions.jsx b/src/files-and-videos/generic/table-components/TableActions.jsx index 0663ea849..8323aa3d8 100644 --- a/src/files-and-videos/generic/table-components/TableActions.jsx +++ b/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; diff --git a/src/files-and-videos/generic/table-components/TableActions.test.jsx b/src/files-and-videos/generic/table-components/TableActions.test.jsx index d97f3b2bc..803987f36 100644 --- a/src/files-and-videos/generic/table-components/TableActions.test.jsx +++ b/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 = [ diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx index dcd8a900a..230a7e259 100644 --- a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx +++ b/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; diff --git a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx index 6c08860b0..739293231 100644 --- a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx +++ b/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; diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx index 3c13bdea7..2638508f1 100644 --- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx +++ b/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; diff --git a/src/import-page/import-sidebar/ImportSidebar.jsx b/src/import-page/import-sidebar/ImportSidebar.jsx index 9a7cb9424..4450ff2bd 100644 --- a/src/import-page/import-sidebar/ImportSidebar.jsx +++ b/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 ( @@ -50,8 +50,7 @@ const ImportSidebar = ({ intl, courseId }) => { }; ImportSidebar.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, }; -export default injectIntl(ImportSidebar); +export default ImportSidebar; diff --git a/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx b/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx index a351d9e8f..dcf28aa32 100644 --- a/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx +++ b/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; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx index 4cf92fd1f..3acbb6e48 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx +++ b/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; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx index 67fc81896..6d576598c 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx +++ b/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;