diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx index bf0745864b..7a67bf3935 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ChangeEvent, useEffect, useState } from 'react'; +import React, { ChangeEvent, useState } from 'react'; import { Chip, TextField } from '@material-ui/core'; import { Autocomplete, @@ -22,7 +22,7 @@ import { AutocompleteRenderInputParams, } from '@material-ui/lab'; import { useSearch } from '../SearchContext'; -import { useAsyncFilterValues } from './hooks'; +import { useAsyncFilterValues, useDefaultFilterValue } from './hooks'; import { SearchFilterComponentProps } from './SearchFilter'; /** @@ -46,6 +46,7 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => { limitTags, } = props; const [inputValue, setInputValue] = useState(''); + useDefaultFilterValue(name, defaultValue); const { value: values, loading } = useAsyncFilterValues( asyncValues, inputValue, @@ -56,20 +57,6 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => { const filterValue = (filters[name] as string | string[] | undefined) || (multiple ? [] : null); - useEffect(() => { - const defaultIsEmpty = !defaultValue; - const defaultIsEmptyArray = - Array.isArray(defaultValue) && defaultValue.length === 0; - - if (!defaultIsEmpty && !defaultIsEmptyArray) { - setFilters(prevFilters => ({ - ...prevFilters, - [name]: defaultValue, - })); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - // Set new filter values on input change. const handleChange = ( _: ChangeEvent<{}>, diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx index 23761ee4a9..d08cac4cbe 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactElement, ChangeEvent, useEffect } from 'react'; +import React, { ReactElement, ChangeEvent } from 'react'; import { makeStyles, FormControl, @@ -31,7 +31,7 @@ import { SearchAutocompleteFilterProps, } from './SearchFilter.Autocomplete'; import { useSearch } from '../SearchContext'; -import { useAsyncFilterValues } from './hooks'; +import { useAsyncFilterValues, useDefaultFilterValue } from './hooks'; const useStyles = makeStyles({ label: { @@ -64,16 +64,7 @@ const CheckboxFilter = (props: SearchFilterComponentProps) => { const { className, defaultValue, label, name, values = [] } = props; const classes = useStyles(); const { filters, setFilters } = useSearch(); - - useEffect(() => { - if (Array.isArray(defaultValue)) { - setFilters(prevFilters => ({ - ...prevFilters, - [name]: defaultValue, - })); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + useDefaultFilterValue(name, defaultValue); const handleChange = (e: ChangeEvent) => { const { @@ -127,6 +118,7 @@ const SelectFilter = (props: SearchFilterComponentProps) => { values: givenValues, } = props; const classes = useStyles(); + useDefaultFilterValue(name, defaultValue); const { value: values = [], loading } = useAsyncFilterValues( asyncValues, '', @@ -135,16 +127,6 @@ const SelectFilter = (props: SearchFilterComponentProps) => { ); const { filters, setFilters } = useSearch(); - useEffect(() => { - if (typeof defaultValue === 'string') { - setFilters(prevFilters => ({ - ...prevFilters, - [name]: defaultValue, - })); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const handleChange = (e: ChangeEvent<{ value: unknown }>) => { const { target: { value }, diff --git a/plugins/search/src/components/SearchFilter/hooks.ts b/plugins/search/src/components/SearchFilter/hooks.ts index df9e8a980a..14dd00b8e7 100644 --- a/plugins/search/src/components/SearchFilter/hooks.ts +++ b/plugins/search/src/components/SearchFilter/hooks.ts @@ -14,9 +14,10 @@ * limitations under the License. */ -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import useDebounce from 'react-use/lib/useDebounce'; +import { useSearch } from '../SearchContext'; /** * Utility hook for either asynchronously loading filter values from a given @@ -68,3 +69,27 @@ export const useAsyncFilterValues = ( return state; }; + +/** + * Utility hook for applying a given default value to the search context. + */ +export const useDefaultFilterValue = ( + name: string, + defaultValue?: string | string[] | null, +) => { + const { setFilters } = useSearch(); + + useEffect(() => { + const defaultIsEmpty = !defaultValue; + const defaultIsEmptyArray = + Array.isArray(defaultValue) && defaultValue.length === 0; + + if (!defaultIsEmpty && !defaultIsEmptyArray) { + setFilters(prevFilters => ({ + ...prevFilters, + [name]: defaultValue, + })); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); +};