From 23995829f95b2f69d2724b3d8faf181daff5e16d Mon Sep 17 00:00:00 2001 From: Syed Sajjad Hussain Shah Date: Fri, 5 Jul 2024 12:44:01 +0500 Subject: [PATCH] feat: add edx specific user menu --- src/DesktopHeader.jsx | 4 +++ src/MobileHeader.jsx | 13 ++++++- src/common/UserCareerMenuItem.jsx | 43 +++++++++++++++++++++++ src/common/UserDashboardMenuGroup.jsx | 49 +++++++++++++++++++++++++++ src/common/hooks.js | 4 +++ src/common/messages.jsx | 31 +++++++++++++++++ webpack.dev.config.js | 1 + 7 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 src/common/UserCareerMenuItem.jsx create mode 100644 src/common/UserDashboardMenuGroup.jsx create mode 100644 src/common/hooks.js create mode 100644 src/common/messages.jsx diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index df5ac78d..2ef919f2 100644 --- a/src/DesktopHeader.jsx +++ b/src/DesktopHeader.jsx @@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform'; import { AvatarButton, Dropdown } from '@openedx/paragon'; // Local Components +import UserDashboardMenuGroup from './common/UserDashboardMenuGroup'; +import UserCareerMenuItem from './common/UserCareerMenuItem'; import UserMenuItem from './common/UserMenuItem'; import { Menu, MenuTrigger, MenuContent } from './Menu'; import { LinkedLogo, Logo } from './Logo'; @@ -104,10 +106,12 @@ class DesktopHeader extends React.Component { /> )} + {getConfig().ENABLE_EDX_PERSONAL_DASHBOARD && } {userMenu.map((group, index) => ( // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key {group.heading && {group.heading}} + {getConfig().CAREER_LINK_URL && index === 0 && ()} {group.items.map(({ type, content, href, disabled, isActive, onClick, }) => ( diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx index a304dfed..6a18fc71 100644 --- a/src/MobileHeader.jsx +++ b/src/MobileHeader.jsx @@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform'; // Local Components import { AvatarButton } from '@openedx/paragon'; +import UserDashboardMenuGroup from './common/UserDashboardMenuGroup'; +import UserCareerMenuItem from './common/UserCareerMenuItem'; import { Menu, MenuTrigger, MenuContent } from './Menu'; import { LinkedLogo, Logo } from './Logo'; import UserMenuItem from './common/UserMenuItem'; @@ -97,7 +99,16 @@ class MobileHeader extends React.Component { )) )); - return userInfoItem ? [userInfoItem, ...userMenuItems] : userMenuItems; + const userDashboardMenuGroup = ( + getConfig().ENABLE_EDX_PERSONAL_DASHBOARD ? : null + ); + const userCareerMenuItem = ( + getConfig().CAREER_LINK_URL ? : null + ); + + return userInfoItem + ? [userInfoItem, userDashboardMenuGroup, userCareerMenuItem, ...userMenuItems] + : [userDashboardMenuGroup, userCareerMenuItem, ...userMenuItems]; } renderLoggedOutItems() { diff --git a/src/common/UserCareerMenuItem.jsx b/src/common/UserCareerMenuItem.jsx new file mode 100644 index 00000000..1dfe41c6 --- /dev/null +++ b/src/common/UserCareerMenuItem.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { reduxHooks } from 'hooks'; // eslint-disable-line import/no-unresolved +import { + Badge, breakpoints, Dropdown, useWindowSize, +} from '@openedx/paragon'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import _ from 'lodash'; +import { getConfig } from '@edx/frontend-platform'; +import messages from './messages'; + +const UserCareerMenuItem = () => { + const { formatMessage } = useIntl(); + const { width } = useWindowSize(); + const isMobile = width <= breakpoints.small.maxWidth; + + const dashboard = reduxHooks.useEnterpriseDashboardData(); + + if (!_.isEmpty(dashboard)) { + return null; + } + if (isMobile) { + return ( +
  • + + {formatMessage(messages.career)} + + {formatMessage(messages.newAlert)} + + +
    • + ); + } + return ( + + {formatMessage(messages.career)} + + {formatMessage(messages.newAlert)} + + + ); +}; + +export default UserCareerMenuItem; diff --git a/src/common/UserDashboardMenuGroup.jsx b/src/common/UserDashboardMenuGroup.jsx new file mode 100644 index 00000000..7c82b328 --- /dev/null +++ b/src/common/UserDashboardMenuGroup.jsx @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from 'react'; +import { reduxHooks } from 'hooks'; // eslint-disable-line import/no-unresolved +import { breakpoints, Dropdown, useWindowSize } from '@openedx/paragon'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import _ from 'lodash'; +import messages from './messages'; + +const UserDashboardMenuGroup = () => { + const { formatMessage } = useIntl(); + const { width } = useWindowSize(); + const isMobile = width <= breakpoints.small.maxWidth; + + const dashboard = reduxHooks.useEnterpriseDashboardData(); + + if (isMobile) { + return ( + <> +
  • + + {formatMessage(messages.dashboardPersonal)} + +
    • + {!_.isEmpty(dashboard) && ( +
  • + + {dashboard.label} {formatMessage(messages.dashboard)} + +
    • + )} + + ); + } + return ( + <> + {formatMessage(messages.dashboardSwitch)} + + {formatMessage(messages.dashboardPersonal)} + + {!_.isEmpty(dashboard) && ( + + {dashboard.label} {formatMessage(messages.dashboard)} + + )} + + + ); +}; + +export default UserDashboardMenuGroup; diff --git a/src/common/hooks.js b/src/common/hooks.js new file mode 100644 index 00000000..b09c4a9f --- /dev/null +++ b/src/common/hooks.js @@ -0,0 +1,4 @@ +// eslint-disable-next-line import/prefer-default-export +export const reduxHooks = { + useEnterpriseDashboardData: () => {}, +}; diff --git a/src/common/messages.jsx b/src/common/messages.jsx new file mode 100644 index 00000000..f26bd0ec --- /dev/null +++ b/src/common/messages.jsx @@ -0,0 +1,31 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + dashboard: { + id: 'learnerVariantDashboard.menu.dashboard.label', + defaultMessage: 'Dashboard', + description: 'The text for the user menu Dashboard navigation link.', + }, + dashboardPersonal: { + id: 'learnerVariantDashboard.menu.dashboardPersonal.label', + defaultMessage: 'Personal', + description: 'Link to personal dashboard in user menu', + }, + dashboardSwitch: { + id: 'learnerVariantDashboard.menu.dashboardSwitch.label', + defaultMessage: 'SWITCH DASHBOARD', + description: 'Switch Dashboard header in the user menu', + }, + career: { + id: 'leanerDashboard.menu.career.label', + defaultMessage: 'Career', + description: 'The text for the user menu Career navigation link.', + }, + newAlert: { + id: 'header.menu.new.label', + defaultMessage: 'New', + description: 'The text announcing that an item in the user menu is New', + }, +}); + +export default messages; diff --git a/webpack.dev.config.js b/webpack.dev.config.js index ef8e599c..2143b8f4 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -10,6 +10,7 @@ module.exports = createConfig('webpack-dev', { resolve: { alias: { '@edx/frontend-component-header': path.resolve(__dirname, 'src'), + hooks: path.resolve(__dirname, 'src/common/hooks'), // Adjust to the actual hooks path }, }, });