refactor: Replace of injectIntl with useIntl() part 6 (#2298)

Author: ahtesham-quraish

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);

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;

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;

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;

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 }) => (
-  <Alert variant="danger" data-testid="connectionErrorAlert">
-    <FormattedMessage
-      {...messages.connectionError}
-      values={{
-        supportLink: (
-          <Alert.Link href={getConfig().SUPPORT_URL}>
-            {intl.formatMessage(messages.supportText)}
-          </Alert.Link>
-        ),
-      }}
-    />
-  </Alert>
-);
-
-ConnectionErrorAlert.propTypes = {
-  intl: intlShape.isRequired,
+const ConnectionErrorAlert = () => {
+  const intl = useIntl();
+  return (
+    <Alert variant="danger" data-testid="connectionErrorAlert">
+      <FormattedMessage
+        {...messages.connectionError}
+        values={{
+          supportLink: (
+            <Alert.Link href={getConfig().SUPPORT_URL}>
+              {intl.formatMessage(messages.supportText)}
+            </Alert.Link>
+          ),
+        }}
+      />
+    </Alert>
+  );
 };
 
-export default injectIntl(ConnectionErrorAlert);
+export default ConnectionErrorAlert;

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;

src/grading-settings/deadline-section/index.jsx

@@ -1,16 +1,17 @@
 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';
 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;

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;

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;

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;