Merge pull request #2132 from blockscout/fix-marketplace-search-query

Fix marketplace search query

ui/marketplace/useMarketplace.tsx

-import _pickBy from 'lodash/pickBy';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -109,24 +108,38 @@ export default function useMarketplace() {
   }, [ isPlaceholderData ]);
 
   React.useEffect(() => {
-    const query = _pickBy({
-      category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId,
-      filter: debouncedFilterQuery,
-    }, Boolean);
+    if (isPlaceholderData) {
+      return;
+    }
+
+    const { query } = router;
+    const newQuery = { ...query };
+
+    if (selectedCategoryId !== MarketplaceCategory.ALL) {
+      newQuery.category = selectedCategoryId;
+    } else {
+      delete newQuery.category;
+    }
+
+    if (debouncedFilterQuery) {
+      newQuery.filter = debouncedFilterQuery;
+    } else {
+      delete newQuery.filter;
+    }
 
     if (debouncedFilterQuery.length > 0) {
       mixpanel.logEvent(mixpanel.EventTypes.LOCAL_SEARCH, { Source: 'Marketplace', 'Search query': debouncedFilterQuery });
     }
 
     router.replace(
-      { pathname: '/apps', query },
+      { pathname: '/apps', query: newQuery },
       undefined,
       { shallow: true },
     );
   // omit router in the deps because router.push() somehow modifies it
   // and we get infinite re-renders then
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ debouncedFilterQuery, selectedCategoryId ]);
+  }, [ debouncedFilterQuery, selectedCategoryId, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     selectedCategoryId,

ui/marketplace/useMarketplaceApps.tsx

@@ -62,6 +62,7 @@ export default function useMarketplaceApps(
 
   const { data: securityReports, isPlaceholderData: isSecurityReportsPlaceholderData } = useSecurityReports();
 
+  const [ sorting, setSorting ] = React.useState<SortValue>();
   // Set the value only 1 time to avoid unnecessary useQuery calls and re-rendering of all applications
   const [ snapshotFavoriteApps, setSnapshotFavoriteApps ] = React.useState<Array<string> | undefined>();
   const isInitialSetup = React.useRef(true);
@@ -73,7 +74,9 @@ export default function useMarketplaceApps(
     }
   }, [ isFavoriteAppsLoaded, favoriteApps ]);
 
-  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppWithSecurityReport>>({
+  const {
+    isPlaceholderData: isAppsPlaceholderData, isError, error, data,
+  } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppWithSecurityReport>>({
     queryKey: [ 'marketplace-dapps', snapshotFavoriteApps ],
     queryFn: async() => {
       if (!feature.isEnabled) {
@@ -90,7 +93,7 @@ export default function useMarketplaceApps(
     enabled: feature.isEnabled && Boolean(snapshotFavoriteApps),
   });
 
-  const [ sorting, setSorting ] = React.useState<SortValue>();
+  const isPlaceholderData = isAppsPlaceholderData || isSecurityReportsPlaceholderData;
 
   const appsWithSecurityReportsAndRating = React.useMemo(() =>
     data?.map((app) => ({
@@ -101,6 +104,10 @@ export default function useMarketplaceApps(
   [ data, securityReports, ratings ]);
 
   const displayedApps = React.useMemo(() => {
+    if (isPlaceholderData) {
+      return appsWithSecurityReportsAndRating || [];
+    }
+
     return appsWithSecurityReportsAndRating
       ?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps))
       .sort((a, b) => {
@@ -112,14 +119,14 @@ export default function useMarketplaceApps(
         }
         return 0;
       }) || [];
-  }, [ selectedCategoryId, appsWithSecurityReportsAndRating, filter, favoriteApps, sorting ]);
+  }, [ selectedCategoryId, appsWithSecurityReportsAndRating, filter, favoriteApps, sorting, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     data,
     displayedApps,
     error,
     isError,
-    isPlaceholderData: isPlaceholderData || isSecurityReportsPlaceholderData,
+    isPlaceholderData,
     setSorting,
   }), [
     data,
@@ -127,7 +134,6 @@ export default function useMarketplaceApps(
     error,
     isError,
     isPlaceholderData,
-    isSecurityReportsPlaceholderData,
     setSorting,
   ]);
 }

ui/shared/EmptySearchResult.tsx

-import { Box, Heading, Text, Icon } from '@chakra-ui/react';
+import { Box, Heading, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 // This icon doesn't work properly when it is in the sprite
@@ -30,9 +30,9 @@ const EmptySearchResult = ({ text }: Props) => {
         No results
       </Heading>
 
-      <Text fontSize={{ base: 'sm', sm: 'md' }} align="center">
+      <Box fontSize={{ base: 'sm', sm: 'md' }} textAlign="center">
         { text }
-      </Text>
+      </Box>
     </Box>
   );
 };