From 30cfd269e2edc861e02833a46b46626537a1fa97 Mon Sep 17 00:00:00 2001 From: Ahtesham Quraish Date: Mon, 21 Jul 2025 16:16:21 +0500 Subject: [PATCH] refactor: Replace of injectIntl with useIntl() part 5 #2285 --- .../components/LicenseWidget/LicenseDetails.jsx | 3 +-- .../components/LicenseWidget/index.jsx | 10 +++------- .../videos-page/info-sidebar/InfoTab.jsx | 4 ++-- .../videos-page/transcript-settings/Cielo24Form.jsx | 9 +++------ src/generic/configure-modal/UnitTab.jsx | 4 ++-- .../apps/shared/DivisionByGroupFields.jsx | 11 ++++------- .../shared/discussion-topics/DiscussionTopics.jsx | 11 ++++------- .../apps/shared/discussion-topics/TopicItem.jsx | 7 +++---- .../discussions/app-list/AppListNextButton.jsx | 11 ++++------- .../introducing-section/introduction-video/index.jsx | 8 ++++---- src/studio-home/tabs-section/libraries-tab/index.jsx | 9 +++------ 11 files changed, 33 insertions(+), 54 deletions(-) diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx index 95127bfd0..5f955b63a 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { FormattedMessage, - injectIntl, } from '@edx/frontend-platform/i18n'; import { ActionRow, @@ -163,4 +162,4 @@ export const mapDispatchToProps = (dispatch) => ({ }); export const LicenseDetailsInternal = LicenseDetails; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseDetails)); +export default connect(mapStateToProps, mapDispatchToProps)(LicenseDetails); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx index 5591abbdf..9a7af9ae6 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx @@ -3,8 +3,7 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { FormattedMessage, - injectIntl, - intlShape, + useIntl, } from '@edx/frontend-platform/i18n'; import { Button, @@ -25,8 +24,6 @@ import LicenseDisplay from './LicenseDisplay'; * Collapsible Form widget controlling video license type and details */ const LicenseWidget = ({ - // injected - intl, // redux isLibrary, licenseType, @@ -35,6 +32,7 @@ const LicenseWidget = ({ courseLicenseDetails, updateField, }) => { + const intl = useIntl(); const { license, details, level } = hooks.determineLicense({ isLibrary, licenseType, @@ -85,8 +83,6 @@ const LicenseWidget = ({ }; LicenseWidget.propTypes = { - // injected - intl: intlShape.isRequired, // redux isLibrary: PropTypes.bool.isRequired, licenseType: PropTypes.string.isRequired, @@ -109,4 +105,4 @@ export const mapDispatchToProps = (dispatch) => ({ }); export const LicenseWidgetInternal = LicenseWidget; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseWidget)); +export default connect(mapStateToProps, mapDispatchToProps)(LicenseWidget); diff --git a/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx b/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx index 102acf859..253304799 100644 --- a/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx +++ b/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Stack } from '@openedx/paragon'; -import { injectIntl, FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n'; import { getFileSizeToClosestByte } from '../../../utils'; import { getFormattedDuration } from '../data/utils'; import messages from './messages'; @@ -47,4 +47,4 @@ InfoTab.defaultProps = { video: {}, }; -export default injectIntl(InfoTab); +export default InfoTab; diff --git a/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx b/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx index 4169d3fbf..7d13c749b 100644 --- a/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx +++ b/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { isEmpty } from 'lodash'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { Form, Stack, TransitionReplace } from '@openedx/paragon'; import FormDropdown from './FormDropdown'; import { getFidelityOptions } from '../data/utils'; @@ -12,9 +12,8 @@ const Cielo24Form = ({ data, setData, transcriptionPlan, - // injected - intl, }) => { + const intl = useIntl(); if (hasTranscriptCredentials) { const { fidelity } = transcriptionPlan; const selectedLanguage = data.preferredLanguages ? data.preferredLanguages : ''; @@ -118,8 +117,6 @@ Cielo24Form.propTypes = { turnaround: PropTypes.shape({}), fidelity: PropTypes.shape({}), }).isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(Cielo24Form); +export default Cielo24Form; diff --git a/src/generic/configure-modal/UnitTab.jsx b/src/generic/configure-modal/UnitTab.jsx index 3c9ab89b1..345b5093e 100644 --- a/src/generic/configure-modal/UnitTab.jsx +++ b/src/generic/configure-modal/UnitTab.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Alert, Form } from '@openedx/paragon'; import { - FormattedMessage, injectIntl, useIntl, + FormattedMessage, useIntl, } from '@edx/frontend-platform/i18n'; import { Field } from 'formik'; import classNames from 'classnames'; @@ -198,4 +198,4 @@ UnitTab.propTypes = { }).isRequired, }; -export default injectIntl(UnitTab); +export default UnitTab; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx index ea1b18028..b85c9b289 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useContext } from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Form, TransitionReplace, Hyperlink, Alert, } from '@openedx/paragon'; @@ -12,7 +12,8 @@ import messages from '../../messages'; import AppConfigFormDivider from './AppConfigFormDivider'; import { OpenedXConfigFormContext } from '../openedx/OpenedXConfigFormProvider'; -const DivisionByGroupFields = ({ intl }) => { +const DivisionByGroupFields = () => { + const intl = useIntl(); const { validDiscussionTopics } = useContext(OpenedXConfigFormContext); const { handleChange, @@ -142,8 +143,4 @@ const DivisionByGroupFields = ({ intl }) => { ); }; -DivisionByGroupFields.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(DivisionByGroupFields); +export default DivisionByGroupFields; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx index d279533f5..1fed01969 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx @@ -1,7 +1,7 @@ import React, { useContext, useCallback } from 'react'; import { Add } from '@openedx/paragon/icons'; import { Button } from '@openedx/paragon'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { FieldArray, useFormikContext } from 'formik'; import { v4 as uuid } from 'uuid'; import { remove as removeElements, uniq, uniqBy } from 'lodash'; @@ -10,7 +10,8 @@ import TopicItem from './TopicItem'; import { OpenedXConfigFormContext } from '../../openedx/OpenedXConfigFormProvider'; import { filterItemFromObject } from '../../../utils'; -const DiscussionTopics = ({ intl }) => { +const DiscussionTopics = () => { + const intl = useIntl(); const { values: appConfig, validateForm, @@ -92,8 +93,4 @@ const DiscussionTopics = ({ intl }) => { ); }; -DiscussionTopics.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(DiscussionTopics); +export default DiscussionTopics; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx index 444dc1fb6..7db11c7ef 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { useFormikContext } from 'formik'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Button, Card, Form, } from '@openedx/paragon'; @@ -13,7 +13,6 @@ import messages from '../../../messages'; import FieldFeedback from '../../../../../../generic/FieldFeedback'; const TopicItem = ({ - intl, index, id, name, @@ -21,6 +20,7 @@ const TopicItem = ({ hasError, onFocus, }) => { + const intl = useIntl(); const { handleChange, handleBlur, errors, } = useFormikContext(); @@ -139,9 +139,8 @@ TopicItem.propTypes = { id: PropTypes.string.isRequired, index: PropTypes.number.isRequired, onDelete: PropTypes.func.isRequired, - intl: intlShape.isRequired, hasError: PropTypes.bool.isRequired, onFocus: PropTypes.func.isRequired, }; -export default injectIntl(TopicItem); +export default TopicItem; diff --git a/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx b/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx index db1dee3e5..4119241a8 100644 --- a/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx +++ b/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useContext } from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Button } from '@openedx/paragon'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; @@ -8,7 +8,8 @@ import { DiscussionsContext } from '../DiscussionsProvider'; import messages from './messages'; -const AppListNextButton = ({ intl }) => { +const AppListNextButton = () => { + const intl = useIntl(); const { selectedAppId } = useSelector(state => state.discussions); const { path: discussionsPath } = useContext(DiscussionsContext); const navigate = useNavigate(); @@ -27,8 +28,4 @@ const AppListNextButton = ({ intl }) => { ); }; -AppListNextButton.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(AppListNextButton); +export default AppListNextButton; diff --git a/src/schedule-and-details/introducing-section/introduction-video/index.jsx b/src/schedule-and-details/introducing-section/introduction-video/index.jsx index e8c8272ce..7713f743a 100644 --- a/src/schedule-and-details/introducing-section/introduction-video/index.jsx +++ b/src/schedule-and-details/introducing-section/introduction-video/index.jsx @@ -1,11 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Form, Button, Card } from '@openedx/paragon'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import messages from './messages'; -const IntroductionVideo = ({ intl, introVideo, onChange }) => { +const IntroductionVideo = ({ introVideo, onChange }) => { + const intl = useIntl(); const embedVideoUrl = introVideo ? `//www.youtube.com/embed/${introVideo}` : ''; @@ -56,9 +57,8 @@ IntroductionVideo.defaultProps = { }; IntroductionVideo.propTypes = { - intl: intlShape.isRequired, introVideo: PropTypes.string, onChange: PropTypes.func.isRequired, }; -export default injectIntl(IntroductionVideo); +export default IntroductionVideo; diff --git a/src/studio-home/tabs-section/libraries-tab/index.jsx b/src/studio-home/tabs-section/libraries-tab/index.jsx index 76a8c0dfe..1a3383c40 100644 --- a/src/studio-home/tabs-section/libraries-tab/index.jsx +++ b/src/studio-home/tabs-section/libraries-tab/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Icon, Row } from '@openedx/paragon'; import { Error } from '@openedx/paragon/icons'; @@ -14,9 +14,8 @@ const LibrariesTab = ({ libraries, isLoading, isFailed, - // injected - intl, }) => { + const intl = useIntl(); if (isLoading) { return ( @@ -65,8 +64,6 @@ LibrariesTab.propTypes = { ).isRequired, isLoading: PropTypes.bool.isRequired, isFailed: PropTypes.bool.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(LibrariesTab); +export default LibrariesTab;