From 46d5917303eaf07c034849f4e2def99b8a9596b4 Mon Sep 17 00:00:00 2001 From: Ahtesham Quraish Date: Sat, 19 Jul 2025 02:52:57 +0500 Subject: [PATCH] refactor: Replace of injectIntl with useIntl() part 7 (#2297) --- .../AccessibilityBody/AccessibilityBody.jsx | 4 +- .../modal-error/ModalError.jsx | 82 ++++++++++--------- .../SequenceNavigation.jsx | 7 +- .../EditProblemView/AnswerWidget/index.jsx | 9 +- .../EditProblemView/QuestionWidget/index.jsx | 9 +- .../components/TranscriptWidget/index.jsx | 9 +- .../SortAndFilterModal.jsx | 9 +- .../table-custom-columns/MoreInfoColumn.jsx | 9 +- .../videos-page/VideosPage.jsx | 10 +-- .../assignment-section/index.jsx | 8 +- .../grading-sidebar/index.jsx | 48 +++++------ .../import-stepper/ImportStepper.jsx | 9 +- .../discussions/app-list/AppList.jsx | 11 +-- .../organization-section/index.jsx | 11 +-- 14 files changed, 106 insertions(+), 129 deletions(-) diff --git a/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx b/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx index 40da33c91..faedcd36e 100644 --- a/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx +++ b/src/accessibility-page/AccessibilityBody/AccessibilityBody.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 { Hyperlink, MailtoLink, Stack } from '@openedx/paragon'; import messages from './messages'; @@ -95,4 +95,4 @@ AccessibilityBody.propTypes = { email: PropTypes.string.isRequired, }; -export default injectIntl(AccessibilityBody); +export default AccessibilityBody; diff --git a/src/advanced-settings/modal-error/ModalError.jsx b/src/advanced-settings/modal-error/ModalError.jsx index fd7312a0e..4c8ef9e77 100644 --- a/src/advanced-settings/modal-error/ModalError.jsx +++ b/src/advanced-settings/modal-error/ModalError.jsx @@ -1,55 +1,57 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ActionRow, AlertModal, Button } from '@openedx/paragon'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import ModalErrorListItem from './ModalErrorListItem'; import messages from './messages'; const ModalError = ({ - intl, isError, handleUndoChanges, showErrorModal, errorList, settingsData, -}) => ( - - - - + isError, handleUndoChanges, showErrorModal, errorList, settingsData, +}) => { + const intl = useIntl(); + return ( + + + + )} - > -

- {errorList.length} validation error }} - /> -

-
-
    - {errorList.map((settingName) => ( - {errorList.length} validation error }} /> - ))} -
- -); +

