code4recovery · joshreisner · Sep 8, 2022 · Sep 8, 2022
diff --git a/index.d.ts b/index.d.ts
@@ -7,7 +7,6 @@ interface TSMLReactConfig {
   columns: Array<
     'time' | 'distance' | 'name' | 'location_group' | 'address' | 'region'
   >;
-  timezone: string;
   conference_providers: Record<string, string>;
   defaults: {
     distance: string[];

diff --git a/public/app.js b/public/app.js
diff --git a/public/index.html b/public/index.html
@@ -48,17 +48,16 @@ <h2 class="h4">Custom JSON feed</h2>
               <a href="https://github.com/code4recovery/spec" target="_blank"
                 >Meeting Guide-spec JSON feed</a
               >, say, from a custom database, you can plug that info in to the
-              format below. To enable maps, add a
+              format below. If your data has location data, add a
               <a href="https://www.mapbox.com/" target="_blank"
                 >Mapbox API access token</a
-              >
-              (or remove that parameter). Be sure to add a
+              > to enable maps (or remove that parameter). To specify a default timezone for your location, set a 
               <a
                 href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones"
                 target="_blank"
                 >proper time zone</a
-              >
-              for your location.
+              > in the <code>data-timezone</code> parameter. Or, if you remove it, meeting times will 
+              be translated into the user's timezone.
             </p>
             <pre class="rounded bg-dark text-light p-3 overflow-hidden">
 &lt;div

diff --git a/public/tests/timezones.html b/public/tests/timezones.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+  </head>
+  <div
+    id="tsml-ui"
+    data-src="https://docs.google.com/spreadsheets/d/1ILXvx4P0YoceEYiLL-TghfpaQPnyESWHnbKqvn-eQbk/edit#gid=0"
+    data-google="AIzaSyCS9M8Dqk5cMFqA7xvUrQEzT1u5IvcbT7c"
+  ></div>
+  <script src="/app.js" async></script>
+</html>
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,26 +3,16 @@ import ReactDOM from 'react-dom';
 import { TsmlUI } from './components';
 
 //locate element
-let element = document.getElementById('tsml-ui');
-
-//legacy support, can remove once sites have had a chance to migrate (implemented Jul 1 2021)
-if (!element) {
-  [element] = document.getElementsByTagName(
-    'meetings'
-  ) as unknown as HTMLElement[];
-}
+const element = document.getElementById('tsml-ui');
 
 if (element) {
   ReactDOM.render(
     <TsmlUI
       {...{
-        json: element.getAttribute('data-src') || element.getAttribute('src'),
-        mapbox:
-          element.getAttribute('data-mapbox') || element.getAttribute('mapbox'),
-        google:
-          element.getAttribute('data-google') || element.getAttribute('google'),
-        timezone:
-          element.getAttribute('data-timezone') || tsml_react_config?.timezone,
+        json: element.getAttribute('data-src'),
+        mapbox: element.getAttribute('data-mapbox'),
+        google: element.getAttribute('data-google'),
+        timezone: element.getAttribute('data-timezone'),
       }}
     />,
     element

diff --git a/src/helpers/data/load-meeting-data.js b/src/helpers/data/load-meeting-data.js
@@ -86,13 +86,11 @@ export function loadMeetingData(data, capabilities, timezone) {
   data = flattenDays(data);
 
   //loop through each entry
-  data.forEach((meeting, index) => {
+  data.forEach(meeting => {
     //strip out extra fields not in the spec
     Object.keys(meeting)
       .filter(key => !spec_properties.includes(key))
-      .forEach(key => {
-        delete meeting[key];
-      });
+      .forEach(key => delete meeting[key]);
 
     //slug is required
     if (!meeting.slug) {
@@ -108,6 +106,12 @@ export function loadMeetingData(data, capabilities, timezone) {
       return;
     }
 
+    //either tz setting or meeting tz is required
+    if (!timezone && !meeting.timezone) {
+      console.warn(`TSML no timezone: ${meeting.edit_url}`);
+      return;
+    }
+
     //meeting name is required
     if (!meeting.name) {
       meeting.name = strings.unnamed_meeting;
@@ -116,7 +120,7 @@ export function loadMeetingData(data, capabilities, timezone) {
     //conference provider
     meeting.conference_provider = meeting.conference_url
       ? formatConferenceProvider(meeting.conference_url)
-      : null;
+      : undefined;
 
     if (meeting.conference_url && !meeting.conference_provider) {
       console.warn(
@@ -293,6 +297,14 @@ export function loadMeetingData(data, capabilities, timezone) {
         { zone: meeting.timezone }
       );
 
+      //check valid start time
+      if (!meeting.start.isValid) {
+        console.warn(
+          `TSML UI invalid start time (${meeting.start.invalid.explanation}): ${meeting.edit_url}`
+        );
+        return;
+      }
+
       if (meeting.end_time) {
         const endTimeParts = meeting.end_time
           .split(':')
@@ -302,6 +314,14 @@ export function loadMeetingData(data, capabilities, timezone) {
           { zone: meeting.timezone }
         );
 
+        //check valid end time
+        if (!meeting.end.isValid) {
+          console.warn(
+            `TSML UI invalid end time (${meeting.end.invalid.explanation}): ${meeting.edit_url}`
+          );
+          return;
+        }
+
         const duration = meeting.end
           .diff(meeting.start, 'minutes')
           .toObject().minutes;
@@ -312,6 +332,21 @@ export function loadMeetingData(data, capabilities, timezone) {
         }
       }
 
+      //normalize timezones
+      if (timezone) {
+        if (meeting.timezone !== timezone) {
+          meeting.start = meeting.start.setZone(timezone);
+          if (meeting.end) {
+            meeting.end = meeting.end.setZone(timezone);
+          }
+        }
+      } else {
+        meeting.start = meeting.start.setZone('local');
+        if (meeting.end) {
+          meeting.end = meeting.end.setZone('local');
+        }
+      }
+
       //build time index (can be multiple)
       if (meeting.isActive) {
         //time differences for sorting

diff --git a/src/helpers/data/translate-google-sheet.js b/src/helpers/data/translate-google-sheet.js
@@ -53,9 +53,6 @@ export function translateGoogleSheet(data, sheetId) {
       }
     }
 
-    //types
-    meeting.types = meeting.types.split(',').map(e => e.trim());
-
     //edit url link
     meeting.edit_url = `https://docs.google.com/spreadsheets/d/${sheetId}/edit#gid=0&range=${
       index + 2

diff --git a/src/helpers/settings.ts b/src/helpers/settings.ts
@@ -76,7 +76,6 @@ const defaults: TSMLReactConfig = {
     fr: fr,
   },
   times: ['morning', 'midday', 'evening', 'night'],
-  timezone: '',
   weekdays: [
     'sunday',
     'monday',
@@ -101,12 +100,12 @@ if (!Array.isArray(settings.flags)) {
 //columns can be specified to override the default
 if (
   typeof tsml_react_config === 'object' &&
-  Array.isArray(tsml_react_config?.columns)
+  Array.isArray(tsml_react_config.columns)
 ) {
   settings.columns = tsml_react_config.columns;
 }
 
-const preferredLanguage = navigator.language.substr(0, 2) as Lang;
+const preferredLanguage = navigator.language.substring(0, 2) as Lang;
 
 const language = Object.keys(settings.strings).includes(preferredLanguage)
   ? preferredLanguage