Distance Refactor

index.d.ts

@@ -23,6 +23,7 @@ interface TSMLReactConfig {
     view: 'table' | 'map';
     weekday: TSMLReactConfig['weekdays'];
   };
+  distance_options: number[];
   distance_unit: 'mi' | 'km';
   /** Email addresses for update meeting info button */
   feedback_emails: string[];

src/components/Controls.jsx

@@ -113,10 +113,11 @@ export default function Controls({ state, setState, mapbox }) {
       },
       input: {
         ...state.input,
-        search: '',
-        mode: mode,
+        distance: [],
         latitude: null,
         longitude: null,
+        mode: mode,
+        search: '',
       },
     });
   };

src/components/Map.jsx

@@ -43,13 +43,13 @@ export default function Map({
 
   //manage classes
   useEffect(() => {
-    if (!state.input.meeting) {
+    if (!state.input?.meeting) {
       document.body.classList.add('tsml-ui-map');
     }
     return () => {
       document.body.classList.remove('tsml-ui-map');
     };
-  }, [state.input.meeting]);
+  }, [state.input?.meeting]);
 
   //reset bounds and locations when filteredSlugs changes
   useEffect(() => {

src/components/Title.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { getIndexByKey, strings } from '../helpers';
 
-export default function Title({ state }) {
+export default function Title({ state: { indexes, input } }) {
   //loading
-  if (!state.indexes || !state.input) return null;
+  if (!indexes || !input) return null;
 
   //build title from strings.title
   const parts = [];
@@ -14,23 +14,23 @@ export default function Title({ state }) {
       parts.push(strings.meetings);
     } else if (
       key === 'search_with' &&
-      state.input.mode === 'search' &&
-      state.input.search
+      input.mode === 'search' &&
+      input.search
     ) {
       parts.push(
-        strings.title.search_with.replace('%search%', `‘${state.input.search}’`)
+        strings.title.search_with.replace('%search%', `‘${input.search}’`)
       );
     } else if (
       key === 'search_near' &&
-      state.input.mode === 'location' &&
-      state.input.search
+      input.mode === 'location' &&
+      input.search
     ) {
       parts.push(
-        strings.title.search_near.replace('%search%', `‘${state.input.search}’`)
+        strings.title.search_near.replace('%search%', `‘${input.search}’`)
       );
-    } else if (state.indexes[key] && state.input[key]?.length) {
-      const value = state.input[key]
-        .map(value => getIndexByKey(state.indexes[key], value)?.name)
+    } else if (indexes[key] && input[key]?.length) {
+      const value = input[key]
+        .map(value => getIndexByKey(indexes[key], value)?.name)
         .join(' + ');
       parts.push(strings.title[key].replace(`%${key}%`, value));
     }

src/components/TsmlUI.jsx

@@ -9,8 +9,6 @@ import {
   filterMeetingData,
   getQueryString,
   loadMeetingData,
-  setMinutesNow,
-  translateNoCodeAPI,
   setQueryString,
   settings,
 } from '../helpers';
@@ -40,6 +38,7 @@ export default function TsmlUI({ json, mapbox, timezone }) {
     },
     loading: true,
     meetings: [],
+    ready: false,
   });
 
   //enable forward & back buttons
@@ -78,15 +77,12 @@ export default function TsmlUI({ json, mapbox, timezone }) {
     fetch(json)
       .then(result => result.json())
       .then(result => {
-        if (json?.includes('nocodeapi.com')) {
-          result = translateNoCodeAPI(result);
-        }
-
         if (!Array.isArray(result) || !result.length) {
           return setState({
             ...state,
             error: 'bad_data',
             loading: false,
+            ready: true,
           });
         }
 
@@ -96,13 +92,18 @@ export default function TsmlUI({ json, mapbox, timezone }) {
           timezone
         );
 
+        const waitingForGeo =
+          (!input.latitude || !input.longitude) &&
+          ((input.mode === 'location' && input.search) || input.mode === 'me');
+
         setState({
           ...state,
           capabilities: capabilities,
           indexes: indexes,
-          meetings: meetings,
-          loading: false,
           input: input,
+          loading: false,
+          meetings: meetings,
+          ready: !waitingForGeo,
         });
       })
       .catch(error => {
@@ -113,22 +114,14 @@ export default function TsmlUI({ json, mapbox, timezone }) {
           ...state,
           error: json ? 'bad_data' : 'no_data_src',
           loading: false,
+          ready: true,
         });
       });
-
-    return (
-      <div className="tsml-ui">
-        <Loading />
-      </div>
-    );
   }
 
   //apply input changes to query string
   setQueryString(state.input);
 
-  //update time for sorting
-  state.meetings = setMinutesNow(state.meetings);
-
   //filter data
   const [filteredSlugs, inProgress] = filterMeetingData(
     state,
@@ -144,7 +137,11 @@ export default function TsmlUI({ json, mapbox, timezone }) {
     state.error = 'not_found';
   }
 
-  return (
+  return !state.ready ? (
+    <div className="tsml-ui">
+      <Loading />
+    </div>
+  ) : (
     <div className="tsml-ui">
       <div className="container-fluid d-flex flex-column py-3">
         {state.input.meeting && state.input.meeting in state.meetings ? (

src/helpers/data/calculate-distances.js

@@ -12,6 +12,13 @@ export function calculateDistances(
 ) {
   //build new index and meetings array
   const distances = {};
+  settings.distance_options.forEach(distance => {
+    distances[distance] = {
+      key: distance.toString(),
+      name: `${distance} ${settings.distance_unit}`,
+      slugs: [],
+    };
+  });
 
   //loop through and update or clear distances, and rebuild index
   filteredSlugs.forEach(slug => {
@@ -23,15 +30,8 @@ export function calculateDistances(
       ),
     };
 
-    [1, 2, 5, 10, 15, 25].forEach(distance => {
+    settings.distance_options.forEach(distance => {
       if (state.meetings[slug].distance <= distance) {
-        if (!distances.hasOwnProperty(distance)) {
-          distances[distance] = {
-            key: distance.toString(),
-            name: `${distance} ${settings.distance_unit}`,
-            slugs: [],
-          };
-        }
         distances[distance].slugs.push(slug);
       }
     });
@@ -57,5 +57,6 @@ export function calculateDistances(
       latitude: parseFloat(latitude.toFixed(5)),
       longitude: parseFloat(longitude.toFixed(5)),
     },
+    ready: true,
   });
 }