Vehicle rental overlay graphql migration

lib/actions/api.js

@@ -317,50 +317,19 @@ export function parkAndRideQuery(
 
 // bike rental station query
 
-export const bikeRentalError = createAction('BIKE_RENTAL_ERROR')
-export const bikeRentalResponse = createAction('BIKE_RENTAL_RESPONSE')
-
-export function bikeRentalQuery(
-  params,
-  responseAction = bikeRentalResponse,
-  errorAction = bikeRentalError,
-  options = {}
-) {
-  const paramsString = qs.stringify(params)
-  const endpoint = `bike_rental${paramsString ? `?${paramsString}` : ''}`
-  return createQueryAction(endpoint, responseAction, errorAction, options)
+export function bikeRentalQuery() {
+  return executeOTPAction('findBikeRentalStations')
 }
 
 // Car rental (e.g. car2go) locations lookup query
 
-export const carRentalResponse = createAction('CAR_RENTAL_RESPONSE')
-export const carRentalError = createAction('CAR_RENTAL_ERROR')
-
-export function carRentalQuery(params) {
-  return createQueryAction('car_rental', carRentalResponse, carRentalError)
+export function carRentalQuery() {
+  return executeOTPAction('findCarRentalStations')
 }
 
-// Vehicle rental locations lookup query. For now, there are 3 separate
-// "vehicle" rental endpoints - 1 for cars, 1 for bicycle rentals and another
-// for micromobility. In the future, the hope is to consolidate these 3
-// endpoints into one.
-
-export const vehicleRentalResponse = createAction('VEHICLE_RENTAL_RESPONSE')
-export const vehicleRentalError = createAction('VEHICLE_RENTAL_ERROR')
-
-export function vehicleRentalQuery(
-  params,
-  responseAction = vehicleRentalResponse,
-  errorAction = vehicleRentalError,
-  options = {}
-) {
-  return executeOTPAction(
-    'vehicleRentalQuery',
-    params,
-    responseAction,
-    errorAction,
-    options
-  )
+// Free-floating rental vehicles lookup query
+export function rentalVehicleQuery() {
+  return executeOTPAction('findRentalVehicles')
 }
 
 // Nearby view lookup query

lib/actions/apiV2.js

@@ -182,60 +182,6 @@ const findTrip = (params) =>
     }
   )
 
-export const vehicleRentalQuery = (
-  params,
-  responseAction,
-  errorAction,
-  options
-) =>
-  // TODO: ErrorsByNetwork is missing
-  createGraphQLQueryAction(
-    `{
-    rentalVehicles {
-      vehicleId
-      id
-      name
-      lat
-      lon
-      allowPickupNow
-      vehicleType {
-        formFactor
-      }
-      network
-    }
-  }
-  `,
-    {},
-    responseAction,
-    errorAction,
-    {
-      noThrottle: true,
-      postprocess: (payload, dispatch) => {
-        if (payload.errors) {
-          return errorAction(payload.errors)
-        }
-      },
-      // TODO: most of this rewrites the OTP2 response to match OTP1.
-      // we should re-write the rest of the UI to match OTP's behavior instead
-      rewritePayload: (payload) => {
-        return {
-          stations: payload?.data?.rentalVehicles?.map((vehicle) => {
-            return {
-              allowPickup: vehicle.allowPickupNow,
-              id: vehicle.vehicleId,
-              isFloatingBike: vehicle?.vehicleType?.formFactor === 'BICYCLE',
-              isFloatingVehicle: vehicle?.vehicleType?.formFactor === 'SCOOTER',
-              name: vehicle.name,
-              networks: [vehicle.network],
-              x: vehicle.lon,
-              y: vehicle.lat
-            }
-          })
-        }
-      }
-    }
-  )
-
 // TODO: numberOfDepartures needs to come from config!
 const stopTimeGraphQLQuery = `
 stopTimes: stoptimesForPatterns(numberOfDepartures: 3) {
@@ -685,6 +631,127 @@ const getVehiclePositionsForRoute = (routeId) =>
     )
   }
 
+const vehicleRentalStationsQuery = `
+        query VehicleRentalStations {
+          vehicleRentalStations {
+            id
+            name
+            lat
+            lon
+            allowDropoff
+            allowPickup
+            rentalNetwork {
+			        networkId
+            }
+            availableVehicles {
+              total
+              byType {
+                vehicleType {
+                  formFactor
+                }
+              }
+            }
+            availableSpaces {
+              total
+              byType {
+                vehicleType {
+                  formFactor
+                }
+              }
+            }
+            realtime
+          }
+        }`
+
+const vehicleRentalStationFilter = (formFactor) => (station) =>
+  (station.availableVehicles &&
+    station.availableVehicles.byType.some(
+      (av) => av.vehicleType.formFactor === formFactor
+    )) ||
+  (station.availableSpaces &&
+    station.availableSpaces.byType.some(
+      (as) => as.vehicleType.formFactor === formFactor
+    ))
+
+const bikeRentalError = createAction('BIKE_RENTAL_ERROR')
+const bikeRentalResponse = createAction('BIKE_RENTAL_RESPONSE')
+
+export function findBikeRentalStations() {
+  return function (dispatch) {
+    dispatch(
+      createGraphQLQueryAction(
+        vehicleRentalStationsQuery,
+        {},
+        bikeRentalResponse,
+        bikeRentalError,
+        {
+          rewritePayload: (payload) =>
+            payload.data.vehicleRentalStations.filter(
+              vehicleRentalStationFilter('BICYCLE')
+            )
+        }
+      )
+    )
+  }
+}
+
+export const carRentalResponse = createAction('CAR_RENTAL_RESPONSE')
+export const carRentalError = createAction('CAR_RENTAL_ERROR')
+
+export function findCarRentalStations() {
+  return function (dispatch) {
+    dispatch(
+      createGraphQLQueryAction(
+        vehicleRentalStationsQuery,
+        {},
+        carRentalResponse,
+        carRentalError,
+        {
+          rewritePayload: (payload) =>
+            payload.data.vehicleRentalStations.filter(
+              vehicleRentalStationFilter('CAR')
+            )
+        }
+      )
+    )
+  }
+}
+
+const rentalVehiclesQuery = `
+        query RentalVehicles {
+          rentalVehicles {
+            allowPickupNow
+            id
+            lat
+            lon
+            name
+            operative
+            rentalNetwork {
+              networkId
+            }
+            vehicleType {
+              formFactor
+            }
+          }
+        }`
+
+const vehicleRentalResponse = createAction('VEHICLE_RENTAL_RESPONSE')
+const vehicleRentalError = createAction('VEHICLE_RENTAL_ERROR')
+
+export function findRentalVehicles() {
+  return function (dispatch) {
+    dispatch(
+      createGraphQLQueryAction(
+        rentalVehiclesQuery,
+        {},
+        vehicleRentalResponse,
+        vehicleRentalError,
+        {}
+      )
+    )
+  }
+}
+
 export const findRoute = (params) =>
   function (dispatch, getState) {
     const { routeId } = params
@@ -1324,14 +1391,16 @@ const retrieveServiceTimeRangeIfNeeded = () =>
 
 export default {
   fetchNearby,
+  findBikeRentalStations,
+  findCarRentalStations,
   findPatternsForRoute,
+  findRentalVehicles,
   findRoute,
   findRoutes,
   findStopsWithinBBox,
   findStopTimesForStop,
   findTrip,
   getVehiclePositionsForRoute,
   retrieveServiceTimeRangeIfNeeded,
-  routingQuery,
-  vehicleRentalQuery
+  routingQuery
 }

lib/components/app/responsive-webapp.js

@@ -5,13 +5,13 @@ import { Col, Grid, Row } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import { createHashHistory } from 'history'
-import { getFitBoundsPadding } from '@opentripplanner/base-map/lib/util'
 import { injectIntl, IntlProvider } from 'react-intl'
-import { MapProvider } from 'react-map-gl'
+import { MapProvider } from 'react-map-gl/maplibre'
 import { QueryParamProvider } from 'use-query-params'
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'
 import { Route, Switch, withRouter } from 'react-router'
 import { Toaster } from 'react-hot-toast'
+import { util } from '@opentripplanner/base-map'
 import coreUtils from '@opentripplanner/core-utils'
 import isEqual from 'lodash.isequal'
 import PropTypes from 'prop-types'
@@ -107,11 +107,14 @@ class ResponsiveWebapp extends Component {
       autoFly !== false &&
       activeItinerary === null
     ) {
-      if (query.from && query.to) {
-        map?.fitBounds([query.from, query.to], {
-          duration: 600,
-          padding: getFitBoundsPadding(map, 0.2)
-        })
+      if (
+        query.from &&
+        query.to &&
+        query.from !== prevProps.query.from &&
+        query.to !== prevProps.query.to &&
+        map
+      ) {
+        util.fitMapToPoints(map, query.from, query.to, 0.2, 600)
       } else if (query.from && !query.to) {
         setMapCenter(map, query.from)
       } else if (query.to && !query.from) {