diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index 87a48777..fb685f2d 100644 --- a/src/DesktopHeader.jsx +++ b/src/DesktopHeader.jsx @@ -1,7 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; - import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import { AvatarButton, Dropdown } from '@openedx/paragon'; @@ -12,8 +10,6 @@ import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot'; import UserMenuItem from './common/UserMenuItem'; import { Menu, MenuTrigger, MenuContent } from './Menu'; import { LinkedLogo, Logo } from './Logo'; -import Notifications from './Notifications'; -import { mapDispatchToProps, mapStateToProps } from './data/selectors'; // i18n import messages from './Header.messages'; @@ -24,20 +20,6 @@ import { CaretIcon } from './Icons'; class DesktopHeader extends React.Component { constructor(props) { // eslint-disable-line no-useless-constructor super(props); - this.state = { - locationHref: window.location.href, - }; - } - - componentDidMount() { - this.props.fetchAppsNotificationCount(); - } - - componentDidUpdate() { - if (window.location.href !== this.state.locationHref) { - this.setState({ locationHref: window.location.href }); - this.props.fetchAppsNotificationCount(); - } } renderMenu(menu) { @@ -170,7 +152,6 @@ class DesktopHeader extends React.Component { logoAltText, logoDestination, loggedIn, - showNotificationsTray, intl, } = this.props; const logoProps = { src: logo, alt: logoAltText, href: logoDestination }; @@ -196,7 +177,6 @@ class DesktopHeader extends React.Component { ? ( <> {this.renderSecondaryMenu()} - {showNotificationsTray && } {this.renderUserMenu()} ) : this.renderLoggedOutItems()} @@ -240,8 +220,7 @@ DesktopHeader.propTypes = { name: PropTypes.string, email: PropTypes.string, loggedIn: PropTypes.bool, - showNotificationsTray: PropTypes.bool, - fetchAppsNotificationCount: PropTypes.func.isRequired, + // i18n intl: intlShape.isRequired, }; @@ -258,7 +237,6 @@ DesktopHeader.defaultProps = { name: '', email: '', loggedIn: false, - showNotificationsTray: false, }; -export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DesktopHeader)); +export default injectIntl(DesktopHeader); diff --git a/src/Header.jsx b/src/Header.jsx index 9b8a8331..ae2f9cf1 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import Responsive from 'react-responsive'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { sendTrackEvent } from '@edx/frontend-platform/analytics'; -import { AppContext, AppProvider } from '@edx/frontend-platform/react'; +import { AppContext } from '@edx/frontend-platform/react'; import { Badge } from '@openedx/paragon'; import { APP_CONFIG_INITIALIZED, @@ -16,7 +16,6 @@ import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils'; import PropTypes from 'prop-types'; import DesktopHeader from './DesktopHeader'; import MobileHeader from './MobileHeader'; -import store from './store'; import messages from './Header.messages'; @@ -27,8 +26,6 @@ ensureConfig([ 'MARKETING_SITE_BASE_URL', 'ORDER_HISTORY_URL', 'LOGO_URL', - 'ACCOUNT_SETTINGS_URL', - 'NOTIFICATION_FEEDBACK_URL', ], 'Header component'); subscribe(APP_CONFIG_INITIALIZED, () => { @@ -36,8 +33,6 @@ subscribe(APP_CONFIG_INITIALIZED, () => { MINIMAL_HEADER: !!process.env.MINIMAL_HEADER, ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME, AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER, - ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL || '', - NOTIFICATION_FEEDBACK_URL: process.env.NOTIFICATION_FEEDBACK_URL || '', }, 'Header additional config'); }); @@ -199,14 +194,14 @@ const Header = ({ } return ( - + <> - + ); }; diff --git a/src/Header.test.jsx b/src/Header.test.jsx index 896a46e7..d932c566 100644 --- a/src/Header.test.jsx +++ b/src/Header.test.jsx @@ -7,9 +7,8 @@ import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils'; import { AppContext } from '@edx/frontend-platform/react'; import { getConfig } from '@edx/frontend-platform'; import { Context as ResponsiveContext } from 'react-responsive'; -import { fireEvent, render, screen } from '@testing-library/react'; -import { initializeMockApp } from './setupTest'; +import { fireEvent, render, screen } from '@testing-library/react'; import Header from './index'; jest.mock('@edx/frontend-platform'); @@ -42,10 +41,6 @@ describe('
', () => { beforeEach(() => { useEnterpriseConfig.mockReturnValue({}); }); - beforeAll(async () => { - // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`. - await initializeMockApp(); - }); const mockUseEnterpriseConfig = () => { useEnterpriseConfig.mockReturnValue({ diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx index 888ce74a..d5f3da45 100644 --- a/src/MobileHeader.jsx +++ b/src/MobileHeader.jsx @@ -1,19 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; - import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; -import { AvatarButton } from '@openedx/paragon'; // Local Components +import { AvatarButton } from '@openedx/paragon'; import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot'; import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot'; import { Menu, MenuTrigger, MenuContent } from './Menu'; import { LinkedLogo, Logo } from './Logo'; import UserMenuItem from './common/UserMenuItem'; -import Notifications from './Notifications'; -import { mapDispatchToProps, mapStateToProps } from './data/selectors'; + // i18n import messages from './Header.messages'; @@ -23,20 +20,6 @@ import { MenuIcon } from './Icons'; class MobileHeader extends React.Component { constructor(props) { // eslint-disable-line no-useless-constructor super(props); - this.state = { - locationHref: window.location.href, - }; - } - - componentDidMount() { - this.props.fetchAppsNotificationCount(); - } - - componentDidUpdate() { - if (window.location.href !== this.state.locationHref) { - this.setState({ locationHref: window.location.href }); - this.props.fetchAppsNotificationCount(); - } } renderMenu(menu) { @@ -152,7 +135,6 @@ class MobileHeader extends React.Component { mainMenu, userMenu, loggedOutItems, - showNotificationsTray, } = this.props; const logoProps = { src: logo, alt: logoAltText, href: logoDestination }; const stickyClassName = stickyOnMobile ? 'sticky-top' : ''; @@ -191,7 +173,6 @@ class MobileHeader extends React.Component { {userMenu.length > 0 || loggedOutItems.length > 0 ? (
- {showNotificationsTray && loggedIn && } { +const Notifications = () => { const intl = useIntl(); const dispatch = useDispatch(); const popoverRef = useRef(null); @@ -145,9 +144,7 @@ const Notifications = ({ showLeftMargin }) => { iconAs={Icon} variant="light" iconClassNames="text-primary-500" - className={classNames('mr-1 notification-button', { - 'ml-4': showLeftMargin, - })} + className="ml-4 mr-1 notification-button" data-testid="notification-bell-icon" /> {notificationCounts?.count > 0 && ( @@ -171,12 +168,4 @@ const Notifications = ({ showLeftMargin }) => { ); }; -Notifications.propTypes = { - showLeftMargin: PropTypes.bool, -}; - -Notifications.defaultProps = { - showLeftMargin: true, -}; - export default Notifications; diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap index 239abb47..dee99e09 100644 --- a/src/__snapshots__/Header.test.jsx.snap +++ b/src/__snapshots__/Header.test.jsx.snap @@ -1,285 +1,328 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`
minimal renders correctly for authenticated users when minimal 1`] = ` -
-
+ Skip to main content + +
- - Skip to main content -
-
+
+ className="pgn__avatar pgn__avatar-sm" + src="icon/mock/path" + /> + +
+
-
-
+
+
`; exports[`
minimal renders correctly for unauthenticated users when minimal 1`] = ` -
-
+ Skip to main content + +
- - Skip to main content -
-
+
+ Login + + + Sign Up + +
-
-
+ +
`; exports[`
renders correctly for authenticated users on desktop 1`] = ` -
-
+ Skip to main content + +
- - Skip to main content -
- + className="pgn__avatar pgn__avatar-sm" + src="icon/mock/path" + /> + +
+
-
-
+ +
`; exports[`
renders correctly for authenticated users on mobile 1`] = ` -
-
+ Skip to main content + +
- - Skip to main content -
-
- -
+ } + version="1.1" + viewBox="0 0 24 24" + width="24px" + > + + + + +
+
+
+ + edX + +
+
+ +
+
+`; + +exports[`
renders correctly for unauthenticated users on desktop 1`] = ` +
+ + Skip to main content + +
-
-`; - -exports[`
renders correctly for unauthenticated users on desktop 1`] = ` -
-
- - Skip to main content - - -
-
+ +
`; exports[`
renders correctly for unauthenticated users on mobile 1`] = ` -
-
+ Skip to main content + +
- - Skip to main content -
-
- -
+ } + version="1.1" + viewBox="0 0 24 24" + width="24px" + > + + + + +
-
+ +
+
-
- -
-
-
+ + + +
`; diff --git a/src/data/selectors.js b/src/data/selectors.js deleted file mode 100644 index 89657f40..00000000 --- a/src/data/selectors.js +++ /dev/null @@ -1,10 +0,0 @@ -import { fetchAppsNotificationCount } from '../Notifications/data/thunks'; -import { selectShowNotificationTray } from '../Notifications/data/selectors'; - -export const mapDispatchToProps = (dispatch) => ({ - fetchAppsNotificationCount: () => dispatch(fetchAppsNotificationCount()), -}); - -export const mapStateToProps = (state) => ({ - showNotificationsTray: selectShowNotificationTray(state), -});