refactor: replacement of injectIntl (#625)

2025-08-29 11:05:16 -06:00
parent 43684dce91
commit 8f67fdba68
8 changed files with 188 additions and 228 deletions
--- a/src/Header.jsx
+++ b/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;
--- a/src/desktop-header/DesktopHeader.jsx
+++ b/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);
-  }
+const DesktopHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+}) => {
+  const intl = useIntl();

-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return <DesktopMainMenuSlot menu={mainMenu} />;
-  }
+  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;

-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
-  }
+  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;

-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
+  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>
+  );

-    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>
-    );
-  }
+  const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;

-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
-  }
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;

-  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>
+  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;
--- a/src/learning-header/AnonymousUserMenu.jsx
+++ b/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;
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -3,7 +3,7 @@ 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';
@@ -11,7 +11,8 @@ 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;
--- a/src/learning-header/LearningHeader.jsx
+++ b/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;
--- a/src/mobile-header/MobileHeader.jsx
+++ b/src/mobile-header/MobileHeader.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
@@ -20,99 +20,84 @@ import messages from '../Header.messages';
 // Assets
 import { MenuIcon } from '../Icons';

-class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
-    super(props);
-  }
+const MobileHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+  stickyOnMobile,
+}) => {
+  const intl = useIntl();

-  renderMainMenu() {
-    const { mainMenu, secondaryMenu } = this.props;
-    return <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
-  }
+  const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;

-  renderUserMenuItems() {
-    const { userMenu } = this.props;
-    return <MobileUserMenuSlot menu={userMenu} />;
-  }
+  const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;

-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
-  }
+  const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;

-  renderUserMenuToggle() {
-    const { avatar, username } = this.props;
-    return <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
-  }
+  const renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;

-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      loggedIn,
-      stickyOnMobile,
-      intl,
-      mainMenu,
-      userMenu,
-      loggedOutItems,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+  const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';

-    return (
-      <header
-        aria-label={intl.formatMessage(messages['header.label.main.header'])}
-        className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
-      >
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-        {mainMenu.length > 0 ? (
-          <div className="w-100 d-flex justify-content-start">
+  return (
+    <header
+      aria-label={intl.formatMessage(messages['header.label.main.header'])}
+      className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
+    >
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+      {mainMenu.length > 0 ? (
+        <div className="w-100 d-flex justify-content-start">

-            <Menu className="position-static">
-              <MenuTrigger
-                tag="button"
-                className="icon-button"
-                aria-label={intl.formatMessage(messages['header.label.main.menu'])}
-                title={intl.formatMessage(messages['header.label.main.menu'])}
-              >
-                <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
-              </MenuTrigger>
-              <MenuContent
-                tag="nav"
-                aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-                className="nav flex-column pin-left pin-right border-top shadow py-2"
-              >
-                {this.renderMainMenu()}
-              </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
-        <div className={`w-100 d-flex ${logoClasses}`}>
-          <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
+          <Menu className="position-static">
+            <MenuTrigger
+              tag="button"
+              className="icon-button"
+              aria-label={intl.formatMessage(messages['header.label.main.menu'])}
+              title={intl.formatMessage(messages['header.label.main.menu'])}
+            >
+              <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
+            </MenuTrigger>
+            <MenuContent
+              tag="nav"
+              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+              className="nav flex-column pin-left pin-right border-top shadow py-2"
+            >
+              {renderMainMenu()}
+            </MenuContent>
+          </Menu>
        </div>
-        {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-          <div className="w-100 d-flex justify-content-end align-items-center">
-            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-              <MenuTrigger
-                tag="button"
-                className="icon-button"
-                aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-                title={intl.formatMessage(messages['header.label.account.menu'])}
-              >
-                {this.renderUserMenuToggle()}
-              </MenuTrigger>
-              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
-              </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
-      </header>
-    );
-  }
-}
+      ) : null}
+      <div className={`w-100 d-flex ${logoClasses}`}>
+        <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
+      </div>
+      {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+        <div className="w-100 d-flex justify-content-end align-items-center">
+          <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
+            <MenuTrigger
+              tag="button"
+              className="icon-button"
+              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+              title={intl.formatMessage(messages['header.label.account.menu'])}
+            >
+              {renderUserMenuToggle()}
+            </MenuTrigger>
+            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+              {loggedIn ? renderUserMenuItems() : renderLoggedOutItems()}
+            </MenuContent>
+          </Menu>
+        </div>
+      ) : null}
+    </header>
+  );
+};

 export const mobileHeaderDataShape = {
  mainMenu: mobileHeaderMainMenuDataShape,
@@ -140,9 +125,6 @@ MobileHeader.propTypes = {
  username: mobileHeaderDataShape.username,
  loggedIn: mobileHeaderDataShape.loggedIn,
  stickyOnMobile: mobileHeaderDataShape.stickyOnMobile,
-
-  // i18n
-  intl: intlShape.isRequired,
 };

 MobileHeader.defaultProps = {
@@ -160,4 +142,4 @@ MobileHeader.defaultProps = {

 };

-export default injectIntl(MobileHeader);
+export default MobileHeader;
--- a/src/studio-header/CourseLockUp.tsx
+++ b/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;
--- a/src/studio-header/UserMenu.tsx
+++ b/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;