From b7d86c65d8790286d06f23d5b886c4d106f47850 Mon Sep 17 00:00:00 2001
From: JakeBapple <jbapple@metrostar.com>
Date: Wed, 18 Dec 2024 14:03:52 -0600
Subject: [PATCH 1/2] Simplifying header and footer

---
 src/components/footer/footer.tsx | 173 ++++++++++++-------------------
 src/components/header/header.tsx |  77 +++++++++-----
 src/utils/helpers.test.ts        |  14 +++
 src/utils/helpers.ts             |   6 ++
 4 files changed, 142 insertions(+), 128 deletions(-)
 create mode 100644 src/utils/helpers.test.ts
 create mode 100644 src/utils/helpers.ts

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index cfbea17c..144424d3 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -13,6 +13,49 @@ export const Footer = (): React.ReactElement => {
     window.scrollTo(0, 0);
   };
 
+  const FOOTER_LINKS = [
+    {
+      name: 'Home',
+      url: '/',
+    },
+    {
+      name: 'Contact Us',
+      url: '/contact-us',
+    },
+    {
+      name: 'About',
+      url: '/about',
+    },
+  ];
+
+  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: '/#',
+    },
+  ];
+
   return (
     <footer className="usa-footer">
       <div className="grid-container usa-footer__return-to-top">
@@ -28,65 +71,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="
-                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="
+            {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>
+              >
+                <a className="usa-footer__primary-link" href={footerLink.url}>
+                  {footerLink.name}
+                </a>
+              </li>
+            ))}
           </ul>
         </nav>
       </div>
@@ -114,55 +112,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
index dc34ed43..c2e37383 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,6 +1,7 @@
 import { Banner, Icon, Search, useHeader } from '@metrostar/comet-uswds';
 import { SearchFormElements } from '@src/types/form';
 import { APP_TITLE } 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';
@@ -18,6 +19,26 @@ export const Header = (): React.ReactElement => {
     setShowMenu(!showMenu);
   };
 
+  // Header link data for signed in users
+  const HEADER_LINKS_SIGNED_IN = [
+    {
+      name: 'Home',
+      url: '/',
+    },
+    {
+      name: 'Dashboard',
+      url: '/dashboard',
+    },
+  ];
+
+  // Header link data for anonymous users
+  const HEADER_LINKS_SIGNED_OUT = [
+    {
+      name: 'Home',
+      url: '/',
+    },
+  ];
+
   // Ensure navigation JS is loaded
   useEffect(() => {
     const bodyElement = document.body;
@@ -87,30 +108,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/helpers.test.ts b/src/utils/helpers.test.ts
new file mode 100644
index 00000000..b006ece1
--- /dev/null
+++ b/src/utils/helpers.test.ts
@@ -0,0 +1,14 @@
+import { lowercaseHyphenateString } from './helpers';
+
+describe('Generic Helper Functions', () => {
+  const OLD_ENV = process.env;
+  beforeEach(() => {
+    process.env = { ...OLD_ENV };
+  });
+
+  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
new file mode 100644
index 00000000..55794164
--- /dev/null
+++ b/src/utils/helpers.ts
@@ -0,0 +1,6 @@
+// Utility function to format string
+export const lowercaseHyphenateString = function (dirtyString: string) {
+  const cleanString = dirtyString.trim().replace(/\s/g, '-').toLowerCase();
+
+  return cleanString;
+};

From 75bc85fd56c82e5a942c17d96c2341bf6c8ab4b7 Mon Sep 17 00:00:00 2001
From: bapplejax <jake.bapple@gmail.com>
Date: Thu, 19 Dec 2024 09:51:27 -0600
Subject: [PATCH 2/2] Updating data location

---
 src/components/footer/footer.tsx | 50 +-----------------------
 src/components/header/header.tsx | 26 +++----------
 src/utils/constants.ts           | 67 ++++++++++++++++++++++++++++++++
 src/utils/helpers.test.ts        |  5 ---
 src/utils/helpers.ts             |  2 +-
 5 files changed, 74 insertions(+), 76 deletions(-)

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 144424d3..ebfe65de 100644
--- 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 => {
@@ -13,49 +8,6 @@ export const Footer = (): React.ReactElement => {
     window.scrollTo(0, 0);
   };
 
-  const FOOTER_LINKS = [
-    {
-      name: 'Home',
-      url: '/',
-    },
-    {
-      name: 'Contact Us',
-      url: '/contact-us',
-    },
-    {
-      name: 'About',
-      url: '/about',
-    },
-  ];
-
-  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: '/#',
-    },
-  ];
-
   return (
     <footer className="usa-footer">
       <div className="grid-container usa-footer__return-to-top">
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index c2e37383..4485abe5 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,6 +1,10 @@
 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';
@@ -19,26 +23,6 @@ export const Header = (): React.ReactElement => {
     setShowMenu(!showMenu);
   };
 
-  // Header link data for signed in users
-  const HEADER_LINKS_SIGNED_IN = [
-    {
-      name: 'Home',
-      url: '/',
-    },
-    {
-      name: 'Dashboard',
-      url: '/dashboard',
-    },
-  ];
-
-  // Header link data for anonymous users
-  const HEADER_LINKS_SIGNED_OUT = [
-    {
-      name: 'Home',
-      url: '/',
-    },
-  ];
-
   // Ensure navigation JS is loaded
   useEffect(() => {
     const bodyElement = document.body;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 0c4d56b5..d1225886 100644
--- 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
index b006ece1..c74ce3b5 100644
--- a/src/utils/helpers.test.ts
+++ b/src/utils/helpers.test.ts
@@ -1,11 +1,6 @@
 import { lowercaseHyphenateString } from './helpers';
 
 describe('Generic Helper Functions', () => {
-  const OLD_ENV = process.env;
-  beforeEach(() => {
-    process.env = { ...OLD_ENV };
-  });
-
   test('should use lowercaseHyphenateString to format a string to be lowercase and hyphenated', () => {
     const testText = lowercaseHyphenateString('A link wiTh strANge Spaces ');
 
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 55794164..46df7bc7 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -1,5 +1,5 @@
 // Utility function to format string
-export const lowercaseHyphenateString = function (dirtyString: string) {
+export const lowercaseHyphenateString = (dirtyString: string) => {
   const cleanString = dirtyString.trim().replace(/\s/g, '-').toLowerCase();
 
   return cleanString;