14920598081

Committed 09 May 2025 03:12AM UTC coverage: 60.536% (-0.5%) from 61.057%

Build # 14920598081

Build Type

Pull #447

github

Committed by

web-flow

Commit Message

Merge 1f46fce2b into 9519f3f31

Pull Request Pull Request #447: Feat: Add support for OSM map if no mapbox key is provided

Run Details

530 of 968 branches covered (54.75%)

Branch coverage included in aggregate %.

4 of 10 new or added lines in 2 files covered. (40.0%)

108 existing lines in 7 files now uncovered.

668 of 1011 relevant lines covered (66.07%)

9.39 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.61

/src/components/Controls.tsx

import {
  Dispatch,
  SetStateAction,
  FormEvent,
  useEffect,
  useRef,
  useState,
  MouseEvent,
} from 'react';

import { useSearchParams } from 'react-router-dom';

import { analyticsEvent, useSettings } from '../helpers';
import {
  controlsCss,
  controlsGroupFirstCss,
  controlsGroupLastCss,
  controlsInputCss,
  controlsInputFirstCss,
  controlsInputSearchSubmitCss,
  controlsSearchDropdownCss,
  dropdownButtonLastCss,
  dropdownCss,
} from '../styles';

import Dropdown from './Dropdown';

import type { State } from '../types';

