diff --git a/src/accessibility-page/AccessibilityPage.jsx b/src/accessibility-page/AccessibilityPage.jsx index e7a0a2770..ccb31736c 100644 --- a/src/accessibility-page/AccessibilityPage.jsx +++ b/src/accessibility-page/AccessibilityPage.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Helmet } from 'react-helmet'; import { Container } from '@openedx/paragon'; import { StudioFooterSlot } from '@edx/frontend-component-footer'; @@ -11,32 +11,29 @@ import AccessibilityForm from './AccessibilityForm'; import { COMMUNITY_ACCESSIBILITY_LINK, ACCESSIBILITY_EMAIL } from './constants'; -const AccessibilityPage = ({ - // injected - intl, -}) => ( - <> - - - {intl.formatMessage(messages.pageTitle, { - siteName: process.env.SITE_NAME, - })} - - -
- - - - - - -); - -AccessibilityPage.propTypes = { - // injected - intl: intlShape.isRequired, +const AccessibilityPage = () => { + const intl = useIntl(); + return ( + <> + + + {intl.formatMessage(messages.pageTitle, { + siteName: process.env.SITE_NAME, + })} + + +
+ + + + + + + ); }; -export default injectIntl(AccessibilityPage); +AccessibilityPage.propTypes = {}; + +export default AccessibilityPage; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx index 91522d3aa..52cbc5c24 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.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 { answerOptionProps } from '../../../../../../../data/services/cms/types'; import FeedbackControl from './FeedbackControl'; @@ -15,9 +15,8 @@ export const FeedbackBox = ({ images, isLibrary, learningContextId, - // injected - intl, }) => { + const intl = useIntl(); const props = { answer, intl, @@ -70,7 +69,6 @@ FeedbackBox.propTypes = { images: PropTypes.shape({}).isRequired, learningContextId: PropTypes.string.isRequired, isLibrary: PropTypes.bool.isRequired, - intl: intlShape.isRequired, }; -export default injectIntl(FeedbackBox); +export default FeedbackBox; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx index 8a1ba201e..ded9e742c 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.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 { connect } from 'react-redux'; import { Button, Collapsible, @@ -228,4 +228,4 @@ export const mapDispatchToProps = { }; export const SettingsWidgetInternal = SettingsWidget; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SettingsWidget)); +export default connect(mapStateToProps, mapDispatchToProps)(SettingsWidget); diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx index 799740a35..03fb498e9 100644 --- a/src/editors/containers/TextEditor/index.jsx +++ b/src/editors/containers/TextEditor/index.jsx @@ -6,7 +6,7 @@ import { Spinner, Toast, } from '@openedx/paragon'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import { actions, selectors } from '../../data/redux'; @@ -32,9 +32,8 @@ const TextEditor = ({ learningContextId, images, isLibrary, - // inject - intl, }) => { + const intl = useIntl(); const { editorRef, refReady, setEditorRef } = prepareEditorRef(); const initialContent = blockValue ? blockValue.data.data : ''; const newContent = replaceStaticWithAsset({ @@ -123,8 +122,6 @@ TextEditor.propTypes = { learningContextId: PropTypes.string, // This should be required but is NULL when the store is in initial state :/ images: PropTypes.shape({}).isRequired, isLibrary: PropTypes.bool.isRequired, - // inject - intl: intlShape.isRequired, }; export const mapStateToProps = (state) => ({ @@ -144,4 +141,4 @@ export const mapDispatchToProps = { }; export const TextEditorInternal = TextEditor; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextEditor)); +export default connect(mapStateToProps, mapDispatchToProps)(TextEditor); diff --git a/src/editors/containers/TextEditor/index.test.tsx b/src/editors/containers/TextEditor/index.test.tsx index 6e57df221..0844ffb93 100644 --- a/src/editors/containers/TextEditor/index.test.tsx +++ b/src/editors/containers/TextEditor/index.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { render, screen, initializeMocks } from '@src/testUtils'; -import { formatMessage } from '../../testUtils'; import { actions, selectors } from '../../data/redux'; import { RequestKeys } from '../../data/constants/requests'; import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.'; @@ -53,8 +52,6 @@ describe('TextEditor', () => { learningContextId: 'course+org+run', images: {}, isLibrary: false, - // inject - intl: { formatMessage }, }; afterAll(() => jest.restoreAllMocks()); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx index 2647d07c8..74f5d1c06 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx @@ -1,4 +1,4 @@ -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Icon } from '@openedx/paragon'; import { ClosedCaptionOff, ClosedCaption } from '@openedx/paragon/icons'; import PropTypes from 'prop-types'; @@ -6,7 +6,8 @@ import React from 'react'; import messages from '../messages'; import { hooks as transcriptHooks } from '../TranscriptWidget'; -const LanguageNamesWidget = ({ transcripts, intl }) => { +const LanguageNamesWidget = ({ transcripts }) => { + const intl = useIntl(); let icon = ClosedCaptionOff; const hasTranscripts = transcriptHooks.hasTranscripts(transcripts); let message = intl.formatMessage(messages.noTranscriptsAdded); @@ -25,8 +26,7 @@ const LanguageNamesWidget = ({ transcripts, intl }) => { }; LanguageNamesWidget.propTypes = { - intl: intlShape.isRequired, transcripts: PropTypes.arrayOf(PropTypes.string).isRequired, }; -export default injectIntl(LanguageNamesWidget); +export default LanguageNamesWidget; diff --git a/src/export-page/export-modal-error/ExportModalError.jsx b/src/export-page/export-modal-error/ExportModalError.jsx index 64d67f2f1..006262ccd 100644 --- a/src/export-page/export-modal-error/ExportModalError.jsx +++ b/src/export-page/export-modal-error/ExportModalError.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { useDispatch, useSelector } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; import PropTypes from 'prop-types'; @@ -11,9 +11,9 @@ import { updateIsErrorModalOpen } from '../data/slice'; import messages from './messages'; const ExportModalError = ({ - intl, courseId, }) => { + const intl = useIntl(); const dispatch = useDispatch(); const isErrorModalOpen = useSelector(getIsErrorModalOpen); const { msg: errorMessage, unitUrl: unitErrorUrl } = useSelector(getError); @@ -47,10 +47,9 @@ const ExportModalError = ({ }; ExportModalError.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string.isRequired, }; ExportModalError.defaultProps = {}; -export default injectIntl(ExportModalError); +export default ExportModalError; diff --git a/src/files-and-videos/files-page/FileValidationModal.jsx b/src/files-and-videos/files-page/FileValidationModal.jsx index 1e1a310b3..52439c907 100644 --- a/src/files-and-videos/files-page/FileValidationModal.jsx +++ b/src/files-and-videos/files-page/FileValidationModal.jsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; -import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { ActionRow, Button, @@ -14,9 +14,8 @@ import messages from './messages'; const FileValidationModal = ({ handleFileOverwrite, - // injected - intl, }) => { + const intl = useIntl(); const [isOpen, open, close] = useToggle(); const { duplicateFiles } = useSelector(state => state.assets); @@ -61,8 +60,6 @@ const FileValidationModal = ({ FileValidationModal.propTypes = { handleFileOverwrite: PropTypes.func.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(FileValidationModal); +export default FileValidationModal; diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx index e8ebe0787..0976cc9bb 100644 --- a/src/files-and-videos/files-page/FilesPage.jsx +++ b/src/files-and-videos/files-page/FilesPage.jsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { CheckboxFilter, Container } from '@openedx/paragon'; import Placeholder from '../../editors/Placeholder'; @@ -36,9 +36,8 @@ import './FilesPage.scss'; const FilesPage = ({ courseId, - // injected - intl, }) => { + const intl = useIntl(); const dispatch = useDispatch(); const courseDetails = useModel('courseDetails', courseId); document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading)); @@ -222,8 +221,6 @@ const FilesPage = ({ FilesPage.propTypes = { courseId: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(FilesPage); +export default FilesPage; diff --git a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx index 1f13871fc..3d2af2c9d 100644 --- a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx +++ b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx @@ -1,11 +1,6 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { - FormattedMessage, - FormattedDate, - injectIntl, - intlShape, -} from '@edx/frontend-platform/i18n'; +import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n'; import { Button, Stack } from '@openedx/paragon'; import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert'; import SelectableBox from '../../../editors/sharedComponents/SelectableBox'; @@ -25,9 +20,8 @@ const OrderTranscriptForm = ({ transcriptionPlans, errorMessages, transcriptStatus, - // injected - intl, }) => { + const intl = useIntl(); const [data, setData] = useState(activeTranscriptPreferences || { videoSourceLanguage: '' }); const [validCieloTranscriptionPlan, validThreePlayTranscriptionPlan] = checkTranscriptionPlans(transcriptionPlans); @@ -200,12 +194,10 @@ OrderTranscriptForm.propTypes = { languages: PropTypes.shape({}), }).isRequired, }).isRequired, - // injected - intl: intlShape.isRequired, }; OrderTranscriptForm.defaultProps = { activeTranscriptPreferences: null, }; -export default injectIntl(OrderTranscriptForm); +export default OrderTranscriptForm; diff --git a/src/generic/course-stepper/index.jsx b/src/generic/course-stepper/index.jsx index caf341f77..a682f297a 100644 --- a/src/generic/course-stepper/index.jsx +++ b/src/generic/course-stepper/index.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { injectIntl } from '@edx/frontend-platform/i18n'; import { Settings as SettingsIcon, ManageHistory as SuccessIcon, @@ -115,4 +114,4 @@ CourseStepper.propTypes = { hasError: PropTypes.bool, }; -export default injectIntl(CourseStepper); +export default CourseStepper; diff --git a/src/optimizer-page/CourseOptimizerPage.tsx b/src/optimizer-page/CourseOptimizerPage.tsx index fb0a5e4a6..251d12dda 100644 --- a/src/optimizer-page/CourseOptimizerPage.tsx +++ b/src/optimizer-page/CourseOptimizerPage.tsx @@ -180,6 +180,7 @@ const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => { ( - <> -
{intl.formatMessage(messages.anonymousPosting)}
- - - -); +}) => { + const intl = useIntl(); + return ( + <> +
{intl.formatMessage(messages.anonymousPosting)}
+ + + + ); +}; AnonymousPostingFields.propTypes = { onBlur: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, - intl: intlShape.isRequired, values: PropTypes.shape({ allowAnonymousPostsPeers: PropTypes.bool, }).isRequired, }; -export default injectIntl(AnonymousPostingFields); +export default AnonymousPostingFields; diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx index 8fc5e4bbb..ed825ffee 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.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 { useFormikContext } from 'formik'; import FormSwitchGroup from '../../../../../generic/FormSwitchGroup'; import messages from '../../messages'; @@ -10,9 +10,9 @@ import ConfirmationPopup from '../../../../../generic/ConfirmationPopup'; const InContextDiscussionFields = ({ onBlur, onChange, - intl, values, }) => { + const intl = useIntl(); const { setFieldValue, } = useFormikContext(); @@ -67,11 +67,10 @@ const InContextDiscussionFields = ({ InContextDiscussionFields.propTypes = { onBlur: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, - intl: intlShape.isRequired, values: PropTypes.shape({ enableGradedUnits: PropTypes.bool, groupAtSubsection: PropTypes.bool, }).isRequired, }; -export default injectIntl(InContextDiscussionFields); +export default InContextDiscussionFields;