feat: move collection items to functional components (#3116)

src/components/CollectionsPage/CollectionRow/CollectionRow.container.ts

@@ -1,16 +1,11 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { getCollectionItemCount } from 'modules/collection/selectors'
-import { OwnProps, MapStateProps, MapDispatchProps, MapDispatch } from './CollectionRow.types'
+import { OwnProps, MapStateProps } from './CollectionRow.types'
 import CollectionRow from './CollectionRow'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => ({
   itemCount: getCollectionItemCount(state, ownProps.collection.id)
 })
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path))
-})
-
-export default connect(mapState, mapDispatch)(CollectionRow)
+export default connect(mapState)(CollectionRow)

src/components/CollectionsPage/CollectionRow/CollectionRow.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Table, Icon } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from 'routing/locations'
@@ -9,39 +10,38 @@ import { formatDistanceToNow } from 'lib/date'
 import { Props } from './CollectionRow.types'
 import styles from './CollectionRow.module.css'
 
-export default class CollectionRow extends React.PureComponent<Props> {
-  handleTableRowClick = () => {
-    const { onNavigate, collection } = this.props
-    onNavigate(locations.collectionDetail(collection.id, getCollectionType(collection)))
-  }
+export default function CollectionRow(props: Props) {
+  const { collection, itemCount } = props
+  const history = useHistory()
 
-  render() {
-    const { collection, itemCount } = this.props
-    const type = getCollectionType(collection)
+  const handleTableRowClick = useCallback(() => {
+    history.push(locations.collectionDetail(collection.id, getCollectionType(collection)))
+  }, [history])
 
-    return (
-      <Table.Row className={styles.CollectionRow} onClick={this.handleTableRowClick}>
-        <Table.Cell width={3}>
-          <div className={styles.imageColumn}>
-            <CollectionImage className={styles.image} collectionId={collection.id} />
-            <div className={styles.title}>
-              <CollectionStatus collection={collection} />
-              <div className={styles.name}>{collection.name}</div>
-            </div>
+  const type = getCollectionType(collection)
+
+  return (
+    <Table.Row className={styles.CollectionRow} onClick={handleTableRowClick}>
+      <Table.Cell width={3}>
+        <div className={styles.imageColumn}>
+          <CollectionImage className={styles.image} collectionId={collection.id} />
+          <div className={styles.title}>
+            <CollectionStatus collection={collection} />
+            <div className={styles.name}>{collection.name}</div>
+          </div>
+        </div>
+      </Table.Cell>
+      <Table.Cell width={3}>{t(`collection.type.${type}`)}</Table.Cell>
+      <Table.Cell width={2}>{itemCount}</Table.Cell>
+      <Table.Cell width={3}>{formatDistanceToNow(collection.createdAt, { addSuffix: true })}</Table.Cell>
+      <Table.Cell width={3}>{formatDistanceToNow(collection.updatedAt, { addSuffix: true })}</Table.Cell>
+      <Table.Cell width={3}>
+        {collection.isPublished ? (
+          <div className={styles.published}>
+            {t('global.published')} <Icon name="check" />
           </div>
-        </Table.Cell>
-        <Table.Cell width={3}>{t(`collection.type.${type}`)}</Table.Cell>
-        <Table.Cell width={2}>{itemCount}</Table.Cell>
-        <Table.Cell width={3}>{formatDistanceToNow(collection.createdAt, { addSuffix: true })}</Table.Cell>
-        <Table.Cell width={3}>{formatDistanceToNow(collection.updatedAt, { addSuffix: true })}</Table.Cell>
-        <Table.Cell width={3}>
-          {collection.isPublished ? (
-            <div className={styles.published}>
-              {t('global.published')} <Icon name="check" />
-            </div>
-          ) : null}
-        </Table.Cell>
-      </Table.Row>
-    )
-  }
+        ) : null}
+      </Table.Cell>
+    </Table.Row>
+  )
 }

src/components/CollectionsPage/CollectionRow/CollectionRow.types.ts

@@ -1,14 +1,9 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Collection } from 'modules/collection/types'
 
 export type Props = {
   collection: Collection
   itemCount: number
-  onNavigate: (path: string) => void
 }
 
 export type MapStateProps = Pick<Props, 'itemCount'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
 export type OwnProps = Pick<Props, 'collection'>

src/components/CollectionsPage/CollectionsPage.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from 'modules/common/types'
@@ -44,7 +43,6 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onSetView: view => dispatch(setCollectionPageView(view)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
   onFetchOrphanItems: (address, params) => dispatch(fetchItemsRequest(address, params)),