diff --git a/src/course-checklist/CourseChecklist.jsx b/src/course-checklist/CourseChecklist.jsx index a220cff8fa..335af5e1ca 100644 --- a/src/course-checklist/CourseChecklist.jsx +++ b/src/course-checklist/CourseChecklist.jsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { getConfig } from '@edx/frontend-platform'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Helmet } from 'react-helmet'; import { useDispatch, useSelector } from 'react-redux'; import { Container, Stack } from '@openedx/paragon'; @@ -17,9 +17,8 @@ import ConnectionErrorAlert from '../generic/ConnectionErrorAlert'; const CourseChecklist = ({ courseId, - // injected, - intl, }) => { + const intl = useIntl(); const dispatch = useDispatch(); const courseDetails = useModel('courseDetails', courseId); const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true'; @@ -97,8 +96,6 @@ const CourseChecklist = ({ CourseChecklist.propTypes = { courseId: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(CourseChecklist); +export default CourseChecklist; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx index 0b76264217..e6d602d93a 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.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 { Form } from '@openedx/paragon'; import PropTypes from 'prop-types'; import SettingsOption from '../../SettingsOption'; @@ -11,9 +11,8 @@ export const RandomizationCard = ({ randomization, defaultValue, updateSettings, - // inject - intl, }) => { + const intl = useIntl(); const curretRandomization = randomization || defaultValue; const { summary, handleChange } = useRandomizationSettingStatus({ randomization: curretRandomization, @@ -56,7 +55,6 @@ RandomizationCard.propTypes = { defaultValue: PropTypes.string.isRequired, randomization: PropTypes.string.isRequired, updateSettings: PropTypes.func.isRequired, - intl: intlShape.isRequired, }; -export default injectIntl(RandomizationCard); +export default RandomizationCard; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx index eb85ea5267..e5b0d4f47a 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, screen, initializeMocks, fireEvent, } from '@src/testUtils'; -import { formatMessage } from '@src/editors/testUtils'; import { RandomizationCard } from './index'; import * as hooks from './hooks'; @@ -11,11 +10,10 @@ describe('RandomizationCard', () => { randomization: 'per_student', defaultValue: 'always', updateSettings: jest.fn().mockName('args.updateSettings'), - intl: { formatMessage }, }; const randomizationCardHooksProps = { - summary: { message: { defaultMessage: 'sUmmary' } }, + summary: { message: { id: 'defaultMessage', defaultMessage: 'sUmmary' } }, handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'), }; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx index 5975edf7ae..22e94bbea2 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { Col, Form } from '@openedx/paragon'; -import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { actions, selectors } from '../../../../../../data/redux'; import { keyStore } from '../../../../../../utils'; @@ -21,9 +21,8 @@ const DurationWidget = ({ // redux duration, updateField, - // injected - intl, }) => { + const intl = useIntl(); const { unsavedDuration, onBlur, @@ -88,8 +87,6 @@ DurationWidget.propTypes = { // redux duration: PropTypes.objectOf(PropTypes.number).isRequired, updateField: PropTypes.func.isRequired, - // injected - intl: intlShape.isRequired, }; export const mapStateToProps = (state) => ({ @@ -101,4 +98,4 @@ export const mapDispatchToProps = { }; export const DurationWidgetInternal = DurationWidget; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DurationWidget)); +export default connect(mapStateToProps, mapDispatchToProps)(DurationWidget); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx index 253d3bcbfe..07b13f772d 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/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 { Hyperlink, @@ -20,8 +19,6 @@ import * as hooks from './hooks'; * Collapsible Form widget controlling video thumbnail */ const SocialShareWidget = ({ - // injected - intl, // redux allowVideoSharing, isLibrary, @@ -30,6 +27,7 @@ const SocialShareWidget = ({ videoSharingLearnMoreLink, updateField, }) => { + const intl = useIntl(); const isSetByCourse = allowVideoSharing.level === 'course'; const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse; const learnMoreLink = videoSharingLearnMoreLink || 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/social_sharing.html'; @@ -90,8 +88,6 @@ SocialShareWidget.defaultProps = { }; SocialShareWidget.propTypes = { - // injected - intl: intlShape.isRequired, // redux allowVideoSharing: PropTypes.shape({ level: PropTypes.string.isRequired, @@ -117,4 +113,4 @@ export const mapDispatchToProps = (dispatch) => ({ }); export const SocialShareWidgetInternal = SocialShareWidget; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget)); +export default connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget); diff --git a/src/editors/sharedComponents/CodeEditor/index.jsx b/src/editors/sharedComponents/CodeEditor/index.jsx index 8877fe4ba0..7d86ae0587 100644 --- a/src/editors/sharedComponents/CodeEditor/index.jsx +++ b/src/editors/sharedComponents/CodeEditor/index.jsx @@ -5,7 +5,7 @@ import { Button, } from '@openedx/paragon'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import messages from './messages'; import './index.scss'; @@ -15,9 +15,8 @@ const CodeEditor = ({ innerRef, value, lang, - // injected - intl, }) => { + const intl = useIntl(); const DOMref = useRef(); const btnRef = useRef(); hooks.createCodeMirrorDomNode({ @@ -49,9 +48,8 @@ CodeEditor.propTypes = { PropTypes.shape({ current: PropTypes.any }), ]).isRequired, value: PropTypes.string.isRequired, - intl: intlShape.isRequired, lang: PropTypes.string.isRequired, }; export const CodeEditorInternal = CodeEditor; // For testing only -export default injectIntl(CodeEditor); +export default CodeEditor; diff --git a/src/export-page/export-footer/ExportFooter.jsx b/src/export-page/export-footer/ExportFooter.jsx index 358bf474b0..4edf5b83e2 100644 --- a/src/export-page/export-footer/ExportFooter.jsx +++ b/src/export-page/export-footer/ExportFooter.jsx @@ -1,49 +1,45 @@ import React from 'react'; -import { - injectIntl, - intlShape, -} from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Layout } from '@openedx/paragon'; import messages from './messages'; -const ExportFooter = ({ intl }) => ( - -); - -ExportFooter.propTypes = { - intl: intlShape.isRequired, +const ExportFooter = () => { + const intl = useIntl(); + return ( + + ); }; -export default injectIntl(ExportFooter); +export default ExportFooter; diff --git a/src/files-and-videos/generic/FileMenu.jsx b/src/files-and-videos/generic/FileMenu.jsx index 36ea4da174..e5bff4413e 100644 --- a/src/files-and-videos/generic/FileMenu.jsx +++ b/src/files-and-videos/generic/FileMenu.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 { Dropdown, IconButton, @@ -19,58 +19,59 @@ const FileMenu = ({ portableUrl, id, fileType, - // injected - intl, -}) => ( - - - - {fileType === 'video' ? ( - navigator.clipboard.writeText(id)} - > - {intl.formatMessage(messages.copyVideoIdTitle)} - - ) : ( - <> +}) => { + const intl = useIntl(); + return ( + + + + {fileType === 'video' ? ( navigator.clipboard.writeText(portableUrl)} + onClick={() => navigator.clipboard.writeText(id)} > - {intl.formatMessage(messages.copyStudioUrlTitle)} - - navigator.clipboard.writeText(externalUrl)} - > - {intl.formatMessage(messages.copyWebUrlTitle)} - - - {locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)} + {intl.formatMessage(messages.copyVideoIdTitle)} - - )} - - {intl.formatMessage(messages.downloadTitle)} - - - {intl.formatMessage(messages.infoTitle)} - - - - {intl.formatMessage(messages.deleteTitle)} - - - -); + ) : ( + <> + navigator.clipboard.writeText(portableUrl)} + > + {intl.formatMessage(messages.copyStudioUrlTitle)} + + navigator.clipboard.writeText(externalUrl)} + > + {intl.formatMessage(messages.copyWebUrlTitle)} + + + {locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)} + + + )} + + {intl.formatMessage(messages.downloadTitle)} + + + {intl.formatMessage(messages.infoTitle)} + + + + {intl.formatMessage(messages.deleteTitle)} + + + + ); +}; FileMenu.propTypes = { externalUrl: PropTypes.string, @@ -82,8 +83,6 @@ FileMenu.propTypes = { portableUrl: PropTypes.string, id: PropTypes.string.isRequired, fileType: PropTypes.string.isRequired, - // injected - intl: intlShape.isRequired, }; FileMenu.defaultProps = { @@ -93,4 +92,4 @@ FileMenu.defaultProps = { portableUrl: null, }; -export default injectIntl(FileMenu); +export default FileMenu; diff --git a/src/files-and-videos/generic/UsageMetricsMessage.jsx b/src/files-and-videos/generic/UsageMetricsMessage.jsx index 54ae6cfe82..106bd08a48 100644 --- a/src/files-and-videos/generic/UsageMetricsMessage.jsx +++ b/src/files-and-videos/generic/UsageMetricsMessage.jsx @@ -1,4 +1,4 @@ -import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import PropTypes from 'prop-types'; import { @@ -16,9 +16,8 @@ const UsageMetricsMessage = ({ usagePathStatus, usageLocations, error, - // injected - intl, }) => { + const intl = useIntl(); let usageMessage; if (usagePathStatus === RequestStatus.SUCCESSFUL) { usageMessage = isEmpty(usageLocations) ? ( @@ -65,8 +64,6 @@ UsageMetricsMessage.propTypes = { usagePathStatus: PropTypes.string.isRequired, usageLocations: PropTypes.arrayOf(PropTypes.string).isRequired, error: PropTypes.arrayOf(PropTypes.string).isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(UsageMetricsMessage); +export default UsageMetricsMessage; diff --git a/src/generic/SaveFormConnectionErrorAlert.jsx b/src/generic/SaveFormConnectionErrorAlert.jsx index fe40bcf21f..575cf99cd4 100644 --- a/src/generic/SaveFormConnectionErrorAlert.jsx +++ b/src/generic/SaveFormConnectionErrorAlert.jsx @@ -1,28 +1,27 @@ import React from 'react'; -import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { Alert } from '@openedx/paragon'; import { getConfig } from '@edx/frontend-platform'; import messages from '../messages'; -const SaveFormConnectionErrorAlert = ({ intl }) => ( - - - {intl.formatMessage(messages.supportText)} - - ), - }} - /> - -); - -SaveFormConnectionErrorAlert.propTypes = { - intl: intlShape.isRequired, +const SaveFormConnectionErrorAlert = () => { + const intl = useIntl(); + return ( + + + {intl.formatMessage(messages.supportText)} + + ), + }} + /> + + ); }; -export default injectIntl(SaveFormConnectionErrorAlert); +export default SaveFormConnectionErrorAlert; diff --git a/src/generic/configure-modal/VisibilityTab.jsx b/src/generic/configure-modal/VisibilityTab.jsx index 600f417a61..cd408c3ea9 100644 --- a/src/generic/configure-modal/VisibilityTab.jsx +++ b/src/generic/configure-modal/VisibilityTab.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Alert, Form } from '@openedx/paragon'; -import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import messages from './messages'; import { COURSE_BLOCK_NAMES } from '../../constants'; @@ -146,4 +146,4 @@ VisibilityTab.defaultProps = { isSelfPaced: false, }; -export default injectIntl(VisibilityTab); +export default VisibilityTab; diff --git a/src/pages-and-resources/discussions/app-list/AppCard.jsx b/src/pages-and-resources/discussions/app-list/AppCard.jsx index 3fc9d2394e..b9215a4dc9 100644 --- a/src/pages-and-resources/discussions/app-list/AppCard.jsx +++ b/src/pages-and-resources/discussions/app-list/AppCard.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useSelector } from 'react-redux'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import Responsive from 'react-responsive'; import { Card, CheckboxControl, breakpoints, @@ -12,8 +12,9 @@ import appMessages from '../app-config-form/messages'; import FeaturesList from './FeaturesList'; const AppCard = ({ - app, onClick, intl, selected, features, + app, onClick, selected, features, }) => { + const intl = useIntl(); const { canChangeProviders } = useSelector(state => state.courseDetail); const supportText = app.hasFullSupport ? intl.formatMessage(messages.appFullSupport) @@ -72,8 +73,7 @@ AppCard.propTypes = { }).isRequired, onClick: PropTypes.func.isRequired, selected: PropTypes.bool.isRequired, - intl: intlShape.isRequired, features: PropTypes.arrayOf(PropTypes.shape({})).isRequired, }; -export default injectIntl(AppCard); +export default AppCard; diff --git a/src/schedule-and-details/introducing-section/index.jsx b/src/schedule-and-details/introducing-section/index.jsx index c221e0860c..32e8e21c55 100644 --- a/src/schedule-and-details/introducing-section/index.jsx +++ b/src/schedule-and-details/introducing-section/index.jsx @@ -1,8 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - injectIntl, - intlShape, + useIntl, FormattedMessage, } from '@edx/frontend-platform/i18n'; import { Form, Hyperlink } from '@openedx/paragon'; @@ -15,7 +14,6 @@ import ExtendedCourseDetails from './extended-course-details'; import messages from './messages'; const IntroducingSection = ({ - intl, title, subtitle, duration, @@ -34,6 +32,7 @@ const IntroducingSection = ({ videoThumbnailImageAssetPath, onChange, }) => { + const intl = useIntl(); const overviewHelpText = ( { + const intl = useIntl(); const { studioShortName } = useSelector(getStudioHomeData); return ( @@ -52,10 +53,9 @@ ContactAdministrator.defaultProps = { }; ContactAdministrator.propTypes = { - intl: intlShape.isRequired, hasAbilityToCreateCourse: PropTypes.bool, showNewCourseContainer: PropTypes.bool.isRequired, onClickNewCourse: PropTypes.func.isRequired, }; -export default injectIntl(ContactAdministrator); +export default ContactAdministrator;