Refactor User Account Header Links

lib/components/app/view-switcher.tsx

@@ -1,19 +1,16 @@
-import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
 import React from 'react'
 
-import { AppReduxState } from '../../util/state-types'
 import Link from '../util/link'
 
 type Props = {
-  mainPath: string
   sticky?: boolean
 }
 /**
  * This component is a switcher between
  * the main views of the application.
  */
-const ViewSwitcher = ({ mainPath, sticky }: Props) => {
+const ViewSwitcher = ({ sticky }: Props) => {
   const intl = useIntl()
   return (
     <div
@@ -34,26 +31,17 @@ const ViewSwitcher = ({ mainPath, sticky }: Props) => {
           : {}
       }
     >
-      <Link isActive={mainPath === '/'} to="/">
+      <Link to="/" tracking>
         <FormattedMessage id="components.BatchRoutingPanel.shortTitle" />
       </Link>
-      <Link isActive={mainPath === '/route'} to="/route">
+      <Link to="/route" tracking>
         <FormattedMessage id="components.RouteViewer.shortTitle" />
       </Link>
-      <Link isActive={mainPath === '/nearby'} to="/nearby">
+      <Link to="/nearby" tracking>
         <FormattedMessage id="components.ViewSwitcher.nearby" />
       </Link>
     </div>
   )
 }
 
-// connect to the redux store
-
-const mapStateToProps = (state: AppReduxState) => {
-  const pathParts = state.router.location.pathname.split('/')
-  return {
-    mainPath: `/${pathParts[1]}`
-  }
-}
-
-export default connect(mapStateToProps)(ViewSwitcher)
+export default ViewSwitcher

lib/components/user/back-to-trip-planner.js → lib/components/user/back-to-trip-planner.tsx

@@ -4,18 +4,18 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { IconWithText } from '../util/styledIcon'
-import { LinkWithQuery } from '../form/connected-links'
+import Link from '../util/link'
 
-const StyledLinkWithQuery = styled(LinkWithQuery)`
+const StyledLink = styled(Link)`
   display: block;
 `
 
-const BackToTripPlanner = () => (
-  <StyledLinkWithQuery to="/">
+const BackToTripPlanner = (): JSX.Element => (
+  <StyledLink to="/">
     <IconWithText Icon={ArrowLeft}>
       <FormattedMessage id="components.BackToTripPlanner.backToTripPlanner" />
     </IconWithText>
-  </StyledLinkWithQuery>
+  </StyledLink>
 )
 
 export default BackToTripPlanner

lib/components/user/styled.ts

@@ -1,4 +1,4 @@
-import { Button, Panel } from 'react-bootstrap'
+import { Panel } from 'react-bootstrap'
 import styled, { css } from 'styled-components'
 
 import { RED_ON_WHITE } from '../util/colors'
@@ -29,15 +29,15 @@ export const SubNavContainer = styled.div`
 export const SubNavLinks = styled.div`
   margin-top: 11px;
 
-  .btn-link {
+  a {
+    border: 1px transparent;
     border-bottom: 3px solid transparent;
     font-size: 17px;
     margin-left: 8px;
-    paddisng: 0px 3px;
+    padding: 6px 12px;
   }
 
-  .btn-link.active {
-    border: none;
+  a.active {
     border-bottom: 3px solid #adadad;
   }
 `

lib/components/user/sub-nav.tsx

@@ -0,0 +1,34 @@
+import { FormattedMessage } from 'react-intl'
+import React, { ReactNode } from 'react'
+
+import { ACCOUNT_SETTINGS_PATH, TRIPS_PATH } from '../../util/constants'
+import Link from '../util/link'
+
+import { SubNavContainer, SubNavLinks } from './styled'
+
+interface Props {
+  title: ReactNode
+}
+
+/**
+ * This component renders the sub navigation elements for Account pages.
+ */
+const SubNav = ({ title }: Props): JSX.Element => (
+  <SubNavContainer>
+    <div className="container">
+      <h1 style={{ display: 'inline', paddingTop: '10px' }}>
+        {title || <FormattedMessage id="components.SubNav.myAccount" />}
+      </h1>
+      <SubNavLinks className="pull-right">
+        <Link to={TRIPS_PATH} tracking>
+          <FormattedMessage id="components.SubNav.trips" />
+        </Link>
+        <Link to={ACCOUNT_SETTINGS_PATH} tracking>
+          <FormattedMessage id="components.SubNav.settings" />
+        </Link>
+      </SubNavLinks>
+    </div>
+  </SubNavContainer>
+)
+
+export default SubNav

lib/components/util/link.ts

@@ -6,9 +6,10 @@ import { combineQueryParams } from '../../util/api'
 import { isBlank } from '../../util/ui'
 
 interface OwnProps extends HTMLAttributes<HTMLAnchorElement> {
-  isActive?: boolean
   to?: string
   toParams?: Record<string, unknown>
+  /** If true, an 'active' CSS class will be applied if the URL starts the same as the `to` prop. */
+  tracking?: boolean
 }
 
 /**
@@ -20,9 +21,12 @@ const Link: ComponentType = 'a' as unknown as ComponentType
 // connect to the redux store so that the search params get updated in timely fashion.
 
 const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
-  const { className, isActive, to = '', toParams } = ownProps
+  const { className, to = '', toParams, tracking } = ownProps
   const queryParams = combineQueryParams(toParams)
   const href = `#${to}${isBlank(queryParams) ? '' : `?${queryParams}`}`
+
+  const isActive =
+    tracking && !isBlank(to) && state.router.location.pathname === to
   return {
     className:
       className && isActive
@@ -31,10 +35,10 @@ const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
         ? 'active'
         : className,
     href,
-    // Remove the passed isActive, to and toParams props from the rendered HTML.
-    isActive: undefined,
+    // Remove the passed to, toParams, and tracking props from the rendered HTML.
     to: undefined,
-    toParams: undefined
+    toParams: undefined,
+    tracking: undefined
   }
 }