VACMS-15699 Clean up code in the header/footer directories (#26524)

department-of-veterans-affairs · Nov 3, 2023 · fca50ba · fca50ba
1 parent 11fe1bd
commit fca50ba
Show file tree

Hide file tree

Showing 32 changed files with 45 additions and 249 deletions.
diff --git a/src/platform/site-wide/header/components/App/index.js b/src/platform/site-wide/header/components/App/index.js
@@ -1,49 +1,41 @@
-// Node modules.
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-// Relative imports.
-import recordEvent from 'platform/monitoring/record-event';
+import recordEvent from '~/platform/monitoring/record-event';
 import Header from '../Header';
 import { hideLegacyHeader, showLegacyHeader } from '../../helpers';
 
 const MOBILE_BREAKPOINT_PX = 768;
 
 export const App = ({ megaMenuData, show, showMegaMenu, showNavLogin }) => {
-  // Derive if we are on desktop.
   const [isDesktop, setIsDesktop] = useState(
     window.innerWidth >= MOBILE_BREAKPOINT_PX,
   );
 
-  // Derive if we are on desktop and set isDesktop state.
   const deriveIsDesktop = () =>
     setIsDesktop(window.innerWidth >= MOBILE_BREAKPOINT_PX);
 
   useEffect(() => {
-    // Record analytic event.
     recordEvent({
       event: 'phased-roll-out-enabled',
       'product-description': 'Header V2',
     });
 
-    // Set screen size listener.
     window.addEventListener('resize', deriveIsDesktop);
 
-    // Clear listener.
     return () => window.removeEventListener('resize', deriveIsDesktop);
   }, []);
 
-  // Do not render if prop show is falsey.
   if (!show) {
     return null;
   }
 
-  // Render the legacy header if we are on desktop.
   if (isDesktop) {
     showLegacyHeader();
     return null;
   }
 
   hideLegacyHeader();
+
   return (
     <Header
       megaMenuData={megaMenuData}

diff --git a/src/platform/site-wide/header/components/App/index.unit.spec.js b/src/platform/site-wide/header/components/App/index.unit.spec.js
@@ -1,32 +1,24 @@
-// Node modules.
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
-// Relative imports.
 import { App } from '.';
 
 describe('Header <App>', () => {
   it('renders legacy header when our width is more than 768px', () => {
-    // Set up.
     window.innerWidth = 768;
     const wrapper = shallow(<App show />);
 
-    // Assertions.
     expect(wrapper.find(`Header`)).to.have.lengthOf(0);
 
-    // Clean up.
     wrapper.unmount();
   });
 
   it('renders header v2 when our width is less than 768px', () => {
-    // Set up.
     window.innerWidth = 767;
     const wrapper = shallow(<App show />);
 
-    // Assertions.
     expect(wrapper.find(`Header`)).to.have.lengthOf(1);
 
-    // Clean up.
     wrapper.unmount();
   });
 });
diff --git a/src/platform/site-wide/header/components/Header/index.js b/src/platform/site-wide/header/components/Header/index.js
@@ -1,7 +1,5 @@
-// Node modules.
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-// Relative imports.
 import LogoRow from '../LogoRow';
 import Menu from '../../containers/Menu';
 import OfficialGovtWebsite from '../OfficialGovtWebsite';
@@ -13,28 +11,20 @@ export const Header = ({ megaMenuData, showMegaMenu, showNavLogin }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   useEffect(() => {
-    // Start Veteran Crisis Line modal functionality.
     addFocusBehaviorToCrisisLineModal();
     addOverlayTriggers();
   }, []);
 
   return (
     <div className="vads-u-display--flex vads-u-flex-direction--column vads-u-margin--0 vads-u-padding--0">
-      {/* Official government website banner */}
       <OfficialGovtWebsite />
-
-      {/* Veteran crisis line */}
       <VeteranCrisisLine id="header-crisis-line" />
-
       <nav className="vads-u-display--flex vads-u-flex-direction--column vads-u-margin--0 vads-u-padding--0">
-        {/* Logo row */}
         <LogoRow
           isMenuOpen={isMenuOpen}
           showNavLogin={showNavLogin}
           setIsMenuOpen={setIsMenuOpen}
         />
-
-        {/* Menu */}
         <Menu
           isMenuOpen={isMenuOpen}
           megaMenuData={megaMenuData}

diff --git a/src/platform/site-wide/header/components/Header/index.unit.spec.js b/src/platform/site-wide/header/components/Header/index.unit.spec.js
@@ -1,24 +1,18 @@
-// 3rd-party imports
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
-
-// 1st-party imports
 import { Header } from '.';
 
 describe('Header <Header>', () => {
   const renderHeader = () => shallow(<Header showMegaMenu showNavLogin />);
 
-  // Component Wrapper
   let wrapper;
 
   beforeEach(() => {
-    // Set up.
     wrapper = renderHeader();
   });
 
   it('renders content', () => {
-    // Assertions.
     expect(wrapper.find('OfficialGovtWebsite')).to.have.lengthOf(1);
     expect(wrapper.find('VeteranCrisisLine')).to.have.lengthOf(1);
     expect(wrapper.find('Connect(LogoRow)')).to.have.lengthOf(1);

diff --git a/src/platform/site-wide/header/components/Logo/index.js b/src/platform/site-wide/header/components/Logo/index.js
@@ -1,4 +1,3 @@
-// Node modules.
 import React from 'react';
 
 export const Logo = props => (

diff --git a/src/platform/site-wide/header/components/Logo/index.unit.spec.js b/src/platform/site-wide/header/components/Logo/index.unit.spec.js
@@ -1,19 +1,14 @@
-// Node modules.
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
-// Relative imports.
 import { Logo } from '.';
 
 describe('Header <Logo>', () => {
   it('renders content', () => {
-    // Set up.
     const wrapper = shallow(<Logo />);
 
-    // Assertions.
     expect(wrapper.find(`svg`)).to.have.lengthOf(1);
 
-    // Clean up.
     wrapper.unmount();
   });
 });
diff --git a/src/platform/site-wide/header/components/LogoRow/index.js b/src/platform/site-wide/header/components/LogoRow/index.js
@@ -1,9 +1,7 @@
-// Node modules.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-// Relative imports.
-import recordEvent from 'platform/monitoring/record-event';
+import recordEvent from '~/platform/monitoring/record-event';
 import Logo from '../Logo';
 import UserNav from '../../../user-nav/containers/Main';
 import { updateExpandedMenuIDAction } from '../../containers/Menu/actions';
@@ -15,17 +13,13 @@ export const LogoRow = ({
   updateExpandedMenuID,
 }) => {
   const onMenuToggle = () => {
-    // Record the analytic event.
     recordEvent({ event: 'nav-header-menu-expand' });
-
-    // Update the state.
     updateExpandedMenuID();
     setIsMenuOpen(!isMenuOpen);
   };
 
   return (
     <div className="header-logo-row vads-u-background-color--primary-darkest vads-u-display--flex vads-u-align-items--center vads-u-justify-content--space-between vads-u-padding-y--1p5 vads-u-padding-left--1p5 vads-u-padding-right--1">
-      {/* Logo */}
       <a
         aria-label="VA logo"
         className="header-logo vads-u-display--flex vads-u-align-items--center vads-u-justify-content--center"
@@ -34,12 +28,8 @@ export const LogoRow = ({
       >
         <Logo />
       </a>
-
       <div className="vads-u-display--flex vads-u-flex-direction--row vads-u-align-items--center">
-        {/* Sign in button */}
         <UserNav isHeaderV2 showNavLogin={showNavLogin} />
-
-        {/* Mobile menu button */}
         {showNavLogin && (
           <button
             aria-controls="header-nav-items"
@@ -48,10 +38,7 @@ export const LogoRow = ({
             onClick={onMenuToggle}
             type="button"
           >
-            {/* Menu | Close */}
             {!isMenuOpen ? 'Menu' : 'Close'}
-
-            {/* Menu bars icon | Close icon */}
             {!isMenuOpen ? (
               <i
                 aria-hidden="true"
@@ -63,8 +50,6 @@ export const LogoRow = ({
                 className="fa fa-times vads-u-margin-left--1 vads-u-font-size--sm"
               />
             )}
-
-            {/* Styling overlay */}
             {isMenuOpen && (
               <div className="header-menu-button-overlay vads-u-background-color--gray-lightest vads-u-position--absolute vads-u-width--full" />
             )}

diff --git a/src/platform/site-wide/header/components/LogoRow/index.unit.spec.js b/src/platform/site-wide/header/components/LogoRow/index.unit.spec.js
@@ -1,17 +1,13 @@
-// Node modules.
 import React from 'react';
 import sinon from 'sinon';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
-// Relative imports.
 import { LogoRow } from '.';
 
 describe('Header <LogoRow>', () => {
   it('renders correct content with no props', () => {
-    // Set up.
     const wrapper = shallow(<LogoRow />);
 
-    // Assertions.
     expect(wrapper.find('Logo')).to.have.length(1);
     expect(wrapper.find('Connect(Main)')).to.have.length(1);
     expect(wrapper.find('button.header-menu-button')).to.have.length(1);
@@ -21,15 +17,12 @@ describe('Header <LogoRow>', () => {
     expect(wrapper.find('i.fa.fa-times')).to.have.length(0);
     expect(wrapper.find('div.header-menu-button-overlay')).to.have.length(0);
 
-    // Clean up.
     wrapper.unmount();
   });
 
   it('renders correct content with isMenuOpen', () => {
-    // Set up tests.
     const wrapper = shallow(<LogoRow isMenuOpen />);
 
-    // Assertions.
     expect(wrapper.find('Logo')).to.have.length(1);
     expect(wrapper.find('Connect(Main)')).to.have.length(1);
     expect(wrapper.find('button.header-menu-button')).to.have.length(1);
@@ -39,12 +32,10 @@ describe('Header <LogoRow>', () => {
     expect(wrapper.find('i.fa.fa-times')).to.have.length(1);
     expect(wrapper.find('div.header-menu-button-overlay')).to.have.length(1);
 
-    // Clean up.
     wrapper.unmount();
   });
 
   it('toggles the menu', () => {
-    // Set up tests.
     const updateExpandedMenuID = sinon.spy();
     const setIsMenuOpen = sinon.spy();
     const wrapper = shallow(
@@ -56,12 +47,10 @@ describe('Header <LogoRow>', () => {
     );
     wrapper.find('.header-menu-button').simulate('click');
 
-    // Assertions.
     expect(updateExpandedMenuID.called).to.be.true;
     expect(setIsMenuOpen.called).to.be.true;
     expect(setIsMenuOpen.firstCall.args[0]).to.equal(false);
 
-    // Clean up.
     wrapper.unmount();
   });
 });
diff --git a/src/platform/site-wide/header/components/MenuItemLevel1/index.js b/src/platform/site-wide/header/components/MenuItemLevel1/index.js
@@ -1,10 +1,8 @@
-// Node modules.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-// Relative imports.
 import MenuItemLevel2 from '../MenuItemLevel2';
-import recordEvent from 'platform/monitoring/record-event';
+import recordEvent from '~/platform/monitoring/record-event';
 import { deriveMenuItemID, formatMenuItems } from '../../helpers';
 import { updateExpandedMenuIDAction } from '../../containers/Menu/actions';
 
@@ -13,36 +11,27 @@ export const MenuItemLevel1 = ({
   item,
   updateExpandedMenuID,
 }) => {
-  // Derive the menu item's ID.
   const menuItemID = deriveMenuItemID(item, '1');
-
-  // Derive if we the menu item is expanded.
   const isExpanded = menuItemID === expandedMenuID;
 
-  // Do not render if we are missing necessary menu item data.
   if (!item?.menuSections && !item?.href && !item?.title) {
     return null;
   }
 
-  // Format menuSections to be an array if needed.
   if (item?.menuSections) {
     item.menuSections = formatMenuItems(item.menuSections); // eslint-disable-line no-param-reassign
   }
 
   const toggleShowItems = title => () => {
-    // Record event.
     recordEvent({
       event: 'nav-header-top-level',
       'nav-header-action': `Navigation - Header - Open Top Level - ${title}`,
     });
 
-    // Update the expanded menu ID.
     updateExpandedMenuID(isExpanded ? undefined : menuItemID);
 
-    // Derive the header element.
     const header = document.querySelector('header');
 
-    // Scroll to the top of the header when toggling a menu item.
     if (header) {
       header.scrollIntoView();
     }
@@ -57,7 +46,6 @@ export const MenuItemLevel1 = ({
             {item?.title}
           </span>
         )}
-
       {/* Title link */}
       {!item?.menuSections &&
         item?.href && (
@@ -68,7 +56,6 @@ export const MenuItemLevel1 = ({
             {item?.title}
           </a>
         )}
-
       {item?.menuSections && (
         <>
           {/* Expand title */}
@@ -92,7 +79,6 @@ export const MenuItemLevel1 = ({
               />
             )}
           </button>
-
           {/* Level 2 menu items */}
           {isExpanded && (
             <ul