code4recovery · joshreisner · Oct 10, 2022 · Oct 8, 2022 · Oct 9, 2022 · Oct 9, 2022
diff --git a/index.d.ts b/index.d.ts
@@ -10,19 +10,18 @@ interface TSMLReactConfig {
   conference_providers: Record<string, string>;
   defaults: {
     distance: string[];
-    meeting: string | null;
+    meeting?: string;
     mode: 'search' | 'location' | 'me';
     region: string[];
     search: string;
     time: TSMLReactConfig['times'];
     type: MeetingType[];
     view: 'table' | 'map';
     weekday: TSMLReactConfig['weekdays'];
-    duration: number;
   };
   distance_options: number[];
   distance_unit: 'mi' | 'km';
-  /** Email addresses for update meeting info button */
+  duration: number;
   feedback_emails: string[];
   filters: Array<'region' | 'distance' | 'weekday' | 'time' | 'type'>;
   flags: Array<'M' | 'W'> | undefined | null;
@@ -39,16 +38,11 @@ interface TSMLReactConfig {
     };
     style: string;
   };
-  /** What meetings to show based off a past start time in minutes */
   now_offset: number;
-  /** Input other than filters */
   params: Array<'search' | 'mode' | 'view' | 'meeting'>;
   show: {
-    /** Whether to show search + dropdowns + list/map */
     controls: boolean;
-    /** Show conference buttons in list or show labels */
     listButtons: boolean;
-    /** Whether to display the title h1 */
     title: boolean;
   };
   strings: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsml-ui",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -21,6 +21,7 @@
     "@types/luxon": "^3.0.1",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-infinite-scroller": "^1.2.3",
     "@types/react-test-renderer": "^17.0.1",
     "autoprefixer": "10.4.5",
     "jest": "^27.4.7",

diff --git a/public/app.js b/public/app.js
diff --git a/src/app.tsx b/src/app.tsx
@@ -8,10 +8,10 @@ const element = document.getElementById('tsml-ui');
 if (element) {
   ReactDOM.render(
     <TsmlUI
-      google={element.getAttribute('data-google')}
-      mapbox={element.getAttribute('data-mapbox')}
-      src={element.getAttribute('data-src')}
-      timezone={element.getAttribute('data-timezone')}
+      google={element.getAttribute('data-google') || undefined}
+      mapbox={element.getAttribute('data-mapbox') || undefined}
+      src={element.getAttribute('data-src') || undefined}
+      timezone={element.getAttribute('data-timezone') || undefined}
     />,
     element
   );

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -55,7 +55,7 @@ export default function Alert({ state, setState }: AlertProps) {
               }}
               text={strings.remove.replace(
                 '%filter%',
-                getIndexByKey(state.indexes[filter], value)?.name
+                getIndexByKey(state.indexes[filter], value)?.name ?? ''
               )}
               icon="close"
             />

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -136,106 +136,106 @@ export default function Controls({ state, setState, mapbox }: ControlsProps) {
     setState({ ...state });
   };
 
