refactor(assets/nav): Separate nav data from nav rendering (#2340)

* refactor(assets/nav): Separate data and rendering for left-nav components * refactor(assets/nav): Move nav data to its own file * refactor(assets/nav): Update bottom nav mobile to use nav link data
mbta · Jan 3, 2024 · 6d503e0 · 6d503e0
1 parent 33fc966
commit 6d503e0
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 87 deletions.
diff --git a/assets/src/components/nav/bottomNavMobile.tsx b/assets/src/components/nav/bottomNavMobile.tsx
@@ -1,9 +1,26 @@
 import React from "react"
-import { LadderIcon, MapIcon, SwingIcon } from "../../helpers/icon"
+import { SwingIcon } from "../../helpers/icon"
 import { NavLink } from "react-router-dom"
 import { tagManagerEvent } from "../../helpers/googleTagManager"
-import { mapModeForUser } from "../../util/mapMode"
 import { fullStoryEvent } from "../../helpers/fullStory"
+import { LinkData, getNavLinkData } from "../../navLinkData"
+
+interface BottomNavLinkProps {
+  linkData: LinkData
+}
+
+const BottomNavLink = ({ linkData }: BottomNavLinkProps) => (
+  <NavLink
+    className={({ isActive }) =>
+      "c-bottom-nav-mobile__link" +
+      (isActive ? " c-bottom-nav-mobile__link--active" : "")
+    }
+    title={linkData.title}
+    to={linkData.path}
+  >
+    <linkData.navIcon className="c-bottom-nav-mobile__icon" />
+  </NavLink>
+)
 
 interface Props {
   mobileMenuIsOpen: boolean
@@ -14,7 +31,8 @@ const BottomNavMobile: React.FC<Props> = ({
   mobileMenuIsOpen,
   openSwingsView,
 }) => {
-  const mapMode = mapModeForUser()
+  const navLinkData = getNavLinkData()
+
   return (
     <div
       data-testid="bottom-nav-mobile"
@@ -23,44 +41,11 @@ const BottomNavMobile: React.FC<Props> = ({
       }
     >
       <ul className="c-bottom-nav-mobile__links">
-        <li>
-          <NavLink
-            className={({ isActive }) =>
-              "c-bottom-nav-mobile__link" +
-              (isActive ? " c-bottom-nav-mobile__link--active" : "")
-            }
-            title="Route Ladders"
-            to="/"
-          >
-            <LadderIcon className="c-bottom-nav-mobile__icon" />
-          </NavLink>
-        </li>
-
-        <li>
-          <NavLink
-            className={({ isActive }) =>
-              "c-bottom-nav-mobile__link" +
-              (isActive ? " c-bottom-nav-mobile__link--active" : "")
-            }
-            title="Shuttle Map"
-            to="/shuttle-map"
-          >
-            <MapIcon className="c-bottom-nav-mobile__icon" />
-          </NavLink>
-        </li>
-
-        <li>
-          <NavLink
-            className={({ isActive }) =>
-              "c-bottom-nav-mobile__link" +
-              (isActive ? " c-bottom-nav-mobile__link--active" : "")
-            }
-            title={mapMode.title}
-            to={mapMode.path}
-          >
-            <mapMode.navIcon className="c-bottom-nav-mobile__icon" />
-          </NavLink>
-        </li>
+        {navLinkData.map((linkData) => (
+          <li key={linkData.title}>
+            <BottomNavLink linkData={linkData} />
+          </li>
+        ))}
 
         <li>
           <button

diff --git a/assets/src/components/nav/leftNav.tsx b/assets/src/components/nav/leftNav.tsx
@@ -6,8 +6,6 @@ import { openDrift } from "../../helpers/drift"
 import { tagManagerEvent } from "../../helpers/googleTagManager"
 import NotificationBellIcon from "../notificationBellIcon"
 import {
-  LadderIcon,
-  MapIcon,
   LateIcon,
   SwingIcon,
   DoubleChevronRightIcon,
@@ -20,11 +18,33 @@ import {
 import inTestGroup, { TestGroups } from "../../userInTestGroup"
 import { togglePickerContainer } from "../../state"
 import NavMenu from "./navMenu"
-import { mapModeForUser } from "../../util/mapMode"
 import Tippy from "@tippyjs/react"
 import { fullStoryEvent } from "../../helpers/fullStory"
 import { OpenView } from "../../state/pagePanelState"
 import { usePanelStateFromStateDispatchContext } from "../../hooks/usePanelState"
+import { LinkData, getNavLinkData } from "../../navLinkData"
+
+interface LeftNavLinkProps {
+  linkData: LinkData
+  collapsed: boolean
+}
+
+const LeftNavLink = ({
+  linkData,
+  collapsed,
+}: LeftNavLinkProps): JSX.Element => (
+  <NavLink
+    className={({ isActive }) =>
+      "c-left-nav__link" + (isActive ? " c-left-nav__link--active" : "")
+    }
+    title={linkData.title}
+    to={linkData.path}
+    onClick={linkData.onClick}
+  >
+    <linkData.navIcon className="c-left-nav__icon" />
+    {collapsed ? null : linkData.title}
+  </NavLink>
+)
 
 interface Props {
   toggleMobileMenu?: () => void
@@ -50,7 +70,6 @@ const LeftNav = ({
 
   const [collapsed, setCollapsed] = useState<boolean>(defaultToCollapsed)
   const location = useLocation()
-  const mapMode = mapModeForUser()
 
   const bellIconClasses =
     openView == OpenView.NotificationDrawer
@@ -61,6 +80,8 @@ const LeftNav = ({
         ]
       : ["c-left-nav__icon", "c-left-nav__icon--notifications-view"]
 
+  const navLinkData = getNavLinkData()
+
   return (
     <div className={"c-left-nav" + (collapsed ? " c-left-nav--collapsed" : "")}>
       {toggleMobileMenu ? (
@@ -80,48 +101,11 @@ const LeftNav = ({
       ) : null}
       <div className="c-left-nav__modes-and-views">
         <ul className="c-left-nav__links">
-          <li>
-            <NavLink
-              className={({ isActive }) =>
-                "c-left-nav__link" +
-                (isActive ? " c-left-nav__link--active" : "")
-              }
-              title="Route Ladders"
-              to="/"
-            >
-              <LadderIcon className="c-left-nav__icon" />
-              {collapsed ? null : "Route Ladders"}
-            </NavLink>
-          </li>
-          <li>
-            <NavLink
-              className={({ isActive }) =>
-                "c-left-nav__link" +
-                (isActive ? " c-left-nav__link--active" : "")
-              }
-              title="Shuttle Map"
-              to="/shuttle-map"
-            >
-              <MapIcon className="c-left-nav__icon" />
-              {collapsed ? null : "Shuttle Map"}
-            </NavLink>
-          </li>
-          <li>
-            <NavLink
-              className={({ isActive }) =>
-                "c-left-nav__link" +
-                (isActive ? " c-left-nav__link--active" : "")
-              }
-              title={mapMode.title}
-              to={mapMode.path}
-              onClick={() => {
-                mapMode.navEventText && fullStoryEvent(mapMode.navEventText, {})
-              }}
-            >
-              <mapMode.navIcon className="c-left-nav__icon" />
-              {collapsed ? null : mapMode.title}
-            </NavLink>
-          </li>
+          {navLinkData.map((linkData) => (
+            <li key={linkData.title}>
+              <LeftNavLink linkData={linkData} collapsed={collapsed} />
+            </li>
+          ))}
           <li>
             <hr />
           </li>

diff --git a/assets/src/navLinkData.ts b/assets/src/navLinkData.ts
@@ -0,0 +1,38 @@
+import React from "react"
+import { mapModeForUser } from "./util/mapMode"
+import { fullStoryEvent } from "./helpers/fullStory"
+import { LadderIcon, MapIcon } from "./helpers/icon"
+
+type HTMLElementProps = React.PropsWithoutRef<React.HTMLAttributes<HTMLElement>>
+
+export interface LinkData {
+  title: string
+  path: string
+  navIcon: React.JSXElementConstructor<HTMLElementProps>
+  onClick?: () => void
+}
+
+export const getNavLinkData: () => LinkData[] = () => {
+  const mapMode = mapModeForUser()
+
+  return [
+    {
+      title: "Route Ladders",
+      path: "/",
+      navIcon: LadderIcon,
+    },
+    {
+      title: "Shuttle Map",
+      path: "/shuttle-map",
+      navIcon: MapIcon,
+    },
+    {
+      title: mapMode.title,
+      path: mapMode.path,
+      navIcon: mapMode.navIcon,
+      onClick: () => {
+        mapMode.navEventText && fullStoryEvent(mapMode.navEventText, {})
+      },
+    },
+  ]
+}