adjust input validation timing (code4recovery#474)

Author: joshreisner

index.d.ts

@@ -5,6 +5,8 @@ type MapMarker = {
   height: number;
   width: number;
 };
+type Mode = 'search' | 'location' | 'me';
+type View = 'table' | 'map';
 
 interface TSMLReactConfig {
   cache: boolean;
@@ -14,12 +16,12 @@ interface TSMLReactConfig {
   defaults: {
     distance?: number;
     meeting?: string;
-    mode: 'search' | 'location' | 'me';
+    mode: Mode;
     region: string[];
     search: string;
     time: TSMLReactConfig['times'];
     type: string[];
-    view: 'table' | 'map';
+    view: View;
     weekday: TSMLReactConfig['weekdays'];
   };
   distance_default: number;
@@ -46,6 +48,7 @@ interface TSMLReactConfig {
       url: string;
     };
   };
+  modes: Array<Mode>;
   now_offset: number;
   params: Array<'search' | 'mode' | 'view' | 'meeting'>;
   show: {
@@ -56,6 +59,7 @@ interface TSMLReactConfig {
     [lang in Lang]: Translation;
   };
   times: Array<'morning' | 'midday' | 'evening' | 'night' | 'appointment'>;
+  views: Array<View>;
   weekdays: string[];
 }
 

public/app.js

@@ -28,8 +28,7 @@ export default function Controls() {
   const searchInput = useRef<HTMLInputElement>(null);
 
   // get available search options based on capabilities
-  const allModes = ['search', 'location', 'me'] as const;
-  const modes = allModes
+  const modes = settings.modes
     .filter(mode => mode !== 'location' || capabilities.coordinates)
     .filter(
       mode =>
@@ -42,8 +41,7 @@ export default function Controls() {
     .filter(filter => filter !== 'region' || input.mode === 'search');
 
   // get available views
-  const allViews = ['table', 'map'] as const;
-  const views = allViews.filter(
+  const views = settings.views.filter(
     view => view !== 'map' || capabilities.coordinates
   );
 

src/components/Controls.tsx

@@ -16,3 +16,4 @@ export * from './load-meeting-data';
 export * from './streamline-regions-index';
 export * from './translate-google-sheet';
 export * from './user-agent';
+export * from './validate-input';

src/helpers/index.ts

@@ -0,0 +1,60 @@
+import { defaults } from '../hooks/settings';
+import { formatSearch } from './format-search';
+
+export const validateInput = (
+  params: URLSearchParams
+): TSMLReactConfig['defaults'] => {
+  const { defaults: defaultInput } = defaults;
+
+  const modeParam = params.get('mode');
+  const mode = isMode(modeParam) ? modeParam : defaultInput.mode;
+
+  const viewParam = params.get('view');
+  const view = isView(viewParam) ? viewParam : defaultInput.view;
+
+  const search = formatSearch(
+    params.get('search')?.toString() ?? defaultInput.search
+  );
+
+  const region = params.has('region')
+    ? `${params.get('region')}`.split('/')
+    : defaultInput.region;
+
+  const time = params.has('time')
+    ? (`${params.get('time')}`.split('/') as Array<
+        'morning' | 'midday' | 'evening' | 'night' | 'appointment'
+      >)
+    : defaultInput.time;
+
+  const weekday = params.has('weekday')
+    ? `${params.get('weekday')}`.split('/')
+    : defaultInput.weekday;
+
+  const type = params.has('type')
+    ? `${params.get('type')}`.split('/')
+    : defaultInput.type;
+
+  const meeting = params.get('meeting') ?? defaultInput.meeting;
+
+  const distance = params.has('distance')
+    ? parseInt(params.get('distance') ?? '')
+    : defaultInput.distance;
+
+  return {
+    distance,
+    meeting,
+    mode,
+    region,
+    search,
+    time,
+    type,
+    view,
+    weekday,
+  };
+};
+
+const isMode = (mode: string | null): mode is Mode =>
+  defaults.modes.includes(mode as Mode);
+
+const isView = (view: string | null): view is View =>
+  defaults.views.includes(view as View);

src/helpers/validate-input.ts

@@ -7,7 +7,7 @@ import {
 } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { formatSearch, formatString } from '../helpers';
+import { formatString, validateInput } from '../helpers';
 import { useError } from './error';
 import { defaults, useSettings } from './settings';
 
@@ -43,7 +43,7 @@ export const InputProvider = ({ children }: PropsWithChildren) => {
   });
 
   const [input, setInput] = useState<TSMLReactConfig['defaults']>(
-    defaults.defaults
+    validateInput(searchParams)
   );
 
   const [coordinates, setCoordinates] = useState<Coordinates>({
@@ -52,45 +52,7 @@ export const InputProvider = ({ children }: PropsWithChildren) => {
 
   // detect input from URL search params
   useEffect(() => {
-    const mode =
-      searchParams.get('mode') === 'location'
-        ? 'location'
-        : searchParams.get('mode') === 'me'
-        ? 'me'
-        : 'search';
-    const view = searchParams.get('view') === 'map' ? 'map' : 'table';
-    const search = formatSearch(searchParams.get('search')?.toString() ?? '');
-    const region = searchParams.has('region')
-      ? `${searchParams.get('region')}`.split('/')
-      : [];
-    const time = searchParams.has('time')
-      ? (`${searchParams.get('time')}`.split('/') as Array<
-          'morning' | 'midday' | 'evening' | 'night' | 'appointment'
-        >)
-      : [];
-    const weekday = searchParams.has('weekday')
-      ? `${searchParams.get('weekday')}`.split('/')
-      : [];
-    const type = searchParams.has('type')
-      ? `${searchParams.get('type')}`.split('/')
-      : [];
-    const meeting = searchParams.get('meeting') ?? undefined;
-    const distance = searchParams.has('distance')
-      ? parseInt(searchParams.get('distance') ?? '')
-      : undefined;
-
-    setInput(input => ({
-      ...input,
-      distance,
-      meeting,
-      mode,
-      region,
-      search,
-      time,
-      type,
-      view,
-      weekday,
-    }));
+    setInput(validateInput(searchParams));
   }, [searchParams]);
 
   // handle geocoding or geolocation requests

src/hooks/input.tsx

@@ -35,6 +35,7 @@ export const defaults: TSMLReactConfig = {
   },
   defaults: {
     distance: undefined,
+    meeting: undefined,
     mode: 'search',
     region: [],
     search: '',
@@ -86,6 +87,7 @@ export const defaults: TSMLReactConfig = {
       url: 'https://{s}s.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
     },
   },
+  modes: ['search', 'location', 'me'],
   now_offset: -10, // "now" includes meetings that started in the last 10 minutes
   params: ['search', 'mode', 'view', 'meeting'], //input other than filters
   show: {
@@ -103,6 +105,7 @@ export const defaults: TSMLReactConfig = {
     sv,
   },
   times: ['morning', 'midday', 'evening', 'night', 'appointment'],
+  views: ['table', 'map'],
   weekdays: [
     'sunday',
     'monday',