feat: use AvatarButton dropdown and add b2c dashboard navigation (#163)

* feat: use AvatarButton dropdown and add b2c dashboard navigation * fixes * fix: rename variable
openedx · Dec 10, 2020 · fd6ba71 · fd6ba71
1 parent 0e79676
commit fd6ba71
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 169 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "@edx/frontend-component-footer": "10.1.0",
     "@edx/frontend-enterprise": "4.5.1",
     "@edx/frontend-platform": "1.8.0",
-    "@edx/paragon": "12.3.1",
+    "@edx/paragon": "12.4.1",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",

diff --git a/src/components/enterprise-page/EnterprisePage.jsx b/src/components/enterprise-page/EnterprisePage.jsx
@@ -50,6 +50,8 @@ export default function EnterprisePage({ children }) {
   return (
     <AppContext.Provider
       value={{
+        authenticatedUser: getAuthenticatedUser(),
+        config: getConfig(),
         courseCards: {
           'in-progress': {
             settingsMenu: {
@@ -59,7 +61,6 @@ export default function EnterprisePage({ children }) {
         },
         enterpriseConfig,
         subscriptionPlan,
-        config: getConfig(),
       }}
     >
       {children}

diff --git a/src/components/site-header/Avatar.jsx b/src/components/site-header/Avatar.jsx
diff --git a/src/components/site-header/AvatarDropdown.jsx b/src/components/site-header/AvatarDropdown.jsx
@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform/config';
+import { AppContext } from '@edx/frontend-platform/react';
+import { AvatarButton, Dropdown } from '@edx/paragon';
+
+const AvatarDropdown = ({ showLabel }) => {
+  const { BASE_URL, LMS_BASE_URL, LOGOUT_URL } = getConfig();
+  const { enterpriseConfig, authenticatedUser } = useContext(AppContext);
+  const { username, profileImage } = authenticatedUser;
+  const enterpriseDashboardLink = `/${enterpriseConfig.slug}`;
+  return (
+    <Dropdown>
+      <Dropdown.Toggle showLabel={showLabel} as={AvatarButton} src={profileImage.imageUrlMedium}>
+        {username}
+      </Dropdown.Toggle>
+      <Dropdown.Menu alignRight>
+        <Dropdown.Header className="text-uppercase">Switch Dashboard</Dropdown.Header>
+        <Dropdown.Item href={`${LMS_BASE_URL}/dashboard`}>Personal</Dropdown.Item>
+        <Dropdown.Item as={NavLink} to={enterpriseDashboardLink}>Enterprise</Dropdown.Item>
+        <Dropdown.Divider className="border-light" />
+        <Dropdown.Item href={`${LMS_BASE_URL}/u/${authenticatedUser.username}`}>My Profile</Dropdown.Item>
+        <Dropdown.Item href={`${LMS_BASE_URL}/account/settings`}>Account Settings</Dropdown.Item>
+        <Dropdown.Item href="https://support.edx.org/hc/en-us">Help</Dropdown.Item>
+        <Dropdown.Divider className="border-light" />
+        <Dropdown.Item href={`${LOGOUT_URL}?next=${BASE_URL}${enterpriseDashboardLink}`}>Sign out</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+AvatarDropdown.propTypes = {
+  showLabel: PropTypes.bool,
+};
+
+AvatarDropdown.defaultProps = {
+  showLabel: true,
+};
+
+export default AvatarDropdown;
diff --git a/src/components/site-header/SiteHeader.jsx b/src/components/site-header/SiteHeader.jsx
@@ -3,50 +3,19 @@ import Responsive from 'react-responsive';
 import { Link, NavLink } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import { AppContext } from '@edx/frontend-platform/react';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import edXLogo from '@edx/brand/logo.svg';
 
-import Avatar from './Avatar';
 import { Menu, MenuTrigger, MenuContent } from './menu';
+import AvatarDropdown from './AvatarDropdown';
 
 import { ReactComponent as MenuIcon } from '../../assets/icons/menu.svg';
-import { ReactComponent as CaretIcon } from '../../assets/icons/caret.svg';
-
-const INTERNAL_LINK_TYPE = 'internal';
 
 export default function SiteHeader() {
-  const authenticatedUser = getAuthenticatedUser();
-  const { username, profileImage } = authenticatedUser;
-  const { enterpriseConfig, config } = useContext(AppContext);
-
-  const dashboardLink = `/${enterpriseConfig.slug}`;
-  const userMenuItems = [
-    {
-      type: INTERNAL_LINK_TYPE,
-      href: dashboardLink,
-      content: 'Dashboard',
-    },
-    {
-      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
-      content: 'My Profile',
-    },
-    {
-      href: `${config.LMS_BASE_URL}/account/settings`,
-      content: 'Account Settings',
-    },
-    {
-      href: 'https://support.edx.org/hc/en-us',
-      content: 'Help',
-    },
-    {
-      href: `${config.LOGOUT_URL}?next=${config.BASE_URL}${dashboardLink}`,
-      content: 'Sign Out',
-    },
-  ];
+  const { enterpriseConfig } = useContext(AppContext);
 
   const renderLogo = () => (
     <Link
-      to={dashboardLink}
+      to={`/${enterpriseConfig.slug}`}
       className="logo"
     >
       <img
@@ -74,45 +43,6 @@ export default function SiteHeader() {
     );
   };
 
-  const renderDesktopUserMenu = () => {
-    const desktopMenuLinkClassName = 'dropdown-item';
-
-    return (
-      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger
-          tag="button"
-          aria-label={`Account menu for ${username}`}
-          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-        >
-          <Avatar size="1.5rem" src={profileImage.imageUrlMedium} alt={username} className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
-        </MenuTrigger>
-        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {userMenuItems.map((menuItem) => {
-            const {
-              type,
-              href,
-              content,
-            } = menuItem;
-
-            if (type === INTERNAL_LINK_TYPE) {
-              return (
-                <NavLink key={content} className={desktopMenuLinkClassName} to={href} exact>
-                  {content}
-                </NavLink>
-              );
-            }
-            return (
-              <a key={content} className={desktopMenuLinkClassName} href={href}>
-                {content}
-              </a>
-            );
-          })}
-        </MenuContent>
-      </Menu>
-    );
-  };
-
   const renderDesktopHeader = () => (
     <header className="site-header-desktop">
       <div className="container-fluid">
@@ -125,42 +55,15 @@ export default function SiteHeader() {
             <a href="https://support.edx.org/hc/en-us" className="text-gray-700 mr-3">
               Help
             </a>
-            {renderDesktopUserMenu()}
+            <AvatarDropdown />
           </nav>
         </div>
       </div>
     </header>
   );
 
-  const renderMobileUserMenu = () => {
-    const mobileMenuLinkClassName = 'nav-link';
-    return userMenuItems.map((menuItem) => {
-      const {
-        type,
-        href,
-        content,
-      } = menuItem;
-
-      return (
-        <li className="nav-item" key={content}>
-          {type === INTERNAL_LINK_TYPE ? (
-            <NavLink className={mobileMenuLinkClassName} to={href} exact>
-              {content}
-            </NavLink>
-          ) : (
-            <a className={mobileMenuLinkClassName} href={href}>
-              {content}
-            </a>
-          )}
-        </li>
-      );
-    });
-  };
-
   const renderMobileHeader = () => {
     const mainMenuTitle = 'Main Menu';
-    const accountMenuTitle = 'Account Menu';
-
     return (
       <header
         aria-label="Main"
@@ -188,20 +91,8 @@ export default function SiteHeader() {
         <div className="w-100 d-flex justify-content-center">
           {renderLogo()}
         </div>
-        <div className="w-100 d-flex justify-content-end align-items-center">
-          <Menu tag="nav" aria-label="secondary" className="position-static">
-            <MenuTrigger
-              tag="button"
-              className="icon-button"
-              aria-label={accountMenuTitle}
-              title={accountMenuTitle}
-            >
-              <Avatar size="1.5rem" src={profileImage.imageUrlMedium} alt={username} />
-            </MenuTrigger>
-            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-              {renderMobileUserMenu()}
-            </MenuContent>
-          </Menu>
+        <div className="w-100 d-flex justify-content-end">
+          <AvatarDropdown showLabel={false} />
         </div>
       </header>
     );