Add configuration types.

example-config.yml

@@ -351,8 +351,6 @@ itinerary:
   disableMetroSeperatorDot: false
   # Shows the duration of a leg below the leg in the metro itinerary summary
   showLegDurations: false
-  # Allows calorie counts to be hidden
-  displayCalories: true
   # The sort option to use by default
   # Available sort options: 'BEST', 'DURATION', 'ARRIVALTIME', 'WALKTIME', 'COST', 'DEPARTURETIME'
   # defaultSort: "BEST" # Default

lib/components/app/app-menu.tsx

@@ -16,6 +16,8 @@ import type { WrappedComponentProps } from 'react-intl'
 import * as callTakerActions from '../../actions/call-taker'
 import * as fieldTripActions from '../../actions/field-trip'
 import * as uiActions from '../../actions/ui'
+import { AppMenuItemConfig, LanguageConfig } from '../../util/config-types'
+import { AppReduxState } from '../../util/state-types'
 import { ComponentContext } from '../../util/contexts'
 import { getLanguageOptions } from '../../util/i18n'
 import { isModuleEnabled, Modules } from '../../util/config'
@@ -29,28 +31,27 @@ import PopupTriggerText from './popup-trigger-text'
 type MenuItem = {
   children?: MenuItem[]
   href?: string
-  iconType: string | JSX.Element
+  iconType?: string | JSX.Element
   iconUrl?: string
   id: string
   isSelected?: boolean
-  label: string | JSX.Element
+  label?: string | JSX.Element
   lang?: string
   onClick?: () => void
   skipLocales?: boolean
-  subMenuDivider: boolean
+  subMenuDivider?: boolean
 }
 
 type AppMenuProps = {
   activeLocale: string
   callTakerEnabled?: boolean
-  extraMenuItems?: MenuItem[]
+  extraMenuItems?: AppMenuItemConfig[]
   fieldTripEnabled?: boolean
-  // Typescript TODO language and language options based on configLanguage.
-  language: Record<string, any> | null
+  language?: LanguageConfig
   languageOptions: Record<string, any> | null
   location: { search: string }
   mailablesEnabled?: boolean
-  popupTarget: string
+  popupTarget?: string
   reactRouterConfig?: { basename: string }
   resetAndToggleCallHistory?: () => void
   resetAndToggleFieldTrips?: () => void
@@ -89,7 +90,7 @@ class AppMenu extends Component<
 
   _triggerPopup = () => {
     const { popupTarget, setPopupContent } = this.props
-    setPopupContent(popupTarget)
+    if (popupTarget) setPopupContent(popupTarget)
   }
 
   _togglePane = () => {
@@ -288,10 +289,8 @@ class AppMenu extends Component<
 
 // connect to the redux store
 
-// FIXME: type otp config
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mapStateToProps = (state: Record<string, any>) => {
-  const { extraMenuItems, language } = state.otp.config
+const mapStateToProps = (state: AppReduxState) => {
+  const { extraMenuItems, language, popups } = state.otp.config
   return {
     activeLocale: state.otp.ui.locale,
     callTakerEnabled: isModuleEnabled(state, Modules.CALL_TAKER),
@@ -300,7 +299,7 @@ const mapStateToProps = (state: Record<string, any>) => {
     language,
     languageOptions: getLanguageOptions(language),
     mailablesEnabled: isModuleEnabled(state, Modules.MAILABLES),
-    popupTarget: state.otp.config?.popups?.launchers?.sidebarLink
+    popupTarget: popups?.launchers?.sidebarLink
   }
 }
 
@@ -324,7 +323,7 @@ export const Icon = ({
   iconType,
   iconUrl
 }: {
-  iconType: string
+  iconType?: string
   iconUrl?: string
 }): JSX.Element => {
   // FIXME: add types to context

lib/components/app/desktop-nav.tsx

@@ -6,6 +6,8 @@ import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
 import { accountLinks, getAuth0Config } from '../../util/auth'
+import { AppConfig } from '../../util/config-types'
+import { AppReduxState } from '../../util/state-types'
 import { DEFAULT_APP_TITLE } from '../../util/constants'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import NavLoginButtonAuth0 from '../user/nav-login-button-auth0'
@@ -40,7 +42,7 @@ const NavItemOnLargeScreens = styled(NavbarItem)`
 // Typscript TODO: otpConfig type
 export type Props = {
   locale: string
-  otpConfig: any
+  otpConfig: AppConfig
   popupTarget?: string
   setPopupContent: (url: string) => void
 }
@@ -143,12 +145,12 @@ const DesktopNav = ({
 }
 
 // connect to the redux store
-// Typescript TODO: state type
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppReduxState) => {
+  const { config: otpConfig } = state.otp
   return {
     locale: state.otp.ui.locale,
-    otpConfig: state.otp.config,
-    popupTarget: state.otp.config?.popups?.launchers?.toolbar
+    otpConfig,
+    popupTarget: otpConfig.popups?.launchers?.toolbar
   }
 }
 

lib/components/app/popup.tsx

@@ -5,15 +5,13 @@ import coreUtils from '@opentripplanner/core-utils'
 import React, { useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 
+import { PopupLauncher, PopupTargetConfig } from '../../util/config-types'
 import { StyledIconWrapper } from '../util/styledIcon'
 import PageTitle from '../util/page-title'
 
 type Props = {
-  content?: {
-    appendLocale?: boolean
-    id?: string
-    modal?: boolean
-    url?: string
+  content?: PopupTargetConfig & {
+    id?: PopupLauncher
   }
   hideModal: () => void
 }

lib/components/map/enhanced-stop-marker.tsx

@@ -13,13 +13,10 @@ import tinycolor from 'tinycolor2'
 
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
 import { ComponentContext } from '../../util/contexts'
-import {
-  ConfiguredTransitMode,
-  SetLocationHandler,
-  SetViewedStopHandler
-} from '../util/types'
 import { getModeFromStop, getStopName } from '../../util/viewer'
+import { SetLocationHandler, SetViewedStopHandler } from '../util/types'
 
 interface OwnProps {
   stop: Stop
@@ -166,12 +163,11 @@ class EnhancedStopMarker extends Component<Props> {
   }
 }
 
-const mapStateToProps = (state: any, ownProps: OwnProps) => {
+const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
   const { highlightedStop } = state.otp.ui
 
-  const transitModes = state.otp.config.modes.transitModes
   const modeColors: ModeColors = {}
-  transitModes.forEach((mode: ConfiguredTransitMode) => {
+  state.otp.config.modes.transitModes.forEach((mode) => {
     modeColors[mode.mode] = mode.color
   })
 

lib/components/narrative/connected-trip-details.js

@@ -20,10 +20,6 @@ const mapStateToProps = (state) => {
       mediumId: null,
       riderCategoryId: null
     },
-    displayCalories:
-      typeof itinerary?.displayCalories === 'boolean'
-        ? itinerary?.displayCalories
-        : undefined,
     fareDetailsLayout: itinerary?.fareDetailsLayout || undefined,
     fareKeyNameMap: itinerary?.fareKeyNameMap || {}
   }

lib/components/narrative/narrative-itineraries-header.tsx

@@ -9,7 +9,8 @@ import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
-import { sortOptions, SortOptionsType } from '../util/sortOptions'
+import { ItinerarySortOption } from '../../util/config-types'
+import { sortOptions } from '../util/sortOptions'
 import { SortResultsDropdown } from '../util/dropdown'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
@@ -53,7 +54,7 @@ export default function NarrativeItinerariesHeader({
   sort
 }: {
   customBatchUiBackground?: boolean
-  enabledSortModes: SortOptionsType[]
+  enabledSortModes: ItinerarySortOption[]
   errors: unknown[]
   itineraries: unknown[]
   itinerary: Itinerary

lib/components/user/notification-prefs-pane.tsx

@@ -5,7 +5,9 @@ import { ListGroup, ListGroupItem } from 'react-bootstrap'
 import React from 'react'
 import styled from 'styled-components'
 
+import { AppReduxState } from '../../util/state-types'
 import { GRAY_ON_WHITE } from '../util/colors'
+import { PhoneFormatConfig } from '../../util/config-types'
 
 import { FieldSet } from './styled'
 import { PhoneVerificationSubmitHandler } from './phone-verification-form'
@@ -19,9 +21,7 @@ interface Props extends FormikProps<User> {
   loggedInUser: User
   onRequestPhoneVerificationCode: PhoneCodeRequestHandler
   onSendPhoneVerificationCode: PhoneVerificationSubmitHandler
-  phoneFormatOptions: {
-    countryCode: string
-  }
+  phoneFormatOptions: PhoneFormatConfig
 }
 
 const allNotificationChannels = ['email', 'sms', 'push']
@@ -121,14 +121,17 @@ const NotificationPrefsPane = ({
   )
 }
 
-const mapStateToProps = (state: any) => {
-  const { supportsPushNotifications } =
-    state.otp.config.persistence?.otp_middleware || {}
+const mapStateToProps = (state: AppReduxState) => {
+  const { persistence, phoneFormatOptions } = state.otp.config
+  const supportsPushNotifications =
+    persistence && 'otp_middleware' in persistence
+      ? persistence.otp_middleware?.supportsPushNotifications
+      : false
   return {
     allowedNotificationChannels: supportsPushNotifications
       ? allNotificationChannels
       : emailAndSms,
-    phoneFormatOptions: state.otp.config.phoneFormatOptions
+    phoneFormatOptions
   }
 }
 

lib/components/user/phone-change-form.tsx

@@ -19,6 +19,7 @@ import React, {
 import styled from 'styled-components'
 
 import { InlineLoading } from '../narrative/loading'
+import { PhoneFormatConfig } from '../../util/config-types'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 
 import { ControlStrip, phoneFieldStyle } from './styled'
@@ -59,9 +60,7 @@ interface Props {
   isSubmitting: boolean
   onCancel: () => void
   onSubmit: PhoneChangeSubmitHandler
-  phoneFormatOptions: {
-    countryCode: string
-  }
+  phoneFormatOptions: PhoneFormatConfig
   showCancel?: boolean
 }
 

lib/components/user/phone-number-editor.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import { getAriaPhoneNumber } from '../../util/a11y'
 import { GRAY_ON_WHITE } from '../util/colors'
 import { isBlank } from '../../util/ui'
+import { PhoneFormatConfig } from '../../util/config-types'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 
 import { ControlStrip } from './styled'
@@ -40,9 +41,7 @@ interface Props {
   intl: IntlShape
   onRequestCode: PhoneCodeRequestHandler
   onSubmitCode: PhoneVerificationSubmitHandler
-  phoneFormatOptions: {
-    countryCode: string
-  }
+  phoneFormatOptions: PhoneFormatConfig
 }
 
 interface State {

lib/components/util/sortOptions.ts

@@ -1,29 +1,20 @@
 import { IntlShape } from 'react-intl'
 
-export type SortOptionsType =
-  | 'BEST'
-  | 'DURATION'
-  | 'ARRIVALTIME'
-  | 'DEPARTURETIME'
-  | 'WALKTIME'
-  | 'COST'
+import { ItinerarySortOption } from '../../util/config-types'
 
-type SortOptionEntry = { text: string; value: SortOptionsType }
+type SortOptionEntry = { text: string; value: ItinerarySortOption }
 
 export const sortOptions = (
   intl: IntlShape,
-  enabledOptions: SortOptionsType[] = [
+  enabledOptions: ItinerarySortOption[] = [
     'BEST',
     'DURATION',
     'ARRIVALTIME',
     'WALKTIME',
     'COST',
     'DEPARTURETIME'
   ]
-): {
-  text: string
-  value: string
-}[] => {
+): SortOptionEntry[] => {
   const sortOptionsArray: SortOptionEntry[] = [
     {
       text: intl.formatMessage({

lib/components/util/types.ts

@@ -105,10 +105,3 @@ export type SetViewedRouteHandler = (route?: ViewedRouteState) => void
 export type SetViewedStopHandler = (payload: { stopId: string } | null) => void
 
 export type SetLocationHandler = (payload: MapLocationActionArg) => void
-
-export interface ConfiguredTransitMode {
-  color?: string
-  label?: string
-  mode: string
-  showWheelchairSetting?: boolean
-}