|
1 | | -import React from 'react'; |
| 1 | +import React, { useCallback } from 'react'; |
| 2 | +import debounce from 'lodash/debounce'; |
2 | 3 | import { useSelector } from 'react-redux'; |
3 | | -import type { AppState } from '../../../../types'; |
4 | | -import { actions } from '../../../../state'; |
5 | 4 | import { UISearchBox } from '@sap-ux/ui-components'; |
| 5 | +import i18next from 'i18next'; |
6 | 6 |
|
| 7 | +import type { AppState } from '../../../../types'; |
| 8 | +import { actions } from '../../../../state'; |
7 | 9 | import { Filters } from '../Filters'; |
8 | 10 |
|
9 | | -let timer: NodeJS.Timeout; |
| 11 | +const SEARCH_TIMEOUT = 150; |
| 12 | + |
10 | 13 | /** |
| 14 | + * SearchField component renders a search input field with debounce functionality. |
| 15 | + * It interacts with the Redux state to manage search queries and filters. |
11 | 16 | * |
12 | | - * @returns An input field |
| 17 | + * @returns {React.JSX.Element} The rendered search field component. |
13 | 18 | */ |
14 | | -export function SearchField() { |
| 19 | +export const SearchField: React.FC = (): React.JSX.Element => { |
15 | 20 | const appState = useSelector<AppState, AppState>((state) => state); |
16 | 21 |
|
17 | | - const onChange = (value: string): void => { |
18 | | - clearTimeout(timer); |
19 | | - actions.setQueryValue(value); |
20 | | - timer = setTimeout(() => { |
21 | | - actions.searchTree({ |
22 | | - query: value, |
23 | | - filters: { |
24 | | - product: appState.selectedProductFilters, |
25 | | - component: appState.selectedComponentFilters |
26 | | - }, |
27 | | - paging: { |
28 | | - responseSize: appState.pageSize, |
29 | | - offset: 0 |
30 | | - } |
31 | | - }); |
32 | | - }, 100); |
| 22 | + /** |
| 23 | + * Fetches the search results for the given search term and filters. |
| 24 | + * |
| 25 | + * @param {string} value - The search term. |
| 26 | + * @param {string[]} productFilters - The selected product filters. |
| 27 | + * @param {string[]} componentFilter - The selected component filters. |
| 28 | + * @param {number} pageSize - The number of results per page. |
| 29 | + */ |
| 30 | + const getTreesForSearchTerm = ( |
| 31 | + value: string, |
| 32 | + productFilters: string[], |
| 33 | + componentFilter: string[], |
| 34 | + pageSize: number |
| 35 | + ): void => { |
| 36 | + actions.searchTree({ |
| 37 | + query: value, |
| 38 | + filters: { |
| 39 | + product: productFilters, |
| 40 | + component: componentFilter |
| 41 | + }, |
| 42 | + paging: { |
| 43 | + responseSize: pageSize, |
| 44 | + offset: 0 |
| 45 | + } |
| 46 | + }); |
| 47 | + }; |
| 48 | + |
| 49 | + /** |
| 50 | + * Debounces the search input to avoid excessive API calls. |
| 51 | + * |
| 52 | + * @param {string} newSearchTerm - The new search term entered by the user. |
| 53 | + * @param {string[]} productFilters - The selected product filters. |
| 54 | + * @param {string[]} componentFilter - The selected component filters. |
| 55 | + * @param {number} pageSize - The number of results per page. |
| 56 | + */ |
| 57 | + const debounceSearch = useCallback( |
| 58 | + debounce( |
| 59 | + (newSearchTerm: string, productFilters: string[], componentFilter: string[], pageSize: number) => |
| 60 | + getTreesForSearchTerm(newSearchTerm, productFilters, componentFilter, pageSize), |
| 61 | + SEARCH_TIMEOUT |
| 62 | + ), |
| 63 | + [] |
| 64 | + ); |
| 65 | + |
| 66 | + /** |
| 67 | + * Clears the search input and triggers a debounced search with empty values. |
| 68 | + */ |
| 69 | + const onClearInput = (): void => { |
| 70 | + actions.setQueryValue(''); |
| 71 | + debounceSearch('', appState.selectedProductFilters, appState.selectedComponentFilters, appState.pageSize); |
| 72 | + }; |
| 73 | + |
| 74 | + /** |
| 75 | + * Handles changes to the search input, updating the query value and triggering a debounced search. |
| 76 | + * |
| 77 | + * @param {React.ChangeEvent<HTMLInputElement>} [_] - The change event from the input field. |
| 78 | + * @param {string} [newSearchTerm] - The new search term entered by the user. |
| 79 | + */ |
| 80 | + const onChangeInput = (_?: React.ChangeEvent<HTMLInputElement> | undefined, newSearchTerm: string = ''): void => { |
| 81 | + actions.setQueryValue(newSearchTerm); |
| 82 | + debounceSearch( |
| 83 | + newSearchTerm, |
| 84 | + appState.selectedProductFilters, |
| 85 | + appState.selectedComponentFilters, |
| 86 | + appState.pageSize |
| 87 | + ); |
33 | 88 | }; |
34 | 89 |
|
35 | 90 | return ( |
36 | | - <div className="guided-answer__header__searchField"> |
| 91 | + <div className="guided-answer__header__searchField" id="search-field-container"> |
37 | 92 | <UISearchBox |
38 | 93 | className="tree-search-field" |
39 | 94 | value={appState.query} |
40 | | - readOnly={appState.networkStatus === 'LOADING'} |
41 | | - placeholder="Search Guided Answers" |
| 95 | + placeholder={i18next.t('SEARCH_GUIDED_ANSWERS')} |
42 | 96 | id="search-field" |
43 | | - onClear={() => onChange('')} |
44 | | - onChange={(e: any) => onChange(e?.target?.value || '')}></UISearchBox> |
| 97 | + onClear={onClearInput} |
| 98 | + onChange={onChangeInput}></UISearchBox> |
45 | 99 | {appState.activeScreen === 'SEARCH' && <Filters />} |
46 | 100 | </div> |
47 | 101 | ); |
48 | | -} |
| 102 | +}; |
0 commit comments