Use only the vehicle types in the app config when fetching from the URL (#840)

Author: souyahia-monk

packages/common/src/apps/appStateProvider.tsx

@@ -1,6 +1,13 @@
 import { CaptureAppConfig, Sight, SteeringWheelPosition, VehicleType } from '@monkvision/types';
 import { sights } from '@monkvision/sights';
-import React, { PropsWithChildren, useCallback, useContext, useEffect, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useLoadingState, useObjectMemo } from '../hooks';
 import { MonkSearchParam, useMonkSearchParams } from './searchParams';
 import { MonkAppState, MonkAppStateContext } from './appState';
@@ -57,6 +64,14 @@ function getSights(
   });
 }
 
+function getAvailableVehicleTypes(config: CaptureAppConfig): VehicleType[] {
+  return (
+    config.enableSteeringWheelPosition
+      ? Object.keys(config.sights.left)
+      : Object.keys(config.sights)
+  ) as VehicleType[];
+}
+
 /**
  * A React context provider that declares the state for the common parameters used by Monk applications. The parameters
  * are described in the `MonkAppState` interface. Using options available in the App config (`config` prop),  this
@@ -77,7 +92,8 @@ export function MonkAppStateProvider({
   const [inspectionId, setInspectionId] = useState<string | null>(null);
   const [vehicleType, setVehicleType] = useState<VehicleType | null>(null);
   const [steeringWheel, setSteeringWheel] = useState<SteeringWheelPosition | null>(null);
-  const monkSearchParams = useMonkSearchParams();
+  const availableVehicleTypes = useMemo(() => getAvailableVehicleTypes(config), [config]);
+  const monkSearchParams = useMonkSearchParams({ availableVehicleTypes });
   useAppStateMonitoring({ authToken, inspectionId, vehicleType, steeringWheel });
   useAppStateAnalytics({ inspectionId });
 

packages/common/src/apps/searchParams.ts

@@ -72,12 +72,26 @@ function validateParamValue<T extends string>(
   return validValuesArray.includes(value) ? (value as T) : null;
 }
 
+/**
+ * Options accepted by the useMonkSearchParams hook.
+ */
+export interface UseMonkSearchParamsOptions {
+  /**
+   * The list of available vehicle types to allow.
+   *
+   * @default Object.values(VehicleType)
+   */
+  availableVehicleTypes?: VehicleType[];
+}
+
 /**
  * Custom hook used to return a getter function used to fetch the value of different MonkSearchParams.
  *
  * @see MonkSearchParam
  */
-export function useMonkSearchParams(): { get: MonkSearchParamsGetter } {
+export function useMonkSearchParams({ availableVehicleTypes }: UseMonkSearchParamsOptions = {}): {
+  get: MonkSearchParamsGetter;
+} {
   const searchParams = useSearchParams();
 
   const get = useCallback(
@@ -89,7 +103,7 @@ export function useMonkSearchParams(): { get: MonkSearchParamsGetter } {
         case MonkSearchParam.INSPECTION_ID:
           return value;
         case MonkSearchParam.VEHICLE_TYPE:
-          return validateParamValue(value, VehicleType);
+          return validateParamValue(value, availableVehicleTypes ?? VehicleType);
         case MonkSearchParam.STEERING_WHEEL:
           return validateParamValue(value, SteeringWheelPosition);
         case MonkSearchParam.LANGUAGE:

packages/common/test/apps/appStateProvider.test.tsx

@@ -19,6 +19,7 @@ import {
   MonkSearchParam,
   STORAGE_KEY_AUTH_TOKEN,
   useMonkAppState,
+  useMonkSearchParams,
 } from '../../src';
 
 let params: MonkAppState | null = null;
@@ -210,6 +211,23 @@ describe('MonkAppStateProvider', () => {
       unmount();
     });
 
+    it('should pass the available sights from the config to the useMonkSearchParams hook', () => {
+      const props = createProps();
+      const { unmount } = render(
+        <MonkAppStateProvider {...props}>
+          <TestComponent />
+        </MonkAppStateProvider>,
+      );
+
+      expect(useMonkSearchParams).toHaveBeenCalledWith(
+        expect.objectContaining({
+          availableVehicleTypes: expect.arrayContaining(Object.keys(props.config.sights)),
+        }),
+      );
+
+      unmount();
+    });
+
     describe('getCurrentSights function', () => {
       it('should return the proper sights when steering wheel is not enabled', () => {
         const props = createProps();
@@ -236,6 +254,10 @@ describe('MonkAppStateProvider', () => {
         props.config.fetchFromSearchParams = true;
         props.config.enableSteeringWheelPosition = true;
         (props.config as any).sights = {
+          [SteeringWheelPosition.LEFT]: {
+            [VehicleType.HATCHBACK]: ['test-sight-3', 'test-sight-4'],
+            [VehicleType.CUV]: ['test-sight-1', 'test-sight-2'],
+          },
           [SteeringWheelPosition.RIGHT]: {
             [VehicleType.HATCHBACK]: ['test-sight-1', 'test-sight-2'],
             [VehicleType.CUV]: ['test-sight-3', 'test-sight-4'],

packages/common/test/apps/searchParams.test.ts

@@ -1,4 +1,6 @@
 import { SteeringWheelPosition, VehicleType } from '@monkvision/types';
+import { renderHook } from '@testing-library/react-hooks';
+import { MonkSearchParam, useMonkSearchParams, useSearchParams, zlibDecompress } from '../../src';
 
 const zlibDecompressResult = 'zlibDecompress-result-test';
 
@@ -10,9 +12,6 @@ jest.mock('../../src/utils', () => ({
   zlibDecompress: jest.fn(() => zlibDecompressResult),
 }));
 
-import { renderHook } from '@testing-library/react-hooks';
-import { MonkSearchParam, useMonkSearchParams, zlibDecompress, useSearchParams } from '../../src';
-
 function mockSearchParams(searchParams: Partial<Record<MonkSearchParam, string>>) {
   const get = jest.fn((param) => searchParams[param as MonkSearchParam]);
   (useSearchParams as jest.Mock).mockImplementationOnce(() => ({ get }));
@@ -87,10 +86,23 @@ describe('MonkSearchParams utils', () => {
       unmount();
     });
 
+    it('should return a null vehicle type if the value found in the search params is not in the available vehicle types', () => {
+      mockSearchParams({ [MonkSearchParam.VEHICLE_TYPE]: VehicleType.VAN });
+      const { result, unmount } = renderHook(useMonkSearchParams, {
+        initialProps: { availableVehicleTypes: [VehicleType.HATCHBACK, VehicleType.CITY] },
+      });
+
+      expect(result.current.get(MonkSearchParam.VEHICLE_TYPE)).toBeNull();
+
+      unmount();
+    });
+
     it('should return the vehicle type if it is found in the search params', () => {
       const vehicleType = VehicleType.HATCHBACK;
       mockSearchParams({ [MonkSearchParam.VEHICLE_TYPE]: vehicleType });
-      const { result, unmount } = renderHook(useMonkSearchParams);
+      const { result, unmount } = renderHook(useMonkSearchParams, {
+        initialProps: { availableVehicleTypes: [vehicleType] },
+      });
 
       expect(result.current.get(MonkSearchParam.VEHICLE_TYPE)).toEqual(vehicleType);