Deselect all submodes

lib/components/form/advanced-settings-panel.tsx

@@ -15,7 +15,8 @@ import {
   ModeSetting,
   ModeSettingValues
 } from '@opentripplanner/types'
-import React, { RefObject, useContext, useState } from 'react'
+import { QueryParamChangeEvent } from '@opentripplanner/trip-form/lib/types'
+import React, { RefObject, useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
 import * as formActions from '../../actions/form'
@@ -28,6 +29,7 @@ import PageTitle from '../util/page-title'
 import {
   addCustomSettingLabels,
   addModeButtonIcon,
+  onAdvancedModeSubsettingsUpdate,
   onSettingsUpdate,
   pipe,
   populateSettingWithIcon,
@@ -118,7 +120,8 @@ const AdvancedSettingsPanel = ({
   modeButtonOptions,
   modeSettingDefinitions,
   modeSettingValues,
-  setQueryParam
+  setQueryParam,
+  urlSearchParams
 }: {
   closeAdvancedSettings: () => void
   enabledModeButtons: string[]
@@ -127,7 +130,8 @@ const AdvancedSettingsPanel = ({
   modeSettingDefinitions: ModeSetting[]
   modeSettingValues: ModeSettingValues
   onPlanTripClick: () => void
-  setQueryParam: (evt: any) => void
+  setQueryParam: (evt: QueryParamChangeEvent) => void
+  urlSearchParams: URLSearchParams
 }): JSX.Element => {
   const [closingBySave, setClosingBySave] = useState(false)
   const [closingByX, setClosingByX] = useState(false)
@@ -168,6 +172,7 @@ const AdvancedSettingsPanel = ({
   )
 
   const processedModeSettings = processSettings(modeSettingDefinitions)
+
   const processedModeButtons = modeButtonOptions.map(
     pipe(
       addModeButtonIcon(ModeIcon),
@@ -176,6 +181,11 @@ const AdvancedSettingsPanel = ({
     )
   )
 
+  const handleModeButtonToggle = setModeButton(
+    enabledModeButtons,
+    onSettingsUpdate(setQueryParam)
+  )
+
   return (
     <PanelOverlay className="advanced-settings" ref={innerRef}>
       <HeaderContainer>
@@ -213,11 +223,12 @@ const AdvancedSettingsPanel = ({
         fillModeIcons
         label="test"
         modeButtons={processedModeButtons}
-        onSettingsUpdate={onSettingsUpdate(setQueryParam)}
-        onToggleModeButton={setModeButton(
-          enabledModeButtons,
-          onSettingsUpdate(setQueryParam)
+        onSettingsUpdate={onAdvancedModeSubsettingsUpdate(
+          setQueryParam,
+          processedModeButtons,
+          handleModeButtonToggle
         )}
+        onToggleModeButton={handleModeButtonToggle}
       />
       <ReturnToTripPlanButton
         className="save-settings-button"
@@ -259,7 +270,8 @@ const mapStateToProps = (state: AppReduxState) => {
       [],
     modeButtonOptions: state.otp.config?.modes?.modeButtons || [],
     modeSettingDefinitions: state.otp?.modeSettingDefinitions || [],
-    modeSettingValues
+    modeSettingValues,
+    urlSearchParams
   }
 }
 

lib/components/form/util.tsx

@@ -56,16 +56,75 @@ export const onSettingsUpdate =
     setQueryParam({ queryParamData: params, ...params })
   }
 
+const getModeButtonFromSubmode = (
+  key: string,
+  modeButtons: ModeButtonDefinition[]
+): ModeButtonDefinition | undefined => {
+  return modeButtons.find((button: ModeButtonDefinition) => {
+    if (button.modeSettings) {
+      return button.modeSettings.some((setting: ModeSetting) => {
+        // check if transport mode
+        if (
+          (setting.type === 'CHECKBOX' || setting.type === 'SUBMODE') &&
+          setting.addTransportMode
+        ) {
+          return setting.key === key
+        }
+        return false
+      })
+    }
+    return false
+  })
+}
+
+export const onAdvancedModeSubsettingsUpdate =
+  (
+    setQueryParam: (evt: any) => void,
+    processedModeButtons: ModeButtonDefinition[],
+    handleModeButtonToggle: (buttonId: string, newState: boolean) => void
+  ) =>
+  (params: any) => {
+    // check if setting is a transport mode and get the mode button that contains it
+    const modeButton = getModeButtonFromSubmode(
+      Object.keys(params)[0],
+      processedModeButtons
+    )
+    if (modeButton && modeButton.modeSettings && !Object.values(params)[0]) {
+      const transportModeSettings = modeButton.modeSettings.filter(
+        (setting: ModeSetting) =>
+          (setting.type === 'CHECKBOX' || setting.type === 'SUBMODE') &&
+          setting.addTransportMode
+      )
+      // if we're disabling a transport mode, we need to check if the mode button needs to be disabled (all of its subsettings are false)
+      const allFalse = transportModeSettings.every((setting: ModeSetting) => {
+        if (setting.key === Object.keys(params)[0]) {
+          return !Object.values(params)[0]
+        }
+        return !setting.value
+      })
+      if (allFalse) {
+        transportModeSettings.forEach((setting) => (params[setting.key] = true))
+        handleModeButtonToggle(modeButton.key, false)
+      }
+    }
+    setQueryParam({ queryParamData: params, ...params })
+  }
+
 export const setModeButton =
   (enabledModeButtons: string[], updateHandler: (params: any) => void) =>
   (buttonId: string, newState: boolean) => {
+    console.log('SET MODE BUTTON IS BEING CALLED. NEW STATE:::: ', newState)
     let newButtons
+
     if (newState) {
+      // enable modeButton
+      // we need to add it to the list of enabled buttons
       newButtons = [...enabledModeButtons, buttonId]
     } else {
+      // disable modeButton
+      // we need to remove it from the list of enabled buttons
       newButtons = enabledModeButtons.filter((c) => c !== buttonId)
     }
-
     // encodeQueryParams serializes the mode buttons for the URL
     // to get nice looking URL params and consistency
     updateHandler(