From fd974071bea69b3cda4b2ef5838c3cd6c6728a6d Mon Sep 17 00:00:00 2001 From: Max Alekseenko Date: Wed, 31 Jul 2024 19:31:29 +0200 Subject: [PATCH 1/4] fix initial loading with existing search query --- ui/marketplace/useMarketplace.tsx | 6 +++++- ui/marketplace/useMarketplaceApps.tsx | 16 +++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/ui/marketplace/useMarketplace.tsx b/ui/marketplace/useMarketplace.tsx index 8e4b793aa1..05c9308236 100644 --- a/ui/marketplace/useMarketplace.tsx +++ b/ui/marketplace/useMarketplace.tsx @@ -109,6 +109,10 @@ export default function useMarketplace() { }, [ isPlaceholderData ]); React.useEffect(() => { + if (isPlaceholderData) { + return; + } + const query = _pickBy({ category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId, filter: debouncedFilterQuery, @@ -126,7 +130,7 @@ export default function useMarketplace() { // 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, diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx index 7d6730046c..829d807fde 100644 --- a/ui/marketplace/useMarketplaceApps.tsx +++ b/ui/marketplace/useMarketplaceApps.tsx @@ -62,6 +62,7 @@ export default function useMarketplaceApps( const { data: securityReports, isPlaceholderData: isSecurityReportsPlaceholderData } = useSecurityReports(); + const [ sorting, setSorting ] = React.useState(); // Set the value only 1 time to avoid unnecessary useQuery calls and re-rendering of all applications const [ snapshotFavoriteApps, setSnapshotFavoriteApps ] = React.useState | undefined>(); const isInitialSetup = React.useRef(true); @@ -73,7 +74,9 @@ export default function useMarketplaceApps( } }, [ isFavoriteAppsLoaded, favoriteApps ]); - const { isPlaceholderData, isError, error, data } = useQuery, Array>({ + const { + isPlaceholderData: isAppsPlaceholderData, isError, error, data, + } = useQuery, Array>({ 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(); + 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, ]); } From 39321aeadf6b79d4cdda8cbd300e9c5657845c08 Mon Sep 17 00:00:00 2001 From: Max Alekseenko Date: Wed, 31 Jul 2024 19:43:34 +0200 Subject: [PATCH 2/4] fix deletion of other query params --- ui/marketplace/useMarketplace.tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/ui/marketplace/useMarketplace.tsx b/ui/marketplace/useMarketplace.tsx index 05c9308236..1a67d6d791 100644 --- a/ui/marketplace/useMarketplace.tsx +++ b/ui/marketplace/useMarketplace.tsx @@ -1,4 +1,3 @@ -import _pickBy from 'lodash/pickBy'; import { useRouter } from 'next/router'; import React from 'react'; @@ -113,17 +112,27 @@ export default function useMarketplace() { return; } - const query = _pickBy({ - category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId, - filter: debouncedFilterQuery, - }, Boolean); + 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 }, ); From 2ba7d62cb76fee3175d4cc8d861da5bf0dd93d70 Mon Sep 17 00:00:00 2001 From: Max Alekseenko Date: Wed, 31 Jul 2024 19:53:02 +0200 Subject: [PATCH 3/4] fix nesting --- ui/shared/EmptySearchResult.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/shared/EmptySearchResult.tsx b/ui/shared/EmptySearchResult.tsx index 93433c17c7..1364bd5e3b 100644 --- a/ui/shared/EmptySearchResult.tsx +++ b/ui/shared/EmptySearchResult.tsx @@ -30,7 +30,7 @@ const EmptySearchResult = ({ text }: Props) => { No results - + { text } From a5a2b7555ed27622a77a3d378a97ecd11dcf0f4a Mon Sep 17 00:00:00 2001 From: Max Alekseenko Date: Thu, 1 Aug 2024 18:47:54 +0200 Subject: [PATCH 4/4] replace Text with Box --- ui/shared/EmptySearchResult.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/shared/EmptySearchResult.tsx b/ui/shared/EmptySearchResult.tsx index 1364bd5e3b..ae4db4d8db 100644 --- a/ui/shared/EmptySearchResult.tsx +++ b/ui/shared/EmptySearchResult.tsx @@ -1,4 +1,4 @@ -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 - + { text } - + ); };