From d6d9547846dfaa5863fd68a93f63ec41d918985f Mon Sep 17 00:00:00 2001
From: Melisa Anabella Rossi <melisa.rossi@decentraland.org>
Date: Fri, 7 Jun 2024 14:48:49 -0300
Subject: [PATCH] feat: move collection items to functional components (#3116)

---
 .../CollectionRow/CollectionRow.container.ts  |   9 +-
 .../CollectionRow/CollectionRow.tsx           |  66 ++---
 .../CollectionRow/CollectionRow.types.ts      |   5 -
 .../CollectionsPage.container.ts              |   2 -
 .../CollectionsPage/CollectionsPage.tsx       | 257 +++++++++---------
 .../CollectionsPage/CollectionsPage.types.ts  |  14 +-
 .../ItemRow/ItemRow.container.ts              |  10 -
 .../CollectionsPage/ItemRow/ItemRow.tsx       |  45 ++-
 .../CollectionsPage/ItemRow/ItemRow.types.ts  |   6 -
 .../CollectionsPage/ItemRow/index.ts          |   2 +-
 .../CollectionRow/CollectionRow.container.ts  |   2 -
 .../CollectionRow/CollectionRow.tsx           | 187 ++++++-------
 .../CollectionRow/CollectionRow.types.ts      |   6 +-
 .../InspectorPage/TopBar/TopBar.container.ts  |   2 -
 .../InspectorPage/TopBar/TopBar.tsx           |  11 +-
 .../InspectorPage/TopBar/TopBar.types.ts      |   6 +-
 .../Navigation/Navigation.container.ts        |   9 +-
 src/components/Navigation/Navigation.tsx      |  74 +++--
 src/components/Navigation/Navigation.types.ts |   6 -
 .../SDK6TopBar/SDK6TopBar.container.ts        |   8 +-
 src/components/SDK6TopBar/SDK6TopBar.tsx      | 251 ++++++++---------
 src/components/SDK6TopBar/SDK6TopBar.types.ts |  10 +-
 .../TemplateDetailPage.container.ts           |   2 -
 .../TemplateDetailPage/TemplateDetailPage.tsx |   9 +-
 .../TemplateDetailPage.types.ts               |   6 +-
 .../TemplatesPage/TemplatesPage.container.ts  |   4 +-
 .../TemplatesPage/TemplatesPage.tsx           |  12 +-
 .../TemplatesPage/TemplatesPage.types.ts      |   6 +-
 .../UnsupportedBrowserPage.container.ts       |  14 -
 .../UnsupportedBrowserPage.tsx                |  59 ++--
 .../UnsupportedBrowserPage.types.ts           |   9 -
 .../UnsupportedBrowserPage/index.ts           |   2 +-
 32 files changed, 501 insertions(+), 610 deletions(-)
 delete mode 100644 src/components/CollectionsPage/ItemRow/ItemRow.container.ts
 delete mode 100644 src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.container.ts
 delete mode 100644 src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.types.ts

diff --git a/src/components/CollectionsPage/CollectionRow/CollectionRow.container.ts b/src/components/CollectionsPage/CollectionRow/CollectionRow.container.ts
index 86f8441bd..7f74fad96 100644
--- a/src/components/CollectionsPage/CollectionRow/CollectionRow.container.ts
+++ b/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)
diff --git a/src/components/CollectionsPage/CollectionRow/CollectionRow.tsx b/src/components/CollectionsPage/CollectionRow/CollectionRow.tsx
index 31e243fbe..a32806677 100644
--- a/src/components/CollectionsPage/CollectionRow/CollectionRow.tsx
+++ b/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>
+  )
 }
