10039221276

Committed 22 Jul 2024 10:34AM UTC coverage: 31.931% (+0.006%) from 31.925%

Build # 10039221276

Build Type

Pull #9514

github

Committed by

Will-Howard

Commit Message

address comments

Pull Request Pull Request #9514: [EA] Add nudge to add the 10% Pledge diamond (and move displayName to 'Edit public profile')

Run Details

4911 of 40224 branches covered (12.21%)

Branch coverage included in aggregate %.

22 of 48 new or added lines in 6 files covered. (45.83%)

403 existing lines in 31 files now uncovered.

28647 of 64872 relevant lines covered (44.16%)

180.99 hits per line

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

9.66

/packages/lesswrong/components/peopleDirectory/usePeopleDirectory.tsx

import React, { ReactNode, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
import { getSearchClient } from "../../lib/search/searchUtil";
import { MultiSelectResult, MultiSelectState, useMultiSelect } from "../hooks/useMultiSelect";
import { CAREER_STAGES } from "../../lib/collections/users/schema";
import { PeopleDirectoryColumn, peopleDirectoryColumns } from "./peopleDirectoryColumns";
import { SearchableMultiSelectResult, useSearchableMultiSelect } from "../hooks/useSearchableMultiSelect";
import { useSearchAnalytics } from "../search/useSearchAnalytics";
import { captureException } from "@sentry/core";
import { filterNonnull } from "../../lib/utils/typeGuardUtils";
import { useLocation, useNavigate } from "../../lib/routeUtil";
import qs from "qs";

type PeopleDirectoryView = "list" | "map";

type PeopleDirectorySorting = {
  field: string,
  direction: "asc" | "desc",
}

type PeopleDirectoryContext = {
  view: PeopleDirectoryView,
  setView: (view: PeopleDirectoryView) => void,
  query: string,
  setQuery: (query: string) => void,
  clearSearch: () => void,
  isEmptySearch: boolean,
  sorting: PeopleDirectorySorting | null,
  setSorting: (sorting: PeopleDirectorySorting | null) => void,
  results: SearchUser[],
  resultsLoading: boolean,
  totalResults: number,
  loadMore: () => void,
  roles: SearchableMultiSelectResult,
  organizations: SearchableMultiSelectResult,
  locations: SearchableMultiSelectResult,
  careerStages: MultiSelectResult,
  columns: (PeopleDirectoryColumn & MultiSelectState)[],
  columnsEdited: boolean,
  resetColumns: () => void,
}

const peopleDirectoryContext = createContext<PeopleDirectoryContext | null>(null);

export const PeopleDirectoryProvider = ({children}: {children: ReactNode}) => {
  const captureSearch = useSearchAnalytics();
  const navigate = useNavigate();
  const {location, query: urlQuery} = useLocation();
  const [view, setView] = useState<PeopleDirectoryView>("list");
  const [query, setQuery_] = useState(urlQuery.query ?? "");
  const [sorting, setSorting] = useState<PeopleDirectorySorting | null>(null);
  // We store the results in an 2D-array, where the index in the first array
  // corresponds to the "page" of the contained results. This prevents a class
  // of bugs where updates cause results to be out-of-order or duplicated.
  const [results, setResults] = useState<SearchUser[][]>([]);
  const [resultsLoading, setResultsLoading] = useState(true);
  const [totalResults, setTotalResults] = useState(0);
  const [page, setPage] = useState(0);
  const [numPages, setNumPages] = useState(0);

  const roles = useSearchableMultiSelect({
    title: "Role",
    facetField: "jobTitle",
  });
  const organizations = useSearchableMultiSelect({
    title: "Organization",
    facetField: "organization",
  });
  const locations = useSearchableMultiSelect({
    title: "Location",
    facetField: "mapLocationAddress",
  });
  const careerStages = useMultiSelect({
    title: "Career stage",
    options: CAREER_STAGES,
  });

  const flattenedResults = useMemo(() => {
    const flattenedResults = results.flatMap((resultsPage) => resultsPage);
    // HACK: We mostly can't repro the situation that causes undefined values in
    // the results, so instead of finding the root cause we'll just filter them
    // out.
    const hackyNullRemoval = filterNonnull(flattenedResults);
    if (flattenedResults.length !== hackyNullRemoval.length) {
      // eslint-disable-next-line no-console
      console.error("People directory results contained undefined values", flattenedResults);
    }
    return hackyNullRemoval;
  }, [results]);

  const updateUrlQuery = useCallback((update: Record<string, string>) => {
    const newQuery = {...urlQuery, ...update};
    navigate({...location, search: `?${qs.stringify(newQuery)}`});
  }, [navigate, location, urlQuery]);

  const setQuery = useCallback((query: string) => {
    setQuery_(query);
    updateUrlQuery({query});
  }, [updateUrlQuery]);

  const clearSearch = useCallback(() => {
    setQuery("");
    roles.clear();
    organizations.clear();
    locations.clear();
    careerStages.clear();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [roles.clear, organizations.clear, locations.clear, careerStages.clear]);

  const isEmptySearch = query === "" &&
    roles.selectedValues.length === 0 &&
    organizations.selectedValues.length === 0 &&
    locations.selectedValues.length === 0 &&
    careerStages.selectedValues.length === 0;

  const [columns, setColumns] = useState(peopleDirectoryColumns);
  const [columnsEdited, setColumnsEdited] = useState(false);
  const toggleColumn = useCallback((columnLabel: string) => {
    setColumns((columns) => columns.map((column) => {
      return column.label === columnLabel && column.hideable
        ? {
          ...column,
          hidden: !column.hidden,
        }
        : column;
    }));
    setColumnsEdited(true);
  }, []);
  const resetColumns = useCallback(() => {
    setColumns(peopleDirectoryColumns);
    setColumnsEdited(false);
  }, []);
  const columnSelectState = useMemo(() => {
    return columns.map((column) => ({
      ...column,
      value: column.label,
      label: column.label,
      selected: column.hideable && !column.hidden,
      onToggle: () => toggleColumn(column.label),
    }));
  }, [columns, toggleColumn]);

  const loadMore = useCallback(() => {
    const newPage = page + 1;
    if (!resultsLoading && newPage < numPages) {
      setPage(newPage);
    }
  }, [resultsLoading, page, numPages]);

  useEffect(() => {
    setResults([]);
    setTotalResults(0);
    setPage(0);
    setNumPages(0);
  }, [
    view,
    query,
    sorting,
    roles.selectedValues,
    organizations.selectedValues,
    locations.selectedValues,
    careerStages.selectedValues,
  ]);

  useEffect(() => {
    setResultsLoading(true);
    void (async () => {
      try {
        const isMap = view === "map";
        const sortString = sorting
          ? `_${sorting.field}:${sorting.direction}`
          : "";
        const facetFilters = [
          roles.selectedValues.map((role) => `jobTitle:${role}`),
          organizations.selectedValues.map((org) => `organization:${org}`),
          locations.selectedValues.map((location) => `mapLocationAddress:${location}`),
          careerStages.selectedValues.map((stage) => `careerStage:${stage}`),
          ["hideFromPeopleDirectory:false"],
          isMap ? ["_geoloc:-null"] : [],
        ];
        const response = await getSearchClient().search([
          {
            indexName: "test_users" + sortString,
            query,
            params: {
              query,
              facetFilters,
              page,
              hitsPerPage: isMap ? 250 : undefined,
            },
          },
        ]);
        const results = response?.results?.[0];
        const hits = results?.hits ?? [];
        setResults((previousResults) => {
          const newResults = [...previousResults];
          newResults[results?.page ?? 0] = hits;
          return newResults;
        });
        setTotalResults(results?.nbHits ?? 0);
        setNumPages(results?.nbPages ?? 0);
        captureSearch("peopleDirectorySearch", {
          query,
          sorting,
          roles: roles.selectedValues,
          organizations: organizations.selectedValues,
          locations: locations.selectedValues,
          careerStages: careerStages.selectedValues,
          hitCount: hits.length,
        });
      } catch (e) {
        // eslint-disable-next-line no-console
        console.error("People directory search error:", e);
        captureException(e);
      } finally {
        setResultsLoading(false);
      }
    })();
  }, [
    captureSearch,
    page,
    view,
    query,
    sorting,
    roles.selectedValues,
    organizations.selectedValues,
    locations.selectedValues,
    careerStages.selectedValues,
  ]);

  return (
    <peopleDirectoryContext.Provider value={{
      view,
      setView,
      query,
      setQuery,
      clearSearch,
      isEmptySearch,
      sorting,
      setSorting,
      results: flattenedResults,
      resultsLoading,
      totalResults,
      loadMore,
      roles,
      organizations,
      locations,
      careerStages,
      columns: columnSelectState,
      columnsEdited,
      resetColumns,
    }}>
      {children}
    </peopleDirectoryContext.Provider>
  );
}

export const usePeopleDirectory = (): PeopleDirectoryContext => {
  const context = useContext(peopleDirectoryContext);
  if (!context) {
    throw new Error("Using people directory context outside of a provider");
  }
  return context;
}

1	import React, { ReactNode, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";	3✔
2	import { getSearchClient } from "../../lib/search/searchUtil";	1✔
3	import { MultiSelectResult, MultiSelectState, useMultiSelect } from "../hooks/useMultiSelect";	1✔
4	import { CAREER_STAGES } from "../../lib/collections/users/schema";	1✔
5	import { PeopleDirectoryColumn, peopleDirectoryColumns } from "./peopleDirectoryColumns";	1✔
6	import { SearchableMultiSelectResult, useSearchableMultiSelect } from "../hooks/useSearchableMultiSelect";	1✔
7	import { useSearchAnalytics } from "../search/useSearchAnalytics";	1✔
8	import { captureException } from "@sentry/core";	1✔
9	import { filterNonnull } from "../../lib/utils/typeGuardUtils";	1✔
10	import { useLocation, useNavigate } from "../../lib/routeUtil";	1✔
11	import qs from "qs";	1✔
12
13	type PeopleDirectoryView = "list" \| "map";
14
15	type PeopleDirectorySorting = {
16	field: string,
17	direction: "asc" \| "desc",
18	}
19
20	type PeopleDirectoryContext = {
21	view: PeopleDirectoryView,
22	setView: (view: PeopleDirectoryView) => void,
23	query: string,
24	setQuery: (query: string) => void,
25	clearSearch: () => void,
26	isEmptySearch: boolean,
27	sorting: PeopleDirectorySorting \| null,
28	setSorting: (sorting: PeopleDirectorySorting \| null) => void,
29	results: SearchUser[],
30	resultsLoading: boolean,
31	totalResults: number,
32	loadMore: () => void,
33	roles: SearchableMultiSelectResult,
34	organizations: SearchableMultiSelectResult,
35	locations: SearchableMultiSelectResult,
36	careerStages: MultiSelectResult,
37	columns: (PeopleDirectoryColumn & MultiSelectState)[],
38	columnsEdited: boolean,
39	resetColumns: () => void,
40	}
41
42	const peopleDirectoryContext = createContext<PeopleDirectoryContext \| null>(null);	1✔
43
44	export const PeopleDirectoryProvider = ({children}: {children: ReactNode}) => {	1✔
UNCOV 45	const captureSearch = useSearchAnalytics();	×
UNCOV 46	const navigate = useNavigate();	×
UNCOV 47	const {location, query: urlQuery} = useLocation();	×
UNCOV 48	const [view, setView] = useState<PeopleDirectoryView>("list");	×
UNCOV 49	const [query, setQuery_] = useState(urlQuery.query ?? "");	×
UNCOV 50	const [sorting, setSorting] = useState<PeopleDirectorySorting \| null>(null);	×
51	// We store the results in an 2D-array, where the index in the first array
52	// corresponds to the "page" of the contained results. This prevents a class
53	// of bugs where updates cause results to be out-of-order or duplicated.
UNCOV 54	const [results, setResults] = useState<SearchUser[][]>([]);	×
UNCOV 55	const [resultsLoading, setResultsLoading] = useState(true);	×
UNCOV 56	const [totalResults, setTotalResults] = useState(0);	×
UNCOV 57	const [page, setPage] = useState(0);	×
UNCOV 58	const [numPages, setNumPages] = useState(0);	×
59
UNCOV 60	const roles = useSearchableMultiSelect({	×
61	title: "Role",
62	facetField: "jobTitle",
63	});
UNCOV 64	const organizations = useSearchableMultiSelect({	×
65	title: "Organization",
66	facetField: "organization",
67	});
UNCOV 68	const locations = useSearchableMultiSelect({	×
69	title: "Location",
70	facetField: "mapLocationAddress",
71	});
72	const careerStages = useMultiSelect({	×
73	title: "Career stage",
74	options: CAREER_STAGES,
75	});
76
UNCOV 77	const flattenedResults = useMemo(() => {	×
UNCOV 78	const flattenedResults = results.flatMap((resultsPage) => resultsPage);	×
79	// HACK: We mostly can't repro the situation that causes undefined values in
80	// the results, so instead of finding the root cause we'll just filter them
81	// out.
82	const hackyNullRemoval = filterNonnull(flattenedResults);	×
83	if (flattenedResults.length !== hackyNullRemoval.length) {	×
84	// eslint-disable-next-line no-console
85	console.error("People directory results contained undefined values", flattenedResults);	×
86	}
UNCOV 87	return hackyNullRemoval;	×
88	}, [results]);
89
UNCOV 90	const updateUrlQuery = useCallback((update: Record<string, string>) => {	×
UNCOV 91	const newQuery = {...urlQuery, ...update};	×
UNCOV 92	navigate({...location, search: `?${qs.stringify(newQuery)}`});	×
93	}, [navigate, location, urlQuery]);
94
95	const setQuery = useCallback((query: string) => {	×
UNCOV 96	setQuery_(query);	×
97	updateUrlQuery({query});	×
98	}, [updateUrlQuery]);
99
UNCOV 100	const clearSearch = useCallback(() => {	×
101	setQuery("");	×
UNCOV 102	roles.clear();	×
UNCOV 103	organizations.clear();	×
UNCOV 104	locations.clear();	×
105	careerStages.clear();	×
106	// eslint-disable-next-line react-hooks/exhaustive-deps
107	}, [roles.clear, organizations.clear, locations.clear, careerStages.clear]);
108
109	const isEmptySearch = query === "" &&	×
110	roles.selectedValues.length === 0 &&
111	organizations.selectedValues.length === 0 &&
112	locations.selectedValues.length === 0 &&
113	careerStages.selectedValues.length === 0;
114
UNCOV 115	const [columns, setColumns] = useState(peopleDirectoryColumns);	×
UNCOV 116	const [columnsEdited, setColumnsEdited] = useState(false);	×
117	const toggleColumn = useCallback((columnLabel: string) => {	×
UNCOV 118	setColumns((columns) => columns.map((column) => {	×
UNCOV 119	return column.label === columnLabel && column.hideable	×
120	? {	×
121	...column,
122	hidden: !column.hidden,
123	}
124	: column;
125	}));
UNCOV 126	setColumnsEdited(true);	×
127	}, []);
UNCOV 128	const resetColumns = useCallback(() => {	×
UNCOV 129	setColumns(peopleDirectoryColumns);	×
UNCOV 130	setColumnsEdited(false);	×
131	}, []);
UNCOV 132	const columnSelectState = useMemo(() => {	×
UNCOV 133	return columns.map((column) => ({	×
134	...column,
135	value: column.label,
136	label: column.label,
137	selected: column.hideable && !column.hidden,	×
UNCOV 138	onToggle: () => toggleColumn(column.label),	×
139	}));
140	}, [columns, toggleColumn]);
141
UNCOV 142	const loadMore = useCallback(() => {	×
143	const newPage = page + 1;	×
144	if (!resultsLoading && newPage < numPages) {	×
UNCOV 145	setPage(newPage);	×
146	}
147	}, [resultsLoading, page, numPages]);
148
149	useEffect(() => {	×
UNCOV 150	setResults([]);	×
151	setTotalResults(0);	×
UNCOV 152	setPage(0);	×
153	setNumPages(0);	×
154	}, [
155	view,
156	query,
157	sorting,
158	roles.selectedValues,
159	organizations.selectedValues,
160	locations.selectedValues,
161	careerStages.selectedValues,
162	]);
163
UNCOV 164	useEffect(() => {	×
UNCOV 165	setResultsLoading(true);	×
166	void (async () => {	×
167	try {	×
168	const isMap = view === "map";	×
169	const sortString = sorting	×
170	? `_${sorting.field}:${sorting.direction}`	×
171	: "";
172	const facetFilters = [	×
UNCOV 173	roles.selectedValues.map((role) => `jobTitle:${role}`),	×
UNCOV 174	organizations.selectedValues.map((org) => `organization:${org}`),	×
UNCOV 175	locations.selectedValues.map((location) => `mapLocationAddress:${location}`),	×
UNCOV 176	careerStages.selectedValues.map((stage) => `careerStage:${stage}`),	×
177	["hideFromPeopleDirectory:false"],
178	isMap ? ["_geoloc:-null"] : [],	×
179	];
UNCOV 180	const response = await getSearchClient().search([	×
181	{
182	indexName: "test_users" + sortString,
183	query,
184	params: {
185	query,
186	facetFilters,
187	page,
188	hitsPerPage: isMap ? 250 : undefined,	×
189	},
190	},
191	]);
192	const results = response?.results?.[0];	×
193	const hits = results?.hits ?? [];	×
UNCOV 194	setResults((previousResults) => {	×
UNCOV 195	const newResults = [...previousResults];	×
UNCOV 196	newResults[results?.page ?? 0] = hits;	×
UNCOV 197	return newResults;	×
198	});
UNCOV 199	setTotalResults(results?.nbHits ?? 0);	×
200	setNumPages(results?.nbPages ?? 0);	×
UNCOV 201	captureSearch("peopleDirectorySearch", {	×
202	query,
203	sorting,
204	roles: roles.selectedValues,
205	organizations: organizations.selectedValues,
206	locations: locations.selectedValues,
207	careerStages: careerStages.selectedValues,
208	hitCount: hits.length,
209	});
210	} catch (e) {
211	// eslint-disable-next-line no-console
212	console.error("People directory search error:", e);	×
UNCOV 213	captureException(e);	×
214	} finally {
UNCOV 215	setResultsLoading(false);	×
216	}
217	})();
218	}, [
219	captureSearch,
220	page,
221	view,
222	query,
223	sorting,
224	roles.selectedValues,
225	organizations.selectedValues,
226	locations.selectedValues,
227	careerStages.selectedValues,
228	]);
229
230	return (	×
231	<peopleDirectoryContext.Provider value={{
232	view,
233	setView,
234	query,
235	setQuery,
236	clearSearch,
237	isEmptySearch,
238	sorting,
239	setSorting,
240	results: flattenedResults,
241	resultsLoading,
242	totalResults,
243	loadMore,
244	roles,
245	organizations,
246	locations,
247	careerStages,
248	columns: columnSelectState,
249	columnsEdited,
250	resetColumns,
251	}}>
252	{children}
253	</peopleDirectoryContext.Provider>
254	);
255	}
256
257	export const usePeopleDirectory = (): PeopleDirectoryContext => {	1✔
UNCOV 258	const context = useContext(peopleDirectoryContext);	×
UNCOV 259	if (!context) {	×
UNCOV 260	throw new Error("Using people directory context outside of a provider");	×
261	}
UNCOV 262	return context;	×
263	}

ForumMagnum / ForumMagnum / 10039221276

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