-  return (
-    !!Object.keys(state.meetings).length && (
-      <div className="controls d-print-none gx-3 gx-md-4 gy-3 row">
-        <div className="col-6 col-lg">
-          <div className="position-relative">
-            <form className="input-group" onSubmit={locationSearch}>
-              <input
+  return !Object.keys(state.meetings).length ? null : (
+    <div className="controls d-print-none gx-3 gx-md-4 gy-3 row">
+      <div className="col-6 col-lg">
+        <div className="position-relative">
+          <form className="input-group" onSubmit={locationSearch}>
+            <input
+              aria-label={strings.modes[state.input.mode]}
+              className="form-control"
+              disabled={state.input.mode === 'me'}
+              onChange={e => {
+                if (state.input.mode === 'search') {
+                  state.input.search = e.target.value;
+                  setState({ ...state });
+                } else {
+                  setSearch(e.target.value);
+                }
+              }}
+              placeholder={strings.modes[state.input.mode]}
+              ref={searchInput}
+              spellCheck="false"
+              type="search"
+              value={
+                state.input.mode === 'location' ? search : state.input.search
+              }
+            />
+            {modes.length > 1 && (
+              <button
+                id="mode"
                 aria-label={strings.modes[state.input.mode]}
-                className="form-control"
-                disabled={state.input.mode === 'me'}
-                onChange={e => {
-                  if (state.input.mode === 'search') {
-                    state.input.search = e.target.value;
-                    setState({ ...state });
-                  } else {
-                    setSearch(e.target.value);
-                  }
-                }}
-                placeholder={strings.modes[state.input.mode]}
-                ref={searchInput}
-                spellCheck="false"
-                type="search"
-                value={
-                  state.input.mode === 'location' ? search : state.input.search
+                className="btn btn-outline-secondary dropdown-toggle"
+                onClick={() =>
+                  setDropdown(dropdown === 'search' ? undefined : 'search')
                 }
+                type="button"
               />
-              {modes.length > 1 && (
-                <button
-                  id="mode"
-                  aria-label={strings.modes[state.input.mode]}
-                  className="btn btn-outline-secondary dropdown-toggle"
-                  onClick={() =>
-                    setDropdown(dropdown === 'search' ? undefined : 'search')
-                  }
-                  type="button"
-                />
-              )}
-            </form>
-            {modes.length > 1 && (
-              <div
-                className={cx('dropdown-menu dropdown-menu-end my-1', {
-                  show: dropdown === 'search',
-                })}
-              >
-                {modes.map(mode => (
-                  <a
-                    className={cx(
-                      'align-items-center dropdown-item d-flex justify-content-between',
-                      {
-                        'active bg-secondary text-white':
-                          state.input.mode === mode,
-                      }
-                    )}
-                    href={formatUrl({ ...state.input, mode })}
-                    key={mode}
-                    onClick={e => setMode(e, mode)}
-                  >
-                    {strings.modes[mode]}
-                  </a>
-                ))}
-              </div>
             )}
-          </div>
-        </div>
-        {filters.map((filter, index) => (
-          <div className="col-6 col-lg" key={filter}>
-            <Dropdown
-              defaultValue={strings[`${filter}_any` as keyof typeof strings]}
-              end={!canShowViews && index === filters.length - 1}
-              filter={filter}
-              open={dropdown === filter}
-              setDropdown={setDropdown}
-              state={state}
-              setState={setState}
-            />
-          </div>
-        ))}
-        {canShowViews && (
-          <div className="col-6 col-lg">
-            <div className="btn-group h-100 w-100" role="group">
-              {views.map(view => (
-                <button
-                  aria-label={strings.views[view]}
+          </form>
+          {modes.length > 1 && (
+            <div
+              className={cx('dropdown-menu dropdown-menu-end my-1', {
+                show: dropdown === 'search',
+              })}
+            >
+              {modes.map(mode => (
+                <a
                   className={cx(
-                    'align-items-center btn btn-outline-secondary d-flex justify-content-center w-100',
+                    'align-items-center dropdown-item d-flex justify-content-between',
                     {
-                      active: state.input.view === view,
+                      'active bg-secondary text-white':
+                        state.input.mode === mode,
                     }
                   )}
-                  key={view}
-                  onClick={e => setView(e, view)}
-                  type="button"
+                  href={formatUrl({ ...state.input, mode })}
+                  key={mode}
+                  onClick={e => setMode(e, mode)}
                 >
-                  <Icon icon={view} />
-                </button>
+                  {strings.modes[mode]}
+                </a>
               ))}
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    )
+      {filters.map((filter, index) => (
+        <div className="col-6 col-lg" key={filter}>
+          <Dropdown
+            defaultValue={
+              strings[`${filter}_any` as keyof typeof strings] as string
+            }
+            end={!canShowViews && index === filters.length - 1}
+            filter={filter}
+            open={dropdown === filter}
+            setDropdown={setDropdown}
+            state={state}
+            setState={setState}
+          />
+        </div>
+      ))}
+      {canShowViews && (
+        <div className="col-6 col-lg">
+          <div className="btn-group h-100 w-100" role="group">
+            {views.map(view => (
+              <button
+                aria-label={strings.views[view]}
+                className={cx(
+                  'align-items-center btn btn-outline-secondary d-flex justify-content-center w-100',
+                  {
+                    active: state.input.view === view,
+                  }
+                )}
+                key={view}
+                onClick={e => setView(e, view)}
+                type="button"
+              >
+                <Icon icon={view} />
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
   );
 }