From abe9c2031e2eea1babc7a69ca3f86a4dbb49df03 Mon Sep 17 00:00:00 2001
From: LautaroPetaccio <lausuper@gmail.com>
Date: Wed, 22 Jan 2025 17:33:18 -0300
Subject: [PATCH] fix: Move onClick handler to a component

---
 src/containers/Banner/Banner.container.ts | 39 ++++-------------------
 src/containers/Banner/Banner.tsx          | 32 +++++++++++++++++++
 src/containers/Banner/Banner.types.ts     |  7 ++--
 3 files changed, 44 insertions(+), 34 deletions(-)
 create mode 100644 src/containers/Banner/Banner.tsx

diff --git a/src/containers/Banner/Banner.container.ts b/src/containers/Banner/Banner.container.ts
index bfdc5bed..994f9d8c 100644
--- a/src/containers/Banner/Banner.container.ts
+++ b/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)
diff --git a/src/containers/Banner/Banner.tsx b/src/containers/Banner/Banner.tsx
new file mode 100644
index 00000000..ed919365
--- /dev/null
+++ b/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} />
+}
diff --git a/src/containers/Banner/Banner.types.ts b/src/containers/Banner/Banner.types.ts
index a7956522..8b707626 100644
--- a/src/containers/Banner/Banner.types.ts
+++ b/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'
 >