fix: Campaign page without items (#2354)

* fix: Campaign page without items * fix: Tests
decentraland · Jan 24, 2025 · ae78e79 · ae78e79
1 parent b0d9462
commit ae78e79
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 36 deletions.
diff --git a/webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.container.ts b/webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.container.ts
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 import { getAdditionalTags, getMainTag } from 'decentraland-dapps/dist/modules/campaign/selectors'
 import { fetchEventRequest } from '../../../modules/event/actions'
-import { getData as getContracts } from '../../../modules/event/selectors'
+import { getData as getContracts, isFetchingEvent } from '../../../modules/event/selectors'
 import { getIsCampaignBrowserEnabled } from '../../../modules/features/selectors'
 import { RootState } from '../../../modules/reducer'
 import { getIsFullscreen, getAssetType, getSection, getVendor } from '../../../modules/routing/selectors'
@@ -16,7 +16,8 @@ const mapState = (state: RootState): MapStateProps => ({
   contracts: getContracts(state),
   campaignTag: getMainTag(state),
   isCampaignBrowserEnabled: getIsCampaignBrowserEnabled(state),
-  additionalCampaignTags: getAdditionalTags(state)
+  additionalCampaignTags: getAdditionalTags(state),
+  isFetchingEvent: isFetchingEvent(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch) => ({

diff --git a/webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.tsx b/webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+import { ethers } from 'ethers'
 import { Banner } from 'decentraland-dapps/dist/containers/Banner'
 import { Loader } from 'decentraland-ui'
 import { View } from '../../../modules/ui/types'
@@ -22,22 +23,27 @@ const CampaignBrowserPage = (props: Props) => {
     isLoadingCampaign,
     campaignTag,
     additionalCampaignTags,
-    isCampaignBrowserEnabled
+    isCampaignBrowserEnabled,
+    isFetchingEvent
   } = props
   const vendor = isVendor(props.vendor) ? props.vendor : VendorName.DECENTRALAND
 
   useEffect(() => {
-    if (campaignTag) {
+    if (campaignTag && !isFetchingEvent && Object.values(contracts).length === 0) {
+      console.log('Fetching event contracts', campaignTag, additionalCampaignTags)
       onFetchEventContracts(campaignTag, additionalCampaignTags ?? [])
     }
-  }, [onFetchEventContracts, campaignTag])
+  }, [onFetchEventContracts, campaignTag, isFetchingEvent, contracts])
 
   const activeTab = NavigationTab.CAMPAIGN_BROWSER
+  // When there are no contracts for the campaign, use the zero address which will end up showing no items
+  const campaignContracts =
+    campaignTag && contracts[campaignTag] && contracts[campaignTag].length > 0 ? contracts[campaignTag] : [ethers.constants.AddressZero]
 
   return isCampaignBrowserEnabled ? (
     <PageLayout activeTab={activeTab}>
       <div className="CampaignBrowserPage">
-        {Object.values(contracts).length > 0 && !isLoadingCampaign && campaignTag ? (
+        {Object.values(contracts).length > 0 && !isLoadingCampaign && !isFetchingEvent && campaignTag ? (
           <>
             <div className="banner">
               <Banner id={MARKETPLACE_CAMPAIGN_COLLECTIBLES_BANNER_ID} />
@@ -48,7 +54,7 @@ const CampaignBrowserPage = (props: Props) => {
               view={View.MARKET}
               section={section}
               sections={[Section.WEARABLES, Section.EMOTES]}
-              contracts={contracts[campaignTag]}
+              contracts={campaignContracts}
             />
           </>
         ) : (

diff --git a/webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.types.ts b/webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.types.ts
@@ -15,6 +15,7 @@ export type Props = {
   campaignTag?: string
   additionalCampaignTags: string[]
   isLoadingCampaign?: boolean
+  isFetchingEvent?: boolean
 }
 
 export type MapStateProps = Pick<
@@ -28,6 +29,7 @@ export type MapStateProps = Pick<
   | 'additionalCampaignTags'
   | 'campaignTag'
   | 'isLoadingCampaign'
+  | 'isFetchingEvent'
 >
 export type MapDispatchProps = Pick<Props, 'onFetchEventContracts'>
 export type MapDispatch = Dispatch<FetchEventRequestAction>
diff --git a/webapp/src/modules/event/selectors.ts b/webapp/src/modules/event/selectors.ts
@@ -1,6 +1,10 @@
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { RootState } from '../reducer'
+import { FETCH_EVENT_REQUEST } from './actions'
 
 export const getState = (state: RootState) => state.event
 export const getData = (state: RootState) => getState(state).data
 export const getLoading = (state: RootState) => getState(state).loading
 export const getError = (state: RootState) => getState(state).error
+
+export const isFetchingEvent = (state: RootState) => isLoadingType(getLoading(state), FETCH_EVENT_REQUEST)