refactor: Replace of injectIntl with useIntl() part 8 #2288

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;

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;

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'),
   };
 

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

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

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;

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 }) => (
-  <footer className="mt-4 small">
-    <Layout
-      lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
-      md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
-      sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
-      xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
-      xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
-    >
-      <Layout.Element>
-        <h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
-        <ul className="export-footer-list">
-          <li>{intl.formatMessage(messages.exportedDataItem1)}</li>
-          <li>{intl.formatMessage(messages.exportedDataItem2)}</li>
-          <li>{intl.formatMessage(messages.exportedDataItem3)}</li>
-          <li>{intl.formatMessage(messages.exportedDataItem4)}</li>
-          <li>{intl.formatMessage(messages.exportedDataItem5)}</li>
-          <li>{intl.formatMessage(messages.exportedDataItem6)}</li>
-          <li>{intl.formatMessage(messages.exportedDataItem7)}</li>
-        </ul>
-      </Layout.Element>
-      <Layout.Element />
-      <Layout.Element>
-        <h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
-        <ul className="export-footer-list">
-          <li>{intl.formatMessage(messages.notExportedDataItem1)}</li>
-          <li>{intl.formatMessage(messages.notExportedDataItem2)}</li>
-          <li>{intl.formatMessage(messages.notExportedDataItem3)}</li>
-          <li>{intl.formatMessage(messages.notExportedDataItem4)}</li>
-        </ul>
-      </Layout.Element>
-    </Layout>
-  </footer>
-);
-
-ExportFooter.propTypes = {
-  intl: intlShape.isRequired,
+const ExportFooter = () => {
+  const intl = useIntl();
+  return (
+    <footer className="mt-4 small">
+      <Layout
+        lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+        md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+        sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+        xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+        xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      >
+        <Layout.Element>
+          <h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
+          <ul className="export-footer-list">
+            <li>{intl.formatMessage(messages.exportedDataItem1)}</li>
+            <li>{intl.formatMessage(messages.exportedDataItem2)}</li>
+            <li>{intl.formatMessage(messages.exportedDataItem3)}</li>
+            <li>{intl.formatMessage(messages.exportedDataItem4)}</li>
+            <li>{intl.formatMessage(messages.exportedDataItem5)}</li>
+            <li>{intl.formatMessage(messages.exportedDataItem6)}</li>
+            <li>{intl.formatMessage(messages.exportedDataItem7)}</li>
+          </ul>
+        </Layout.Element>
+        <Layout.Element />
+        <Layout.Element>
+          <h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
+          <ul className="export-footer-list">
+            <li>{intl.formatMessage(messages.notExportedDataItem1)}</li>
+            <li>{intl.formatMessage(messages.notExportedDataItem2)}</li>
+            <li>{intl.formatMessage(messages.notExportedDataItem3)}</li>
+            <li>{intl.formatMessage(messages.notExportedDataItem4)}</li>
+          </ul>
+        </Layout.Element>
+      </Layout>
+    </footer>
+  );
 };
 
-export default injectIntl(ExportFooter);
+export default ExportFooter;