Fix View Switcher

__tests__/util/ui.ts

@@ -4,6 +4,9 @@ describe('util > ui', () => {
   describe('getItineraryView', () => {
     it('returns a list mode by default or ui_activeItinerary is -1', () => {
       expect(getItineraryView({})).toBe(ItineraryView.LIST)
+      expect(getItineraryView({ ui_activeItinerary: null })).toBe(
+        ItineraryView.LIST
+      )
       expect(getItineraryView({ ui_activeItinerary: -1 })).toBe(
         ItineraryView.LIST
       )

lib/actions/ui.js

@@ -10,7 +10,11 @@ import {
   loadLocaleData
 } from '../util/i18n'
 import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
-import { getPathFromParts, ItineraryView } from '../util/ui'
+import {
+  getPathFromParts,
+  isDefinedAndNotEqual,
+  ItineraryView
+} from '../util/ui'
 
 import {
   clearActiveSearch,
@@ -114,12 +118,16 @@ export function setViewedTrip(payload) {
 export function setMainPanelContent(payload) {
   return function (dispatch, getState) {
     const { otp, router } = getState()
-    if (otp.ui.mainPanelContent === payload) {
+    if (
+      otp.ui.mainPanelContent === payload &&
+      (payload || router.location.pathname === '/')
+    ) {
+      // Do nothing if the panel is already set (but do something if changing to main panel
+      // and the router path is not at the root (/#/?ui_activeSearch=...).
+      // This will guard against over-enthusiastic routing and overwriting current/nested states.
       console.warn(
         `Attempt to route from ${otp.ui.mainPanelContent} to ${payload}. Doing nothing`
       )
-      // Do nothing if the panel is already set. This will guard against over
-      // enthusiastic routing and overwriting current/nested states.
       return
     }
     dispatch(setPanel(payload))
@@ -269,7 +277,9 @@ export function handleBackButtonPress(e) {
       // previous search ID.
       if (activeSearchId !== previousSearchId) {
         dispatch(setActiveSearch(previousSearchId))
-      } else if (uiUrlParams.ui_activeItinerary !== previousItinIndex) {
+      } else if (
+        isDefinedAndNotEqual(uiUrlParams.ui_activeItinerary, previousItinIndex)
+      ) {
         // Active itinerary index has changed.
         dispatch(setActiveItinerary({ index: previousItinIndex }))
       }

lib/components/app/view-switcher.tsx

@@ -1,11 +1,10 @@
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useHistory } from 'react-router'
 import React from 'react'
 
+import * as uiActions from '../../actions/ui'
 import { MainPanelContent } from '../../actions/ui-constants'
-import { setMainPanelContent } from '../../actions/ui'
 
 type Props = {
   accountsActive: boolean
@@ -23,23 +22,18 @@ const ViewSwitcher = ({
   setMainPanelContent,
   sticky
 }: Props) => {
-  const history = useHistory()
   const intl = useIntl()
 
   const _showRouteViewer = () => {
     setMainPanelContent(MainPanelContent.ROUTE_VIEWER)
   }
 
   const _showTripPlanner = () => {
-    if (accountsActive) {
-      // Go up to root while preserving query parameters
-      history.push('..' + history.location.search)
-    } else {
-      setMainPanelContent(null)
-    }
+    // setMainPanelContent(null) already includes navigation to '/'.
+    setMainPanelContent(null)
   }
 
-  const tripPlannerActive = activePanel === null
+  const tripPlannerActive = activePanel === null && !accountsActive
   const routeViewerActive = activePanel === MainPanelContent.ROUTE_VIEWER
 
   return (
@@ -84,25 +78,15 @@ const ViewSwitcher = ({
 // connect to the redux store
 
 const mapStateToProps = (state: any) => {
-  const { mainPanelContent } = state.otp.ui
-
-  // Reverse the ID to string mapping
-  const activePanelPair = Object.entries(MainPanelContent).find(
-    (keyValuePair) => keyValuePair[1] === mainPanelContent
-  )
-  // activePanel is array of form [string, ID]
-  // The trip planner has id null
-  const activePanel = (activePanelPair && activePanelPair[1]) || null
-
   return {
     // TODO: more reliable way of detecting these things, such as terms of storage page
     accountsActive: state.router.location.pathname.includes('/account'),
-    activePanel
+    activePanel: state.otp.ui.mainPanelContent
   }
 }
 
 const mapDispatchToProps = {
-  setMainPanelContent
+  setMainPanelContent: uiActions.setMainPanelContent
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ViewSwitcher)

lib/util/ui.ts

@@ -93,6 +93,15 @@ interface UrlParams {
   ui_itineraryView: ItineraryView
 }
 
+export function isDefinedAndNotEqual(
+  subject: number | string,
+  value: number | string
+): boolean {
+  return (
+    subject !== null && subject !== undefined && `${subject}` !== `${value}`
+  )
+}
+
 /**
  * Gets the itinerary view to display based on URL params.
  */
@@ -102,9 +111,7 @@ export function getItineraryView({
 }: UrlParams): ItineraryView {
   return (
     ui_itineraryView ||
-    (ui_activeItinerary !== undefined &&
-      `${ui_activeItinerary}` !== '-1' &&
-      ItineraryView.FULL) ||
+    (isDefinedAndNotEqual(ui_activeItinerary, -1) && ItineraryView.FULL) ||
     ItineraryView.LIST
   )
 }