Merge branch 'fix/search-bar-query-params' into 'development'

fix(search bar): fixed unexpected search bar openings & lack of search value in input on load

See merge request !101

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",

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');

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

src/redux/root/query.selectors.ts

@@ -16,18 +16,20 @@ export const queryDataParamsSelector = createSelector(
     { modelId, backgroundId, position },
     activeOverlaysId,
   ): QueryDataParams => {
+    const joinedSearchValue = searchValue.join(';');
+    const shouldIncludeSearchValue = searchValue.length > ZERO && joinedSearchValue;
+
+    const shouldIncludeOverlaysId = activeOverlaysId.length > ZERO;
+
     const queryDataParams: QueryDataParams = {
-      searchValue: searchValue.join(';'),
       perfectMatch,
       modelId,
       backgroundId,
       ...position.last,
+      ...(shouldIncludeSearchValue ? { searchValue: joinedSearchValue } : {}),
+      ...(shouldIncludeOverlaysId ? { overlaysId: activeOverlaysId.join(',') } : {}),
     };
 
-    if (activeOverlaysId.length > ZERO) {
-      queryDataParams.overlaysId = activeOverlaysId.join(',');
-    }
-
     return queryDataParams;
   },
 );