Merge pull request #373 from bapplejax/simplify-header-footer

Simplifying header and footer to use data
MetroStar · Dec 19, 2024 · c0c3cd2 · c0c3cd2
2 parents 7a380ca + 75bc85f
commit c0c3cd2
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 135 deletions.
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -1,10 +1,5 @@
-import { APP_TITLE } from '@src/utils/constants';
+import { APP_TITLE, FOOTER_LINKS, SOCIAL_LINKS } from '@src/utils/constants';
 import React from 'react';
-import facebookIcon from '~uswds/dist/img/usa-icons/facebook.svg';
-import instagramIcon from '~uswds/dist/img/usa-icons/instagram.svg';
-import rssIcon from '~uswds/dist/img/usa-icons/rss_feed.svg';
-import twitterIcon from '~uswds/dist/img/usa-icons/twitter.svg';
-import youtubeIcon from '~uswds/dist/img/usa-icons/youtube.svg';
 import logo from '/img/logo.png';
 
 export const Footer = (): React.ReactElement => {
@@ -28,65 +23,20 @@ export const Footer = (): React.ReactElement => {
       <div className="usa-footer__primary-section">
         <nav className="usa-footer__nav" aria-label="Footer navigation">
           <ul className="grid-row grid-gap">
-            <li
-              className="
+            {FOOTER_LINKS.map((footerLink) => (
+              <li
+                key={footerLink.url}
+                className="
                 mobile-lg:grid-col-4
                 desktop:grid-col-auto
                 usa-footer__primary-content
               "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
-
-            <li
-              className="
-                mobile-lg:grid-col-4
-                desktop:grid-col-auto
-                usa-footer__primary-content
-              "
-            >
-              <a className="usa-footer__primary-link" href="/#">
-                &lt;Primary link&gt;
-              </a>
-            </li>
+              >
+                <a className="usa-footer__primary-link" href={footerLink.url}>
+                  {footerLink.name}
+                </a>
+              </li>
+            ))}
           </ul>
         </nav>
       </div>
@@ -114,55 +64,22 @@ export const Footer = (): React.ReactElement => {
             </div>
             <div className="usa-footer__contact-links mobile-lg:grid-col-6">
               <div className="usa-footer__social-links grid-row grid-gap-1">
-                <div className="grid-col-auto">
-                  <a className="usa-social-link" href="/#">
-                    <img
-                      className="usa-social-link__icon"
-                      src={facebookIcon}
-                      alt="Facebook"
-                    />
-                  </a>
-                </div>
-
-                <div className="grid-col-auto">
-                  <a className="usa-social-link" href="/#">
-                    <img
-                      className="usa-social-link__icon"
-                      src={twitterIcon}
-                      alt="Twitter"
-                    />
-                  </a>
-                </div>
-
-                <div className="grid-col-auto">
-                  <a className="usa-social-link" href="/#">
-                    <img
-                      className="usa-social-link__icon"
-                      src={youtubeIcon}
-                      alt="YouTube"
-                    />
-                  </a>
-                </div>
-
-                <div className="grid-col-auto">
-                  <a className="usa-social-link" href="/#">
-                    <img
-                      className="usa-social-link__icon"
-                      src={instagramIcon}
-                      alt="Instagram"
-                    />
-                  </a>
-                </div>
-
-                <div className="grid-col-auto">
-                  <a className="usa-social-link" href="/#">
-                    <img
-                      className="usa-social-link__icon"
-                      src={rssIcon}
-                      alt="RSS"
-                    />
-                  </a>
-                </div>
+                {SOCIAL_LINKS.map((socialLink) => (
+                  <div key={socialLink.name} className="grid-col-auto">
+                    <a
+                      className="usa-social-link"
+                      href={socialLink.url}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <img
+                        className="usa-social-link__icon"
+                        src={`${socialLink.icon}`}
+                        alt={`${socialLink.name} icon'`}
+                      />
+                    </a>
+                  </div>
+                ))}
               </div>
               <h2 className="usa-footer__contact-heading">
                 &lt;Agency Contact Center&gt;

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -1,6 +1,11 @@
 import { Banner, Icon, Search, useHeader } from '@metrostar/comet-uswds';
 import { SearchFormElements } from '@src/types/form';
-import { APP_TITLE } from '@src/utils/constants';
+import {
+  APP_TITLE,
+  HEADER_LINKS_SIGNED_IN,
+  HEADER_LINKS_SIGNED_OUT,
+} from '@src/utils/constants';
+import { lowercaseHyphenateString } from '@src/utils/helpers';
 import React, { FormEvent, SyntheticEvent, useEffect, useState } from 'react';
 import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import useAuth from '../../hooks/use-auth';
@@ -87,30 +92,38 @@ export const Header = (): React.ReactElement => {
               <Icon id="menu-icon" type="close" />
             </button>
             <ul className="usa-nav__primary usa-accordion">
-              <li className="usa-nav__primary-item">
-                <NavLink
-                  id="home-link"
-                  to="/"
-                  className={`usa-nav__link ${
-                    location.pathname === '/' ? 'usa-current' : ''
-                  }`}
-                >
-                  Home
-                </NavLink>
-              </li>
-              {isSignedIn && (
-                <li className="usa-nav__primary-item">
-                  <NavLink
-                    id="dashboard-link"
-                    to="/dashboard"
-                    className={`usa-nav__link ${
-                      location.pathname === '/dashboard' ? 'usa-current' : ''
-                    }`}
-                  >
-                    Dashboard
-                  </NavLink>
-                </li>
-              )}
+              {/* This will conditionally render our header links based on isSignedIn */}
+              {isSignedIn
+                ? HEADER_LINKS_SIGNED_IN.map((headerLink) => (
+                    <li key={headerLink.url} className="usa-nav__primary-item">
+                      <NavLink
+                        id={`${lowercaseHyphenateString(headerLink.name)}-link`}
+                        to={headerLink.url}
+                        className={`usa-nav__link ${
+                          location.pathname === headerLink.url
+                            ? 'usa-current'
+                            : ''
+                        }`}
+                      >
+                        {headerLink.name}
+                      </NavLink>
+                    </li>
+                  ))
+                : HEADER_LINKS_SIGNED_OUT.map((headerLink) => (
+                    <li key={headerLink.url} className="usa-nav__primary-item">
+                      <NavLink
+                        id={`${lowercaseHyphenateString(headerLink.name)}-link`}
+                        to={headerLink.url}
+                        className={`usa-nav__link ${
+                          location.pathname === headerLink.url
+                            ? 'usa-current'
+                            : ''
+                        }`}
+                      >
+                        {headerLink.name}
+                      </NavLink>
+                    </li>
+                  ))}
               <li className="usa-nav__primary-item">
                 <Link
                   id="auth-link"

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -1,3 +1,9 @@
+import facebookIcon from '~uswds/dist/img/usa-icons/facebook.svg';
+import instagramIcon from '~uswds/dist/img/usa-icons/instagram.svg';
+import rssIcon from '~uswds/dist/img/usa-icons/rss_feed.svg';
+import twitterIcon from '~uswds/dist/img/usa-icons/twitter.svg';
+import youtubeIcon from '~uswds/dist/img/usa-icons/youtube.svg';
+
 export const APP_TITLE = 'Starter App';
 export const REQUIRED_FIELD_MESSAGE = 'This field is required.';
 export const MIN_PASSWORD_LENGTH = 8;
@@ -11,3 +17,64 @@ export const PASSWORD_RULES = {
   ...REQUIRED_FORM_FIELDS_RULES,
   minLength: { value: MIN_PASSWORD_LENGTH, message: PASSWORD_LENGTH_MESSAGE },
 };
+
+export const HEADER_LINKS_SIGNED_IN = [
+  {
+    name: 'Home',
+    url: '/',
+  },
+  {
+    name: 'Dashboard',
+    url: '/dashboard',
+  },
+];
+
+export const HEADER_LINKS_SIGNED_OUT = [
+  {
+    name: 'Home',
+    url: '/',
+  },
+];
+
+export const FOOTER_LINKS = [
+  {
+    name: 'Home',
+    url: '/',
+  },
+  {
+    name: 'Contact Us',
+    url: '/contact-us',
+  },
+  {
+    name: 'About',
+    url: '/about',
+  },
+];
+
+export const SOCIAL_LINKS = [
+  {
+    name: 'Facebook',
+    icon: facebookIcon,
+    url: '/#',
+  },
+  {
+    name: 'Twitter',
+    icon: twitterIcon,
+    url: '/#',
+  },
+  {
+    name: 'YouTube',
+    icon: youtubeIcon,
+    url: '/#',
+  },
+  {
+    name: 'Instagram',
+    icon: instagramIcon,
+    url: '/#',
+  },
+  {
+    name: 'RSS Feed',
+    icon: rssIcon,
+    url: '/#',
+  },
+];
diff --git a/src/utils/helpers.test.ts b/src/utils/helpers.test.ts
@@ -0,0 +1,9 @@
+import { lowercaseHyphenateString } from './helpers';
+
+describe('Generic Helper Functions', () => {
+  test('should use lowercaseHyphenateString to format a string to be lowercase and hyphenated', () => {
+    const testText = lowercaseHyphenateString('A link wiTh strANge Spaces ');
+
+    expect(testText).toEqual('a-link-with-strange-spaces');
+  });
+});
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -0,0 +1,6 @@
+// Utility function to format string
+export const lowercaseHyphenateString = (dirtyString: string) => {
+  const cleanString = dirtyString.trim().replace(/\s/g, '-').toLowerCase();
+
+  return cleanString;
+};