Refactor to use hooks

index.d.ts

@@ -11,9 +11,8 @@ interface TSMLReactConfig {
   calendar_enabled: boolean;
   columns: string[];
   conference_providers: Record<string, string>;
-  default_distance: string[];
   defaults: {
-    distance: string[];
+    distance?: number;
     meeting?: string;
     mode: 'search' | 'location' | 'me';
     region: string[];
@@ -23,11 +22,12 @@ interface TSMLReactConfig {
     view: 'table' | 'map';
     weekday: TSMLReactConfig['weekdays'];
   };
+  distance_default: number;
   distance_options: number[];
   distance_unit: 'mi' | 'km';
   duration: number;
   feedback_emails: string[];
-  filters: Array<'region' | 'distance' | 'weekday' | 'time' | 'type'>;
+  filters: Array<'region' | 'weekday' | 'time' | 'type'>;
   flags?: string[];
   in_person_types: string[];
   language: Lang;

public/tests/aasanjose.html

@@ -38,9 +38,13 @@
       var tsml_react_config = {
         feedback_emails: ['meetings@aasanjose.org'],
         map: {
+          tiles: {
+            attribution: `Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>`,
+            url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9zaHJlaXNuZXIiLCJhIjoiY2tvYXA0YnZxMGRldDJxbzdta25uNGphdiJ9.eay-UKgIT99ALmdw08xBPw',
+          },
           tiles_dark: {
-            attribution: `&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`,
-            url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
+            attribution: `Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>`,
+            url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9zaHJlaXNuZXIiLCJhIjoiY2tvYXA0YnZxMGRldDJxbzdta25uNGphdiJ9.eay-UKgIT99ALmdw08xBPw',
           },
         },
       };

src/components/Alert.tsx

@@ -1,42 +1,40 @@
-import { useSearchParams } from 'react-router-dom';
-
-import { formatString as i18n, getIndexByKey, useSettings } from '../helpers';
+import { getIndexByKey, formatString as i18n } from '../helpers';
+import { useData, useFilter, useInput, useSettings } from '../hooks';
 import { alertCss, errorCss } from '../styles';
 
 import Button from './Button';
 
-import type { State } from '../types';
-
-export default function Alert({ state }: { state: State }) {
-  const [searchParams, setSearchParams] = useSearchParams();
+export default function Alert() {
+  const { error, indexes } = useData();
+  const { alert } = useFilter();
+  const { input, setInput } = useInput();
   const { settings, strings } = useSettings();
-  return state.error ? (
-    <div css={errorCss}>{state.error}</div>
-  ) : state.alert ? (
+  return error ? (
+    <div css={errorCss}>{error}</div>
+  ) : alert ? (
     <>
-      <div css={alertCss}>{state.alert}</div>
-      {state.alert === strings.no_results && state.input.search && (
+      <div css={alertCss}>{alert}</div>
+      {alert === strings.no_results && input.search && (
         <Button
-          onClick={() => {
-            searchParams.delete('search');
-            setSearchParams(searchParams);
-          }}
-          text={i18n(strings.remove, { filter: `‘${state.input.search}’` })}
+          onClick={() => setInput(input => ({ ...input, search: '' }))}
+          text={i18n(strings.remove, { filter: input.search })}
           icon="close"
         />
       )}
-      {state.alert === strings.no_results &&
+      {alert === strings.no_results &&
         settings.filters.map(filter =>
-          state.input[filter].map(value => (
+          input[filter].map(value => (
             <Button
               key={value}
               icon="close"
               onClick={() => {
-                searchParams.delete(filter);
-                setSearchParams(searchParams);
+                setInput(input => ({
+                  ...input,
+                  [filter]: input[filter].filter(item => item !== value),
+                }));
               }}
               text={i18n(strings.remove, {
-                filter: getIndexByKey(state.indexes[filter], value)?.name,
+                filter: getIndexByKey(indexes[filter], value)?.name,
               })}
             />
           ))