diff --git a/src/components/CollectionsPage/CollectionRow/CollectionRow.types.ts b/src/components/CollectionsPage/CollectionRow/CollectionRow.types.ts
index 22079851f..3fb1cea45 100644
--- a/src/components/CollectionsPage/CollectionRow/CollectionRow.types.ts
+++ b/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'>
diff --git a/src/components/CollectionsPage/CollectionsPage.container.ts b/src/components/CollectionsPage/CollectionsPage.container.ts
index 5235ab538..c7fa9aa39 100644
--- a/src/components/CollectionsPage/CollectionsPage.container.ts
+++ b/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)),
diff --git a/src/components/CollectionsPage/CollectionsPage.tsx b/src/components/CollectionsPage/CollectionsPage.tsx
index 72a145958..cfdafa453 100644
--- a/src/components/CollectionsPage/CollectionsPage.tsx
+++ b/src/components/CollectionsPage/CollectionsPage.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useHistory } from 'react-router-dom'
 import {
   Container,
   Row,
@@ -36,93 +37,100 @@ import './CollectionsPage.css'
 
 const PAGE_SIZE = 20
 export const LOCALSTORAGE_EMOTES_V2_ANNOUCEMENT = 'builder-emotes-2.0-announcement'
-export default class CollectionsPage extends React.PureComponent<Props> {
-  state = {
-    currentTab: TABS.COLLECTIONS,
-    sort: CurationSortOptions.CREATED_AT_DESC,
-    page: 1,
-    search: ''
-  }
 
-  timeout: ReturnType<typeof setTimeout> | undefined = undefined
+export default function CollectionsPage(props: Props) {
+  const {
+    address,
+    items,
+    collections,
+    view,
+    collectionsPaginationData,
+    itemsPaginationData,
+    hasUserOrphanItems,
+    isLoadingItems,
+    isLoadingCollections,
+    isLoadingOrphanItem,
+    isThirdPartyManager,
+    onFetchCollections,
+    onFetchOrphanItem,
+    onFetchOrphanItems,
+    onOpenModal,
+    onSetView
+  } = props
 
-  componentDidMount() {
-    const { address, hasUserOrphanItems, onFetchCollections, onFetchOrphanItem, onOpenModal } = this.props
-    // fetch if already connected
-    if (address) {
-      onFetchCollections(address, { page: 1, limit: PAGE_SIZE, sort: CurationSortOptions.CREATED_AT_DESC })
-      // TODO: Remove this call when there are no users with orphan items
-      if (hasUserOrphanItems === undefined) {
-        onFetchOrphanItem(address)
-      }
+  const [currentTab, setCurrentTab] = useState<TABS>(TABS.COLLECTIONS)
+  const [sort, setSort] = useState<CurationSortOptions>(CurationSortOptions.CREATED_AT_DESC)
+  const [page, setPage] = useState<number>(1)
+  const [search, setSearch] = useState<string>('')
+  const timeout = useRef<NodeJS.Timeout | null>(null)
+  const history = useHistory()
 
-      if (!localStorage.getItem(LOCALSTORAGE_EMOTES_V2_ANNOUCEMENT)) {
-        onOpenModal('EmotesV2AnnouncementModal')
-      }
+  useEffect(() => {
+    if (!localStorage.getItem(LOCALSTORAGE_EMOTES_V2_ANNOUCEMENT)) {
+      onOpenModal('EmotesV2AnnouncementModal')
     }
-  }
+  }, [])
 
-  componentDidUpdate(prevProps: Props) {
-    const { address, hasUserOrphanItems, onFetchCollections, onFetchOrphanItem } = this.props
-    const { sort } = this.state
-    // if it's the first page and it was not connected when mounting
-    if (address && address !== prevProps.address) {
+  useEffect(() => {
+    if (address) {
       onFetchCollections(address, { page: 1, limit: PAGE_SIZE, sort })
-      // TODO: Remove this call when there are no users with orphan items
       if (hasUserOrphanItems === undefined) {
         onFetchOrphanItem(address)
       }
     }
-  }
+  }, [address, sort])
 
-  handleNewCollection = () => {
-    this.props.onOpenModal('CreateCollectionModal')
-  }
+  const handleNewCollection = useCallback(() => {
+    onOpenModal('CreateCollectionModal')
+  }, [onOpenModal])
 
-  handleNewThirdPartyCollection = () => {
-    this.props.onOpenModal('CreateThirdPartyCollectionModal')
-  }
+  const handleNewThirdPartyCollection = useCallback(() => {
+    onOpenModal('CreateThirdPartyCollectionModal')
+  }, [onOpenModal])
 
-  handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-    const { onFetchCollections, address } = this.props
-    this.setState({ search: data.value })
-    if (this.timeout) {
-      clearTimeout(this.timeout)
+  const handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+    setSearch(data.value)
+    if (timeout.current) {
+      clearTimeout(timeout.current)
+      timeout.current = null
     }
-    this.timeout = setTimeout(() => {
+
+    timeout.current = setTimeout(() => {
       onFetchCollections(address, { page: 1, limit: PAGE_SIZE, q: data.value })
     }, 500)
   }
 
-  handleOpenEditor = () => {
-    const { onNavigate } = this.props
-    onNavigate(locations.itemEditor())
-  }
+  const handleOpenEditor = useCallback(() => {
+    history.push(locations.itemEditor())
+  }, [history])
 
-  handleSortChange = (_event: React.SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
-    const { onFetchCollections, address } = this.props
-    const sort = value as CurationSortOptions
-    this.setState({ sort, page: 1 })
-    onFetchCollections(address, { page: 1, limit: PAGE_SIZE, sort })
-  }
+  const handleSortChange = useCallback(
+    (_event: React.SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
+      const sort = value as CurationSortOptions
+      setSort(sort)
+      setPage(1)
+      onFetchCollections(address, { page: 1, limit: PAGE_SIZE, sort })
+    },
+    [address]
+  )
 
-  handleTabChange = (tab: TABS) => {
-    const { onFetchOrphanItems, onFetchCollections, address } = this.props
-    const { sort } = this.state
-    this.setState({ currentTab: tab, page: 1 }, () => {
+  const handleTabChange = useCallback(
+    (tab: TABS) => {
+      setCurrentTab(tab)
+      setPage(1)
       const fetchFn = tab === TABS.ITEMS ? onFetchOrphanItems : onFetchCollections
       const params = tab === TABS.ITEMS ? { page: 1, limit: PAGE_SIZE } : { page: 1, limit: PAGE_SIZE, sort }
       if (address) {
         fetchFn(address, params)
       }
-    })
-  }
+    },
+    [address]
+  )
 
-  renderGrid() {
-    const { items, collections, isLoadingItems } = this.props
+  const renderGrid = useCallback(() => {
     return (
       <Card.Group>
-        {this.isCollectionTabActive() ? (
+        {currentTab === TABS.COLLECTIONS ? (
           collections.map((collection, index) => <CollectionCard key={index} collection={collection} />)
         ) : isLoadingItems ? (
           <Loader size="large" active />
@@ -131,12 +139,10 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         )}
       </Card.Group>
     )
-  }
+  }, [items, collections, isLoadingItems, currentTab])
 
-  renderList() {
-    const { items, collections } = this.props
-
-    if (this.isCollectionTabActive()) {
+  const renderList = useCallback(() => {
+    if (currentTab === TABS.COLLECTIONS) {
       return (
         <Section>
           <Table basic="very">
@@ -178,40 +184,38 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         </Table>
       </Section>
     )
-  }
-
-  isCollectionTabActive = () => {
-    const { currentTab } = this.state
-    return currentTab === TABS.COLLECTIONS
-  }
+  }, [currentTab, items, collections])
 
-  fetchCollections = () => {
-    const { address, onFetchCollections } = this.props
-    const { page, sort } = this.state
+  const fetchCollections = useCallback(() => {
     onFetchCollections(address, { page, limit: PAGE_SIZE, sort })
-  }
+  }, [onFetchCollections, page, address, sort])
 
-  fetchItems = () => {
-    // TODO: Remove this call when there are no users with orphan items
-    const { address, onFetchOrphanItems } = this.props
-    const { page } = this.state
-    address && onFetchOrphanItems(address, { page, limit: PAGE_SIZE })
-  }
+  const fetchItems = useCallback(() => {
+    if (address) {
+      onFetchOrphanItems(address, { page, limit: PAGE_SIZE })
+    }
+  }, [onFetchOrphanItems, address, page])
 
-  handlePageChange = (_event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, props: PaginationProps) => {
-    this.setState({ page: +props.activePage! }, this.isCollectionTabActive() ? this.fetchCollections : this.fetchItems)
-  }
+  const handlePageChange = useCallback(
+    (_event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, props: PaginationProps) => {
+      setPage(+props.activePage!)
+      if (currentTab === TABS.COLLECTIONS) {
+        fetchCollections()
+      } else {
+        fetchItems()
+      }
+    },
+    [currentTab, fetchCollections, fetchItems]
+  )
 
-  renderMainActions = () => {
-    const { isThirdPartyManager } = this.props
-    const { search } = this.state
+  const renderMainActions = useCallback(() => {
     return (
       <div className="collections-main-actions">
         <Field
           placeholder={t('itemdrawer.search_items')}
           className="collections-search-field"
           input={{ icon: 'search', iconPosition: 'left', inverted: true }}
-          onChange={this.handleSearchChange}
+          onChange={handleSearchChange}
           icon={<UIIcon name="search" className="searchIcon" />}
           iconPosition="left"
           value={search}
@@ -219,29 +223,27 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         />
         <Row className="actions" grow={false}>
           {isThirdPartyManager && (
-            <Button className="action-button" size="small" basic onClick={this.handleNewThirdPartyCollection}>
+            <Button className="action-button" size="small" basic onClick={handleNewThirdPartyCollection}>
               {t('collections_page.new_third_party_collection')}
             </Button>
           )}
-          <Button className="action-button open-editor" size="small" basic onClick={this.handleOpenEditor}>
+          <Button className="action-button open-editor" size="small" basic onClick={handleOpenEditor}>
             <Icon name="cube" />
             {t('item_editor.open')}
           </Button>
-          <Button className="action-button" size="small" primary onClick={this.handleNewCollection}>
+          <Button className="action-button" size="small" primary onClick={handleNewCollection}>
             {t('collections_page.new_collection')}
           </Button>
         </Row>
       </div>
     )
-  }
+  }, [search, isThirdPartyManager, handleSearchChange, handleNewThirdPartyCollection, handleOpenEditor, handleNewCollection])
 
-  renderViewActions = () => {
-    const { view, onSetView } = this.props
-    const { sort } = this.state
+  const renderViewActions = useCallback(() => {
     return (
       <Column align="right">
         <Row className="actions">
-          {this.isCollectionTabActive() && (
+          {currentTab === TABS.COLLECTIONS && (
             <Dropdown
               direction="left"
               value={sort}
@@ -254,7 +256,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
                 { value: CurationSortOptions.NAME_DESC, text: t('global.order.name_desc') },
                 { value: CurationSortOptions.NAME_ASC, text: t('global.order.name_asc') }
               ]}
-              onChange={this.handleSortChange}
+              onChange={handleSortChange}
             />
           )}
           <Chip
@@ -272,23 +274,13 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         </Row>
       </Column>
     )
-  }
+  }, [view, onSetView, sort, handleSortChange])
 
-  renderPage() {
-    const {
-      collectionsPaginationData,
-      itemsPaginationData,
-      view,
-      hasUserOrphanItems,
-      isLoadingItems,
-      isLoadingCollections,
-      isLoadingOrphanItem
-    } = this.props
-    const { page } = this.state
+  const renderPage = useCallback(() => {
     const totalCollections = collectionsPaginationData?.total
     const totalItems = itemsPaginationData?.total
-    const count = this.isCollectionTabActive() ? totalCollections : totalItems
-    const totalPages = this.isCollectionTabActive() ? collectionsPaginationData?.totalPages : itemsPaginationData?.totalPages
+    const count = currentTab === TABS.COLLECTIONS ? totalCollections : totalItems
+    const totalPages = currentTab === TABS.COLLECTIONS ? collectionsPaginationData?.totalPages : itemsPaginationData?.totalPages
 
     if (isLoadingOrphanItem) {
       return <Loader active size="large" />
@@ -302,20 +294,20 @@ export default class CollectionsPage extends React.PureComponent<Props> {
             {hasUserOrphanItems && (
               // TODO: Remove tabs when there are no users with orphan items
               <Tabs isFullscreen>
-                <Tabs.Tab active={this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.COLLECTIONS)}>
+                <Tabs.Tab active={currentTab === TABS.COLLECTIONS} onClick={() => handleTabChange(TABS.COLLECTIONS)}>
                   {t('collections_page.collections')}
                 </Tabs.Tab>
-                <Tabs.Tab active={!this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.ITEMS)}>
+                <Tabs.Tab active={currentTab !== TABS.COLLECTIONS} onClick={() => handleTabChange(TABS.ITEMS)}>
                   {t('collections_page.single_items')}
                 </Tabs.Tab>
               </Tabs>
             )}
-            {this.renderMainActions()}
+            {renderMainActions()}
             <Row height={30}>
               <Column>
                 <Row>{!isLoadingItems && !!count && count > 0 && <Header sub>{t('collections_page.results', { count })}</Header>}</Row>
               </Column>
-              {this.renderViewActions()}
+              {renderViewActions()}
             </Row>
           </Container>
         </div>
@@ -324,7 +316,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
           <Loader active size="large" />
         ) : count > 0 ? (
           <>
-            {view === CollectionPageView.GRID ? this.renderGrid() : view === CollectionPageView.LIST ? this.renderList() : null}
+            {view === CollectionPageView.GRID ? renderGrid() : view === CollectionPageView.LIST ? renderList() : null}
             {!!totalPages && totalPages > 1 && (
               <Pagination
                 className="pagination"
@@ -332,7 +324,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
                 lastItem={null}
                 totalPages={totalPages}
                 activePage={page}
-                onPageChange={this.handlePageChange}
+                onPageChange={handlePageChange}
               />
             )}
           </>
@@ -343,7 +335,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
             </Header>
             <div className="empty-description">{t('collections_page.empty_description')}</div>
             <div className="create-new-wrapper">
-              <div className="create-new create-new-collection" onClick={this.handleNewCollection}>
+              <div className="create-new create-new-collection" onClick={handleNewCollection}>
                 <div className="text">{t('collections_page.new_collection')}</div>
               </div>
             </div>
@@ -351,13 +343,26 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         )}
       </>
     )
-  }
+  }, [
+    page,
+    collectionsPaginationData,
+    itemsPaginationData,
+    view,
+    hasUserOrphanItems,
+    isLoadingItems,
+    isLoadingCollections,
+    isLoadingOrphanItem,
+    handlePageChange,
+    handleNewCollection,
+    renderGrid,
+    renderList,
+    renderViewActions,
+    renderMainActions
+  ])
 
-  render() {
-    return (
-      <LoggedInDetailPage className="CollectionsPage" activeTab={NavigationTab.COLLECTIONS}>
-        {this.renderPage()}
-      </LoggedInDetailPage>
-    )
-  }
+  return (
+    <LoggedInDetailPage className="CollectionsPage" activeTab={NavigationTab.COLLECTIONS}>
+      {renderPage()}
+    </LoggedInDetailPage>
+  )
 }
diff --git a/src/components/CollectionsPage/CollectionsPage.types.ts b/src/components/CollectionsPage/CollectionsPage.types.ts
index d27e452b5..c422e60c8 100644
--- a/src/components/CollectionsPage/CollectionsPage.types.ts
+++ b/src/components/CollectionsPage/CollectionsPage.types.ts
@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 import { setCollectionPageView, SetCollectionPageViewAction } from 'modules/ui/collection/actions'
 import { CollectionPageView } from 'modules/ui/collection/types'
@@ -28,7 +27,6 @@ export type Props = {
   isLoadingOrphanItem: boolean
   isCampaignEnabled: boolean
   hasUserOrphanItems: boolean | undefined
-  onNavigate: (path: string) => void
   onSetView: typeof setCollectionPageView
   onOpenModal: typeof openModal
   onFetchOrphanItems: typeof fetchItemsRequest
@@ -51,15 +49,7 @@ export type MapStateProps = Pick<
   | 'isCampaignEnabled'
   | 'hasUserOrphanItems'
 >
-export type MapDispatchProps = Pick<
-  Props,
-  'onNavigate' | 'onSetView' | 'onOpenModal' | 'onFetchOrphanItems' | 'onFetchCollections' | 'onFetchOrphanItem'
->
+export type MapDispatchProps = Pick<Props, 'onSetView' | 'onOpenModal' | 'onFetchOrphanItems' | 'onFetchCollections' | 'onFetchOrphanItem'>
 export type MapDispatch = Dispatch<
-  | CallHistoryMethodAction
-  | SetCollectionPageViewAction
-  | OpenModalAction
-  | FetchItemsRequestAction
-  | FetchCollectionsRequestAction
-  | FetchOrphanItemRequestAction
+  SetCollectionPageViewAction | OpenModalAction | FetchItemsRequestAction | FetchCollectionsRequestAction | FetchOrphanItemRequestAction
 >
diff --git a/src/components/CollectionsPage/ItemRow/ItemRow.container.ts b/src/components/CollectionsPage/ItemRow/ItemRow.container.ts
deleted file mode 100644
index c36987a97..000000000
--- a/src/components/CollectionsPage/ItemRow/ItemRow.container.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
-import { MapDispatchProps, MapDispatch } from './ItemRow.types'
-import CollectionRow from './ItemRow'
-
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path))
-})
-
-export default connect(null, mapDispatch)(CollectionRow)
diff --git a/src/components/CollectionsPage/ItemRow/ItemRow.tsx b/src/components/CollectionsPage/ItemRow/ItemRow.tsx
index cecff6297..b16cc94fa 100644
--- a/src/components/CollectionsPage/ItemRow/ItemRow.tsx
+++ b/src/components/CollectionsPage/ItemRow/ItemRow.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Table } from 'decentraland-ui'
 import { locations } from 'routing/locations'
 import ItemImage from 'components/ItemImage'
@@ -7,29 +8,27 @@ import { formatDistanceToNow } from 'lib/date'
 import { Props } from './ItemRow.types'
 import styles from './ItemRow.module.css'
 
-export default class ItemRow extends React.PureComponent<Props> {
-  handleTableRowClick = () => {
-    const { onNavigate, item } = this.props
-    onNavigate(locations.itemDetail(item.id))
-  }
+export default function ItemRow(props: Props) {
+  const { item } = props
+  const history = useHistory()
 
-  render() {
-    const { item } = this.props
+  const handleTableRowClick = useCallback(() => {
+    history.push(locations.itemDetail(item.id))
+  }, [history])
 
-    return (
-      <Table.Row className={styles.ItemRow} onClick={this.handleTableRowClick}>
-        <Table.Cell width={4}>
-          <div className={styles.imageColumn}>
-            <ItemImage className={styles.image} item={item} />
-            <div className={styles.title}>
-              <ItemStatus item={item} />
-              <div className={styles.name}>{item.name}</div>
-            </div>
+  return (
+    <Table.Row className={styles.ItemRow} onClick={handleTableRowClick}>
+      <Table.Cell width={4}>
+        <div className={styles.imageColumn}>
+          <ItemImage className={styles.image} item={item} />
+          <div className={styles.title}>
+            <ItemStatus item={item} />
+            <div className={styles.name}>{item.name}</div>
           </div>
-        </Table.Cell>
-        <Table.Cell width={3}>{formatDistanceToNow(item.createdAt, { addSuffix: true })}</Table.Cell>
-        <Table.Cell width={3}>{formatDistanceToNow(item.updatedAt, { addSuffix: true })}</Table.Cell>
-      </Table.Row>
-    )
-  }
+        </div>
+      </Table.Cell>
+      <Table.Cell width={3}>{formatDistanceToNow(item.createdAt, { addSuffix: true })}</Table.Cell>
+      <Table.Cell width={3}>{formatDistanceToNow(item.updatedAt, { addSuffix: true })}</Table.Cell>
+    </Table.Row>
+  )
 }
diff --git a/src/components/CollectionsPage/ItemRow/ItemRow.types.ts b/src/components/CollectionsPage/ItemRow/ItemRow.types.ts
index 6941c7afe..55fa5d0ae 100644
--- a/src/components/CollectionsPage/ItemRow/ItemRow.types.ts
+++ b/src/components/CollectionsPage/ItemRow/ItemRow.types.ts
@@ -1,11 +1,5 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Item } from 'modules/item/types'
 
 export type Props = {
   item: Item
-  onNavigate: (path: string) => void
 }
-
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
diff --git a/src/components/CollectionsPage/ItemRow/index.ts b/src/components/CollectionsPage/ItemRow/index.ts
index 1ba849050..9c3396aef 100644
--- a/src/components/CollectionsPage/ItemRow/index.ts
+++ b/src/components/CollectionsPage/ItemRow/index.ts
@@ -1,3 +1,3 @@
-import ItemRow from './ItemRow.container'
+import ItemRow from './ItemRow'
 
 export default ItemRow
diff --git a/src/components/CurationPage/CollectionRow/CollectionRow.container.ts b/src/components/CurationPage/CollectionRow/CollectionRow.container.ts
index 3376814f8..3c92d404d 100644
--- a/src/components/CurationPage/CollectionRow/CollectionRow.container.ts
+++ b/src/components/CurationPage/CollectionRow/CollectionRow.container.ts
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { RootState } from 'modules/common/types'
@@ -13,7 +12,6 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
 })
 
diff --git a/src/components/CurationPage/CollectionRow/CollectionRow.tsx b/src/components/CurationPage/CollectionRow/CollectionRow.tsx
index 6685107e8..3f2e44750 100644
--- a/src/components/CurationPage/CollectionRow/CollectionRow.tsx
+++ b/src/components/CurationPage/CollectionRow/CollectionRow.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 import { format } from 'date-fns'
 import { Icon, Table } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -16,28 +17,33 @@ import { Props } from './CollectionRow.types'
 
 import './CollectionRow.css'
 
-export default class CollectionRow extends React.PureComponent<Props> {
-  handleNavigateToForum = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-    const { collection } = this.props
-    window.open(collection.forumLink, '_blank')
-    event.preventDefault()
-    event.stopPropagation()
-  }
+export default function CollectionRow(props: Props) {
+  const { collection, curation, address, itemCount, onOpenModal } = props
+  const history = useHistory()
 
-  handleAssign = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>, type = AssignModalOperationType.SELF_ASSIGN) => {
-    const { onOpenModal, collection } = this.props
-    onOpenModal('EditCurationAssigneeModal', { collectionId: collection.id, type })
-    event.preventDefault()
-    event.stopPropagation()
-  }
+  const handleNavigateToForum = useCallback(
+    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      window.open(collection.forumLink, '_blank')
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    [collection]
+  )
 
-  handleTableRowClick = () => {
-    const { onNavigate, collection } = this.props
-    onNavigate(locations.itemEditor({ collectionId: collection.id, isReviewing: 'true' }))
-  }
+  const handleAssign = useCallback(
+    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>, type = AssignModalOperationType.SELF_ASSIGN) => {
+      onOpenModal('EditCurationAssigneeModal', { collectionId: collection.id, type })
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    [onOpenModal, collection]
+  )
 
-  renderCurationState = () => {
-    const { collection, curation } = this.props
+  const handleTableRowClick = useCallback(() => {
+    history.push(locations.itemEditor({ collectionId: collection.id, isReviewing: 'true' }))
+  }, [history, collection])
+
+  const renderCurationState = useCallback(() => {
     const curationState = getCollectionCurationState(collection, curation)
     switch (curationState) {
       case CurationStatus.APPROVED:
@@ -67,82 +73,79 @@ export default class CollectionRow extends React.PureComponent<Props> {
       default:
         return <span> {t('collection_row.to_review')}</span>
     }
-  }
+  }, [collection, curation])
 
-  render() {
-    const { address, collection, itemCount, curation } = this.props
-    const createdAtDate = new Date(curation?.createdAt || collection.createdAt)
+  const createdAtDate = new Date(curation?.createdAt || collection.createdAt)
 
-    return (
-      <Table.Row className="CollectionRow" key={collection.id} onClick={this.handleTableRowClick}>
-        <Table.Cell width={5}>
-          <div className="image-column">
-            <CollectionImage collectionId={collection.id} />
-            <div className="info">
-              <div className="title">
-                <CollectionStatus collection={collection} />
-                {collection.name}
-              </div>
-              <div className="subtitle name">{t('collection_row.items', { count: itemCount })}</div>
+  return (
+    <Table.Row className="CollectionRow" key={collection.id} onClick={handleTableRowClick}>
+      <Table.Cell width={5}>
+        <div className="image-column">
+          <CollectionImage collectionId={collection.id} />
+          <div className="info">
+            <div className="title">
+              <CollectionStatus collection={collection} />
+              {collection.name}
             </div>
+            <div className="subtitle name">{t('collection_row.items', { count: itemCount })}</div>
           </div>
-        </Table.Cell>
-        <Table.Cell width={2}>
-          <div>
-            {getCollectionType(collection) === CollectionType.THIRD_PARTY
-              ? t('collection_row.type_third_party')
-              : t('collection_row.type_standard')}
-          </div>
-        </Table.Cell>
-        <Table.Cell width={2}>
-          <div>{getCollectionType(collection) === CollectionType.THIRD_PARTY ? '-' : <Profile textOnly address={collection.owner} />}</div>
-        </Table.Cell>
-        <Table.Cell width={3}>
-          <div title={format(createdAtDate, 'd MMMM yyyy HH:mm')}>
-            <span>{t(curation ? 'collection_row.review_request' : 'collection_row.published')}</span>{' '}
-            {formatDistanceToNow(createdAtDate, { addSuffix: true })}
-          </div>
-        </Table.Cell>
-        <Table.Cell width={2}>
-          <div className="actions text-centered">{this.renderCurationState()}</div>
-        </Table.Cell>
-        <Table.Cell width={2}>
-          <div className="edit-container">
-            {curation?.assignee ? (
-              <>
-                <div className="curator-name">
-                  <Profile textOnly address={curation.assignee} />
-                  {address === curation.assignee ? <> ({t('collection_row.you')})</> : null}{' '}
-                </div>
-                {curation.status !== CurationStatus.APPROVED || !collection.isApproved ? (
-                  <Icon
-                    name="pencil"
-                    onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.handleAssign(e, AssignModalOperationType.REASSIGN)}
-                  />
-                ) : null}
-              </>
-            ) : (
-              <div className="assignee-container">
-                {t('collection_row.unassigned')}
-                <span className="link" onClick={this.handleAssign}>
-                  {t('collection_row.assign_to_me')}
-                </span>
+        </div>
+      </Table.Cell>
+      <Table.Cell width={2}>
+        <div>
+          {getCollectionType(collection) === CollectionType.THIRD_PARTY
+            ? t('collection_row.type_third_party')
+            : t('collection_row.type_standard')}
+        </div>
+      </Table.Cell>
+      <Table.Cell width={2}>
+        <div>{getCollectionType(collection) === CollectionType.THIRD_PARTY ? '-' : <Profile textOnly address={collection.owner} />}</div>
+      </Table.Cell>
+      <Table.Cell width={3}>
+        <div title={format(createdAtDate, 'd MMMM yyyy HH:mm')}>
+          <span>{t(curation ? 'collection_row.review_request' : 'collection_row.published')}</span>{' '}
+          {formatDistanceToNow(createdAtDate, { addSuffix: true })}
+        </div>
+      </Table.Cell>
+      <Table.Cell width={2}>
+        <div className="actions text-centered">{renderCurationState()}</div>
+      </Table.Cell>
+      <Table.Cell width={2}>
+        <div className="edit-container">
+          {curation?.assignee ? (
+            <>
+              <div className="curator-name">
+                <Profile textOnly address={curation.assignee} />
+                {address === curation.assignee ? <> ({t('collection_row.you')})</> : null}{' '}
               </div>
-            )}
-          </div>
-        </Table.Cell>
-        <Table.Cell width={2}>
-          <div className="text-centered">
-            {collection.forumLink ? (
-              <span className="link" onClick={this.handleNavigateToForum}>
-                {t('collection_row.link')}
+              {curation.status !== CurationStatus.APPROVED || !collection.isApproved ? (
+                <Icon
+                  name="pencil"
+                  onClick={(e: React.MouseEvent<HTMLSpanElement>) => handleAssign(e, AssignModalOperationType.REASSIGN)}
+                />
+              ) : null}
+            </>
+          ) : (
+            <div className="assignee-container">
+              {t('collection_row.unassigned')}
+              <span className="link" onClick={handleAssign}>
+                {t('collection_row.assign_to_me')}
               </span>
-            ) : (
-              t('collection_row.no_forum_post')
-            )}
-          </div>
-        </Table.Cell>
-      </Table.Row>
-    )
-  }
+            </div>
+          )}
+        </div>
+      </Table.Cell>
+      <Table.Cell width={2}>
+        <div className="text-centered">
+          {collection.forumLink ? (
+            <span className="link" onClick={handleNavigateToForum}>
+              {t('collection_row.link')}
+            </span>
+          ) : (
+            t('collection_row.no_forum_post')
+          )}
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
 }
diff --git a/src/components/CurationPage/CollectionRow/CollectionRow.types.ts b/src/components/CurationPage/CollectionRow/CollectionRow.types.ts
index e7634d23e..71dc9c069 100644
--- a/src/components/CurationPage/CollectionRow/CollectionRow.types.ts
+++ b/src/components/CurationPage/CollectionRow/CollectionRow.types.ts
@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Collection } from 'modules/collection/types'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 import { CollectionCuration } from 'modules/curations/collectionCuration/types'
@@ -9,11 +8,10 @@ export type Props = {
   collection: Collection
   curation: CollectionCuration | null
   itemCount: number
-  onNavigate: (path: string) => void
   onOpenModal: typeof openModal
 }
 
 export type MapStateProps = Pick<Props, 'address' | 'itemCount'>
