Sitecore Search SDK Starter Kit: Enhanced User Experience

1import { CheckIcon } from '@radix-ui/react-icons';
2import type { SearchResponseFacet } from '@sitecore-search/react';
3import { AccordionFacets } from '@sitecore-search/ui';
4import { useEffect, useState } from 'react';
5import type { SelectedFacets } from '../Facets';
6import { AccordionFacetsStyled } from '../styled';
7export interface FacetListType {
8  facet: SearchResponseFacet;
9  selectedFacetsToRender: SelectedFacets[];
10  facetsnumbertoshow: number;
11}
12
13export const FacetList = ({ selectedFacetsToRender, facet, facetsnumbertoshow }: FacetListType) => {
14  const isSelected = (facetID: string, facetValue: string) => {
15    return (
16      selectedFacetsToRender.filter(
17        (x) => x.id === facetID && x.values.map((q) => q.id).includes(facetValue)
18      ).length > 0
19    );
20  };
21
22  const minNumberOfItemsToShow = facetsnumbertoshow ?? 5;
23  const totalItems = facet.value.length;
24  const [keyword, setKeyword] = useState('');
25  const [filteredItems, setFilteredItems] = useState(facet.value);
26  const [numberOfItemsToShow, setNumberOfItemsToShow] = useState(minNumberOfItemsToShow);
27
28  useEffect(() => {
29    // This will be called whenever parentProp changes (i.e., when the parent component rerenders)
30    setFilteredItems(facet.value);
31  }, [facet.value]);
32
33  const handleInputChange = (event: { target: { value: string } }) => {
34    const inputKeyword = event.target.value.toLowerCase();
35    setKeyword(inputKeyword);
36
37    // Filter the array based on the input keyword
38    const updatedItems = facet.value.filter((item) =>
39      item.text.toLowerCase().includes(inputKeyword)
40    );
41    setFilteredItems(updatedItems);
42  };
43
44  const handleShowMore = () => {
45    setNumberOfItemsToShow((prevVisibleItems) => prevVisibleItems + minNumberOfItemsToShow);
46  };
47
48  const handleShowLess = () => {
49    setNumberOfItemsToShow((prevVisibleItems) =>
50      Math.max(prevVisibleItems - minNumberOfItemsToShow, minNumberOfItemsToShow)
51    );
52  };
53
54  return (
55    <>
56      <AccordionFacetsStyled.Facet facetId={facet.name} key={facet.name}>
57        <AccordionFacets.Content>
58          <div className="input_wrap">
59            <input
60              name={facet.name}
61              placeholder="Type to filter..."
62              id={facet.name}
63              type="text"
64              value={keyword}
65              onChange={handleInputChange}
66            />
67          </div>
68          <AccordionFacetsStyled.ValueList>
69            {filteredItems.slice(0, numberOfItemsToShow).map((v, index) => (
70              ...
71            ))}
72          </AccordionFacetsStyled.ValueList>
73
74          {filteredItems.length > minNumberOfItemsToShow && (
75            <div className="retractable-actions">
76              {numberOfItemsToShow < totalItems && (
77                <a href="#" className="retractable-toggle"
78                  onClick={(e) => {
79                    e.preventDefault();
80                    handleShowMore();
81                  }} > Show More{' '}
82                </a>
83              )}
84              <br />
85              {numberOfItemsToShow > minNumberOfItemsToShow && (
86                <a href="#" className="retractable-toggle"
87                  onClick={(e) => {
88                    e.preventDefault();
89                    handleShowLess();
90                  }} > {' '} Show Less
91                </a>
92              )}
93            </div>
94          )}
95        </AccordionFacets.Content>
96      </AccordionFacetsStyled.Facet>
97    </>
98  );
99};
100
101export default FacetList;

1const updateFacetsSearchParams = (params: any, remove = false) => {
2    const queryParams = new URLSearchParams(location.search);
3    const searchParamsObject = paramsToObject(queryParams.entries()) as any;
4    let values = searchParamsObject[params.facetId]?.split(',') ?? [];
5    values = values.filter((n: any) => n);
6    if (remove || params.checked === false) {
7      const index = values.indexOf(params.facetValueId);
8      if (index > -1) {
9        values.splice(index, 1);
10      }
11    } else {
12      values.push(params.facetValueId);
13    }
14    if (values.length <= 0) {
15      delete searchParamsObject[params.facetId];
16    }
17    delete searchParamsObject.page;
18    searchParamsObject[params.facetId] = removeDuplicates(values).join(',');
19    const updatedRelativeUrl = generateQueryString('/search', searchParamsObject);
20    navigate(updatedRelativeUrl);
21  };