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;