refactor: replacement of injectIntl (#625)

src/studio-header/CourseLockUp.tsx

@@ -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 {
   OverlayTrigger,
   Tooltip,
@@ -9,41 +9,43 @@ import { Link } from 'react-router-dom';
 
 import messages from './messages';
 
-const CourseLockUp = ({
-  outlineLink,
-  org,
-  number,
-  title,
-  // injected
-  intl,
-}) => (
-  <OverlayTrigger
-    placement="bottom"
-    overlay={(
-      <Tooltip id="course-lock-up">
-        {title}
-      </Tooltip>
-    )}
-  >
-    <Link
-      className="course-title-lockup mr-2"
-      to={outlineLink}
-      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
-      data-testid="course-lock-up-block"
+const CourseLockUp = (
+  {
+    outlineLink,
+    org,
+    number,
+    title,
+  },
+) => {
+  const intl = useIntl();
+
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={(
+        <Tooltip id="course-lock-up">
+          {title}
+        </Tooltip>
+      )}
     >
-      <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
-      <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
-    </Link>
-  </OverlayTrigger>
-);
+      <Link
+        className="course-title-lockup mr-2"
+        to={outlineLink}
+        aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
+        data-testid="course-lock-up-block"
+      >
+        <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
+        <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
+      </Link>
+    </OverlayTrigger>
+  );
+};
 
 CourseLockUp.propTypes = {
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string,
   outlineLink: PropTypes.string,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 CourseLockUp.defaultProps = {
@@ -53,4 +55,4 @@ CourseLockUp.defaultProps = {
   outlineLink: null,
 };
 
-export default injectIntl(CourseLockUp);
+export default CourseLockUp;

src/studio-header/UserMenu.tsx

@@ -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 {
   Avatar,
 } from '@openedx/paragon';
@@ -14,9 +14,8 @@ const UserMenu = ({
   authenticatedUserAvatar,
   isMobile,
   isAdmin,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const avatar = authenticatedUserAvatar ? (
     <img
       className="d-block w-100 h-100"
@@ -55,8 +54,6 @@ UserMenu.propTypes = {
   authenticatedUserAvatar: PropTypes.string,
   isMobile: PropTypes.bool,
   isAdmin: PropTypes.bool,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 UserMenu.defaultProps = {
@@ -66,4 +63,4 @@ UserMenu.defaultProps = {
   username: null,
 };
 
-export default injectIntl(UserMenu);
+export default UserMenu;