8840329743

Committed 25 Apr 2024 10:41PM UTC coverage: 32.0% (-0.03%) from 32.032%

Build # 8840329743

Build Type

Pull #9183

github

Committed by

web-flow

Commit Message

Merge 7df275fd5 into 5ad1e777c

Pull Request Pull Request #9183: LW Deploy, 2024-04-25 (second deploy of the day)

Run Details

4707 of 38390 branches covered (12.26%)

Branch coverage included in aggregate %.

260 of 636 new or added lines in 57 files covered. (40.88%)

165 existing lines in 8 files now uncovered.

27437 of 62061 relevant lines covered (44.21%)

180.59 hits per line

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

21.09

/packages/lesswrong/components/search/SearchPageTabbed.tsx

import React, { FC, RefObject, ReactElement, useEffect, useRef, useState } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import qs from 'qs';
import type { SearchState } from 'react-instantsearch/connectors';
import { Hits, Configure, SearchBox, Pagination, connectStats, connectScrollTo } from 'react-instantsearch-dom';
import { InstantSearch } from '../../lib/utils/componentsWithChildren';
import { useLocation } from '../../lib/routeUtil';
import { isEAForum, taggingNameIsSet, taggingNamePluralCapitalSetting } from '../../lib/instanceSettings';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import InfoIcon from '@material-ui/icons/Info';
import IconButton from '@material-ui/core/IconButton';
import moment from 'moment';
import { useSearchAnalytics } from './useSearchAnalytics';
import {
  getSearchClient,
  SearchIndexCollectionName,
  collectionIsSearchIndexed,
  isSearchEnabled,
  ElasticSorting,
  defaultElasticSorting,
  elasticSortingToUrlParam,
  getElasticIndexNameWithSorting,
  isValidElasticSorting,
} from '../../lib/search/searchUtil';
import Modal from '@material-ui/core/Modal';
import classNames from 'classnames';
import { Link, useNavigate } from '../../lib/reactRouterWrapper';
import { useCurrentUser } from '../common/withUser';
import { userHasPeopleDirectory } from '../../lib/betas';

const hitsPerPage = 10

