Merge branch 'master' into feat/remove-push-sagas-6.4

package.json

@@ -12,7 +12,7 @@
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
     "@dcl/schemas": "^11.7.0",
-    "@dcl/sdk": "7.5.1",
+    "@dcl/sdk": "7.5.4",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
     "@sentry/react": "^7.64.0",

src/components/CollectionDetailPage/CollectionDetailPage.container.ts

@@ -12,7 +12,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch } from './CollectionDetail
 import CollectionDetailPage from './CollectionDetailPage'
 
 const mapState = (state: RootState): MapStateProps => {
-  const collectionId = getCollectionId(state) || ''
+  const collectionId = getCollectionId() || ''
   const collection = getCollection(state, collectionId)
   const statusByCollectionId = getStatusByCollectionId(state)
 

src/components/CollectionDetailPage/CollectionDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import classNames from 'classnames'
+import { useHistory, useLocation } from 'react-router-dom'
 import { Network } from '@dcl/schemas'
 import { Section, Row, Narrow, Column, Header, Button, Popup, Tabs, Table, Label, SemanticSIZES } from 'decentraland-ui'
 import { NetworkCheck } from 'decentraland-dapps/dist/containers'
@@ -30,7 +31,6 @@ import { Props } from './CollectionDetailPage.types'
 import CollectionItem from './CollectionItem'
 
 import './CollectionDetailPage.css'
-import { useHistory, useLocation } from 'react-router'
 
 export default function CollectionDetailPage({
   collection,

src/components/CollectionProvider/CollectionProvider.container.ts

@@ -15,7 +15,7 @@ import { getCuration } from 'modules/curations/collectionCuration/selectors'
 import { FETCH_ITEM_CURATIONS_REQUEST } from 'modules/curations/itemCuration/actions'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
-  const id = ownProps.id || getCollectionId(state)
+  const id = ownProps.id || getCollectionId()
   const collection = id ? getCollection(state, id) : null
   const items = collection ? getCollectionItems(state, collection.id) : []
   const paginatedItems = collection ? getPaginatedCollectionItems(state, collection.id, ownProps.itemsPageSize || DEFAULT_PAGE_SIZE) : []

src/components/ENSDetailPage/ENSDetailPage.container.ts

@@ -12,7 +12,7 @@ import { MapStateProps, MapDispatchProps } from './ENSDetailPage.types'
 import ENSDetailPage from './ENSDetailPage'
 
 const mapState = (state: RootState): MapStateProps => {
-  const name = getENSName(state)
+  const name = getENSName()
   return {
     name,
     ens: name ? getENSBySubdomain(state, `${name}.dcl.eth`) : null,

src/components/ENSDetailPage/ENSDetailPage.spec.tsx

@@ -9,10 +9,14 @@ import ENSDetailPage from './ENSDetailPage'
 import { Props } from './ENSDetailPage.types'
 
 jest.mock('components/LoggedInDetailPage', () => ({ children }: any) => <div>{children}</div>)
-jest.mock('react-router-dom', () => ({
-  useHistory: jest.fn(() => ({ push: jest.fn() })),
-  Link: ({ to, children }: { to: string; children: React.ReactNode }) => <a href={to}>{children}</a>
-}))
+jest.mock('react-router-dom', () => {
+  const module = jest.requireActual('react-router-dom')
+  return {
+    ...module,
+    useHistory: jest.fn(() => ({ push: jest.fn() })),
+    Link: ({ to, children }: { to: string; children: React.ReactNode }) => <a href={to}>{children}</a>
+  } as unknown
+})
 
 function renderENSDetailPage(props: Partial<Props>) {
   return renderWithProviders(

src/components/ItemDetailPage/ItemDetailPage.container.ts

@@ -12,7 +12,7 @@ import ItemDetailPage from './ItemDetailPage'
 import { getIsWearableUtilityEnabled } from 'modules/features/selectors'
 
 const mapState = (state: RootState): MapStateProps => {
-  const itemId = getItemId(state)
+  const itemId = getItemId()
   const item = itemId ? getItem(state, itemId) : null
   const wallet = getWallet(state)!
   const collection = item && item.collectionId ? getCollection(state, item.collectionId) : null

src/components/ItemEditorPage/CenterPanel/CenterPanel.container.ts

@@ -37,7 +37,7 @@ import CenterPanel from './CenterPanel'
 const mapState = (state: RootState): MapStateProps => {
   const address = getAddress(state)
   let collection: Collection | undefined
-  const collectionId = getSelectedCollectionId(state)
+  const collectionId = getSelectedCollectionId()
   // Emotes created by the user
   let emotes = getEmotes(state)
   if (collectionId) {

src/components/ItemEditorPage/LeftPanel/Header/Header.container.ts

@@ -14,7 +14,7 @@ import Header from './Header'
 
 const mapState = (state: RootState): MapStateProps => {
   let collection: Collection | undefined
-  const collectionId = getSelectedCollectionId(state)
+  const collectionId = getSelectedCollectionId()
   if (collectionId) {
     const collections = getCollections(state)
     collection = collections.find(collection => collection.id === collectionId)
@@ -23,7 +23,7 @@ const mapState = (state: RootState): MapStateProps => {
   return {
     address,
     isLoggedIn: isLoggedIn(state),
-    isReviewing: isReviewing(state),
+    isReviewing: isReviewing(),
     collection,
     hasEditRights: collection !== undefined && address !== undefined && hasViewAndEditRights(state, address, collection),
     hasUserOrphanItems: hasUserOrphanItems(state)

src/components/ItemEditorPage/LeftPanel/LeftPanel.container.ts

@@ -27,7 +27,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch } from './LeftPanel.types'
 import LeftPanel from './LeftPanel'
 
 const mapState = (state: RootState): MapStateProps => {
-  const selectedCollectionId = getSelectedCollectionId(state)
+  const selectedCollectionId = getSelectedCollectionId()
   const address = getAddress(state)
   const itemsPaginationData = selectedCollectionId
     ? getPaginationData(state, selectedCollectionId)
@@ -55,7 +55,7 @@ const mapState = (state: RootState): MapStateProps => {
     visibleItems: getVisibleItems(state),
     bodyShape: getBodyShape(state),
     wearableController: getWearablePreviewController(state),
-    isReviewing: isReviewing(state),
+    isReviewing: isReviewing(),
     isLoading: isLoadingType(getLoading(state), FETCH_ITEMS_REQUEST) || isLoadingType(getLoading(state), FETCH_ORPHAN_ITEM_REQUEST),
     isPlayingEmote: isPlayingEmote(state),
     hasUserOrphanItems: hasUserOrphanItems(state)

src/components/ItemEditorPage/LeftPanel/Toasts/ItemAdded/ItemAddedToast.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Button, Toast, ToastType } from 'decentraland-ui'
 import { Link, useHistory, useLocation } from 'react-router-dom'
+import { getNewItemName } from 'modules/item/selectors'
 import { locations } from 'routing/locations'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 
@@ -10,11 +11,12 @@ import { Props } from './ItemAddedToast.types'
 import './ItemAddedToast.css'
 
 const ItemAddedToast: React.FC<Props> = props => {
-  const { collectionId, itemName } = props
+  const { collectionId } = props
   const [shouldShowToast, setShouldShowToast] = useState(false)
   const [item, setItem] = useState<string | null>(null)
   const history = useHistory()
   const location = useLocation()
+  const itemName = getNewItemName()
 
   useEffect(() => {
     if (itemName) {

src/components/ItemEditorPage/LeftPanel/Toasts/ItemAdded/ItemAddedToast.types.ts

@@ -1,6 +1,3 @@
 export type Props = {
   collectionId: string | null
-  itemName: string | null
 }
-
-export type MapStateProps = Pick<Props, 'itemName'>

src/components/ItemEditorPage/LeftPanel/Toasts/ItemAdded/index.ts

@@ -1,3 +1,3 @@
-import ItemAddedToast from './ItemAddedToast.container'
+import ItemAddedToast from './ItemAddedToast'
 
 export { ItemAddedToast }

src/components/ItemEditorPage/TopPanel/TopPanel.container.ts

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { getAddress, getChainId, getLoading, isConnected } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from 'modules/common/types'
+import { withRouter } from 'react-router-dom'
 import { isWalletCommitteeMember } from 'modules/committee/selectors'
 import { getSelectedCollectionId, isReviewing } from 'modules/location/selectors'
 import { setCollectionCurationAssigneeRequest } from 'modules/curations/collectionCuration/actions'
@@ -17,7 +17,7 @@ import { getCuration } from 'modules/curations/collectionCuration/selectors'
 import { getItemCurations, getLoading as getLoadingItemCurations } from 'modules/curations/itemCuration/selectors'
 
 const mapState = (state: RootState): MapStateProps => {
-  const selectedCollectionId = getSelectedCollectionId(state)
+  const selectedCollectionId = getSelectedCollectionId()
   const collection = selectedCollectionId ? getCollection(state, selectedCollectionId) : null
   const items = collection ? getCollectionItems(state, collection.id) : []
   const itemCurations = collection ? getItemCurations(state, collection.id) : []
@@ -32,9 +32,9 @@ const mapState = (state: RootState): MapStateProps => {
     curation,
     chainId: getChainId(state),
     isConnected: isConnected(state),
-    isReviewing: isReviewing(state),
+    isReviewing: isReviewing(),
     isCommitteeMember: isWalletCommitteeMember(state),
-    selectedCollectionId: getSelectedCollectionId(state),
+    selectedCollectionId: getSelectedCollectionId(),
     isLoading:
       isLoadingType(getLoading(state), FETCH_COLLECTION_REQUEST) ||
       isLoadingType(getLoadingItemCurations(state), FETCH_ITEM_CURATIONS_REQUEST) ||
@@ -43,10 +43,9 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onSetAssignee: (collectionId, assignee, curation) => dispatch(setCollectionCurationAssigneeRequest(collectionId, assignee, curation)),
   onInitiateTPApprovalFlow: collection => dispatch(initiateTPApprovalFlow(collection)),
   onInitiateApprovalFlow: collection => dispatch(initiateApprovalFlow(collection))
 })
 
-export default connect(mapState, mapDispatch)(TopPanel)
+export default connect(mapState, mapDispatch)(withRouter(TopPanel))

src/components/ItemEditorPage/TopPanel/TopPanel.tsx

@@ -22,7 +22,8 @@ export default class TopPanel extends React.PureComponent<Props, State> {
   }
 
   handleBack = () => {
-    this.props.onNavigate(locations.curation())
+    const { history } = this.props
+    history.push(locations.curation())
   }
 
   handleConfirmApprovalModal = (collection: Collection, curation: CollectionCuration | null) => {

src/components/ItemEditorPage/TopPanel/TopPanel.types.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { ChainId } from '@dcl/schemas'
+import { RouteComponentProps } from 'react-router-dom'
 import {
   initiateApprovalFlow,
   InitiateApprovalFlowAction,
@@ -31,11 +31,10 @@ export type Props = {
   isReviewing: boolean
   isCommitteeMember: boolean
   selectedCollectionId: string | null
-  onNavigate: (path: string) => void
   onInitiateApprovalFlow: typeof initiateApprovalFlow
   onInitiateTPApprovalFlow: typeof initiateTPApprovalFlow
   onSetAssignee: typeof setCollectionCurationAssigneeRequest
-}
+} & RouteComponentProps
 
 export type State = {
   currentVeredict?: boolean
@@ -65,7 +64,5 @@ export type MapStateProps = Pick<
   | 'isCommitteeMember'
   | 'selectedCollectionId'
 >
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onInitiateApprovalFlow' | 'onInitiateTPApprovalFlow' | 'onSetAssignee'>
-export type MapDispatch = Dispatch<
-  CallHistoryMethodAction | InitiateApprovalFlowAction | InitiateTPApprovalFlowAction | SetCollectionCurationAssigneeRequestAction
->
+export type MapDispatchProps = Pick<Props, 'onInitiateApprovalFlow' | 'onInitiateTPApprovalFlow' | 'onSetAssignee'>
+export type MapDispatch = Dispatch<InitiateApprovalFlowAction | InitiateTPApprovalFlowAction | SetCollectionCurationAssigneeRequestAction>

src/components/ItemProvider/ItemProvider.container.ts

@@ -12,7 +12,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './ItemPr
 import ItemProvider from './ItemProvider'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
-  const id = ownProps.id || getItemId(state)
+  const id = ownProps.id || getItemId()
   const items = getItems(state)
   const collections = getCollections(state)
 

src/components/LandAction/LandAction.tsx

@@ -5,14 +5,15 @@ import Back from 'components/Back'
 import { locations } from 'routing/locations'
 import { Props } from './LandAction.types'
 import './LandAction.css'
+import { withRouter } from 'react-router'
 
-export default class LandAction extends React.PureComponent<Props> {
+class LandAction extends React.PureComponent<Props> {
   render() {
-    const { land, title, subtitle, children, onNavigate } = this.props
+    const { land, title, subtitle, children, history } = this.props
     return (
       <div className="LandAction">
         <Row height={48}>
-          <Back absolute onClick={() => onNavigate(locations.landDetail(land.id))} />
+          <Back absolute onClick={() => history.push(locations.landDetail(land.id))} />
         </Row>
         <Row className="main">
           <Narrow>
@@ -36,3 +37,5 @@ export default class LandAction extends React.PureComponent<Props> {
     )
   }
 }
+
+export default withRouter(LandAction)

src/components/LandAction/LandAction.types.ts

@@ -1,14 +1,9 @@
-import { Dispatch } from 'redux'
 import { Land } from 'modules/land/types'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router'
 
 export type Props = {
   land: Land
   title?: React.ReactNode
   subtitle?: React.ReactNode
   children: React.ReactNode
-  onNavigate: (path: string) => void
-}
-
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
+} & RouteComponentProps

src/components/LandAction/index.ts

@@ -1,2 +1,2 @@
-import LandAction from './LandAction.container'
+import LandAction from './LandAction'
 export default LandAction

src/components/LandAssignENSPage/LandAssignENSPage.container.ts

@@ -1,5 +1,5 @@
-import { push, goBack } from 'connected-react-router'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { RootState } from 'modules/common/types'
 import {
@@ -47,9 +47,7 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSetENSResolver: ens => dispatch(setENSResolverRequest(ens)),
   onSetENSContent: (ens, land) => dispatch(setENSContentRequest(ens, land)),
-  onReclaimName: ens => dispatch(reclaimNameRequest(ens)),
-  onBack: () => dispatch(goBack()),
-  onNavigate: path => dispatch(push(path))
+  onReclaimName: ens => dispatch(reclaimNameRequest(ens))
 })
 
-export default connect(mapState, mapDispatch)(LandAssignENSPage)
+export default connect(mapState, mapDispatch)(withRouter(LandAssignENSPage))

src/components/LandAssignENSPage/LandAssignENSPage.tsx

@@ -10,7 +10,7 @@ import { Props } from './LandAssignENSPage.types'
 
 export default class LandAssignENSPage extends React.PureComponent<Props> {
   handleGoBack = () => {
-    this.props.onBack()
+    this.props.history.goBack()
   }
 
   render() {
@@ -21,10 +21,10 @@ export default class LandAssignENSPage extends React.PureComponent<Props> {
       isWaitingTxSetContent,
       isWaitingTxReclaim,
       isWaitingTxSetResolver,
+      history,
       onSetENSResolver,
       onSetENSContent,
-      onReclaimName,
-      onNavigate
+      onReclaimName
     } = this.props
 
     return (
@@ -52,7 +52,7 @@ export default class LandAssignENSPage extends React.PureComponent<Props> {
                 onSetENSResolver={onSetENSResolver}
                 onReclaimName={onReclaimName}
                 onBack={this.handleGoBack}
-                onNavigate={onNavigate}
+                onNavigate={(path: string) => history.push(path)}
               />
             </LandAction>
           )

src/components/LandAssignENSPage/LandAssignENSPage.types.ts

@@ -1,6 +1,5 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction, goBack } from 'connected-react-router'
-import { match } from 'react-router'
+import { RouteComponentProps, match } from 'react-router'
 import {
   setENSContentRequest,
   setENSResolverRequest,
@@ -26,16 +25,12 @@ export type Props = {
   onSetENSResolver: typeof setENSResolverRequest
   onSetENSContent: typeof setENSContentRequest
   onReclaimName: typeof reclaimNameRequest
-  onBack: typeof goBack
-  onNavigate: (path: string) => void
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<
   Props,
   'ens' | 'isLoading' | 'error' | 'isWaitingTxSetContent' | 'isWaitingTxSetResolver' | 'isWaitingTxReclaim'
 >
-export type MapDispatchProps = Pick<Props, 'onSetENSResolver' | 'onSetENSContent' | 'onReclaimName' | 'onBack' | 'onNavigate'>
-export type MapDispatch = Dispatch<
-  CallHistoryMethodAction | SetENSResolverRequestAction | SetENSContentRequestAction | ReclaimNameRequestAction
->
+export type MapDispatchProps = Pick<Props, 'onSetENSResolver' | 'onSetENSContent' | 'onReclaimName'>
+export type MapDispatch = Dispatch<SetENSResolverRequestAction | SetENSContentRequestAction | ReclaimNameRequestAction>
 export type OwnProps = Pick<Props, 'match'>