Merge pull request #2160 from blockscout/fe-2077

check redirect only on search bar submit
blockscout · Aug 13, 2024 · de007f5 · de007f5
2 parents 2fb9169 + acecd9b
commit de007f5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
@@ -7,6 +7,8 @@ import type { SearchResultItem } from 'types/client/search';
 
 import config from 'configs/app';
 import * as regexp from 'lib/regexp';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultsInput from 'ui/searchResults/SearchResultsInput';
@@ -28,9 +30,10 @@ import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 
 const SearchResultsPageContent = () => {
   const router = useRouter();
-  const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery();
+  const withRedirectCheck = getQueryParamString(router.query.redirect) === 'true';
+  const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery(withRedirectCheck);
   const { data, isError, isPlaceholderData, pagination } = query;
-  const [ showContent, setShowContent ] = React.useState(false);
+  const [ showContent, setShowContent ] = React.useState(!withRedirectCheck);
 
   const marketplaceApps = useMarketplaceApps(debouncedSearchTerm);
 
@@ -75,13 +78,18 @@ const SearchResultsPageContent = () => {
       }
     }
 
-    !redirectCheckQuery.isPending && setShowContent(true);
+    if (!redirectCheckQuery.isPending) {
+      setShowContent(true);
+      removeQueryParam(router, 'redirect');
+    }
   }, [ redirectCheckQuery, router, debouncedSearchTerm, showContent ]);
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
   }, [ ]);
 
+  const isLoading = marketplaceApps.isPlaceholderData || isPlaceholderData;
+
   const displayedItems: Array<SearchResultItem | SearchResultAppItem> = React.useMemo(() => {
     const apiData = (data?.items || []).filter((item) => {
       if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
@@ -111,12 +119,12 @@ const SearchResultsPageContent = () => {
       } : undefined;
 
     return [
-      ...(pagination.page === 1 && !isPlaceholderData ? marketplaceApps.displayedApps.map((item) => ({ type: 'app' as const, app: item })) : []),
+      ...(pagination.page === 1 && !isLoading ? marketplaceApps.displayedApps.map((item) => ({ type: 'app' as const, app: item })) : []),
       futureBlockItem,
       ...apiData,
     ].filter(Boolean);
 
-  }, [ data?.items, data?.next_page_params, isPlaceholderData, pagination.page, debouncedSearchTerm, marketplaceApps.displayedApps ]);
+  }, [ data?.items, data?.next_page_params, isPlaceholderData, pagination.page, debouncedSearchTerm, marketplaceApps.displayedApps, isLoading ]);
 
   const content = (() => {
     if (isError) {
@@ -132,10 +140,10 @@ const SearchResultsPageContent = () => {
         <Show below="lg" ssr={ false }>
           { displayedItems.map((item, index) => (
             <SearchResultListItem
-              key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
+              key={ (isLoading ? 'placeholder_' : 'actual_') + index }
               data={ item }
               searchTerm={ debouncedSearchTerm }
-              isLoading={ isPlaceholderData }
+              isLoading={ isLoading }
             />
           )) }
         </Show>
@@ -152,10 +160,10 @@ const SearchResultsPageContent = () => {
             <Tbody>
               { displayedItems.map((item, index) => (
                 <SearchResultTableItem
-                  key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
+                  key={ (isLoading ? 'placeholder_' : 'actual_') + index }
                   data={ item }
                   searchTerm={ debouncedSearchTerm }
-                  isLoading={ isPlaceholderData }
+                  isLoading={ isLoading }
                 />
               )) }
             </Tbody>
@@ -172,7 +180,7 @@ const SearchResultsPageContent = () => {
 
     const resultsCount = pagination.page === 1 && !data?.next_page_params ? displayedItems.length : '50+';
 
-    const text = isPlaceholderData && pagination.page === 1 ? (
+    const text = isLoading && pagination.page === 1 ? (
       <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
     ) : (
       (

diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
@@ -14,6 +14,7 @@ import type { FormEvent } from 'react';
 import React from 'react';
 import { Element } from 'react-scroll';
 
+import type { Route } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -50,14 +51,15 @@ const SearchBar = ({ isHomepage }: Props) => {
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (searchTerm) {
-      const url = route({ pathname: '/search-results', query: { q: searchTerm } });
+      const resultRoute: Route = { pathname: '/search-results', query: { q: searchTerm, redirect: 'true' } };
+      const url = route(resultRoute);
       mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
         'Search query': searchTerm,
         'Source page type': mixpanel.getPageType(pathname),
         'Result URL': url,
       });
       saveToRecentKeywords(searchTerm);
-      router.push({ pathname: '/search-results', query: { q: searchTerm } }, undefined, { shallow: true });
+      router.push(resultRoute, undefined, { shallow: true });
     }
   }, [ searchTerm, pathname, router ]);
 

diff --git a/ui/snippets/searchBar/useSearchQuery.tsx b/ui/snippets/searchBar/useSearchQuery.tsx
@@ -9,7 +9,7 @@ import { SEARCH_RESULT_ITEM, SEARCH_RESULT_NEXT_PAGE_PARAMS } from 'stubs/search
 import { generateListStub } from 'stubs/utils';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-export default function useSearchQuery() {
+export default function useSearchQuery(withRedirectCheck?: boolean) {
   const router = useRouter();
   const q = React.useRef(getQueryParamString(router.query.q));
   const initialValue = q.current;
@@ -31,7 +31,7 @@ export default function useSearchQuery() {
   const redirectCheckQuery = useApiQuery('search_check_redirect', {
     // on search result page we check redirect only once on mount
     queryParams: { q: q.current },
-    queryOptions: { enabled: Boolean(q.current) },
+    queryOptions: { enabled: Boolean(q.current) && withRedirectCheck },
   });
 
   useUpdateValueEffect(() => {