Skip to content

Commit 8f67fdb

Browse files
jacobo-dominguez-wgujacobo-dominguez-wgu
authored
refactor: replacement of injectIntl (#625)
1 parent 43684dc commit 8f67fdb

File tree

8 files changed

+201
-241
lines changed

8 files changed

+201
-241
lines changed

‎src/Header.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useContext } from 'react';
22
import Responsive from 'react-responsive';
3-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
3+
import { useIntl } from '@edx/frontend-platform/i18n';
44
import { AppContext } from '@edx/frontend-platform/react';
55
import {
66
APP_CONFIG_INITIALIZED,
@@ -47,9 +47,10 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
4747
* See the documentation for the structure of user menu item.
4848
*/
4949
const Header = ({
50-
intl, mainMenuItems, secondaryMenuItems, userMenuItems,
50+
mainMenuItems, secondaryMenuItems, userMenuItems,
5151
}) => {
5252
const { authenticatedUser, config } = useContext(AppContext);
53+
const intl = useIntl();
5354

5455
const defaultMainMenu = [
5556
{
@@ -139,7 +140,6 @@ Header.defaultProps = {
139140
};
140141

141142
Header.propTypes = {
142-
intl: intlShape.isRequired,
143143
mainMenuItems: PropTypes.oneOfType([
144144
PropTypes.node,
145145
PropTypes.array,
@@ -159,4 +159,4 @@ Header.propTypes = {
159159
})),
160160
};
161161

162-
export default injectIntl(Header);
162+
export default Header;

‎src/desktop-header/DesktopHeader.jsx‎

Lines changed: 68 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
3+
import { useIntl } from '@edx/frontend-platform/i18n';
44
import { getConfig } from '@edx/frontend-platform';
55

66
// Local Components
@@ -21,91 +21,73 @@ import messages from '../Header.messages';
2121

2222
// Assets
2323

24-
class DesktopHeader extends React.Component {
25-
constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
26-
super(props);
27-
}
28-
29-
renderMainMenu() {
30-
const { mainMenu } = this.props;
31-
return <DesktopMainMenuSlot menu={mainMenu} />;
32-
}
33-
34-
renderSecondaryMenu() {
35-
const { secondaryMenu } = this.props;
36-
return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
37-
}
38-
39-
renderUserMenu() {
40-
const {
41-
userMenu,
42-
avatar,
43-
username,
44-
intl,
45-
} = this.props;
46-
47-
return (
48-
<Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
49-
<MenuTrigger
50-
tag="button"
51-
aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
52-
className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
53-
>
54-
<DesktopUserMenuToggleSlot avatar={avatar} label={username} />
55-
</MenuTrigger>
56-
<MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
57-
<DesktopUserMenuSlot menu={userMenu} />
58-
</MenuContent>
59-
</Menu>
60-
);
61-
}
62-
63-
renderLoggedOutItems() {
64-
const { loggedOutItems } = this.props;
65-
return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
66-
}
67-
68-
render() {
69-
const {
70-
logo,
71-
logoAltText,
72-
logoDestination,
73-
loggedIn,
74-
intl,
75-
} = this.props;
76-
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
77-
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
78-
79-
return (
80-
<header className="site-header-desktop">
81-
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
82-
<div className={`container-fluid ${logoClasses}`}>
83-
<div className="nav-container position-relative d-flex align-items-center">
84-
<LogoSlot {...logoProps} />
85-
<nav
86-
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
87-
className="nav main-nav"
88-
>
89-
{this.renderMainMenu()}
90-
</nav>
91-
<nav
92-
aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
93-
className="nav secondary-menu-container align-items-center ml-auto"
94-
>
95-
{loggedIn
96-
? (
97-
<>
98-
{this.renderSecondaryMenu()}
99-
{this.renderUserMenu()}
100-
</>
101-
) : this.renderLoggedOutItems()}
102-
</nav>
103-
</div>
24+
const DesktopHeader = ({
25+
mainMenu,
26+
secondaryMenu,
27+
userMenu,
28+
loggedOutItems,
29+
logo,
30+
logoAltText,
31+
logoDestination,
32+
avatar,
33+
username,
34+
loggedIn,
35+
}) => {
36+
const intl = useIntl();
37+
38+
const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;
39+
40+
const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
41+
42+
const renderUserMenu = () => (
43+
<Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
44+
<MenuTrigger
45+
tag="button"
46+
aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
47+
className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
48+
>
49+
<DesktopUserMenuToggleSlot avatar={avatar} label={username} />
50+
</MenuTrigger>
51+
<MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
52+
<DesktopUserMenuSlot menu={userMenu} />
53+
</MenuContent>
54+
</Menu>
55+
);
56+
57+
const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
58+
59+
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
60+
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
61+
62+
return (
63+
<header className="site-header-desktop">
64+
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
65+
<div className={`container-fluid ${logoClasses}`}>
66+
<div className="nav-container position-relative d-flex align-items-center">
67+
<LogoSlot {...logoProps} />
68+
<nav
69+
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
70+
className="nav main-nav"
71+
>
72+
{renderMainMenu()}
73+
</nav>
74+
<nav
75+
aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
76+
className="nav secondary-menu-container align-items-center ml-auto"
77+
>
78+
{loggedIn
79+
? (
80+
<>
81+
{renderSecondaryMenu()}
82+
{renderUserMenu()}
83+
</>
84+
) : renderLoggedOutItems()}
85+
</nav>
10486
</div>
105-
</header>
106-
);
107-
}
108-
}
87+
</div>
88+
</header>
89+
);
90+
};
10991

11092
export const desktopHeaderDataShape = {
11193
mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
@@ -131,9 +113,6 @@ DesktopHeader.propTypes = {
131113
avatar: desktopHeaderDataShape.avatar,
132114
username: desktopHeaderDataShape.username,
133115
loggedIn: desktopHeaderDataShape.loggedIn,
134-
135-
// i18n
136-
intl: intlShape.isRequired,
137116
};
138117

139118
DesktopHeader.defaultProps = {
@@ -149,4 +128,4 @@ DesktopHeader.defaultProps = {
149128
loggedIn: false,
150129
};
151130

152-
export default injectIntl(DesktopHeader);
131+
export default DesktopHeader;

‎src/learning-header/AnonymousUserMenu.jsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import React from 'react';
22

33
import { getConfig } from '@edx/frontend-platform';
44
import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
5-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
5+
import { useIntl } from '@edx/frontend-platform/i18n';
66
import LearningLoggedOutItemsSlot from '../plugin-slots/LearningLoggedOutItemsSlot';
77

88
import genericMessages from '../generic/messages';
99

10-
const AnonymousUserMenu = ({ intl }) => {
10+
const AnonymousUserMenu = () => {
11+
const intl = useIntl();
1112
const buttonsInfo = [
1213
{
1314
message: intl.formatMessage(genericMessages.registerSentenceCase),
@@ -23,8 +24,4 @@ const AnonymousUserMenu = ({ intl }) => {
2324
return <LearningLoggedOutItemsSlot buttonsInfo={buttonsInfo} />;
2425
};
2526

26-
AnonymousUserMenu.propTypes = {
27-
intl: intlShape.isRequired,
28-
};
29-
30-
export default injectIntl(AnonymousUserMenu);
27+
export default AnonymousUserMenu;

‎src/learning-header/AuthenticatedUserDropdown.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
33

44
import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
55
import { getConfig } from '@edx/frontend-platform';
6-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
6+
import { useIntl } from '@edx/frontend-platform/i18n';
77
import { Dropdown } from '@openedx/paragon';
88

99
import LearningUserMenuToggleSlot from '../plugin-slots/LearningUserMenuToggleSlot';
1010
import LearningUserMenuSlot from '../plugin-slots/LearningUserMenuSlot';
1111

1212
import messages from './messages';
1313

14-
const AuthenticatedUserDropdown = ({ intl, username }) => {
14+
const AuthenticatedUserDropdown = ({ username }) => {
15+
const intl = useIntl();
1516
const dropdownItems = [
1617
{
1718
message: intl.formatMessage(messages.dashboard),
@@ -48,8 +49,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
4849
};
4950

5051
AuthenticatedUserDropdown.propTypes = {
51-
intl: intlShape.isRequired,
5252
username: PropTypes.string.isRequired,
5353
};
5454

55-
export default injectIntl(AuthenticatedUserDropdown);
55+
export default AuthenticatedUserDropdown;

‎src/learning-header/LearningHeader.jsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext } from 'react';
22
import PropTypes from 'prop-types';
33
import { getConfig } from '@edx/frontend-platform';
4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
4+
import { useIntl } from '@edx/frontend-platform/i18n';
55
import { AppContext } from '@edx/frontend-platform/react';
66

77
import AnonymousUserMenu from './AnonymousUserMenu';
@@ -13,8 +13,12 @@ import messages from './messages';
1313
import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
1414

1515
const LearningHeader = ({
16-
courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
16+
courseOrg,
17+
courseNumber,
18+
courseTitle,
19+
showUserDropdown,
1720
}) => {
21+
const intl = useIntl();
1822
const { authenticatedUser } = useContext(AppContext);
1923

2024
const headerLogo = (
@@ -53,7 +57,6 @@ LearningHeader.propTypes = {
5357
courseOrg: courseInfoDataShape.courseOrg,
5458
courseNumber: courseInfoDataShape.courseNumber,
5559
courseTitle: courseInfoDataShape.courseTitle,
56-
intl: intlShape.isRequired,
5760
showUserDropdown: PropTypes.bool,
5861
};
5962

@@ -64,4 +67,4 @@ LearningHeader.defaultProps = {
6467
showUserDropdown: true,
6568
};
6669

67-
export default injectIntl(LearningHeader);
70+
export default LearningHeader;

0 commit comments

Comments
 (0)