+
+ + + ); +}; ModalError.propTypes = { - intl: intlShape.isRequired, isError: PropTypes.bool.isRequired, handleUndoChanges: PropTypes.func.isRequired, showErrorModal: PropTypes.func.isRequired, @@ -60,4 +62,4 @@ ModalError.propTypes = { settingsData: PropTypes.shape({}).isRequired, }; -export default injectIntl(ModalError); +export default ModalError; diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx index ff5d9099e..fcadcd9cf 100644 --- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx +++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { - injectIntl, intlShape, isRtl, getLocale, + useIntl, isRtl, getLocale, } from '@edx/frontend-platform/i18n'; import { Button, useWindowSize, breakpoints } from '@openedx/paragon'; import { @@ -19,7 +19,6 @@ import messages from '../messages'; import SequenceNavigationTabs from './SequenceNavigationTabs'; const SequenceNavigation = ({ - intl, courseId, unitId, sequenceId, @@ -27,6 +26,7 @@ const SequenceNavigation = ({ handleCreateNewCourseXBlock, showPasteUnit, }) => { + const intl = useIntl(); const sequenceStatus = useSelector(getSequenceStatus); const { isFirstUnit, isLastUnit, nextLink, previousLink, @@ -106,7 +106,6 @@ const SequenceNavigation = ({ }; SequenceNavigation.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, unitId: PropTypes.string, className: PropTypes.string, @@ -121,4 +120,4 @@ SequenceNavigation.defaultProps = { className: undefined, }; -export default injectIntl(SequenceNavigation); +export default SequenceNavigation; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx index c7e865212..9094cb52d 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.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 messages from './messages'; import { ProblemTypes } from '../../../../../data/constants/problem'; @@ -10,9 +10,8 @@ import AnswersContainer from './AnswersContainer'; const AnswerWidget = ({ // Redux problemType, - // injected - intl, }) => { + const intl = useIntl(); const problemStaticData = ProblemTypes[problemType]; return (
@@ -31,8 +30,6 @@ const AnswerWidget = ({ AnswerWidget.propTypes = { problemType: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; export const AnswerWidgetInternal = AnswerWidget; // For testing only -export default injectIntl(AnswerWidget); +export default AnswerWidget; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx index ee8cbe636..f8020721a 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import { selectors } from '../../../../../data/redux'; @@ -16,9 +16,8 @@ const QuestionWidget = ({ images, isLibrary, blockId, - // injected - intl, }) => { + const intl = useIntl(); const { editorRef, refReady, setEditorRef } = prepareEditorRef(); const initialContent = question; const newContent = replaceStaticWithAsset({ @@ -62,8 +61,6 @@ QuestionWidget.propTypes = { images: PropTypes.shape({}).isRequired, isLibrary: PropTypes.bool.isRequired, blockId: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; export const mapStateToProps = (state) => ({ question: selectors.problem.question(state), @@ -74,4 +71,4 @@ export const mapStateToProps = (state) => ({ }); export const QuestionWidgetInternal = QuestionWidget; // For testing only -export default injectIntl(connect(mapStateToProps)(QuestionWidget)); +export default connect(mapStateToProps)(QuestionWidget); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx index 600cb64e8..cf8765b59 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx @@ -3,8 +3,7 @@ import { connect, useDispatch, useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { FormattedMessage, - injectIntl, - intlShape, + useIntl, } from '@edx/frontend-platform/i18n'; import { Form, @@ -91,9 +90,8 @@ const TranscriptWidget = ({ updateField, isUploadError, isDeleteError, - // injected - intl, }) => { + const intl = useIntl(); const [error] = React.useContext(ErrorContext).transcripts; const [showImportCard, setShowImportCard] = React.useState(true); const fullTextLanguages = module.hooks.transcriptLanguages(transcripts, intl); @@ -224,7 +222,6 @@ TranscriptWidget.propTypes = { updateField: PropTypes.func.isRequired, isUploadError: PropTypes.bool.isRequired, isDeleteError: PropTypes.bool.isRequired, - intl: PropTypes.shape(intlShape).isRequired, }; export const mapStateToProps = (state) => ({ transcripts: selectors.video.transcripts(state), @@ -241,4 +238,4 @@ export const mapDispatchToProps = (dispatch) => ({ }); export const TranscriptWidgetInternal = TranscriptWidget; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TranscriptWidget)); +export default connect(mapStateToProps, mapDispatchToProps)(TranscriptWidget); diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx index ac246352e..d87809343 100644 --- a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx +++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { ActionRow, Button, @@ -18,9 +18,8 @@ const SortAndFilterModal = ({ isSortOpen, closeSort, handleSort, - // injected - intl, }) => { + const intl = useIntl(); const { state, setAllFilters, columns, gotoPage, } = useContext(DataTableContext); @@ -178,8 +177,6 @@ SortAndFilterModal.propTypes = { handleSort: PropTypes.func.isRequired, isSortOpen: PropTypes.bool.isRequired, closeSort: PropTypes.func.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(SortAndFilterModal); +export default SortAndFilterModal; diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx index 8621237af..9f5476c2e 100644 --- a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx +++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.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 { Button, Icon, @@ -21,9 +21,8 @@ const MoreInfoColumn = ({ handleOpenFileInfo, handleOpenDeleteConfirmation, fileType, - // injected - intl, }) => { + const intl = useIntl(); const [isOpen, , close, toggle] = useToggle(); const [target, setTarget] = useState(null); @@ -144,12 +143,10 @@ MoreInfoColumn.propTypes = { handleOpenFileInfo: PropTypes.func.isRequired, handleOpenDeleteConfirmation: PropTypes.func.isRequired, fileType: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; MoreInfoColumn.defaultProps = { handleLock: null, }; -export default injectIntl(MoreInfoColumn); +export default MoreInfoColumn; diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx index d82c45692..ab05e27da 100644 --- a/src/files-and-videos/videos-page/VideosPage.jsx +++ b/src/files-and-videos/videos-page/VideosPage.jsx @@ -3,9 +3,8 @@ import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; import { useDispatch, useSelector } from 'react-redux'; import { - injectIntl, + useIntl, FormattedMessage, - intlShape, } from '@edx/frontend-platform/i18n'; import { ActionRow, @@ -51,9 +50,8 @@ import UploadModal from './upload-modal'; const VideosPage = ({ courseId, - // injected - intl, }) => { + const intl = useIntl(); const dispatch = useDispatch(); const [ isTranscriptSettingsOpen, @@ -331,8 +329,6 @@ const VideosPage = ({ VideosPage.propTypes = { courseId: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(VideosPage); +export default VideosPage; diff --git a/src/grading-settings/assignment-section/index.jsx b/src/grading-settings/assignment-section/index.jsx index 22adff649..20b3c65c6 100644 --- a/src/grading-settings/assignment-section/index.jsx +++ b/src/grading-settings/assignment-section/index.jsx @@ -1,6 +1,7 @@ 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 { Button } from '@openedx/paragon'; import { CheckCircle, Warning } from '@openedx/paragon/icons'; @@ -15,7 +16,6 @@ const MIN_NUMBER_VALUE = 0; const MAX_NUMBER_VALUE = 100; const AssignmentSection = ({ - intl, handleRemoveAssignment, setShowSavePrompt, graders, @@ -23,6 +23,7 @@ const AssignmentSection = ({ courseAssignmentLists, setShowSuccessAlert, }) => { + const intl = useIntl(); const [errorList, setErrorList] = useState({}); const { type, weight, minCount, dropCount, @@ -201,7 +202,6 @@ AssignmentSection.defaultProps = { }; AssignmentSection.propTypes = { - intl: intlShape.isRequired, handleRemoveAssignment: PropTypes.func.isRequired, setGradingData: PropTypes.func.isRequired, setShowSavePrompt: PropTypes.func.isRequired, @@ -212,4 +212,4 @@ AssignmentSection.propTypes = { ), }; -export default injectIntl(AssignmentSection); +export default AssignmentSection; diff --git a/src/grading-settings/grading-sidebar/index.jsx b/src/grading-settings/grading-sidebar/index.jsx index eff5a602a..c6a8e8741 100644 --- a/src/grading-settings/grading-sidebar/index.jsx +++ b/src/grading-settings/grading-sidebar/index.jsx @@ -1,39 +1,41 @@ 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 { HelpSidebar } from '../../generic/help-sidebar'; import messages from './messages'; -const GradingSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => ( - -

- {intl.formatMessage(messages.gradingSidebarTitle)} -

-

- {intl.formatMessage(messages.gradingSidebarAbout1)} -

-

- {intl.formatMessage(messages.gradingSidebarAbout2)} -

-

- {intl.formatMessage(messages.gradingSidebarAbout3)} -

- -); +const GradingSidebar = ({ courseId, proctoredExamSettingsUrl }) => { + const intl = useIntl(); + return ( + +

+ {intl.formatMessage(messages.gradingSidebarTitle)} +

+

+ {intl.formatMessage(messages.gradingSidebarAbout1)} +

+

+ {intl.formatMessage(messages.gradingSidebarAbout2)} +

+

+ {intl.formatMessage(messages.gradingSidebarAbout3)} +

+ + ); +}; GradingSidebar.defaultProps = { proctoredExamSettingsUrl: '', }; GradingSidebar.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, proctoredExamSettingsUrl: PropTypes.string, }; -export default injectIntl(GradingSidebar); +export default GradingSidebar; diff --git a/src/import-page/import-stepper/ImportStepper.jsx b/src/import-page/import-stepper/ImportStepper.jsx index cac74f5ec..3587f3559 100644 --- a/src/import-page/import-stepper/ImportStepper.jsx +++ b/src/import-page/import-stepper/ImportStepper.jsx @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; import { FormattedDate, - injectIntl, - intlShape, + useIntl, } from '@edx/frontend-platform/i18n'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; @@ -18,7 +17,8 @@ import { } from '../data/selectors'; import messages from './messages'; -const ImportStepper = ({ intl, courseId }) => { +const ImportStepper = ({ courseId }) => { + const intl = useIntl(); const currentStage = useSelector(getCurrentStage); const fileName = useSelector(getFileName); const { hasError, message: errorMessage } = useSelector(getError); @@ -109,8 +109,7 @@ const ImportStepper = ({ intl, courseId }) => { }; ImportStepper.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, }; -export default injectIntl(ImportStepper); +export default ImportStepper; diff --git a/src/pages-and-resources/discussions/app-list/AppList.jsx b/src/pages-and-resources/discussions/app-list/AppList.jsx index 55e2cd87c..571683b75 100644 --- a/src/pages-and-resources/discussions/app-list/AppList.jsx +++ b/src/pages-and-resources/discussions/app-list/AppList.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo, useState, useContext, } from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { CardGrid, Container, breakpoints, Form, ActionRow, AlertModal, Button, StatefulButton, } from '@openedx/paragon'; @@ -22,7 +22,8 @@ import { saveProviderConfig, fetchDiscussionSettings } from '../data/thunks'; import { PagesAndResourcesContext } from '../../PagesAndResourcesProvider'; import { discussionRestriction } from '../data/constants'; -const AppList = ({ intl }) => { +const AppList = () => { + const intl = useIntl(); const dispatch = useDispatch(); const { courseId } = useContext(PagesAndResourcesContext); const { @@ -190,11 +191,7 @@ const AppList = ({ intl }) => { ); }; -AppList.propTypes = { - intl: intlShape.isRequired, -}; - -const IntlAppList = injectIntl(AppList); +const IntlAppList = AppList; IntlAppList.NextButton = AppListNextButton; diff --git a/src/studio-home/organization-section/index.jsx b/src/studio-home/organization-section/index.jsx index c7cd0688c..4ecb2d896 100644 --- a/src/studio-home/organization-section/index.jsx +++ b/src/studio-home/organization-section/index.jsx @@ -3,14 +3,15 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { isEmpty } from 'lodash'; import { Button, Form, FormLabel } from '@openedx/paragon'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import TypeaheadDropdown from '../../editors/sharedComponents/TypeaheadDropdown'; import { getOrganizations } from '../../generic/data/selectors'; import { fetchOrganizationsQuery } from '../../generic/data/thunks'; import messages from '../messages'; -const OrganizationSection = ({ intl }) => { +const OrganizationSection = () => { + const intl = useIntl(); const dispatch = useDispatch(); const location = useLocation(); const navigate = useNavigate(); @@ -70,8 +71,4 @@ const OrganizationSection = ({ intl }) => { ); }; -OrganizationSection.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(OrganizationSection); +export default OrganizationSection;