From acecd9b3e3a87517494d8d4b51d7dc12d01ef931 Mon Sep 17 00:00:00 2001 From: isstuev Date: Fri, 9 Aug 2024 18:58:31 +0200 Subject: [PATCH] check redirect only on search bar submit --- ui/pages/SearchResults.tsx | 28 +++++++++++++++--------- ui/snippets/searchBar/SearchBar.tsx | 6 +++-- ui/snippets/searchBar/useSearchQuery.tsx | 4 ++-- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx index 801373cef8..5c7d70bca8 100644 --- 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) => { event.preventDefault(); }, [ ]); + const isLoading = marketplaceApps.isPlaceholderData || isPlaceholderData; + const displayedItems: Array = 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 = () => { { displayedItems.map((item, index) => ( )) } @@ -152,10 +160,10 @@ const SearchResultsPageContent = () => { { displayedItems.map((item, index) => ( )) } @@ -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 ? ( ) : ( ( diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx index 85e4c33117..e40b821287 100644 --- 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) => { 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 index 57cca96faa..da24b3e0d7 100644 --- 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(() => {