From 215f7280dabbfd9439d97db420dea1a7702226ef Mon Sep 17 00:00:00 2001 From: Ahtesham Quraish Date: Sat, 19 Jul 2025 02:37:03 +0500 Subject: [PATCH] refactor: Replace of injectIntl with useIntl() part 6 (#2298) --- .../components/VideoPreviewWidget/index.jsx | 7 ++-- .../files-page/FileThumbnail.jsx | 10 ++--- .../generic/ApiStatusToast.jsx | 9 ++--- .../generic/DeleteConfirmationModal.jsx | 9 ++--- src/generic/ConnectionErrorAlert.jsx | 37 +++++++++---------- src/generic/configure-modal/BasicTab.jsx | 4 +- .../deadline-section/index.jsx | 8 ++-- src/import-page/file-section/FileSection.jsx | 11 ++---- .../app-config-form/AppConfigForm.jsx | 8 ++-- .../apps/lti/LtiConfigForm.jsx | 8 ++-- .../apps/openedx/OpenedXConfigForm.jsx | 8 ++-- 11 files changed, 53 insertions(+), 66 deletions(-) diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx index 912b541dc..b3340b13a 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx @@ -1,4 +1,4 @@ -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Collapsible, Image, Stack, Hyperlink, } from '@openedx/paragon'; @@ -17,8 +17,8 @@ export const VideoPreviewWidget = ({ videoSource, transcripts, blockTitle, - intl, }) => { + const intl = useIntl(); const imgRef = React.useRef(); const videoType = intl.formatMessage(hooks.getVideoType(videoSource)); const thumbnailImage = thumbnail || videoThumbnail; @@ -65,7 +65,6 @@ export const VideoPreviewWidget = ({ }; VideoPreviewWidget.propTypes = { - intl: intlShape.isRequired, videoSource: PropTypes.string.isRequired, thumbnail: PropTypes.string.isRequired, transcripts: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -79,4 +78,4 @@ export const mapStateToProps = (state) => ({ blockTitle: selectors.app.blockTitle(state), }); -export default injectIntl(connect(mapStateToProps)(VideoPreviewWidget)); +export default connect(mapStateToProps)(VideoPreviewWidget); diff --git a/src/files-and-videos/files-page/FileThumbnail.jsx b/src/files-and-videos/files-page/FileThumbnail.jsx index ace304530..af31472ce 100644 --- a/src/files-and-videos/files-page/FileThumbnail.jsx +++ b/src/files-and-videos/files-page/FileThumbnail.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, Image, @@ -14,9 +14,9 @@ const FileThumbnail = ({ externalUrl, displayName, imageSize, - // injected - intl, }) => { + const intl = useIntl(); + const src = getSrc({ thumbnail, externalUrl, @@ -65,8 +65,6 @@ FileThumbnail.propTypes = { width: PropTypes.string, height: PropTypes.string.isRequired, }).isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(FileThumbnail); +export default FileThumbnail; diff --git a/src/files-and-videos/generic/ApiStatusToast.jsx b/src/files-and-videos/generic/ApiStatusToast.jsx index 8d1f0f73b..0f302330a 100644 --- a/src/files-and-videos/generic/ApiStatusToast.jsx +++ b/src/files-and-videos/generic/ApiStatusToast.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 { Toast } from '@openedx/paragon'; import messages from './messages'; @@ -11,9 +11,8 @@ const ApiStatusToast = ({ setClose, setSelectedRows, fileType, - // injected - intl, }) => { + const intl = useIntl(); const handleClose = () => { setSelectedRows([]); setClose(); @@ -36,8 +35,6 @@ ApiStatusToast.propTypes = { setClose: PropTypes.func.isRequired, setSelectedRows: PropTypes.func.isRequired, fileType: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(ApiStatusToast); +export default ApiStatusToast; diff --git a/src/files-and-videos/generic/DeleteConfirmationModal.jsx b/src/files-and-videos/generic/DeleteConfirmationModal.jsx index b6f462785..c60d0a29a 100644 --- a/src/files-and-videos/generic/DeleteConfirmationModal.jsx +++ b/src/files-and-videos/generic/DeleteConfirmationModal.jsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import { ActionRow, @@ -20,9 +20,8 @@ const DeleteConfirmationModal = ({ handleBulkDelete, selectedRows, fileType, - // injected - intl, }) => { + const intl = useIntl(); const { clearSelection } = useContext(DataTableContext); const handleConfirmDeletion = () => { @@ -133,8 +132,6 @@ DeleteConfirmationModal.propTypes = { closeDeleteConfirmation: PropTypes.func.isRequired, handleBulkDelete: PropTypes.func.isRequired, fileType: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(DeleteConfirmationModal); +export default DeleteConfirmationModal; diff --git a/src/generic/ConnectionErrorAlert.jsx b/src/generic/ConnectionErrorAlert.jsx index 44d088a66..8d5d7b890 100644 --- a/src/generic/ConnectionErrorAlert.jsx +++ b/src/generic/ConnectionErrorAlert.jsx @@ -1,27 +1,26 @@ import React from 'react'; -import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { Alert } from '@openedx/paragon'; import { getConfig } from '@edx/frontend-platform'; import messages from '../messages'; -const ConnectionErrorAlert = ({ intl }) => ( - - - {intl.formatMessage(messages.supportText)} - - ), - }} - /> - -); - -ConnectionErrorAlert.propTypes = { - intl: intlShape.isRequired, +const ConnectionErrorAlert = () => { + const intl = useIntl(); + return ( + + + {intl.formatMessage(messages.supportText)} + + ), + }} + /> + + ); }; -export default injectIntl(ConnectionErrorAlert); +export default ConnectionErrorAlert; diff --git a/src/generic/configure-modal/BasicTab.jsx b/src/generic/configure-modal/BasicTab.jsx index fc924a982..8b97bb6ae 100644 --- a/src/generic/configure-modal/BasicTab.jsx +++ b/src/generic/configure-modal/BasicTab.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import { Stack, Form } from '@openedx/paragon'; -import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { DatepickerControl, DATEPICKER_TYPES } from '../datepicker-control'; import messages from './messages'; @@ -111,4 +111,4 @@ BasicTab.propTypes = { isSelfPaced: PropTypes.bool.isRequired, }; -export default injectIntl(BasicTab); +export default BasicTab; diff --git a/src/grading-settings/deadline-section/index.jsx b/src/grading-settings/deadline-section/index.jsx index 7af88ba32..31305fd5e 100644 --- a/src/grading-settings/deadline-section/index.jsx +++ b/src/grading-settings/deadline-section/index.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Form } from '@openedx/paragon'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import classNames from 'classnames'; import { DEFAULT_TIME_STAMP, TIME_FORMAT } from '../../constants'; @@ -9,8 +9,9 @@ import { formatTime, timerValidation } from './utils'; import messages from './messages'; const DeadlineSection = ({ - intl, setShowSavePrompt, gracePeriod, setGradingData, setShowSuccessAlert, + setShowSavePrompt, gracePeriod, setGradingData, setShowSuccessAlert, }) => { + const intl = useIntl(); const timeStampValue = gracePeriod ? `${formatTime(gracePeriod.hours)}:${formatTime(gracePeriod.minutes)}` : DEFAULT_TIME_STAMP; @@ -70,7 +71,6 @@ DeadlineSection.defaultProps = { }; DeadlineSection.propTypes = { - intl: intlShape.isRequired, setShowSavePrompt: PropTypes.func.isRequired, setGradingData: PropTypes.func.isRequired, setShowSuccessAlert: PropTypes.func.isRequired, @@ -80,4 +80,4 @@ DeadlineSection.propTypes = { }), }; -export default injectIntl(DeadlineSection); +export default DeadlineSection; diff --git a/src/import-page/file-section/FileSection.jsx b/src/import-page/file-section/FileSection.jsx index 740e6d9e9..bc42b1114 100644 --- a/src/import-page/file-section/FileSection.jsx +++ b/src/import-page/file-section/FileSection.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 { useDispatch, useSelector } from 'react-redux'; import { Card, Dropzone } from '@openedx/paragon'; @@ -14,7 +11,8 @@ import { import messages from './messages'; import { handleProcessUpload } from '../data/thunks'; -const FileSection = ({ intl, courseId }) => { +const FileSection = ({ courseId }) => { + const intl = useIntl(); const dispatch = useDispatch(); const importTriggered = useSelector(getImportTriggered); const currentStage = useSelector(getCurrentStage); @@ -52,8 +50,7 @@ const FileSection = ({ intl, courseId }) => { }; FileSection.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, }; -export default injectIntl(FileSection); +export default FileSection; diff --git a/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx index 190dedc1a..b921ed901 100644 --- a/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx +++ b/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { ActionRow, Container, @@ -29,8 +29,9 @@ import AppConfigFormSaveButton from './AppConfigFormSaveButton'; import messages from './messages'; const AppConfigForm = ({ - courseId, intl, + courseId, }) => { + const intl = useIntl(); const dispatch = useDispatch(); const navigate = useNavigate(); @@ -146,10 +147,9 @@ const AppConfigForm = ({ AppConfigForm.propTypes = { courseId: PropTypes.string.isRequired, - intl: intlShape.isRequired, }; -const IntlAppConfigForm = injectIntl(AppConfigForm); +const IntlAppConfigForm = AppConfigForm; IntlAppConfigForm.Provider = AppConfigFormProvider; IntlAppConfigForm.SaveButton = AppConfigFormSaveButton; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx index 35d850d3b..02bcbb242 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { ensureConfig } from '@edx/frontend-platform'; import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { Card, Form, MailtoLink } from '@openedx/paragon'; import { useFormik } from 'formik'; @@ -18,7 +18,8 @@ import { useModel } from '../../../../../generic/model-store'; ensureConfig(['SITE_NAME', 'SUPPORT_EMAIL'], 'LTI Config Form'); -const LtiConfigForm = ({ onSubmit, intl, formRef }) => { +const LtiConfigForm = ({ onSubmit, formRef }) => { + const intl = useIntl(); const dispatch = useDispatch(); const { selectedAppId, piiConfig } = useSelector((state) => state.discussions); @@ -180,10 +181,9 @@ const LtiConfigForm = ({ onSubmit, intl, formRef }) => { }; LtiConfigForm.propTypes = { - intl: intlShape.isRequired, onSubmit: PropTypes.func.isRequired, // eslint-disable-next-line react/forbid-prop-types formRef: PropTypes.object.isRequired, }; -export default injectIntl(LtiConfigForm); +export default LtiConfigForm; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx index f11f1b7e5..9f2fa162a 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx @@ -1,4 +1,4 @@ -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Card, Form } from '@openedx/paragon'; import { Formik } from 'formik'; import PropTypes from 'prop-types'; @@ -22,8 +22,9 @@ import OpenedXConfigFormProvider from './OpenedXConfigFormProvider'; setupYupExtensions(); const OpenedXConfigForm = ({ - onSubmit, formRef, intl, legacy, + onSubmit, formRef, legacy, }) => { + const intl = useIntl(); const { selectedAppId, enableGradedUnits, discussionTopicIds, divideDiscussionIds, postingRestrictions, } = useSelector(state => state.discussions); @@ -155,7 +156,6 @@ OpenedXConfigForm.propTypes = { onSubmit: PropTypes.func.isRequired, // eslint-disable-next-line react/forbid-prop-types formRef: PropTypes.object.isRequired, - intl: intlShape.isRequired, }; -export default injectIntl(OpenedXConfigForm); +export default OpenedXConfigForm;