refactor(MobileProfileSelector): Remove state from component, use que…

…ry state instead.

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

@@ -283,6 +283,7 @@ const AdvancedSettingsPanel = ({
           <FormattedMessage id="components.MobilityProfile.MobilityPane.planTripDescription" />
           <MobilityProfileSelector
             name="forEmail"
+            // Don't use onSettingsUpdate, so that the dependent's mobility profile doesn't appear in the URL.
             onSettingsUpdate={setQueryParam}
             options={[
               {

lib/components/form/call-taker/advanced-options.js

@@ -234,8 +234,10 @@ class AdvancedOptions extends Component {
         {hasMobilityProfile && (
           <MobilityProfileSelector
             name="mobilityProfile"
+            // Use onSettingsUpdate to include the mobility profile in the URL
             onSettingsUpdate={onSettingsUpdate(setQueryParam)}
             options={getMobilityProfileOptions(intl)}
+            value={currentQuery.mobilityProfile}
           />
         )}
         <Suspense fallback={<span>...</span>}>

lib/components/user/mobility-profile/mobility-profile-selector.tsx

@@ -1,7 +1,7 @@
 import { DropdownSelector } from '@opentripplanner/trip-form'
 import { QueryParamChangeEvent } from '@opentripplanner/trip-form/lib/types'
 import { useIntl } from 'react-intl'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
 const MobilityProfileDropdown = styled(DropdownSelector)`
@@ -15,26 +15,24 @@ const MobilityProfileSelector = ({
   name,
   onSettingsUpdate,
   options,
-  value = 'None'
+  value
 }: {
   name: string
   onSettingsUpdate: (args: Record<string, unknown>) => void
   options: {
     text: string
     value: string
   }[]
-  value?: string
+  value: string
 }): JSX.Element => {
   const intl = useIntl()
-  const [selectedProfile, setSelectedProfile] = useState<string>(value)
 
   const onMobilityProfileChange = useCallback(
     (evt: QueryParamChangeEvent) => {
-      const value = evt[name]
-      setSelectedProfile(value as string)
-      onSettingsUpdate({ [name]: value })
+      const paramValue = evt[name]
+      onSettingsUpdate({ [name]: paramValue })
     },
-    [name, setSelectedProfile, onSettingsUpdate]
+    [name, onSettingsUpdate]
   )
 
   return (
@@ -45,7 +43,7 @@ const MobilityProfileSelector = ({
       name={name}
       onChange={onMobilityProfileChange}
       options={options}
-      value={selectedProfile}
+      value={value}
     />
   )
 }