refactor: replacement of injectIntl

src/Header.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
   APP_CONFIG_INITIALIZED,
@@ -47,9 +47,10 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  * See the documentation for the structure of user menu item.
  */
 const Header = ({
-  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
+  mainMenuItems, secondaryMenuItems, userMenuItems,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
+  const intl = useIntl();
 
   const defaultMainMenu = [
     {
@@ -139,7 +140,6 @@ Header.defaultProps = {
 };
 
 Header.propTypes = {
-  intl: intlShape.isRequired,
   mainMenuItems: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.array,
@@ -159,4 +159,4 @@ Header.propTypes = {
   })),
 };
 
-export default injectIntl(Header);
+export default Header;

src/desktop-header/DesktopHeader.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 { getConfig } from '@edx/frontend-platform';
 
 // Local Components
@@ -21,91 +21,73 @@ import messages from '../Header.messages';
 
 // Assets
 
-class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
-    super(props);
-  }
-
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return <DesktopMainMenuSlot menu={mainMenu} />;
-  }
-
-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
-  }
-
-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
-
-    return (
-      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger
-          tag="button"
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-        >
-          <DesktopUserMenuToggleSlot avatar={avatar} label={username} />
-        </MenuTrigger>
-        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          <DesktopUserMenuSlot menu={userMenu} />
-        </MenuContent>
-      </Menu>
-    );
-  }
-
-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
-  }
-
-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      loggedIn,
-      intl,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
-
-    return (
-      <header className="site-header-desktop">
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-        <div className={`container-fluid ${logoClasses}`}>
-          <div className="nav-container position-relative d-flex align-items-center">
-            <LogoSlot {...logoProps} />
-            <nav
-              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-              className="nav main-nav"
-            >
-              {this.renderMainMenu()}
-            </nav>
-            <nav
-              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-              className="nav secondary-menu-container align-items-center ml-auto"
-            >
-              {loggedIn
-                ? (
-                  <>
-                    {this.renderSecondaryMenu()}
-                    {this.renderUserMenu()}
-                  </>
-                ) : this.renderLoggedOutItems()}
-            </nav>
-          </div>
+const DesktopHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+}) => {
+  const intl = useIntl();
+
+  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;
+
+  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
+
+  const renderUserMenu = () => (
+    <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+      <MenuTrigger
+        tag="button"
+        aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+        className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+      >
+        <DesktopUserMenuToggleSlot avatar={avatar} label={username} />
+      </MenuTrigger>
+      <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+        <DesktopUserMenuSlot menu={userMenu} />
+      </MenuContent>
+    </Menu>
+  );
+
+  const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
+
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+
+  return (
+    <header className="site-header-desktop">
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+      <div className={`container-fluid ${logoClasses}`}>
+        <div className="nav-container position-relative d-flex align-items-center">
+          <LogoSlot {...logoProps} />
+          <nav
+            aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+            className="nav main-nav"
+          >
+            {renderMainMenu()}
+          </nav>
+          <nav
+            aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
+            className="nav secondary-menu-container align-items-center ml-auto"
+          >
+            {loggedIn
+              ? (
+                <>
+                  {renderSecondaryMenu()}
+                  {renderUserMenu()}
+                </>
+              ) : renderLoggedOutItems()}
+          </nav>
         </div>
-      </header>
-    );
-  }
-}
+      </div>
+    </header>
+  );
+};
 
 export const desktopHeaderDataShape = {
   mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
@@ -131,9 +113,6 @@ DesktopHeader.propTypes = {
   avatar: desktopHeaderDataShape.avatar,
   username: desktopHeaderDataShape.username,
   loggedIn: desktopHeaderDataShape.loggedIn,
-
-  // i18n
-  intl: intlShape.isRequired,
 };
 
 DesktopHeader.defaultProps = {
@@ -149,4 +128,4 @@ DesktopHeader.defaultProps = {
   loggedIn: false,
 };
 
-export default injectIntl(DesktopHeader);
+export default DesktopHeader;

src/learning-header/AnonymousUserMenu.jsx

@@ -2,12 +2,13 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import LearningLoggedOutItemsSlot from '../plugin-slots/LearningLoggedOutItemsSlot';
 
 import genericMessages from '../generic/messages';
 
-const AnonymousUserMenu = ({ intl }) => {
+const AnonymousUserMenu = () => {
+  const intl = useIntl();
   const buttonsInfo = [
     {
       message: intl.formatMessage(genericMessages.registerSentenceCase),
@@ -23,8 +24,4 @@ const AnonymousUserMenu = ({ intl }) => {
   return <LearningLoggedOutItemsSlot buttonsInfo={buttonsInfo} />;
 };
 
-AnonymousUserMenu.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AnonymousUserMenu);
+export default AnonymousUserMenu;

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
 import LearningUserMenuToggleSlot from '../plugin-slots/LearningUserMenuToggleSlot';
 import LearningUserMenuSlot from '../plugin-slots/LearningUserMenuSlot';
 
 import messages from './messages';
 
-const AuthenticatedUserDropdown = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ username }) => {
+  const intl = useIntl();
   const dropdownItems = [
     {
       message: intl.formatMessage(messages.dashboard),
@@ -48,8 +49,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 };
 
 AuthenticatedUserDropdown.propTypes = {
-  intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
 };
 
-export default injectIntl(AuthenticatedUserDropdown);
+export default AuthenticatedUserDropdown;

src/learning-header/LearningHeader.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } 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 { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
@@ -13,8 +13,12 @@ import messages from './messages';
 import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
 
 const LearningHeader = ({
-  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+  courseOrg,
+  courseNumber,
+  courseTitle,
+  showUserDropdown,
 }) => {
+  const intl = useIntl();
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
@@ -53,7 +57,6 @@ LearningHeader.propTypes = {
   courseOrg: courseInfoDataShape.courseOrg,
   courseNumber: courseInfoDataShape.courseNumber,
   courseTitle: courseInfoDataShape.courseTitle,
-  intl: intlShape.isRequired,
   showUserDropdown: PropTypes.bool,
 };
 
@@ -64,4 +67,4 @@ LearningHeader.defaultProps = {
   showUserDropdown: true,
 };
 
-export default injectIntl(LearningHeader);
+export default LearningHeader;