const styles = (theme: ThemeType) => ({
  root: {
    width: "100%",
    maxWidth: 1200,
    display: 'flex',
    columnGap: 40,
    padding: '0 10px',
    margin: "auto",
    [theme.breakpoints.down('sm')]: {
      display: 'block',
      paddingTop: 24,
    }
  },
  filtersColumnWrapper: {
    [theme.breakpoints.down('sm')]: {
      display: 'none'
    },
  },
  filtersModal: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  filtersModalContent: {
    maxWidth: "max-content",
    background: theme.palette.grey[0],
    borderRadius: theme.borderRadius.default,
    padding: '20px',
    overflowY: 'auto',
    zIndex: 10001
  },
  resultsColumn: {
    flex: '1 1 0',
  },
  searchIcon: {
    marginLeft: 12
  },
  searchBoxRow: {
    display: "flex",
    alignItems: "center",
    marginBottom: 15,
    gap: '16px',
    [theme.breakpoints.down('xs')]: {
      marginBottom: 12,
    },
  },
  funnelIconButton: {
    [theme.breakpoints.up('md')]: {
      display: 'none'
    },
  },
  funnelIconLW: {
    fill: theme.palette.grey[1000],
  },
  funnelIconEA: {
    stroke: theme.palette.grey[1000],
  },
  searchInputArea: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    maxWidth: 625,
    height: 48,
    border: theme.palette.border.slightlyIntense2,
    borderRadius: 3,
    "& .ais-SearchBox": {
      display: 'inline-block',
      position: 'relative',
      width: '100%',
      marginLeft: 12,
      height: 46,
      whiteSpace: 'nowrap',
      boxSizing: 'border-box',
    },
    "& .ais-SearchBox-form": {
      height: '100%'
    },
    "& .ais-SearchBox-submit":{
      display: "none"
    },
    // This is a class generated by React InstantSearch, which we don't have direct control over so
    // are doing a somewhat hacky thing to style it.
    "& .ais-SearchBox-input": {
      height: "100%",
      width: "100%",
      paddingRight: 0,
      verticalAlign: "bottom",
      borderStyle: "none",
      boxShadow: "none",
      backgroundColor: "transparent",
      fontSize: 'inherit',
      "-webkit-appearance": "none",
      cursor: "text",
      ...theme.typography.body2,
    },
  },
  searchHelp: {
    [theme.breakpoints.down('sm')]: {
      display: "none",
    },
  },
  infoIcon: {
    fontSize: 20,
    fill: theme.palette.grey[800],
  },
  tabs: {
    margin: '0 auto 20px',
    '& .MuiTab-root': {
      minWidth: 110,
      [theme.breakpoints.down('xs')]: {
        minWidth: 50
      }
    },
    '& .MuiTab-labelContainer': {
      fontSize: '1rem'
    }
  },
  resultCount: {
    fontFamily: theme.typography.fontFamily,
    fontWeight: 400,
    fontSize: 14,
    color: theme.palette.grey[700],
    marginBottom: 20
  },
  pagination: {
    ...theme.typography.commentStyle,
    fontSize: 16,
    '& li': {
      padding: 8
    },
    '& .ais-Pagination-item': {
      color: theme.palette.primary.main,
    },
    '& .ais-Pagination-item--firstPage': {
      paddingLeft: 0
    },
    '& .ais-Pagination-item--page': {
      fontWeight: 600
    },
    '& .ais-Pagination-item--selected': {
      color: theme.palette.grey[900]
    },
    '& .ais-Pagination-item--disabled': {
      color: theme.palette.grey[500]
    }
  },
  peopleDirectory: {
    display: "block",
    padding: "16px 12px",
    fontSize: 14,
    fontWeight: 600,
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.primary.main,
    background: theme.palette.primaryAlpha(0.05),
    borderRadius: theme.borderRadius.small,
    marginBottom: 20,
    maxWidth: 585,
    "&:hover": {
      opacity: 0.8,
    },
  },
});

export type ExpandedSearchState = SearchState & {
  contentType?: SearchIndexCollectionName,
  refinementList?: {
    tags: Array<string>|''
  }
}

// shows total # of results
const Stats = ({ nbHits, className }: {
  nbHits: number,
  className: string
}) => {
  return <div className={className}>
    {nbHits} result{nbHits === 1 ? '' : 's'}
  </div>
}
const CustomStats = connectStats(Stats)

const ScrollTo: FC<{
  targetRef: RefObject<HTMLDivElement>,
  value: string,
  hasNotChanged: boolean,
  children: ReactElement,
}> = ({targetRef, value, hasNotChanged, children}) => {
  const prevValue = useRef(value);
  useEffect(() => {
    if (value !== prevValue.current && hasNotChanged) {
      targetRef.current?.scrollIntoView({
        behavior: "smooth",
      });
    }
    prevValue.current = value;
  }, [targetRef, value, hasNotChanged]);
  return children;
}
const CustomScrollTo = connectScrollTo(ScrollTo);

