fix search error

package.json

@@ -51,7 +51,7 @@
     "react-dom": "^18.2.0",
     "react-infinite-scroller": "^1.2.6",
     "react-leaflet": "^4.2.1",
-    "react-router-dom": "^7.5.2"
+    "react-router-dom": "^7.9.1"
   },
   "babel": {
     "plugins": [

public/app.js.LICENSE.txt

@@ -43,17 +43,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * react-router v7.5.3
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *

src/app.tsx

@@ -3,9 +3,12 @@ import {
   RouteObject,
   RouterProvider,
   createBrowserRouter,
+  useRouteError,
 } from 'react-router-dom';
 
+import { Global } from '@emotion/react';
 import { TsmlUI } from './components';
+import { errorCss, globalCss } from './styles';
 
 // locate element
 const element = document.getElementById('tsml-ui');
@@ -30,10 +33,24 @@ if (element) {
           timezone={element.getAttribute('data-timezone') || undefined}
         />
       ),
+      errorElement: <ErrorBoundary />,
     },
   ]);
 
   createRoot(element).render(<RouterProvider router={router} />);
 } else {
   console.warn('TSML UI could not find a div#tsml-ui element');
 }
+
+function ErrorBoundary() {
+  const error = useRouteError();
+  const message = error instanceof Error ? error.message : 'Unknown error';
+  return (
+    <>
+      <Global styles={globalCss} />
+      <div>
+        <div css={errorCss}>{message}</div>
+      </div>
+    </>
+  );
+}

src/components/Controls.tsx

@@ -2,7 +2,7 @@ import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react';
 
 import { useNavigate } from 'react-router-dom';
 
-import { analyticsEvent, formatUrl } from '../helpers';
+import { analyticsEvent, formatSearch, formatUrl } from '../helpers';
 import { useData, useInput, useSettings } from '../hooks';
 import {
   controlsCss,
@@ -152,7 +152,7 @@ export default function Controls() {
             aria-label={strings.modes[input.mode]}
             css={modes.length > 1 ? controlsInputFirstCss : controlsInputCss}
             disabled={input.mode === 'me'}
-            onChange={e => setSearch(e.target.value)}
+            onChange={e => setSearch(formatSearch(e.target.value))}
             placeholder={strings.modes[input.mode]}
             ref={searchInput}
             spellCheck="false"

src/helpers/format-search.ts

@@ -0,0 +1,3 @@
+// sanitize search input
+export const formatSearch = (search: string) =>
+  search.replace(/[.*+?^${}()|[\]\\]/g, '');

src/helpers/index.ts

@@ -6,6 +6,7 @@ export * from './format-conference-provider';
 export * from './format-directions-url';
 export * from './format-feedback-email';
 export * from './format-ics';
+export * from './format-search';
 export * from './format-slug';
 export * from './format-string';
 export * from './format-url';

src/helpers/load-meeting-data.ts

@@ -3,6 +3,7 @@ import { DateTime, WeekdayNumbers } from 'luxon';
 import { flattenAndSortIndexes } from './flatten-and-sort-indexes';
 import { formatAddress } from './format-address';
 import { formatConferenceProvider } from './format-conference-provider';
+import { formatSearch } from './format-search';
 import { formatSlug } from './format-slug';
 import { states } from './states';
 import { streamlineRegionsIndex } from './streamline-regions-index';
@@ -425,21 +426,23 @@ export function loadMeetingData(
         : undefined;
 
     // build search string
-    const search = [
-      district,
-      formatted_address,
-      group,
-      group_notes,
-      location,
-      location_notes,
-      name,
-      notes,
-      regions,
-    ]
-      .flat()
-      .filter(e => e)
-      .join('\t')
-      .toLowerCase();
+    const search = formatSearch(
+      [
+        district,
+        formatted_address,
+        group,
+        group_notes,
+        location,
+        location_notes,
+        name,
+        notes,
+        regions,
+      ]
+        .flat()
+        .filter(e => e)
+        .join('\t')
+        .toLowerCase()
+    );
 
     meetings[slug] = {
       address,

src/hooks/filter.tsx

@@ -77,7 +77,6 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
     if (input.mode === 'search') {
       if (input.search) {
         const orTerms = input.search
-          .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
           .replaceAll(' OR ', '|')
           .toLowerCase()
           .split('|')

src/hooks/input.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { formatString } from '../helpers';
+import { formatSearch, formatString } from '../helpers';
 import { useError } from './error';
 import { defaults, useSettings } from './settings';
 
@@ -59,7 +59,7 @@ export const InputProvider = ({ children }: PropsWithChildren) => {
         ? 'me'
         : 'search';
     const view = searchParams.get('view') === 'map' ? 'map' : 'table';
-    const search = searchParams.get('search')?.toString() ?? '';
+    const search = formatSearch(searchParams.get('search')?.toString() ?? '');
     const region = searchParams.has('region')
       ? `${searchParams.get('region')}`.split('/')
       : [];

test/__tests__/format-search.spec.ts

@@ -0,0 +1,10 @@
+import { formatSearch } from '../../src/helpers/format-search';
+
+describe('formatSearch', () => {
+  it('should format search strings correctly', () => {
+    expect(formatSearch('Open Meeting')).toBe('Open Meeting');
+    expect(formatSearch('Open | Meeting')).toBe('Open  Meeting');
+    expect(formatSearch('Open * \\ Meeting')).toBe('Open   Meeting');
+    expect(formatSearch('')).toBe('');
+  });
+});