-export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>
+export type MapDispatchProps = Pick<Props, 'onOpenModal'>
+export type MapDispatch = Dispatch<OpenModalAction>
 export type OwnProps = Pick<Props, 'collection' | 'curation'>
diff --git a/src/components/InspectorPage/TopBar/TopBar.container.ts b/src/components/InspectorPage/TopBar/TopBar.container.ts
index d729b4268..774aba357 100644
--- a/src/components/InspectorPage/TopBar/TopBar.container.ts
+++ b/src/components/InspectorPage/TopBar/TopBar.container.ts
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { goBack } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { getCurrentProject } from 'modules/project/selectors'
 import { getCurrentLimits, getCurrentMetrics, getEntitiesOutOfBoundaries } from 'modules/scene/selectors'
@@ -18,7 +17,6 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onBack: () => dispatch(goBack()),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
 })
 
diff --git a/src/components/InspectorPage/TopBar/TopBar.tsx b/src/components/InspectorPage/TopBar/TopBar.tsx
index c04dfa7d3..ae90cd4ee 100644
--- a/src/components/InspectorPage/TopBar/TopBar.tsx
+++ b/src/components/InspectorPage/TopBar/TopBar.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react'
+import { useHistory } from 'react-router-dom'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Button, Icon, Popup } from 'decentraland-ui'
 import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
