fix: Move onClick handler to a component

src/containers/Banner/Banner.container.ts

@@ -1,43 +1,18 @@
 import { connect } from 'react-redux'
-import { Banner } from 'decentraland-ui2'
 import {
   getBanner,
   getBannerAssets,
   getError,
   isLoading
 } from '../../modules/campaign'
-import { getAnalytics } from '../../modules/analytics/utils'
 import { MapStateProps, OwnProps } from './Banner.types'
-import { sleep } from '../../lib/time'
+import { Banner } from './Banner'
 
-const mapState = (state: any, ownProps: OwnProps): MapStateProps => {
-  const fields = getBanner(state, ownProps.id) ?? null
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const anchorEvent = (event as unknown) as React.MouseEvent<
-      HTMLAnchorElement
-    >
-    anchorEvent.preventDefault()
-
-    const analytics = getAnalytics()
-    if (analytics) {
-      analytics.track('CLICK_BANNER', {
-        id: fields?.id,
-        location: ownProps.id
-      })
-    }
-    // Delay the navigation to allow the analytics to be tracked
-    sleep(300).then(() => {
-      window.location.href = (anchorEvent.target as HTMLAnchorElement).href
-    })
-  }
-
-  return {
-    onClick: handleClick,
-    fields,
-    assets: getBannerAssets(state, ownProps.id),
-    isLoading: isLoading(state),
-    error: getError(state)
-  }
-}
+const mapState = (state: any, ownProps: OwnProps): MapStateProps => ({
+  fields: getBanner(state, ownProps.id) ?? null,
+  assets: getBannerAssets(state, ownProps.id),
+  isLoading: isLoading(state),
+  error: getError(state)
+})
 
 export default connect<MapStateProps, {}, OwnProps>(mapState)(Banner)

src/containers/Banner/Banner.tsx

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react'
+import { Banner as BannerComponent } from 'decentraland-ui2'
+import { getAnalytics } from '../../modules/analytics/utils'
+import { BannerProps } from './Banner.types'
+import { sleep } from '../../lib/time'
+
+export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
+  const { fields, id, ...rest } = props
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      const anchorEvent = (event as unknown) as React.MouseEvent<
+        HTMLAnchorElement
+      >
+      anchorEvent.preventDefault()
+
+      const analytics = getAnalytics()
+      if (analytics) {
+        analytics.track('CLICK_BANNER', {
+          id: fields?.id,
+          location: id
+        })
+      }
+      // Delay the navigation to allow the analytics to be tracked
+      sleep(300).then(() => {
+        window.location.href = (anchorEvent.target as HTMLAnchorElement).href
+      })
+    },
+    [fields?.id, id]
+  )
+
+  return <BannerComponent onClick={handleClick} fields={fields} {...rest} />
+}

src/containers/Banner/Banner.types.ts

@@ -1,8 +1,11 @@
+import { BannerFields } from '@dcl/schemas'
 import { BannerProps as UIBannerProps } from 'decentraland-ui2'
 
-export type BannerProps = UIBannerProps & { id: string }
+export type BannerProps = Omit<UIBannerProps, 'fields'> & {
+  fields: (BannerFields & { id: string }) | null
+} & { id: string }
 export type OwnProps = Pick<BannerProps, 'id'>
 export type MapStateProps = Pick<
   BannerProps,
-  'fields' | 'assets' | 'isLoading' | 'error' | 'onClick'
+  'fields' | 'assets' | 'isLoading' | 'error'
 >