replace ref with state to fix test

blockscout · Mar 12, 2024 · 5524c8d · 5524c8d
1 parent 9a47831
commit 5524c8d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx
@@ -57,15 +57,16 @@ export default function useMarketplaceApps(
  const apiFetch = useApiFetch();
 
  // Update favorite apps only when selectedCategoryId changes to avoid sortApps to be called on each favorite app click
- const lastFavoriteAppsRef: React.MutableRefObject<Array<string> | undefined> = React.useRef();
+ const [ snapshotFavoriteApps, setSnapshotFavoriteApps ] = React.useState<Array<string> | undefined>();
+
  React.useEffect(() => {
  if (isFavoriteAppsLoaded) {
- lastFavoriteAppsRef.current = favoriteApps;
+ setSnapshotFavoriteApps(favoriteApps);
  }
  }, [ selectedCategoryId, isFavoriteAppsLoaded ]); // eslint-disable-line react-hooks/exhaustive-deps
 
  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>({
- queryKey: [ 'marketplace-dapps', lastFavoriteAppsRef.current, favoriteApps ],
+ queryKey: [ 'marketplace-dapps', snapshotFavoriteApps, favoriteApps ],
  queryFn: async() => {
  if (!feature.isEnabled) {
  return [];
@@ -75,10 +76,10 @@ export default function useMarketplaceApps(
  return apiFetch('marketplace_dapps', { pathParams: { chainId: config.chain.id } });
  }
  },
- select: (data) => sortApps(data as Array<MarketplaceAppOverview>, lastFavoriteAppsRef.current || []),
+ select: (data) => sortApps(data as Array<MarketplaceAppOverview>, snapshotFavoriteApps || []),
  placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
  staleTime: Infinity,
- enabled: feature.isEnabled && (!favoriteApps || Boolean(lastFavoriteAppsRef.current)),
+ enabled: feature.isEnabled && (!favoriteApps || Boolean(snapshotFavoriteApps)),
  });
 
  const displayedApps = React.useMemo(() => {

diff --git a/ui/pages/Marketplace.pw.tsx b/ui/pages/Marketplace.pw.tsx
@@ -18,7 +18,7 @@ const test = base.extend({
  ]) as any,
 });
 
-test('base view +@dark-mode', async({ mount, page }) => {
+test('base view +@mobile +@dark-mode', async({ mount, page }) => {
  await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
  status: 200,
  body: JSON.stringify(appsMock),