export default function Controls({
  state,
  setState,
  mapbox,
}: {
  state: State;
  setState: Dispatch<SetStateAction<State>>;
  mapbox?: string;
}) {
  const { settings, strings } = useSettings();
  const [dropdown, setDropdown] = useState<string>();
  const [search, setSearch] = useState(
    state.input.mode === 'location' ? state.input.search : ''
  );
  const [searchParams, setSearchParams] = useSearchParams();
  const searchInput = useRef<HTMLInputElement>(null);

  //get available search options based on capabilities
  const allModes = ['search', 'location', 'me'] as const;
  const modes = allModes
    .filter(
      mode => mode !== 'location' || state.capabilities.coordinates
    )
    .filter(
      mode =>
        mode !== 'me' ||
        (state.capabilities.coordinates && state.capabilities.geolocation)
    );

  //get available filters
  const filters = settings.filters
    .filter(filter => state.capabilities[filter])
    .filter(filter => filter !== 'region' || state.input.mode === 'search')
    .filter(filter => filter !== 'distance' || state.input.mode !== 'search');

  //get available views
  const allViews = ['table', 'map'] as const;
  const views = allViews.filter(
    view => view !== 'map' || state.capabilities.coordinates
  );

  //whether to show the views segmented button
  const canShowViews = views.length > 1;

  //add click listener for dropdowns (in lieu of including bootstrap js + jquery)
  useEffect(() => {
    document.body.addEventListener('click', closeDropdown);
    return () => {
      document.body.removeEventListener('click', closeDropdown);
    };
  }, [document]);

  //search effect
  useEffect(() => {
    const timer = setTimeout(() => {
      if (!state.input.search) return;
      analyticsEvent({
        category: 'search',
        action: state.input.mode,
        label: state.input.search,
      });
    }, 2000);
    return () => clearTimeout(timer);
  }, [state.input.search]);

  // update url params when search changes
  useEffect(() => {
    if (!searchInput.current) return;

    const { value } = searchInput.current;

    if (value === search) return;
    if (searchParams.get('search') === value) return;
    if (value) {
      searchParams.set('search', value);
    } else {
      searchParams.delete('search');
    }

    setSearchParams(searchParams);
  }, [searchInput.current?.value]);

  //close current dropdown (on body click)
  const closeDropdown = () => {
    setDropdown(undefined);
  };

  //near location search
  const locationSearch = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (state.input.mode !== 'location') return;

    setState({
      ...state,
      input: {
        ...state.input,
        latitude: undefined,
        longitude: undefined,
        search,
      },
    });

    if (search) {
      searchParams.set('search', search);
    } else {
      searchParams.delete('search');
    }

    setSearchParams(searchParams);
  };

  //set search mode dropdown and clear all distances
  const setMode = (e: MouseEvent, mode: 'search' | 'location' | 'me') => {
    e.preventDefault();

    Object.keys(state.meetings).forEach(slug => {
      state.meetings[slug].distance = undefined;
    });

    setSearch('');
    if (mode !== 'search') {
      searchParams.delete('search');
      searchParams.set('mode', mode);
    } else {
      searchParams.delete('mode');
    }

    //focus after waiting for disabled to clear
    setTimeout(() => searchInput.current?.focus(), 100);

    setState({
      ...state,
      capabilities: {
        ...state.capabilities,
        distance: false,
      },
      indexes: {
        ...state.indexes,
        distance: [],
      },
      input: {
        ...state.input,
        distance: [],
        latitude: undefined,
        longitude: undefined,
        mode: mode,
        search: '',
      },
    });

    setSearchParams(searchParams);
  };

  //toggle list/map view
  const setView = (e: MouseEvent, view: 'table' | 'map') => {
    e.preventDefault();

    if (view !== 'table') {
      searchParams.set('view', view);
    } else {
      searchParams.delete('view');
    }

    setState({ ...state, input: { ...state.input, view } });

    setSearchParams(searchParams);
  };

  return !Object.keys(state.meetings).length ? null : (
    <div css={controlsCss}>
      <form onSubmit={locationSearch} css={dropdownCss}>
        <fieldset role="group">
          <input
            aria-label={strings.modes[state.input.mode]}
            css={modes.length > 1 ? controlsInputFirstCss : controlsInputCss}
            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
            }
          />
          <input type="submit" hidden css={controlsInputSearchSubmitCss} />
          {modes.length > 1 && (
            <button
              aria-label={strings.modes[state.input.mode]}
              css={dropdownButtonLastCss}
              onClick={e => {
                setDropdown(dropdown === 'search' ? undefined : 'search');
                e.stopPropagation();
              }}
              type="button"
            />
          )}
        </fieldset>
        {modes.length > 1 && (
          <div
            css={controlsSearchDropdownCss}
            style={{
              display: dropdown === 'search' ? 'block' : 'none',
            }}
          >
            {modes.map(mode => (
              <div 
                className="tsml-dropdown__item"
                data-active={state.input.mode === mode}
                key={mode}
                >
                <button
                  className="tsml-dropdown__button"
                  onClick={e => setMode(e, mode)}
                >
                  {strings.modes[mode]}
                </button>
              </div>
            ))}
          </div>
        )}
      </form>
      {filters.map(filter => (
        <div key={filter}>
          <Dropdown
            defaultValue={
              strings[`${filter}_any` as keyof typeof strings] as string
            }
            filter={filter}
            open={dropdown === filter}
            setDropdown={setDropdown}
            state={state}
          />
        </div>
      ))}
      {canShowViews && (
        <div role="group">
          {views.map((view, index) => (
            <button
              css={index ? controlsGroupLastCss : controlsGroupFirstCss}
              data-active={state.input.view === view}
              key={view}
              onClick={e => setView(e, view)}
              type="button"
            >
              {strings.views[view]}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

1	import {
2	Dispatch,
3	SetStateAction,
4	FormEvent,
5	useEffect,
6	useRef,
7	useState,
8	MouseEvent,
9	} from 'react';
10
11	import { useSearchParams } from 'react-router-dom';
12
13	import { analyticsEvent, useSettings } from '../helpers';
14	import {
15	controlsCss,
16	controlsGroupFirstCss,
17	controlsGroupLastCss,
18	controlsInputCss,
19	controlsInputFirstCss,
20	controlsInputSearchSubmitCss,
21	controlsSearchDropdownCss,
22	dropdownButtonLastCss,
23	dropdownCss,
24	} from '../styles';
25
26	import Dropdown from './Dropdown';
27
28	import type { State } from '../types';
29
30	export default function Controls({
31	state,
32	setState,
33	mapbox,
34	}: {
35	state: State;
36	setState: Dispatch<SetStateAction<State>>;
37	mapbox?: string;
38	}) {
39	const { settings, strings } = useSettings();	14✔
40	const [dropdown, setDropdown] = useState<string>();	14✔
41	const [search, setSearch] = useState(	14✔
42	state.input.mode === 'location' ? state.input.search : ''	14✔
43	);
44	const [searchParams, setSearchParams] = useSearchParams();	14✔
45	const searchInput = useRef<HTMLInputElement>(null);	14✔
46
47	//get available search options based on capabilities
48	const allModes = ['search', 'location', 'me'] as const;	14✔
49	const modes = allModes	14✔
50	.filter(
51	mode => mode !== 'location' \|\| state.capabilities.coordinates	42✔
52	)
53	.filter(
54	mode =>
55	mode !== 'me' \|\|	41✔
56	(state.capabilities.coordinates && state.capabilities.geolocation)
57	);
58
59	//get available filters
60	const filters = settings.filters	14✔
61	.filter(filter => state.capabilities[filter])	70✔
62	.filter(filter => filter !== 'region' \|\| state.input.mode === 'search')	26✔
63	.filter(filter => filter !== 'distance' \|\| state.input.mode !== 'search');	19✔
64
65	//get available views
66	const allViews = ['table', 'map'] as const;	14✔
67	const views = allViews.filter(	14✔
68	view => view !== 'map' \|\| state.capabilities.coordinates	28✔
69	);
70
71	//whether to show the views segmented button
72	const canShowViews = views.length > 1;	14✔
73
74	//add click listener for dropdowns (in lieu of including bootstrap js + jquery)
75	useEffect(() => {	14✔
76	document.body.addEventListener('click', closeDropdown);	4✔
77	return () => {	4✔
78	document.body.removeEventListener('click', closeDropdown);	4✔
79	};
80	}, [document]);
81
82	//search effect
83	useEffect(() => {	14✔
84	const timer = setTimeout(() => {	4✔
85	if (!state.input.search) return;	2✔
86	analyticsEvent({	1✔
87	category: 'search',
88	action: state.input.mode,
89	label: state.input.search,
90	});
91	}, 2000);
92	return () => clearTimeout(timer);	4✔
93	}, [state.input.search]);
94
95	// update url params when search changes
96	useEffect(() => {	14✔
97	if (!searchInput.current) return;	6✔
98
99	const { value } = searchInput.current;	5✔
100
101	if (value === search) return;	5!
102	if (searchParams.get('search') === value) return;	×
103	if (value) {	×
104	searchParams.set('search', value);	×
105	} else {
106	searchParams.delete('search');	×
107	}
108
109	setSearchParams(searchParams);	×
110	}, [searchInput.current?.value]);
111
112	//close current dropdown (on body click)
113	const closeDropdown = () => {	14✔
114	setDropdown(undefined);	3✔
115	};
116
117	//near location search
118	const locationSearch = (e: FormEvent<HTMLFormElement>) => {	14✔
119	e.preventDefault();	2✔
120
121	if (state.input.mode !== 'location') return;	2✔
122
123	setState({	1✔
124	...state,
125	input: {
126	...state.input,
127	latitude: undefined,
128	longitude: undefined,
129	search,
130	},
131	});
132
133	if (search) {	1!
134	searchParams.set('search', search);	1✔
135	} else {
136	searchParams.delete('search');	×
137	}
138
139	setSearchParams(searchParams);	1✔
140	};
141
142	//set search mode dropdown and clear all distances
143	const setMode = (e: MouseEvent, mode: 'search' \| 'location' \| 'me') => {	14✔
144	e.preventDefault();	1✔
145
146	Object.keys(state.meetings).forEach(slug => {	1✔
147	state.meetings[slug].distance = undefined;	2✔
148	});
149
150	setSearch('');	1✔
151	if (mode !== 'search') {	1!
152	searchParams.delete('search');	1✔
153	searchParams.set('mode', mode);	1✔
154	} else {
155	searchParams.delete('mode');	×
156	}
157
158	//focus after waiting for disabled to clear
159	setTimeout(() => searchInput.current?.focus(), 100);	1✔
160
161	setState({	1✔
162	...state,
163	capabilities: {
164	...state.capabilities,
165	distance: false,
166	},
167	indexes: {
168	...state.indexes,
169	distance: [],
170	},
171	input: {
172	...state.input,
173	distance: [],
174	latitude: undefined,
175	longitude: undefined,
176	mode: mode,
177	search: '',
178	},
179	});
180
181	setSearchParams(searchParams);	1✔
182	};
183
184	//toggle list/map view
185	const setView = (e: MouseEvent, view: 'table' \| 'map') => {	14✔
186	e.preventDefault();	1✔
187
188	if (view !== 'table') {	1!
189	searchParams.set('view', view);	1✔
190	} else {
UNCOV 191	searchParams.delete('view');	×
192	}
193
194	setState({ ...state, input: { ...state.input, view } });	1✔
195
196	setSearchParams(searchParams);	1✔
197	};
198
199	return !Object.keys(state.meetings).length ? null : (	14✔
200	<div css={controlsCss}>
201	<form onSubmit={locationSearch} css={dropdownCss}>
202	<fieldset role="group">
203	<input
204	aria-label={strings.modes[state.input.mode]}
205	css={modes.length > 1 ? controlsInputFirstCss : controlsInputCss}	13!
206	disabled={state.input.mode === 'me'}
207	onChange={e => {
208	if (state.input.mode === 'search') {	2✔
209	state.input.search = e.target.value;	1✔
210	setState({ ...state });	1✔
211	} else {
212	setSearch(e.target.value);	1✔
213	}
214	}}
215	placeholder={strings.modes[state.input.mode]}
216	ref={searchInput}
217	spellCheck="false"
218	type="search"
219	value={
220	state.input.mode === 'location' ? search : state.input.search	13✔
221	}
222	/>
223	<input type="submit" hidden css={controlsInputSearchSubmitCss} />
224	{modes.length > 1 && (	26✔
225	<button
226	aria-label={strings.modes[state.input.mode]}
227	css={dropdownButtonLastCss}
228	onClick={e => {
229	setDropdown(dropdown === 'search' ? undefined : 'search');	2✔
230	e.stopPropagation();	2✔
231	}}
232	type="button"
233	/>
234	)}
235	</fieldset>
236	{modes.length > 1 && (	26✔
237	<div
238	css={controlsSearchDropdownCss}
239	style={{
240	display: dropdown === 'search' ? 'block' : 'none',	13✔
241	}}
242	>
243	{modes.map(mode => (
244	<div	39✔
245	className="tsml-dropdown__item"
246	data-active={state.input.mode === mode}
247	key={mode}
248	>
249	<button
250	className="tsml-dropdown__button"
251	onClick={e => setMode(e, mode)}	1✔
252	>
253	{strings.modes[mode]}
254	</button>
255	</div>
256	))}
257	</div>
258	)}
259	</form>
260	{filters.map(filter => (
261	<div key={filter}>	13✔
262	<Dropdown
263	defaultValue={
264	strings[`${filter}_any` as keyof typeof strings] as string
265	}
266	filter={filter}
267	open={dropdown === filter}
268	setDropdown={setDropdown}
269	state={state}
270	/>
271	</div>
272	))}
273	{canShowViews && (	26✔
274	<div role="group">
275	{views.map((view, index) => (
276	<button	26✔
277	css={index ? controlsGroupLastCss : controlsGroupFirstCss}	26✔
278	data-active={state.input.view === view}
279	key={view}
280	onClick={e => setView(e, view)}	1✔
281	type="button"
282	>
283	{strings.views[view]}
284	</button>
285	))}
286	</div>
287	)}
288	</div>
289	);
290	}

code4recovery / tsml-ui / 14920598081

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous