diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx index 357969b1af5bb2815bf2dfeae6d77c1f73fb4422..3a899dec667f65ac55c8a25c9ff47da618640e46 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx @@ -66,17 +66,6 @@ describe('SearchBar - component', () => { expect(input).toBeDisabled(); }); - it('should set initial search value to match searchValue query param', () => { - (useRouter as jest.Mock).mockReturnValue({ - query: { searchValue: 'aspirin;nadh' }, - }); - renderComponent(); - - const input = screen.getByTestId<HTMLInputElement>('search-input'); - - expect(input.value).toBe('aspirin;nadh'); - }); - it('should change selected search element when user search another', () => { const { store } = renderComponent(); const input = screen.getByTestId<HTMLInputElement>('search-input'); diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx index 44fd0a0b3e1ba4fc46bf9c857da5e1eef102289b..87f2ee4003064718bf64a1be929a50e8c7465e1c 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx @@ -1,20 +1,22 @@ -import lensIcon from '@/assets/vectors/icons/lens.svg'; import { currentSelectedSearchElement, searchDrawerOpenSelector, } from '@/redux/drawer/drawer.selectors'; +import lensIcon from '@/assets/vectors/icons/lens.svg'; import { openSearchDrawerWithSelectedTab, selectTab } from '@/redux/drawer/drawer.slice'; import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { resetReactionsData } from '@/redux/reactions/reactions.slice'; import { isPendingSearchStatusSelector, perfectMatchSelector, + searchValueSelector, } from '@/redux/search/search.selectors'; import { getSearchData } from '@/redux/search/search.thunks'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; +import { ONE, ZERO } from '@/constants/common'; import { getDefaultSearchTab, getSearchValuesArrayAndTrimToSeven } from './SearchBar.utils'; const ENTER_KEY_CODE = 'Enter'; @@ -24,6 +26,7 @@ export const SearchBar = (): JSX.Element => { const isPendingSearchStatus = useSelector(isPendingSearchStatusSelector); const isSearchDrawerOpen = useSelector(searchDrawerOpenSelector); const isPerfectMatch = useSelector(perfectMatchSelector); + const searchValueState = useSelector(searchValueSelector); const currentTab = useSelector(currentSelectedSearchElement); const dispatch = useAppDispatch(); const router = useRouter(); @@ -31,10 +34,20 @@ export const SearchBar = (): JSX.Element => { const updateSearchValueFromQueryParam = useCallback((): void => { const { searchValue: searchValueQueryParam } = router.query; if (typeof searchValueQueryParam === 'string') { + // eslint-disable-next-line no-console + console.log('y'); setSearchValue(searchValueQueryParam); } }, [router.query]); + const clearSearchValueFromClearedState = useCallback((): void => { + if (searchValueState.length === ONE && searchValueState[ZERO] === '') { + // eslint-disable-next-line no-console + console.log('x'); + setSearchValue(''); + } + }, [searchValueState]); + const openSearchDrawerIfClosed = (defaultSearchTab: string): void => { if (!isSearchDrawerOpen) { dispatch(openSearchDrawerWithSelectedTab(defaultSearchTab)); @@ -74,6 +87,9 @@ export const SearchBar = (): JSX.Element => { useEffect(() => { updateSearchValueFromQueryParam(); }, [updateSearchValueFromQueryParam]); + useEffect(() => { + clearSearchValueFromClearedState(); + }, [clearSearchValueFromClearedState]); return ( <div className="relative" data-testid="search-bar">