Merge pull request #973 from blockscout/tom2drum/issue-963

search: bug fixes

ui/pages/SearchResults.tsx

@@ -23,6 +23,15 @@ const SearchResultsPageContent = () => {
   const [ showContent, setShowContent ] = React.useState(false);
 
   React.useEffect(() => {
+    if (showContent) {
+      return;
+    }
+
+    if (!debouncedSearchTerm) {
+      setShowContent(true);
+      return;
+    }
+
     if (redirectCheckQuery.data?.redirect && redirectCheckQuery.data.parameter) {
       switch (redirectCheckQuery.data.type) {
         case 'block': {
@@ -41,7 +50,7 @@ const SearchResultsPageContent = () => {
     }
 
     !redirectCheckQuery.isLoading && setShowContent(true);
-  }, [ redirectCheckQuery, router ]);
+  }, [ redirectCheckQuery, router, debouncedSearchTerm, showContent ]);
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -157,4 +166,4 @@ const SearchResultsPageContent = () => {
   );
 };
 
-export default SearchResultsPageContent;
+export default React.memo(SearchResultsPageContent);

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -162,23 +162,23 @@ test('search by tx hash +@mobile', async({ mount, page }) => {
 });
 
 test('search with simple match', async({ mount, page }) => {
-  const API_URL = buildApiUrl('search') + `?q=${ searchMock.tx1.tx_hash }`;
-  const API_CHECK_REDIRECT_URL = buildApiUrl('search_check_redirect') + `?q=${ searchMock.tx1.tx_hash }`;
+  const API_URL = buildApiUrl('search') + `?q=${ searchMock.token2.name }`;
+  const API_CHECK_REDIRECT_URL = buildApiUrl('search_check_redirect') + `?q=${ searchMock.token2.name }`;
 
   await page.route(API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify({
       items: [
-        searchMock.tx1,
+        searchMock.token2,
       ],
     }),
   }));
   await page.route(API_CHECK_REDIRECT_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify({
-      parameter: searchMock.tx1.tx_hash,
+      parameter: searchMock.token2.address,
       redirect: true,
-      type: 'transaction',
+      type: 'address',
     }),
   }));
 
@@ -187,14 +187,18 @@ test('search with simple match', async({ mount, page }) => {
       <SearchBar/>
     </TestApp>,
   );
-  await page.getByPlaceholder(/search/i).type(searchMock.tx1.tx_hash);
+  await page.getByPlaceholder(/search/i).type(searchMock.token2.name);
   await page.waitForResponse(API_URL);
+  await page.waitForResponse(API_CHECK_REDIRECT_URL);
+
+  const resultText = page.getByText('Found 2 matching result');
+  await expect(resultText).toBeVisible();
 
-  const resultText = page.getByText('Found 1 matching result');
-  expect(resultText).toBeTruthy();
+  const linkToToken = page.getByText(searchMock.token2.name);
+  await expect(linkToToken).toHaveCount(1);
 
-  const links = page.getByText(searchMock.tx1.tx_hash);
-  await expect(links).toHaveCount(1);
+  const linkToAddress = page.getByText(searchMock.token2.address);
+  await expect(linkToAddress).toHaveCount(2);
 });
 
 test('recent keywords suggest +@mobile', async({ mount, page }) => {

ui/snippets/searchBar/SearchBarInput.pw.tsx

@@ -0,0 +1,38 @@
+import { LightMode } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import SearchBarInput from './SearchBarInput';
+
+const props = {
+  onChange: () => {},
+  onSubmit: () => {},
+  onClear: () => {},
+  value: 'duck duck',
+};
+
+test('input on regular page +@mobile +@dark-mode', async({ mount, page }) => {
+  await mount(
+    <TestApp>
+      <SearchBarInput { ...props }/>
+    </TestApp>,
+  );
+  const input = page.getByPlaceholder(/search by/i);
+
+  await expect(input).toHaveScreenshot();
+});
+
+test('input on home page +@mobile +@dark-mode', async({ mount, page }) => {
+  await mount(
+    <TestApp>
+      <LightMode>
+        <SearchBarInput { ...props } isHomepage/>
+      </LightMode>
+    </TestApp>,
+  );
+  const input = page.getByPlaceholder(/search by/i);
+
+  await expect(input).toHaveScreenshot();
+});

ui/snippets/searchBar/SearchBarInput.tsx

@@ -107,7 +107,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
           value={ value }
         />
         { value && (
-          <InputRightElement top={{ base: 2, lg: '18px' }} right={ 2 }>
+          <InputRightElement top={{ base: isHomepage ? '18px' : 2, lg: '18px' }} right={ 2 }>
             <ClearButton onClick={ onClear }/>
           </InputRightElement>
         ) }

ui/snippets/searchBar/SearchBarSuggest.tsx

@@ -16,16 +16,16 @@ const getUniqueIdentifier = (item: SearchResultItem) => {
   switch (item.type) {
     case 'contract':
     case 'address': {
-      return item.address;
+      return item.type + item.address;
     }
     case 'transaction': {
-      return item.tx_hash;
+      return item.type + item.tx_hash;
     }
     case 'block': {
-      return item.block_hash || item.block_number;
+      return item.type + (item.block_hash || item.block_number);
     }
     case 'token': {
-      return item.address;
+      return item.type + item.address;
     }
   }
 };

ui/snippets/searchBar/useSearchQuery.tsx

@@ -44,12 +44,12 @@ export default function useSearchQuery(isSearchPage = false) {
     }
   }, debouncedSearchTerm);
 
-  return {
+  return React.useMemo(() => ({
     searchTerm,
     debouncedSearchTerm,
     handleSearchTermChange: setSearchTerm,
     query,
     redirectCheckQuery,
     pathname,
-  };
+  }), [ debouncedSearchTerm, pathname, query, redirectCheckQuery, searchTerm ]);
 }