diff --git a/package-lock.json b/package-lock.json index 815105c02df0818adc2c668a6afc742796eff297..4aad8440554ebbab3ac260423e29db2eb4097bbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21036,8 +21036,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.camelcase": { "version": "4.3.0", diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx index 4b7ee0e1d1ea8db5dbd3ff8d4eceb72f6f29b775..4925b9c9b892ab79626a1f0832aeb5f31c6c6fca 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx @@ -65,7 +65,12 @@ describe('SearchBar - component', () => { 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 02c20a18c027610cc60e3980107665ab9a0f75ec..ee5d31369ed9062989ef97c07c4d762c1933cb1c 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx @@ -8,7 +8,8 @@ import { } from '@/redux/search/search.selectors'; import { getSearchData } from '@/redux/search/search.thunks'; import Image from 'next/image'; -import { ChangeEvent, KeyboardEvent, useState } from 'react'; +import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; import { useSelector } from 'react-redux'; import { getDefaultSearchTab, getSearchValuesArrayAndTrimToSeven } from './SearchBar.utils'; @@ -20,6 +21,14 @@ export const SearchBar = (): JSX.Element => { const isDrawerOpen = useSelector(isDrawerOpenSelector); const isPerfectMatch = useSelector(perfectMatchSelector); const dispatch = useAppDispatch(); + const router = useRouter(); + + const updateSearchValueFromQueryParam = useCallback((): void => { + const { searchValue: searchValueQueryParam } = router.query; + if (typeof searchValueQueryParam === 'string') { + setSearchValue(searchValueQueryParam); + } + }, [router.query]); const openSearchDrawerIfClosed = (defaultSearchTab: string): void => { if (!isDrawerOpen) { @@ -49,6 +58,10 @@ export const SearchBar = (): JSX.Element => { } }; + useEffect(() => { + updateSearchValueFromQueryParam(); + }, [updateSearchValueFromQueryParam]); + return ( <div className="relative" data-testid="search-bar"> <input diff --git a/src/redux/root/query.selectors.ts b/src/redux/root/query.selectors.ts index 98660410716f25c5e3f663f7f22cd7073667ceee..a8bfdea3fce0fb764905107d9a0406ba0176e3a0 100644 --- a/src/redux/root/query.selectors.ts +++ b/src/redux/root/query.selectors.ts @@ -17,13 +17,20 @@ export const queryDataParamsSelector = createSelector( activeOverlaysId, ): QueryDataParams => { const queryDataParams: QueryDataParams = { - searchValue: searchValue.join(';'), perfectMatch, modelId, backgroundId, ...position.last, }; + /** prevent searchValueQuery from being empty */ + if (searchValue.length > ZERO) { + const joinedSearchValue = searchValue.join(';'); + if (joinedSearchValue) { + queryDataParams.searchValue = joinedSearchValue; + } + } + if (activeOverlaysId.length > ZERO) { queryDataParams.overlaysId = activeOverlaysId.join(','); }