@@ -14,7 +15,9 @@ import styles from './TopBar.module.css'
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
 const BUILDER_SERVER_URL = config.get('BUILDER_SERVER_URL', '')
 
-export default function TopBar({ currentProject, metrics, limits, areEntitiesOutOfBoundaries, isUploading, onBack, onOpenModal }: Props) {
+export default function TopBar({ currentProject, metrics, limits, areEntitiesOutOfBoundaries, isUploading, onOpenModal }: Props) {
+  const history = useHistory()
+
   const handleDownload = useCallback(() => {
     onOpenModal('ExportModal', { project: currentProject })
   }, [currentProject, onOpenModal])
@@ -65,10 +68,14 @@ export default function TopBar({ currentProject, metrics, limits, areEntitiesOut
     return null
   }, [areEntitiesOutOfBoundaries, someMetricExceedsLimit])
 
+  const handleBack = useCallback(() => {
+    history.goBack()
+  }, [history])
+
   return (
     <div className={styles.container}>
       <div className={styles.nameContainer}>
-        <Button basic aria-label={t('inspector.top_bar.back')} onClick={onBack}>
+        <Button basic aria-label={t('inspector.top_bar.back')} onClick={handleBack}>
           <Icon name="chevron left" />
         </Button>
         {currentProject && (
diff --git a/src/components/InspectorPage/TopBar/TopBar.types.ts b/src/components/InspectorPage/TopBar/TopBar.types.ts
index 2576173f5..2b6dbe65c 100644
--- a/src/components/InspectorPage/TopBar/TopBar.types.ts
+++ b/src/components/InspectorPage/TopBar/TopBar.types.ts
@@ -2,7 +2,6 @@ import { Dispatch } from 'redux'
 import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
 import { OpenModalAction, openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { Project } from 'modules/project/types'
-import { CallHistoryMethodAction, goBack } from 'connected-react-router'
 
 export type Props = {
   metrics: SceneMetrics
@@ -10,11 +9,10 @@ export type Props = {
   areEntitiesOutOfBoundaries: boolean
   currentProject: Project | null
   isUploading: boolean
-  onBack: typeof goBack
   onOpenModal: typeof openModal
 }
 
 export type MapStateProps = Pick<Props, 'currentProject' | 'metrics' | 'limits' | 'areEntitiesOutOfBoundaries' | 'isUploading'>
 
-export type MapDispatchProps = Pick<Props, 'onBack' | 'onOpenModal'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>
+export type MapDispatchProps = Pick<Props, 'onOpenModal'>
+export type MapDispatch = Dispatch<OpenModalAction>
diff --git a/src/components/Navigation/Navigation.container.ts b/src/components/Navigation/Navigation.container.ts
index 9d845a239..0b54dafba 100644
--- a/src/components/Navigation/Navigation.container.ts
+++ b/src/components/Navigation/Navigation.container.ts
@@ -1,16 +1,11 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { isWalletCommitteeMember } from 'modules/committee/selectors'
-import { MapStateProps, MapDispatchProps, MapDispatch } from './Navigation.types'
+import { MapStateProps } from './Navigation.types'
 import Navigation from './Navigation'
 
 const mapState = (state: RootState): MapStateProps => ({
   isCommitteeMember: isWalletCommitteeMember(state)
 })
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path))
-})
-
-export default connect(mapState, mapDispatch)(Navigation)
+export default connect(mapState)(Navigation)
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 5991bf965..312399bd6 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Tabs } from 'decentraland-ui'
 import { getLocalStorage } from 'decentraland-dapps/dist/lib/localStorage'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -8,44 +9,41 @@ import { Props, NavigationTab } from './Navigation.types'
 
 const localStorage = getLocalStorage()
 
-export default class Navigation extends React.PureComponent<Props> {
-  handleOnTabClick(path: string) {
-    const { onNavigate } = this.props
+export default function Navigation({ activeTab, isFullscreen, isCommitteeMember, children }: Props) {
+  const history = useHistory()
+  const handleOnTabClick = useCallback((path: string) => {
     localStorage.setItem(LOCALSTORAGE_LAST_VISITED_SECTION_KEY, path)
-    onNavigate(path)
-  }
+    history.push(path)
+  }, [])
 
-  render() {
-    const { activeTab, isFullscreen, isCommitteeMember, children } = this.props
-    return (
-      <div className="Navigation">
-        <Tabs isFullscreen={isFullscreen}>
-          {children}
-          <Tabs.Tab active={activeTab === NavigationTab.OVERVIEW} onClick={() => this.handleOnTabClick(locations.root())}>
-            {t('navigation.overview')}
+  return (
+    <div className="Navigation">
+      <Tabs isFullscreen={isFullscreen}>
+        {children}
+        <Tabs.Tab active={activeTab === NavigationTab.OVERVIEW} onClick={() => handleOnTabClick(locations.root())}>
+          {t('navigation.overview')}
+        </Tabs.Tab>
+        <Tabs.Tab active={activeTab === NavigationTab.COLLECTIONS} onClick={() => handleOnTabClick(locations.collections())}>
+          {t('navigation.collections')}
+        </Tabs.Tab>
+        <Tabs.Tab active={activeTab === NavigationTab.SCENES} onClick={() => handleOnTabClick(locations.scenes())}>
+          {t('navigation.scenes')}
+        </Tabs.Tab>
+        <Tabs.Tab active={activeTab === NavigationTab.LAND} onClick={() => handleOnTabClick(locations.land())}>
+          {t('navigation.land')}
+        </Tabs.Tab>
+        <Tabs.Tab active={activeTab === NavigationTab.NAMES} onClick={() => handleOnTabClick(locations.ens())}>
+          {t('navigation.names')}
+        </Tabs.Tab>
+        <Tabs.Tab active={activeTab === NavigationTab.WORLDS} onClick={() => handleOnTabClick(locations.worlds())}>
+          {t('navigation.worlds')}
+        </Tabs.Tab>
+        {isCommitteeMember ? (
+          <Tabs.Tab active={activeTab === NavigationTab.CURATION} onClick={() => handleOnTabClick(locations.curation())}>
+            {t('navigation.curation')}
           </Tabs.Tab>
-          <Tabs.Tab active={activeTab === NavigationTab.COLLECTIONS} onClick={() => this.handleOnTabClick(locations.collections())}>
-            {t('navigation.collections')}
-          </Tabs.Tab>
-          <Tabs.Tab active={activeTab === NavigationTab.SCENES} onClick={() => this.handleOnTabClick(locations.scenes())}>
-            {t('navigation.scenes')}
-          </Tabs.Tab>
-          <Tabs.Tab active={activeTab === NavigationTab.LAND} onClick={() => this.handleOnTabClick(locations.land())}>
-            {t('navigation.land')}
-          </Tabs.Tab>
-          <Tabs.Tab active={activeTab === NavigationTab.NAMES} onClick={() => this.handleOnTabClick(locations.ens())}>
-            {t('navigation.names')}
-          </Tabs.Tab>
-          <Tabs.Tab active={activeTab === NavigationTab.WORLDS} onClick={() => this.handleOnTabClick(locations.worlds())}>
-            {t('navigation.worlds')}
-          </Tabs.Tab>
-          {isCommitteeMember ? (
-            <Tabs.Tab active={activeTab === NavigationTab.CURATION} onClick={() => this.handleOnTabClick(locations.curation())}>
-              {t('navigation.curation')}
-            </Tabs.Tab>
-          ) : null}
-        </Tabs>
-      </div>
-    )
-  }
+        ) : null}
+      </Tabs>
+    </div>
+  )
 }
diff --git a/src/components/Navigation/Navigation.types.ts b/src/components/Navigation/Navigation.types.ts
index 813eaa786..dd2f9ee00 100644
--- a/src/components/Navigation/Navigation.types.ts
+++ b/src/components/Navigation/Navigation.types.ts
@@ -1,6 +1,3 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
-
 export enum NavigationTab {
   OVERVIEW = 'overview',
   SCENES = 'scenes',
@@ -16,9 +13,6 @@ export type Props = {
   activeTab?: NavigationTab
   isFullscreen?: boolean
   isCommitteeMember: boolean
-  onNavigate: (path: string) => void
 }
 
 export type MapStateProps = Pick<Props, 'isCommitteeMember'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
diff --git a/src/components/SDK6TopBar/SDK6TopBar.container.ts b/src/components/SDK6TopBar/SDK6TopBar.container.ts
index d38b75b51..c6bbf9ca2 100644
--- a/src/components/SDK6TopBar/SDK6TopBar.container.ts
+++ b/src/components/SDK6TopBar/SDK6TopBar.container.ts
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { goBack, push } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { getCurrentProject } from 'modules/project/selectors'
 import { getActivePoolGroup } from 'modules/poolGroup/selectors'
@@ -7,18 +6,15 @@ import { getGizmo, isPreviewing, isSidebarOpen, getSelectedEntityIds, isLoading,
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { setGizmo, togglePreview, toggleSidebar } from 'modules/editor/actions'
 import { resetItem, duplicateItem, deleteItem } from 'modules/scene/actions'
-import { getCurrentMetrics } from 'modules/scene/selectors'
 import { isSavingCurrentProject } from 'modules/sync/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './SDK6TopBar.types'
 import SDK6TopBar from './SDK6TopBar'
 import { hasHistory } from 'modules/location/selectors'
-import { ModelMetrics } from 'modules/models/types'
 
 const mapState = (state: RootState): MapStateProps => ({
   gizmo: getGizmo(state),
   currentProject: getCurrentProject(state),
   currentPoolGroup: getActivePoolGroup(state),
-  metrics: getCurrentMetrics(state) as ModelMetrics,
   selectedEntityIds: getSelectedEntityIds(state),
   isLoading: !isReady(state) || isLoading(state),
   isPreviewing: isPreviewing(state),
@@ -35,9 +31,7 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onReset: () => dispatch(resetItem()),
   onDuplicate: () => dispatch(duplicateItem()),
   onDelete: () => dispatch(deleteItem()),
-  onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
-  onBack: () => dispatch(goBack()),
-  onNavigate: path => dispatch(push(path))
+  onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
 })
 
 export default connect(mapState, mapDispatch)(SDK6TopBar)
diff --git a/src/components/SDK6TopBar/SDK6TopBar.tsx b/src/components/SDK6TopBar/SDK6TopBar.tsx
index db37aaefe..7c3ec780b 100644
--- a/src/components/SDK6TopBar/SDK6TopBar.tsx
+++ b/src/components/SDK6TopBar/SDK6TopBar.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Header, Grid, Icon } from 'decentraland-ui'
 import { IntercomWidget } from 'decentraland-dapps/dist/components/Intercom/IntercomWidget'
 
@@ -18,160 +19,148 @@ import './SDK6TopBar.css'
 
 const widget = IntercomWidget.getInstance()
 
-export default class SDK6TopBar extends React.PureComponent<Props> {
-  handleMoveMode = () => {
-    const { gizmo, onSetGizmo } = this.props
+export default function SDK6TopBar(props: Props) {
+  const {
+    gizmo,
+    isPreviewing,
+    isSidebarOpen,
+    isLoading,
+    hasHistory,
+    currentProject,
+    currentPoolGroup,
+    selectedEntityIds,
+    isUploading,
+    enabledTools,
+    onSetGizmo,
+    onTogglePreview,
+    onToggleSidebar,
+    onOpenModal,
+    onReset,
+    onDelete,
+    onDuplicate
+  } = props
+  const history = useHistory()
+
+  const handleMoveMode = useCallback(() => {
     onSetGizmo(gizmo === Gizmo.MOVE ? Gizmo.NONE : Gizmo.MOVE)
-  }
+  }, [gizmo, onSetGizmo])
 
-  handleRotateMode = () => {
-    const { gizmo, onSetGizmo } = this.props
+  const handleRotateMode = useCallback(() => {
     onSetGizmo(gizmo === Gizmo.ROTATE ? Gizmo.NONE : Gizmo.ROTATE)
-  }
+  }, [gizmo, onSetGizmo])
 
-  handleScaleMode = () => {
-    const { gizmo, onSetGizmo } = this.props
+  const handleScaleMode = useCallback(() => {
     onSetGizmo(gizmo === Gizmo.SCALE ? Gizmo.NONE : Gizmo.SCALE)
-  }
+  }, [gizmo, onSetGizmo])
 
-  handleTogglePreview = () => {
-    const { onTogglePreview, isPreviewing } = this.props
+  const handleTogglePreview = useCallback(() => {
     widget.unmount()
     onTogglePreview(!isPreviewing)
-  }
+  }, [onTogglePreview, isPreviewing])
 
-  handleToggleSidebar = () => {
-    const { onToggleSidebar, isSidebarOpen } = this.props
+  const handleToggleSidebar = useCallback(() => {
     onToggleSidebar(!isSidebarOpen)
-  }
+  }, [onToggleSidebar, isSidebarOpen])
 
-  handleTitleClick = () => {
-    const { isLoading, onOpenModal } = this.props
+  const handleTitleClick = useCallback(() => {
     if (!isLoading) {
       onOpenModal('EditProjectModal')
     }
-  }
+  }, [isLoading, onOpenModal])
 
-  handleGoBack = () => {
-    const { currentProject, onNavigate, onBack, hasHistory } = this.props
+  const handleGoBack = useCallback(() => {
     if (hasHistory) {
-      onBack()
+      history.goBack()
     } else {
-      onNavigate(currentProject ? locations.sceneDetail(currentProject.id) : locations.root())
+      history.push(currentProject ? locations.sceneDetail(currentProject.id) : locations.root())
     }
-  }
-
-  handleExport = () => {
-    this.props.onOpenModal('ExportModal', { project: this.props.currentProject })
-  }
-
-  isSceneLoading() {
-    const { metrics, isLoading } = this.props
-    return isLoading || (metrics.entities > 0 && metrics.triangles === 0)
-  }
+  }, [history, currentProject, hasHistory])
 
-  render() {
-    const {
-      gizmo,
-      currentProject,
-      currentPoolGroup,
-      isPreviewing,
-      isUploading,
-      isSidebarOpen,
-      selectedEntityIds,
-      enabledTools,
-      isLoading,
-      onReset,
-      onDelete,
-      onDuplicate
-    } = this.props
+  const handleExport = useCallback(() => {
+    onOpenModal('ExportModal', { project: currentProject })
+  }, [onOpenModal, currentProject])
 
-    return (
-      <Grid className="SDK6TopBar">
-        <Grid.Column mobile={4} tablet={4} computer={4} className="left-column" verticalAlign="middle">
-          <Header size="medium" className="project-title-header">
-            <div className="go-back" onClick={this.handleGoBack}>
-              <Icon name="chevron left" />
-            </div>
-            {currentProject ? (
-              <>
-                <div
-                  className={`project-title ${isLoading ? 'disabled' : ''}`}
-                  onClick={this.handleTitleClick}
-                  title={currentProject.title}
-                >
-                  {currentProject.title}
-                </div>
-                {isUploading ? (
-                  <OwnIcon name="cloud-upload" className="cloud-upload-indicator is-uploading" />
-                ) : (
-                  <OwnIcon name="edit" className="edit-project-icon" onClick={this.handleTitleClick} />
-                )}
-              </>
-            ) : null}
-          </Header>
-        </Grid.Column>
-        <Grid.Column mobile={6} tablet={6} computer={7} className="middle-column">
-          <Grid.Row>
-            <div className="editor-actions">
-              <span className="editor-modes">
-                <ShortcutTooltip shortcut={Shortcut.MOVE} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                  <Chip
-                    icon="move"
-                    isActive={gizmo === Gizmo.MOVE && selectedEntityIds.length > 0}
-                    isDisabled={!enabledTools.move}
-                    onClick={this.handleMoveMode}
-                  />
-                </ShortcutTooltip>
-                <ShortcutTooltip shortcut={Shortcut.ROTATE} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                  <Chip
-                    icon="rotate"
-                    isActive={gizmo === Gizmo.ROTATE && selectedEntityIds.length > 0}
-                    isDisabled={!enabledTools.rotate}
-                    onClick={this.handleRotateMode}
-                  />
-                </ShortcutTooltip>
-                <ShortcutTooltip shortcut={Shortcut.SCALE} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                  <Chip
-                    icon="scale"
-                    isActive={gizmo === Gizmo.SCALE && selectedEntityIds.length > 0}
-                    isDisabled={!enabledTools.scale}
-                    onClick={this.handleScaleMode}
-                  />
-                </ShortcutTooltip>
-              </span>
-              <ShortcutTooltip shortcut={Shortcut.RESET_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                <Chip icon="undo" isDisabled={!enabledTools.reset} onClick={onReset} />
+  return (
+    <Grid className="SDK6TopBar">
+      <Grid.Column mobile={4} tablet={4} computer={4} className="left-column" verticalAlign="middle">
+        <Header size="medium" className="project-title-header">
+          <div className="go-back" onClick={handleGoBack}>
+            <Icon name="chevron left" />
+          </div>
+          {currentProject ? (
+            <>
+              <div className={`project-title ${isLoading ? 'disabled' : ''}`} onClick={handleTitleClick} title={currentProject.title}>
+                {currentProject.title}
+              </div>
+              {isUploading ? (
+                <OwnIcon name="cloud-upload" className="cloud-upload-indicator is-uploading" />
+              ) : (
+                <OwnIcon name="edit" className="edit-project-icon" onClick={handleTitleClick} />
+              )}
+            </>
+          ) : null}
+        </Header>
+      </Grid.Column>
+      <Grid.Column mobile={6} tablet={6} computer={7} className="middle-column">
+        <Grid.Row>
+          <div className="editor-actions">
+            <span className="editor-modes">
+              <ShortcutTooltip shortcut={Shortcut.MOVE} position="bottom center" className="tool" popupClassName="top-bar-popup">
+                <Chip
+                  icon="move"
+                  isActive={gizmo === Gizmo.MOVE && selectedEntityIds.length > 0}
+                  isDisabled={!enabledTools.move}
+                  onClick={handleMoveMode}
+                />
               </ShortcutTooltip>
-              <ShortcutTooltip shortcut={Shortcut.DUPLICATE_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                <Chip icon="duplicate" isDisabled={!enabledTools.duplicate} onClick={onDuplicate} />
+              <ShortcutTooltip shortcut={Shortcut.ROTATE} position="bottom center" className="tool" popupClassName="top-bar-popup">
+                <Chip
+                  icon="rotate"
+                  isActive={gizmo === Gizmo.ROTATE && selectedEntityIds.length > 0}
+                  isDisabled={!enabledTools.rotate}
+                  onClick={handleRotateMode}
+                />
               </ShortcutTooltip>
-              <ShortcutTooltip shortcut={Shortcut.DELETE_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
-                <Chip icon="delete" isDisabled={!enabledTools.delete} onClick={onDelete} />
+              <ShortcutTooltip shortcut={Shortcut.SCALE} position="bottom center" className="tool" popupClassName="top-bar-popup">
+                <Chip
+                  icon="scale"
+                  isActive={gizmo === Gizmo.SCALE && selectedEntityIds.length > 0}
+                  isDisabled={!enabledTools.scale}
+                  onClick={handleScaleMode}
+                />
               </ShortcutTooltip>
-            </div>
-          </Grid.Row>
-        </Grid.Column>
-        <Grid.Column mobile={6} tablet={6} computer={5} className="right-column">
-          <Grid.Row>
-            {currentProject ? <DeploymentStatus projectId={currentProject.id} /> : null}
-            <ShortcutTooltip shortcut={Shortcut.PREVIEW} position="bottom center" className="tool" popupClassName="top-bar-popup">
-              <Chip icon="preview" isActive={isPreviewing} isDisabled={isLoading} onClick={this.handleTogglePreview} />
+            </span>
+            <ShortcutTooltip shortcut={Shortcut.RESET_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
+              <Chip icon="undo" isDisabled={!enabledTools.reset} onClick={onReset} />
             </ShortcutTooltip>
-            <ShortcutTooltip shortcut={Shortcut.EXPORT_SCENE} position="bottom center" className="tool" popupClassName="top-bar-popup">
-              <Chip icon="export" isDisabled={isLoading} onClick={this.handleExport} />
+            <ShortcutTooltip shortcut={Shortcut.DUPLICATE_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
+              <Chip icon="duplicate" isDisabled={!enabledTools.duplicate} onClick={onDuplicate} />
             </ShortcutTooltip>
-            <ShortcutTooltip shortcut={Shortcut.TOGGLE_SIDEBAR} position="bottom center" className="tool" popupClassName="top-bar-popup">
-              <Chip icon="sidebar" isActive={isSidebarOpen} onClick={this.handleToggleSidebar} />
+            <ShortcutTooltip shortcut={Shortcut.DELETE_ITEM} position="bottom center" className="tool" popupClassName="top-bar-popup">
+              <Chip icon="delete" isDisabled={!enabledTools.delete} onClick={onDelete} />
             </ShortcutTooltip>
-            <span className="contest-button-wrapper">
-              {!currentPoolGroup && <ShareButton />}
-              <DeployButton />
-              {currentPoolGroup && <DeployContestButton />}
-            </span>
-          </Grid.Row>
-        </Grid.Column>
-      </Grid>
-    )
-  }
+          </div>
+        </Grid.Row>
+      </Grid.Column>
+      <Grid.Column mobile={6} tablet={6} computer={5} className="right-column">
+        <Grid.Row>
+          {currentProject ? <DeploymentStatus projectId={currentProject.id} /> : null}
+          <ShortcutTooltip shortcut={Shortcut.PREVIEW} position="bottom center" className="tool" popupClassName="top-bar-popup">
+            <Chip icon="preview" isActive={isPreviewing} isDisabled={isLoading} onClick={handleTogglePreview} />
+          </ShortcutTooltip>
+          <ShortcutTooltip shortcut={Shortcut.EXPORT_SCENE} position="bottom center" className="tool" popupClassName="top-bar-popup">
+            <Chip icon="export" isDisabled={isLoading} onClick={handleExport} />
+          </ShortcutTooltip>
+          <ShortcutTooltip shortcut={Shortcut.TOGGLE_SIDEBAR} position="bottom center" className="tool" popupClassName="top-bar-popup">
+            <Chip icon="sidebar" isActive={isSidebarOpen} onClick={handleToggleSidebar} />
+          </ShortcutTooltip>
+          <span className="contest-button-wrapper">
+            {!currentPoolGroup && <ShareButton />}
+            <DeployButton />
+            {currentPoolGroup && <DeployContestButton />}
+          </span>
+        </Grid.Row>
+      </Grid.Column>
+    </Grid>
+  )
 }
diff --git a/src/components/SDK6TopBar/SDK6TopBar.types.ts b/src/components/SDK6TopBar/SDK6TopBar.types.ts
index f19bbc639..ad9bc89e7 100644
--- a/src/components/SDK6TopBar/SDK6TopBar.types.ts
+++ b/src/components/SDK6TopBar/SDK6TopBar.types.ts
@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-
 import {
   setGizmo,
   togglePreview,
@@ -11,15 +10,12 @@ import {
 } from 'modules/editor/actions'
 import { resetItem, duplicateItem, deleteItem, ResetItemAction, DuplicateItemAction, DeleteItemAction } from 'modules/scene/actions'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
-import { ModelMetrics } from 'modules/models/types'
 import { Project } from 'modules/project/types'
 import { Gizmo } from 'modules/editor/types'
 import { PoolGroup } from 'modules/poolGroup/types'
-import { CallHistoryMethodAction, goBack } from 'connected-react-router'
 
 export type Props = {
   gizmo: Gizmo
-  metrics: ModelMetrics
   currentProject: Project | null
   currentPoolGroup: PoolGroup | null
   selectedEntityIds: string[]
@@ -36,8 +32,6 @@ export type Props = {
   onDelete: typeof deleteItem
   onOpenModal: typeof openModal
   hasHistory: boolean
-  onBack: typeof goBack
-  onNavigate: (path: string) => void
 }
 
 export type MapStateProps = Pick<
@@ -45,7 +39,6 @@ export type MapStateProps = Pick<
   | 'gizmo'
   | 'currentProject'
   | 'currentPoolGroup'
-  | 'metrics'
   | 'isLoading'
   | 'isPreviewing'
   | 'isUploading'
@@ -57,7 +50,7 @@ export type MapStateProps = Pick<
 
 export type MapDispatchProps = Pick<
   Props,
-  'onSetGizmo' | 'onTogglePreview' | 'onToggleSidebar' | 'onReset' | 'onDuplicate' | 'onDelete' | 'onOpenModal' | 'onBack' | 'onNavigate'
+  'onSetGizmo' | 'onTogglePreview' | 'onToggleSidebar' | 'onReset' | 'onDuplicate' | 'onDelete' | 'onOpenModal'
 >
 export type MapDispatch = Dispatch<
   | SetGizmoAction
@@ -68,5 +61,4 @@ export type MapDispatch = Dispatch<
   | DuplicateItemAction
   | DeleteItemAction
   | OpenModalAction
-  | CallHistoryMethodAction
 >
diff --git a/src/components/TemplateDetailPage/TemplateDetailPage.container.ts b/src/components/TemplateDetailPage/TemplateDetailPage.container.ts
index f7f090702..98f5502d1 100644
--- a/src/components/TemplateDetailPage/TemplateDetailPage.container.ts
+++ b/src/components/TemplateDetailPage/TemplateDetailPage.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 { RootState } from 'modules/common/types'
 import { getTemplateId } from 'modules/location/selectors'
@@ -24,7 +23,6 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
   onLoadTemplateScene: (project: Project) => dispatch(loadProjectSceneRequest(project, PreviewType.TEMPLATE))
 })
diff --git a/src/components/TemplateDetailPage/TemplateDetailPage.tsx b/src/components/TemplateDetailPage/TemplateDetailPage.tsx
index 98d36ea15..9432bfcc9 100644
--- a/src/components/TemplateDetailPage/TemplateDetailPage.tsx
+++ b/src/components/TemplateDetailPage/TemplateDetailPage.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Page, Center, Loader, Section, Row, Column, Header, Button, Logo, Icon } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from 'routing/locations'
@@ -12,8 +13,8 @@ import './TemplateDetailPage.css'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 
 const TemplateDetailPage: React.FC<Props> = props => {
-  const { template, isLoading, scene, onOpenModal, onNavigate, onLoadTemplateScene } = props
-
+  const { template, isLoading, scene, onOpenModal, onLoadTemplateScene } = props
+  const history = useHistory()
   const analytics = getAnalytics()
 
   const eventInfo = useMemo(
@@ -49,8 +50,8 @@ const TemplateDetailPage: React.FC<Props> = props => {
   }, [analytics, template, eventInfo, onOpenModal])
 
   const handleBackClick = useCallback(() => {
-    onNavigate(locations.templates())
-  }, [onNavigate])
+    history.push(locations.templates())
+  }, [history])
 
   const handleSelectTemplateClick = useCallback(() => {
     if (template) {
diff --git a/src/components/TemplateDetailPage/TemplateDetailPage.types.ts b/src/components/TemplateDetailPage/TemplateDetailPage.types.ts
index 2859bf4e7..710de3b4c 100644
--- a/src/components/TemplateDetailPage/TemplateDetailPage.types.ts
+++ b/src/components/TemplateDetailPage/TemplateDetailPage.types.ts
@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Project } from 'modules/project/types'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 import { Scene } from 'modules/scene/types'
@@ -9,11 +8,10 @@ export type Props = {
   template: Project | null
   isLoading: boolean
   scene: Scene | null
-  onNavigate: (path: string) => void
   onOpenModal: typeof openModal
   onLoadTemplateScene: (project: Project) => void
 }
 
 export type MapStateProps = Pick<Props, 'template' | 'isLoading' | 'scene'>
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onOpenModal' | 'onLoadTemplateScene'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction | LoadProjectSceneRequestAction>
+export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onLoadTemplateScene'>
+export type MapDispatch = Dispatch<OpenModalAction | LoadProjectSceneRequestAction>
diff --git a/src/components/TemplatesPage/TemplatesPage.container.ts b/src/components/TemplatesPage/TemplatesPage.container.ts
index 6ec06e6fd..719e45b51 100644
--- a/src/components/TemplatesPage/TemplatesPage.container.ts
+++ b/src/components/TemplatesPage/TemplatesPage.container.ts
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { getTemplates } from 'modules/project/selectors'
 import { loadTemplatesRequest } from 'modules/project/actions'
@@ -11,8 +10,7 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onLoadTemplates: () => dispatch(loadTemplatesRequest()),
-  onNavigate: (path: string) => dispatch(push(path))
+  onLoadTemplates: () => dispatch(loadTemplatesRequest())
 })
 
 export default connect(mapState, mapDispatch)(TemplatesPage)
diff --git a/src/components/TemplatesPage/TemplatesPage.tsx b/src/components/TemplatesPage/TemplatesPage.tsx
index df65ccbdc..c8ba3c6e6 100644
--- a/src/components/TemplatesPage/TemplatesPage.tsx
+++ b/src/components/TemplatesPage/TemplatesPage.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Button, Page, Icon } from 'decentraland-ui'
 import { locations } from 'routing/locations'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -13,16 +14,17 @@ import { NavigationTab } from 'components/Navigation/Navigation.types'
 import { Props } from './TemplatesPage.types'
 import styles from './TemplatesPage.module.css'
 
-export const TemplatesPage: React.FC<Props> = ({ templates, onNavigate, onLoadTemplates }) => {
+export const TemplatesPage: React.FC<Props> = ({ templates, onLoadTemplates }) => {
   const analytics = getAnalytics()
+  const history = useHistory()
 
   useEffect(() => {
     onLoadTemplates()
   }, [onLoadTemplates])
 
   const handleBackClick = useCallback(() => {
-    onNavigate(locations.scenes())
-  }, [onNavigate])
+    history.push(locations.scenes())
+  }, [history])
 
   const handleGoToTemplate = useCallback(
     (template: Project) => {
@@ -31,9 +33,9 @@ export const TemplatesPage: React.FC<Props> = ({ templates, onNavigate, onLoadTe
         name: template.title,
         description: template.description
       })
-      onNavigate(locations.templateDetail(template.id))
+      history.push(locations.templateDetail(template.id))
     },
-    [analytics, onNavigate]
+    [analytics, history]
   )
 
   return (
diff --git a/src/components/TemplatesPage/TemplatesPage.types.ts b/src/components/TemplatesPage/TemplatesPage.types.ts
index 147ff14b9..2e30a2c1e 100644
--- a/src/components/TemplatesPage/TemplatesPage.types.ts
+++ b/src/components/TemplatesPage/TemplatesPage.types.ts
@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { ModelById } from 'decentraland-dapps/dist/lib/types'
 import { Project } from 'modules/project/types'
 import { loadTemplatesRequest, LoadTemplatesRequestAction } from 'modules/project/actions'
@@ -7,10 +6,9 @@ import { loadTemplatesRequest, LoadTemplatesRequestAction } from 'modules/projec
 export type Props = {
   templates: ModelById<Project>
   onLoadTemplates: typeof loadTemplatesRequest
-  onNavigate: (path: string) => void
 }
 
 export type MapStateProps = Pick<Props, 'templates'>
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onLoadTemplates'>
+export type MapDispatchProps = Pick<Props, 'onLoadTemplates'>
 
-export type MapDispatch = Dispatch<CallHistoryMethodAction | LoadTemplatesRequestAction>
+export type MapDispatch = Dispatch<LoadTemplatesRequestAction>
diff --git a/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.container.ts b/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.container.ts
deleted file mode 100644
index 3b7ce6592..000000000
--- a/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.container.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
-
-import { RootState } from 'modules/common/types'
-import { MapDispatch, MapDispatchProps } from './UnsupportedBrowserPage.types'
-import NotFoundPage from './UnsupportedBrowserPage'
-
-const mapState = (_: RootState) => ({})
-
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: (path: string) => dispatch(push(path))
-})
-
-export default connect(mapState, mapDispatch)(NotFoundPage)
diff --git a/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.tsx b/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.tsx
index 112f356ea..caaa559e4 100644
--- a/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.tsx
+++ b/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.tsx
@@ -1,42 +1,31 @@
-import * as React from 'react'
+import { useEffect } from 'react'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
-import { locations } from 'routing/locations'
 
-import { Props } from './UnsupportedBrowserPage.types'
 import './UnsupportedBrowserPage.css'
 
-export default class UnsupportedBrowserPage extends React.PureComponent<Props> {
-  analytics = getAnalytics()
-
-  componentDidMount() {
+export default function UnsupportedBrowserPage() {
+  useEffect(() => {
+    const analytics = getAnalytics()
     document.body.classList.add('notfound-body')
-    this.analytics.track('Not found page', {})
-  }
-
-  componentWillUnmount() {
-    document.body.classList.remove('notfound-body')
-  }
-
-  handleOnClick = () => {
-    this.props.onNavigate(locations.root())
-  }
-
-  render() {
-    return (
-      <div className="UnsupportedBrowserPage">
-        <h1 className="title">{t('unsupported_browser_page.title')}</h1>
-        <p className="subtitle">
-          <T
-            id="unsupported_browser_page.subtitle"
-            values={{
-              br: <br />,
-              chrome: <a href="https://www.google.com/chrome/">Google Chrome</a>,
-              firefox: <a href="https://www.google.com/chrome/">Mozilla Firefox</a>
-            }}
-          />
-        </p>
-      </div>
-    )
-  }
+    analytics.track('Not found page', {})
+    return () => {
+      document.body.classList.remove('notfound-body')
+    }
+  }, [])
+  return (
+    <div className="UnsupportedBrowserPage">
+      <h1 className="title">{t('unsupported_browser_page.title')}</h1>
+      <p className="subtitle">
+        <T
+          id="unsupported_browser_page.subtitle"
+          values={{
+            br: <br />,
+            chrome: <a href="https://www.google.com/chrome/">Google Chrome</a>,
+            firefox: <a href="https://www.google.com/chrome/">Mozilla Firefox</a>
+          }}
+        />
+      </p>
+    </div>
+  )
 }
diff --git a/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.types.ts b/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.types.ts
deleted file mode 100644
index 26d7b2be6..000000000
--- a/src/components/UnsupportedBrowserPage/UnsupportedBrowserPage.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
-
-export type Props = {
-  onNavigate: (path: string) => void
-}
-
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
diff --git a/src/components/UnsupportedBrowserPage/index.ts b/src/components/UnsupportedBrowserPage/index.ts
index 2df8b6b7d..fdf6254da 100644
--- a/src/components/UnsupportedBrowserPage/index.ts
+++ b/src/components/UnsupportedBrowserPage/index.ts
@@ -1,3 +1,3 @@
-import UnsupportedBrowserPage from './UnsupportedBrowserPage.container'
+import UnsupportedBrowserPage from './UnsupportedBrowserPage'
 
 export default UnsupportedBrowserPage