From fd5092a9bbd65ac8b9d809cb52d3bfc877b2de2a Mon Sep 17 00:00:00 2001 From: Oneil Date: Wed, 11 Jan 2023 11:30:39 -0600 Subject: [PATCH 1/6] add FF check to conditionally render --- src/navigation/Nav.jsx | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx index 449f70f4..8376e183 100644 --- a/src/navigation/Nav.jsx +++ b/src/navigation/Nav.jsx @@ -158,6 +158,7 @@ export class Nav extends React.Component { onSearchCallback, isNewNavActive, isNewNavsOrder, + isProInNavFFEnabled, ...other } = this.props; @@ -300,6 +301,26 @@ export class Nav extends React.Component { ); }; + const getMessagesLabel = () => { + if (isProInNavFFEnabled) { + return messages.label; + } + + return isNewNavActiveDesktop && !isProAdminEasyCreateGroup + ? '' + : messages.label; + }; + + const getNotificataionsLabel = () => { + if (isProInNavFFEnabled) { + return notifications.label; + } + + return isNewNavActiveDesktop && !isProAdminEasyCreateGroup + ? '' + : notifications.label; + }; + const proDashboardIcon = isProAdminEasyCreateGroup ? ( ) : ( @@ -390,10 +411,7 @@ export class Nav extends React.Component { { shrink: true, linkTo: messages.link, - label: - isNewNavActiveDesktop && !isProAdminEasyCreateGroup - ? '' - : messages.label, + label: getMessagesLabel(), labelClassName: cx(isProAdminEasyCreateGroup && 'navItem-label-pro'), className: `navItem--messages ${CLASS_AUTH_ITEM}`, linkClassName: cx(isProAdminEasyCreateGroup && 'navItemLink-pro'), @@ -414,10 +432,7 @@ export class Nav extends React.Component { media.isAtMediumUp && !isNewNavActive && !isProAdminEasyCreateGroup ? '' : notifications.link, - label: - isNewNavActiveDesktop && !isProAdminEasyCreateGroup - ? '' - : notifications.label, + label: getNotificataionsLabel(), labelClassName: cx(isProAdminEasyCreateGroup && 'navItem-label-pro'), className: cx('navItem--notifications', CLASS_AUTH_ITEM), linkClassName: cx(isProAdminEasyCreateGroup && 'navItemLink-pro'), @@ -681,6 +696,9 @@ Nav.propTypes = { /** Flag to indicate that new Nav should be shown (same as in build-meetup/homepage) */ isNewNavActive: PropTypes.bool, + + // Flag to indicate if updated Core nav is shown and for adding Pro to the Core Nav + isProInNavFFEnabled: PropTypes.bool, }; export default Nav; From 78de2e905a3806e78267fd906b9c64e7f477266b Mon Sep 17 00:00:00 2001 From: Oneil Date: Wed, 11 Jan 2023 11:38:14 -0600 Subject: [PATCH 2/6] footer snap --- src/__snapshots__/footer.test.jsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__snapshots__/footer.test.jsx.snap b/src/__snapshots__/footer.test.jsx.snap index 7712583a..218ebd1c 100644 --- a/src/__snapshots__/footer.test.jsx.snap +++ b/src/__snapshots__/footer.test.jsx.snap @@ -207,7 +207,7 @@ exports[`Footer exists 1`] = ` items={ Array [ - © 2022 Meetup LLC + © 2023 Meetup LLC , ] } From 03369ca094b86cf5dc1e9accd246ea4a5d7e3caa Mon Sep 17 00:00:00 2001 From: Oneil Date: Wed, 11 Jan 2023 14:44:20 -0600 Subject: [PATCH 3/6] snap --- src/__snapshots__/footer.test.jsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__snapshots__/footer.test.jsx.snap b/src/__snapshots__/footer.test.jsx.snap index 218ebd1c..7712583a 100644 --- a/src/__snapshots__/footer.test.jsx.snap +++ b/src/__snapshots__/footer.test.jsx.snap @@ -207,7 +207,7 @@ exports[`Footer exists 1`] = ` items={ Array [ - © 2023 Meetup LLC + © 2022 Meetup LLC , ] } From 42d9747497b1d4aef1a84744be008bd9951a3f5a Mon Sep 17 00:00:00 2001 From: Oneil Date: Thu, 12 Jan 2023 21:57:19 -0600 Subject: [PATCH 4/6] update conditions --- src/navigation/Nav.jsx | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx index 8376e183..201f02ea 100644 --- a/src/navigation/Nav.jsx +++ b/src/navigation/Nav.jsx @@ -158,7 +158,7 @@ export class Nav extends React.Component { onSearchCallback, isNewNavActive, isNewNavsOrder, - isProInNavFFEnabled, + isProInNavFFEnabled = false, ...other } = this.props; @@ -197,6 +197,7 @@ export class Nav extends React.Component { const isNewNavActiveDesktop = isNewNavActive && media.isAtMediumUp; const isProAdminEasyCreateGroup = Boolean(self.is_pro_admin) && media.isAtMediumUp; + const isProInNavDesktop = isProInNavFFEnabled && media.isAtMediumUp; const profileAvatarSize = isNewNavActiveDesktop || isProAdminEasyCreateGroup @@ -302,7 +303,7 @@ export class Nav extends React.Component { }; const getMessagesLabel = () => { - if (isProInNavFFEnabled) { + if (isProInNavDesktop) { return messages.label; } @@ -312,7 +313,7 @@ export class Nav extends React.Component { }; const getNotificataionsLabel = () => { - if (isProInNavFFEnabled) { + if (isProInNavDesktop) { return notifications.label; } @@ -412,14 +413,20 @@ export class Nav extends React.Component { shrink: true, linkTo: messages.link, label: getMessagesLabel(), - labelClassName: cx(isProAdminEasyCreateGroup && 'navItem-label-pro'), + labelClassName: cx( + (isProAdminEasyCreateGroup || isProInNavDesktop) && + 'navItem-label-pro' + ), className: `navItem--messages ${CLASS_AUTH_ITEM}`, - linkClassName: cx(isProAdminEasyCreateGroup && 'navItemLink-pro'), + linkClassName: cx( + (isProAdminEasyCreateGroup || isProInNavDesktop) && 'navItemLink-pro' + ), counterBadgeClassName: cx( isNewNavActiveDesktop && !isProAdminEasyCreateGroup && 'navItem--counterBadge', - isProAdminEasyCreateGroup && 'navItem--counterBadgeProMessages' + (isProAdminEasyCreateGroup || isProInNavDesktop) && + 'navItem--counterBadgeProMessages' ), icon: getMessagesIcon(), hasUpdates: messages.unreadMessages > 0, @@ -433,14 +440,20 @@ export class Nav extends React.Component { ? '' : notifications.link, label: getNotificataionsLabel(), - labelClassName: cx(isProAdminEasyCreateGroup && 'navItem-label-pro'), + labelClassName: cx( + (isProAdminEasyCreateGroup || isProInNavDesktop) && + 'navItem-label-pro' + ), className: cx('navItem--notifications', CLASS_AUTH_ITEM), - linkClassName: cx(isProAdminEasyCreateGroup && 'navItemLink-pro'), + linkClassName: cx( + (isProAdminEasyCreateGroup || isProInNavDesktop) && 'navItemLink-pro' + ), counterBadgeClassName: cx( isNewNavActiveDesktop && !isProAdminEasyCreateGroup && 'navItem--counterBadge', - isProAdminEasyCreateGroup && 'navItem--counterBadgeProNotifications' + (isProAdminEasyCreateGroup || isProInNavDesktop) && + 'navItem--counterBadgeProNotifications' ), icon: getNotificationsIcon(), onClickAction: From 7934092ca8f3a9a2e3fe18c0710179ec08c8cf93 Mon Sep 17 00:00:00 2001 From: Oneil Date: Thu, 19 Jan 2023 15:48:00 -0600 Subject: [PATCH 5/6] update styling conditions --- src/navigation/Nav.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx index 201f02ea..30b557c8 100644 --- a/src/navigation/Nav.jsx +++ b/src/navigation/Nav.jsx @@ -424,6 +424,7 @@ export class Nav extends React.Component { counterBadgeClassName: cx( isNewNavActiveDesktop && !isProAdminEasyCreateGroup && + !isProInNavDesktop && 'navItem--counterBadge', (isProAdminEasyCreateGroup || isProInNavDesktop) && 'navItem--counterBadgeProMessages' @@ -436,7 +437,10 @@ export class Nav extends React.Component { { shrink: true, linkTo: - media.isAtMediumUp && !isNewNavActive && !isProAdminEasyCreateGroup + media.isAtMediumUp && + !isNewNavActive && + !isProAdminEasyCreateGroup && + !isProInNavDesktop ? '' : notifications.link, label: getNotificataionsLabel(), @@ -451,6 +455,7 @@ export class Nav extends React.Component { counterBadgeClassName: cx( isNewNavActiveDesktop && !isProAdminEasyCreateGroup && + !isProInNavDesktop && 'navItem--counterBadge', (isProAdminEasyCreateGroup || isProInNavDesktop) && 'navItem--counterBadgeProNotifications' @@ -459,12 +464,14 @@ export class Nav extends React.Component { onClickAction: (!isNewNavActive && !isProAdminEasyCreateGroup && + !isProInNavDesktop && media.isAtMediumUp && this.onClickDropdownAction) || undefined, dropdownContent: (!isNewNavActive && !isProAdminEasyCreateGroup && + !isProInNavDesktop && media.isAtMediumUp && notificationContent) || undefined, From e2a67b8149a4c5274973e3c6795902bba2ff050d Mon Sep 17 00:00:00 2001 From: Oneil Date: Mon, 23 Jan 2023 18:20:13 -0600 Subject: [PATCH 6/6] adjust css conditions for unread messages --- src/navigation/Nav.jsx | 18 ++++++++---------- src/navigation/nav.story.jsx | 21 ++++++++++++++++++++- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx index 30b557c8..3605cac5 100644 --- a/src/navigation/Nav.jsx +++ b/src/navigation/Nav.jsx @@ -422,12 +422,11 @@ export class Nav extends React.Component { (isProAdminEasyCreateGroup || isProInNavDesktop) && 'navItemLink-pro' ), counterBadgeClassName: cx( - isNewNavActiveDesktop && - !isProAdminEasyCreateGroup && - !isProInNavDesktop && - 'navItem--counterBadge', (isProAdminEasyCreateGroup || isProInNavDesktop) && - 'navItem--counterBadgeProMessages' + 'navItem--counterBadgeProMessages', + isNewNavActiveDesktop && + (!isProAdminEasyCreateGroup || !isProInNavDesktop) && + 'navItem--counterBadge' ), icon: getMessagesIcon(), hasUpdates: messages.unreadMessages > 0, @@ -453,12 +452,11 @@ export class Nav extends React.Component { (isProAdminEasyCreateGroup || isProInNavDesktop) && 'navItemLink-pro' ), counterBadgeClassName: cx( - isNewNavActiveDesktop && - !isProAdminEasyCreateGroup && - !isProInNavDesktop && - 'navItem--counterBadge', (isProAdminEasyCreateGroup || isProInNavDesktop) && - 'navItem--counterBadgeProNotifications' + 'navItem--counterBadgeProNotifications', + isNewNavActiveDesktop && + (!isProAdminEasyCreateGroup || !isProInNavDesktop) && + 'navItem--counterBadge' ), icon: getNotificationsIcon(), onClickAction: diff --git a/src/navigation/nav.story.jsx b/src/navigation/nav.story.jsx index 12a028dc..a59c6de6 100644 --- a/src/navigation/nav.story.jsx +++ b/src/navigation/nav.story.jsx @@ -309,4 +309,23 @@ storiesOf('Site Chrome/Nav', module) style={{ width: '100%' }} media={{ isAtMediumUp: true, isAtLargeUp: true }} /> - )); + )) + .add('authenticated with updated nav design with unread notifications', () => { + const notifications = { ...navItems.notifications }; + notifications.unreadNotifications = 1; + const items = { ...navItems, notifications }; + return ( + + ); + });