const SearchPageTabbed = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const scrollToRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const { location, query } = useLocation()
  const captureSearch = useSearchAnalytics();
  const currentUser = useCurrentUser();

  // store these values for the search filter
  const pastDay = useRef(moment().subtract(24, 'hours').valueOf())
  const pastWeek = useRef(moment().subtract(7, 'days').valueOf())
  const pastMonth = useRef(moment().subtract(1, 'months').valueOf())
  const pastYear = useRef(moment().subtract(1, 'years').valueOf())
  const dateRangeValues = [pastDay, pastWeek, pastMonth, pastYear];

  // initialize the tab & search state from the URL
  const [tab, setTab] = useState<SearchIndexCollectionName>(() => {
    const contentType = query.contentType as SearchIndexCollectionName
    return collectionIsSearchIndexed(contentType) ? contentType : 'Posts'
  })
  const [tagsFilter, setTagsFilter] = useState<Array<string>>(
    [query.tags ?? []].flatMap(tags => tags)
  )

  const {sort: initialSorting, ...initialSearchState} = qs.parse(location.search.slice(1));
  const [searchState, setSearchState] = useState<ExpandedSearchState>(initialSearchState);
  const [sorting, setSorting] = useState<ElasticSorting>(
    isValidElasticSorting(initialSorting) ? initialSorting : defaultElasticSorting,
  );

  const [modalOpen, setModalOpen] = useState(false);

  const onSortingChange = (newSorting: string) => {
    if (!isValidElasticSorting(newSorting)) {
      throw new Error("Invalid search sorting: " + newSorting);
    }
    setSorting(newSorting);
    navigate({
      ...location,
      search: qs.stringify({
        ...searchState,
        sort: elasticSortingToUrlParam(newSorting),
      }),
    }, {replace: true});
  }

  const {
    ErrorBoundary, ExpandedUsersSearchHit, ExpandedPostsSearchHit, ExpandedCommentsSearchHit,
    ExpandedTagsSearchHit, ExpandedSequencesSearchHit, LWTooltip, ForumIcon
  } = Components;

  // we try to keep the URL synced with the search state
  const updateUrl = (search: ExpandedSearchState, tags: Array<string>) => {
    navigate({
      ...location,
      search: qs.stringify({
        contentType: search.contentType,
        query: search.query,
        tags,
        toggle: search.toggle,
        page: search.page,
        sort: elasticSortingToUrlParam(sorting),
      })
    }, {replace: true})
  }

  const handleChangeTab = (_: React.ChangeEvent, value: SearchIndexCollectionName) => {
    setTab(value);
    setSorting(defaultElasticSorting);
    setSearchState({...searchState, contentType: value, page: 1});
  }
  // filters that we want to persist when changing content type tabs need to be handled separately
  // (currently that's just the tags filter)
  const handleUpdateTagsFilter = (tags: Array<string>) => {
    setTagsFilter(tags)
    updateUrl(searchState, tags)
  }
  
  const onSearchStateChange = (updatedSearchState: ExpandedSearchState) => {
    // clear tags filter if the tag refinements list is empty
    const clearTagFilters = updatedSearchState.refinementList?.tags === ''
    if (clearTagFilters)
      setTagsFilter([])
      
    updateUrl(updatedSearchState, clearTagFilters ? [] : tagsFilter)
    setSearchState(updatedSearchState)
  }

  useEffect(() => {
    if (searchState.query) {
      captureSearch("searchPageTabbed", searchState);
    }
  }, [searchState, captureSearch])

  useEffect(() => {
    if (query.query !== searchState?.query) {
      setSearchState((current) => ({
        ...current,
        page: "1",
        query: query.query,
      }));
    }
  }, [query.query, searchState?.query]);

  if (!isSearchEnabled()) {
    return <div className={classes.root}>
      Search is disabled (ElasticSearch not configured on server)
    </div>
  }
  
  // component for search results depends on which content type tab we're on
  const hitComponents = {
    'Posts': ExpandedPostsSearchHit,
    'Comments': ExpandedCommentsSearchHit,
    'Tags': ExpandedTagsSearchHit,
    'Sequences': ExpandedSequencesSearchHit,
    'Users': ExpandedUsersSearchHit
  }
  const HitComponent = hitComponents[tab]

  return <div className={classes.root}>
    <InstantSearch
      indexName={getElasticIndexNameWithSorting(tab, sorting)}
      searchClient={getSearchClient()}
      searchState={searchState}
      onSearchStateChange={onSearchStateChange}
    >

      <div className={classes.filtersColumnWrapper}>
        <Components.SearchFilters
          tab={tab}
          tagsFilter={tagsFilter}
          handleUpdateTagsFilter={handleUpdateTagsFilter}
          onSortingChange={onSortingChange}
          sorting={sorting}
          dateRangeValues={dateRangeValues}
          setModalOpen={setModalOpen}
        />
      </div>

      <div className={classes.resultsColumn}>
        <div className={classes.searchBoxRow}>
          <div className={classes.searchInputArea}>
            <ForumIcon icon="Search" className={classes.searchIcon}/>
            {/* Ignored because SearchBox is incorrectly annotated as not taking null for its reset prop, when
              * null is the only option that actually suppresses the extra X button.
            // @ts-ignore */}
            <SearchBox defaultRefinement={query.query} reset={null} focusShortcuts={[]} autoFocus={true} />
            <div onClick={() => setModalOpen(true)}>
              <IconButton className={classes.funnelIconButton}>
                <ForumIcon icon="Funnel" className={classNames({[classes.funnelIconLW]: !isEAForum, [classes.funnelIconEA]: isEAForum})}/>
              </IconButton>
            </div>
          </div>
          <LWTooltip
            title={`"Quotes" and -minus signs are supported.`}
            className={classes.searchHelp}
          >
            <InfoIcon className={classes.infoIcon}/>
          </LWTooltip>
        </div>

        <div ref={scrollToRef} />

        <Modal
          open={modalOpen}
          onClose={() => setModalOpen(false)}
          aria-labelledby="search-filters-modal"
          aria-describedby="search-filters-modal"
          className={classNames(classes.filtersModal)}
        >
          <div className={classes.filtersModalContent}>
            <Components.SearchFilters
              tab={tab}
              tagsFilter={tagsFilter}
              handleUpdateTagsFilter={handleUpdateTagsFilter}
              onSortingChange={onSortingChange}
              sorting={sorting}
              dateRangeValues={dateRangeValues}
              setModalOpen={setModalOpen}
            />
          </div>
        </Modal>

        <Tabs
          value={tab}
          onChange={handleChangeTab}
          className={classes.tabs}
          textColor="primary"
          aria-label="select content type to search"
          scrollable
          scrollButtons="off"
        >
          <Tab label="Posts" value="Posts" />
          <Tab label="Comments" value="Comments" />
          <Tab label={taggingNameIsSet.get() ? taggingNamePluralCapitalSetting.get() : 'Tags and Wiki'} value="Tags" />
          <Tab label="Sequences" value="Sequences" />
          <Tab label="Users" value="Users" />
        </Tabs>

        <ErrorBoundary>
          <Configure hitsPerPage={hitsPerPage} />
          <CustomStats className={classes.resultCount} />
          {userHasPeopleDirectory(currentUser) && tab === "Users" && searchState?.query &&
            <Link
              to={`/people-directory?query=${encodeURIComponent(searchState.query)}`}
              className={classes.peopleDirectory}
            >
              -&gt; View results in People directory (beta)
            </Link>
          }
          <CustomScrollTo targetRef={scrollToRef}>
            <Hits hitComponent={(props) => <HitComponent {...props} />} />
          </CustomScrollTo>
          <Pagination showLast className={classes.pagination} />
        </ErrorBoundary>
      </div>
    </InstantSearch>
  </div>
}

const SearchPageTabbedComponent = registerComponent("SearchPageTabbed", SearchPageTabbed, {styles})

declare global {
  interface ComponentTypes {
    SearchPageTabbed: typeof SearchPageTabbedComponent
  }
}

1	import React, { FC, RefObject, ReactElement, useEffect, useRef, useState } from 'react';	2✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import qs from 'qs';	1✔
4	import type { SearchState } from 'react-instantsearch/connectors';
5	import { Hits, Configure, SearchBox, Pagination, connectStats, connectScrollTo } from 'react-instantsearch-dom';	1✔
6	import { InstantSearch } from '../../lib/utils/componentsWithChildren';	1✔
7	import { useLocation } from '../../lib/routeUtil';	1✔
8	import { isEAForum, taggingNameIsSet, taggingNamePluralCapitalSetting } from '../../lib/instanceSettings';	1✔
9	import Tab from '@material-ui/core/Tab';	1✔
10	import Tabs from '@material-ui/core/Tabs';	1✔
11	import InfoIcon from '@material-ui/icons/Info';	1✔
12	import IconButton from '@material-ui/core/IconButton';	1✔
13	import moment from 'moment';	1✔
14	import { useSearchAnalytics } from './useSearchAnalytics';	1✔
15	import {
16	getSearchClient,
17	SearchIndexCollectionName,
18	collectionIsSearchIndexed,
19	isSearchEnabled,
20	ElasticSorting,
21	defaultElasticSorting,
22	elasticSortingToUrlParam,
23	getElasticIndexNameWithSorting,
24	isValidElasticSorting,
25	} from '../../lib/search/searchUtil';	1✔
26	import Modal from '@material-ui/core/Modal';	1✔
27	import classNames from 'classnames';	1✔
28	import { Link, useNavigate } from '../../lib/reactRouterWrapper';	1✔
29	import { useCurrentUser } from '../common/withUser';	1✔
30	import { userHasPeopleDirectory } from '../../lib/betas';	1✔
31
32	const hitsPerPage = 10	1✔
33
34	const styles = (theme: ThemeType) => ({	1✔
35	root: {
36	width: "100%",
37	maxWidth: 1200,
38	display: 'flex',
39	columnGap: 40,
40	padding: '0 10px',
41	margin: "auto",
42	[theme.breakpoints.down('sm')]: {
43	display: 'block',
44	paddingTop: 24,
45	}
46	},
47	filtersColumnWrapper: {
48	[theme.breakpoints.down('sm')]: {
49	display: 'none'
50	},
51	},
52	filtersModal: {
53	display: "flex",
54	justifyContent: "center",
55	alignItems: "center",
56	},
57	filtersModalContent: {
58	maxWidth: "max-content",
59	background: theme.palette.grey[0],
60	borderRadius: theme.borderRadius.default,
61	padding: '20px',
62	overflowY: 'auto',
63	zIndex: 10001
64	},
65	resultsColumn: {
66	flex: '1 1 0',
67	},
68	searchIcon: {
69	marginLeft: 12
70	},
71	searchBoxRow: {
72	display: "flex",
73	alignItems: "center",
74	marginBottom: 15,
75	gap: '16px',
76	[theme.breakpoints.down('xs')]: {
77	marginBottom: 12,
78	},
79	},
80	funnelIconButton: {
81	[theme.breakpoints.up('md')]: {
82	display: 'none'
83	},
84	},
85	funnelIconLW: {
86	fill: theme.palette.grey[1000],
87	},
88	funnelIconEA: {
89	stroke: theme.palette.grey[1000],
90	},
91	searchInputArea: {
92	flex: 1,
93	display: "flex",
94	alignItems: "center",
95	maxWidth: 625,
96	height: 48,
97	border: theme.palette.border.slightlyIntense2,
98	borderRadius: 3,
99	"& .ais-SearchBox": {
100	display: 'inline-block',
101	position: 'relative',
102	width: '100%',
103	marginLeft: 12,
104	height: 46,
105	whiteSpace: 'nowrap',
106	boxSizing: 'border-box',
107	},
108	"& .ais-SearchBox-form": {
109	height: '100%'
110	},
111	"& .ais-SearchBox-submit":{
112	display: "none"
113	},
114	// This is a class generated by React InstantSearch, which we don't have direct control over so
115	// are doing a somewhat hacky thing to style it.
116	"& .ais-SearchBox-input": {
117	height: "100%",
118	width: "100%",
119	paddingRight: 0,
120	verticalAlign: "bottom",
121	borderStyle: "none",
122	boxShadow: "none",
123	backgroundColor: "transparent",
124	fontSize: 'inherit',
125	"-webkit-appearance": "none",
126	cursor: "text",
127	...theme.typography.body2,
128	},
129	},
130	searchHelp: {
131	[theme.breakpoints.down('sm')]: {
132	display: "none",
133	},
134	},
135	infoIcon: {
136	fontSize: 20,
137	fill: theme.palette.grey[800],
138	},
139	tabs: {
140	margin: '0 auto 20px',
141	'& .MuiTab-root': {
142	minWidth: 110,
143	[theme.breakpoints.down('xs')]: {
144	minWidth: 50
145	}
146	},
147	'& .MuiTab-labelContainer': {
148	fontSize: '1rem'
149	}
150	},
151	resultCount: {
152	fontFamily: theme.typography.fontFamily,
153	fontWeight: 400,
154	fontSize: 14,
155	color: theme.palette.grey[700],
156	marginBottom: 20
157	},
158	pagination: {
159	...theme.typography.commentStyle,
160	fontSize: 16,
161	'& li': {
162	padding: 8
163	},
164	'& .ais-Pagination-item': {
165	color: theme.palette.primary.main,
166	},
167	'& .ais-Pagination-item--firstPage': {
168	paddingLeft: 0
169	},
170	'& .ais-Pagination-item--page': {
171	fontWeight: 600
172	},
173	'& .ais-Pagination-item--selected': {
174	color: theme.palette.grey[900]
175	},
176	'& .ais-Pagination-item--disabled': {
177	color: theme.palette.grey[500]
178	}
179	},
180	peopleDirectory: {
181	display: "block",
182	padding: "16px 12px",
183	fontSize: 14,
184	fontWeight: 600,
185	fontFamily: theme.palette.fonts.sansSerifStack,
186	color: theme.palette.primary.main,
187	background: theme.palette.primaryAlpha(0.05),
188	borderRadius: theme.borderRadius.small,
189	marginBottom: 20,
190	maxWidth: 585,
191	"&:hover": {
192	opacity: 0.8,
193	},
194	},
195	});
196
197	export type ExpandedSearchState = SearchState & {
198	contentType?: SearchIndexCollectionName,
199	refinementList?: {
200	tags: Array<string>\|''
201	}
202	}
203
204	// shows total # of results
205	const Stats = ({ nbHits, className }: {	1✔
206	nbHits: number,
207	className: string
208	}) => {
209	return <div className={className}>	×
210	{nbHits} result{nbHits === 1 ? '' : 's'}	×
211	</div>
212	}
213	const CustomStats = connectStats(Stats)	1✔
214
215	const ScrollTo: FC<{
216	targetRef: RefObject<HTMLDivElement>,
217	value: string,
218	hasNotChanged: boolean,
219	children: ReactElement,
220	}> = ({targetRef, value, hasNotChanged, children}) => {	1✔
221	const prevValue = useRef(value);	×
222	useEffect(() => {	×
223	if (value !== prevValue.current && hasNotChanged) {	×
224	targetRef.current?.scrollIntoView({	×
225	behavior: "smooth",
226	});
227	}
228	prevValue.current = value;	×
229	}, [targetRef, value, hasNotChanged]);
230	return children;	×
231	}
232	const CustomScrollTo = connectScrollTo(ScrollTo);	1✔
233
234	const SearchPageTabbed = ({classes}: {	1✔
235	classes: ClassesType<typeof styles>,
236	}) => {
237	const scrollToRef = useRef<HTMLDivElement>(null);	×
238	const navigate = useNavigate();	×
239	const { location, query } = useLocation()	×
240	const captureSearch = useSearchAnalytics();	×
NEW 241	const currentUser = useCurrentUser();	×
242
243	// store these values for the search filter
244	const pastDay = useRef(moment().subtract(24, 'hours').valueOf())	×
245	const pastWeek = useRef(moment().subtract(7, 'days').valueOf())	×
246	const pastMonth = useRef(moment().subtract(1, 'months').valueOf())	×
247	const pastYear = useRef(moment().subtract(1, 'years').valueOf())	×
248	const dateRangeValues = [pastDay, pastWeek, pastMonth, pastYear];	×
249
250	// initialize the tab & search state from the URL
251	const [tab, setTab] = useState<SearchIndexCollectionName>(() => {	×
252	const contentType = query.contentType as SearchIndexCollectionName	×
253	return collectionIsSearchIndexed(contentType) ? contentType : 'Posts'	×
254	})
255	const [tagsFilter, setTagsFilter] = useState<Array<string>>(	×
256	[query.tags ?? []].flatMap(tags => tags)	×
257	)
258
259	const {sort: initialSorting, ...initialSearchState} = qs.parse(location.search.slice(1));	×
260	const [searchState, setSearchState] = useState<ExpandedSearchState>(initialSearchState);	×
261	const [sorting, setSorting] = useState<ElasticSorting>(	×
262	isValidElasticSorting(initialSorting) ? initialSorting : defaultElasticSorting,	×
263	);
264
265	const [modalOpen, setModalOpen] = useState(false);	×
266
267	const onSortingChange = (newSorting: string) => {	×
268	if (!isValidElasticSorting(newSorting)) {	×
269	throw new Error("Invalid search sorting: " + newSorting);	×
270	}
271	setSorting(newSorting);	×
272	navigate({	×
273	...location,
274	search: qs.stringify({
275	...searchState,
276	sort: elasticSortingToUrlParam(newSorting),
277	}),
278	}, {replace: true});
279	}
280
281	const {
282	ErrorBoundary, ExpandedUsersSearchHit, ExpandedPostsSearchHit, ExpandedCommentsSearchHit,
283	ExpandedTagsSearchHit, ExpandedSequencesSearchHit, LWTooltip, ForumIcon
284	} = Components;	×
285
286	// we try to keep the URL synced with the search state
287	const updateUrl = (search: ExpandedSearchState, tags: Array<string>) => {	×
288	navigate({	×
289	...location,
290	search: qs.stringify({
291	contentType: search.contentType,
292	query: search.query,
293	tags,
294	toggle: search.toggle,
295	page: search.page,
296	sort: elasticSortingToUrlParam(sorting),
297	})
298	}, {replace: true})
299	}
300
301	const handleChangeTab = (_: React.ChangeEvent, value: SearchIndexCollectionName) => {	×
302	setTab(value);	×
303	setSorting(defaultElasticSorting);	×
304	setSearchState({...searchState, contentType: value, page: 1});	×
305	}
306	// filters that we want to persist when changing content type tabs need to be handled separately
307	// (currently that's just the tags filter)
308	const handleUpdateTagsFilter = (tags: Array<string>) => {	×
309	setTagsFilter(tags)	×
310	updateUrl(searchState, tags)	×
311	}
312
313	const onSearchStateChange = (updatedSearchState: ExpandedSearchState) => {	×
314	// clear tags filter if the tag refinements list is empty
315	const clearTagFilters = updatedSearchState.refinementList?.tags === ''	×
316	if (clearTagFilters)	×
317	setTagsFilter([])	×
318
319	updateUrl(updatedSearchState, clearTagFilters ? [] : tagsFilter)	×
320	setSearchState(updatedSearchState)	×
321	}
322
323	useEffect(() => {	×
324	if (searchState.query) {	×
325	captureSearch("searchPageTabbed", searchState);	×
326	}
327	}, [searchState, captureSearch])
328
329	useEffect(() => {	×
330	if (query.query !== searchState?.query) {	×
331	setSearchState((current) => ({	×
332	...current,
333	page: "1",
334	query: query.query,
335	}));
336	}
337	}, [query.query, searchState?.query]);	×
338
339	if (!isSearchEnabled()) {	×
340	return <div className={classes.root}>	×
341	Search is disabled (ElasticSearch not configured on server)
342	</div>
343	}
344
345	// component for search results depends on which content type tab we're on
346	const hitComponents = {	×
347	'Posts': ExpandedPostsSearchHit,
348	'Comments': ExpandedCommentsSearchHit,
349	'Tags': ExpandedTagsSearchHit,
350	'Sequences': ExpandedSequencesSearchHit,
351	'Users': ExpandedUsersSearchHit
352	}
353	const HitComponent = hitComponents[tab]	×
354
355	return <div className={classes.root}>	×
356	<InstantSearch
357	indexName={getElasticIndexNameWithSorting(tab, sorting)}
358	searchClient={getSearchClient()}
359	searchState={searchState}
360	onSearchStateChange={onSearchStateChange}
361	>
362
363	<div className={classes.filtersColumnWrapper}>
364	<Components.SearchFilters
365	tab={tab}
366	tagsFilter={tagsFilter}
367	handleUpdateTagsFilter={handleUpdateTagsFilter}
368	onSortingChange={onSortingChange}
369	sorting={sorting}
370	dateRangeValues={dateRangeValues}
371	setModalOpen={setModalOpen}
372	/>
373	</div>
374
375	<div className={classes.resultsColumn}>
376	<div className={classes.searchBoxRow}>
377	<div className={classes.searchInputArea}>
378	<ForumIcon icon="Search" className={classes.searchIcon}/>
379	{/* Ignored because SearchBox is incorrectly annotated as not taking null for its reset prop, when
380	* null is the only option that actually suppresses the extra X button.
381	// @ts-ignore */}
382	<SearchBox defaultRefinement={query.query} reset={null} focusShortcuts={[]} autoFocus={true} />
383	<div onClick={() => setModalOpen(true)}>	×
384	<IconButton className={classes.funnelIconButton}>
385	<ForumIcon icon="Funnel" className={classNames({[classes.funnelIconLW]: !isEAForum, [classes.funnelIconEA]: isEAForum})}/>
386	</IconButton>
387	</div>
388	</div>
389	<LWTooltip
390	title={`"Quotes" and -minus signs are supported.`}
391	className={classes.searchHelp}
392	>
393	<InfoIcon className={classes.infoIcon}/>
394	</LWTooltip>
395	</div>
396
397	<div ref={scrollToRef} />
398
399	<Modal
400	open={modalOpen}
401	onClose={() => setModalOpen(false)}	×
402	aria-labelledby="search-filters-modal"
403	aria-describedby="search-filters-modal"
404	className={classNames(classes.filtersModal)}
405	>
406	<div className={classes.filtersModalContent}>
407	<Components.SearchFilters
408	tab={tab}
409	tagsFilter={tagsFilter}
410	handleUpdateTagsFilter={handleUpdateTagsFilter}
411	onSortingChange={onSortingChange}
412	sorting={sorting}
413	dateRangeValues={dateRangeValues}
414	setModalOpen={setModalOpen}
415	/>
416	</div>
417	</Modal>
418
419	<Tabs
420	value={tab}
421	onChange={handleChangeTab}
422	className={classes.tabs}
423	textColor="primary"
424	aria-label="select content type to search"
425	scrollable
426	scrollButtons="off"
427	>
428	<Tab label="Posts" value="Posts" />
429	<Tab label="Comments" value="Comments" />
430	<Tab label={taggingNameIsSet.get() ? taggingNamePluralCapitalSetting.get() : 'Tags and Wiki'} value="Tags" />	×
431	<Tab label="Sequences" value="Sequences" />
432	<Tab label="Users" value="Users" />
433	</Tabs>
434
435	<ErrorBoundary>
436	<Configure hitsPerPage={hitsPerPage} />
437	<CustomStats className={classes.resultCount} />	×
438	{userHasPeopleDirectory(currentUser) && tab === "Users" && searchState?.query &&	×
439	<Link
440	to={`/people-directory?query=${encodeURIComponent(searchState.query)}`}
441	className={classes.peopleDirectory}
442	>
443	-> View results in People directory (beta)
444	</Link>
445	}
446	<CustomScrollTo targetRef={scrollToRef}>
447	<Hits hitComponent={(props) => <HitComponent {...props} />} />	×
448	</CustomScrollTo>
449	<Pagination showLast className={classes.pagination} />
450	</ErrorBoundary>
451	</div>
452	</InstantSearch>
453	</div>
454	}
455
456	const SearchPageTabbedComponent = registerComponent("SearchPageTabbed", SearchPageTabbed, {styles})	1✔
457
458	declare global {
459	interface ComponentTypes {
460	SearchPageTabbed: typeof SearchPageTabbedComponent
461	}
462	}

ForumMagnum / ForumMagnum / 8840329743

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