fix: Collection Details Page not going back correctly (#3168)

Author: LautaroPetaccio

src/components/CollectionDetailPage/CollectionDetailPage.container.ts

@@ -7,6 +7,7 @@ import { getCollection, isOnSaleLoading, getLoading as getLoadingCollection, get
 import { DELETE_COLLECTION_REQUEST, SET_COLLECTION_MINTERS_REQUEST } from 'modules/collection/actions'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getCollectionItems } from 'modules/item/selectors'
+import { getLastLocation } from 'modules/ui/location/selector'
 import { fetchCollectionForumPostReplyRequest, FETCH_COLLECTION_FORUM_POST_REPLY_REQUEST } from 'modules/forum/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './CollectionDetailPage.types'
 import CollectionDetailPage from './CollectionDetailPage'
@@ -24,7 +25,8 @@ const mapState = (state: RootState): MapStateProps => {
     status: statusByCollectionId[collectionId],
     isLoading:
       isLoadingType(getLoadingCollection(state), DELETE_COLLECTION_REQUEST) ||
-      isLoadingType(getLoadingCollection(state), FETCH_COLLECTION_FORUM_POST_REPLY_REQUEST)
+      isLoadingType(getLoadingCollection(state), FETCH_COLLECTION_FORUM_POST_REPLY_REQUEST),
+    lastLocation: getLastLocation(state)
   }
 }
 

src/components/CollectionDetailPage/CollectionDetailPage.tsx

@@ -37,6 +37,7 @@ export default function CollectionDetailPage({
   wallet,
   items,
   isOnSaleLoading,
+  lastLocation,
   status,
   onOpenModal,
   isLoading,
@@ -50,6 +51,7 @@ export default function CollectionDetailPage({
 
   const [tab, setTab] = useState<ItemType>(initialTab || ItemType.WEARABLE)
   const history = useHistory()
+  const isComingFromTheCollectionsPage = lastLocation === locations.collections()
 
   const fetchCollectionForumPostReply = useCallback(() => {
     // Only fetch the forum post replies if the collection has a forum link and there's no other fetch process in progress
@@ -85,8 +87,12 @@ export default function CollectionDetailPage({
   }, [collection, wallet, onOpenModal])
 
   const handleGoBack = useCallback(() => {
-    history.push(locations.collections())
-  }, [history])
+    if (isComingFromTheCollectionsPage) {
+      history.goBack()
+    } else {
+      history.push(locations.collections())
+    }
+  }, [history, isComingFromTheCollectionsPage])
 
   const handleNavigateToEditor = useCallback(() => {
     if (collection) {

src/components/CollectionDetailPage/CollectionDetailPage.types.ts

@@ -12,6 +12,7 @@ export type Props = {
   isLoading: boolean
   items: Item[]
   status: SyncStatus
+  lastLocation?: string
   onOpenModal: typeof openModal
   onFetchCollectionForumPostReply: typeof fetchCollectionForumPostReplyRequest
 }
@@ -20,6 +21,6 @@ export type State = {
   tab: ItemType
 }
 
-export type MapStateProps = Pick<Props, 'wallet' | 'collection' | 'isOnSaleLoading' | 'isLoading' | 'items' | 'status'>
+export type MapStateProps = Pick<Props, 'wallet' | 'collection' | 'isOnSaleLoading' | 'isLoading' | 'items' | 'status' | 'lastLocation'>
 export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onFetchCollectionForumPostReply'>
 export type MapDispatch = Dispatch<OpenModalAction | FetchCollectionForumPostReplyRequestAction>

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.container.ts

@@ -14,6 +14,7 @@ import { getCollectionThirdParty, isFetchingAvailableSlots } from 'modules/third
 import { fetchThirdPartyAvailableSlotsRequest } from 'modules/thirdParty/actions'
 import { isThirdPartyCollection } from 'modules/collection/utils'
 import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { getLastLocation } from 'modules/ui/location/selector'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './ThirdPartyCollectionDetailPage.types'
 import CollectionDetailPage from './ThirdPartyCollectionDetailPage'
 
@@ -38,7 +39,8 @@ const mapState = (state: RootState): MapStateProps => {
       isLoadingType(getLoadingCollection(state), FETCH_COLLECTIONS_REQUEST) ||
       isLoadingType(getLoadingCollection(state), DELETE_COLLECTION_REQUEST) ||
       isLoadingType(getLoadingItem(state), FETCH_COLLECTION_ITEMS_REQUEST),
-    isLoadingAvailableSlots: isFetchingAvailableSlots(state)
+    isLoadingAvailableSlots: isFetchingAvailableSlots(state),
+    lastLocation: getLastLocation(state)
   }
 }
 

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx

@@ -56,6 +56,7 @@ enum ItemStatus {
 
 export default function ThirdPartyCollectionDetailPage({
   currentPage,
+  lastLocation,
   wallet,
   thirdParty,
   items,
@@ -73,6 +74,7 @@ export default function ThirdPartyCollectionDetailPage({
   const [shouldFetchAllPages, setShouldFetchAllPages] = useState(false)
   const [itemStatus, setItemStatus] = useState<ItemStatus>(ItemStatus.ALL)
   const history = useHistory()
+  const isComingFromTheCollectionsPage = lastLocation === locations.collections()
 
   useEffect(() => {
     if (thirdParty && thirdParty.availableSlots === undefined && !isLoadingAvailableSlots) {
@@ -108,8 +110,12 @@ export default function ThirdPartyCollectionDetailPage({
   }, [collection, onOpenModal])
 
   const handleGoBack = useCallback(() => {
-    history.push(locations.collections())
-  }, [history])
+    if (isComingFromTheCollectionsPage) {
+      history.goBack()
+    } else {
+      history.push(locations.collections())
+    }
+  }, [history, isComingFromTheCollectionsPage])
 
   const handlePageChange = useCallback(
     (_event: React.MouseEvent<HTMLAnchorElement>, data: PaginationProps) => {

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.types.ts

@@ -25,6 +25,7 @@ export type Props = {
   itemCurations: ItemCuration[]
   isOnSaleLoading: boolean
   authorizations: Authorization[]
+  lastLocation?: string
   isLoading: boolean
   isLoadingAvailableSlots: boolean
   isThirdPartyV2Enabled: boolean
@@ -54,6 +55,7 @@ export type MapStateProps = Pick<
   | 'items'
   | 'isThirdPartyV2Enabled'
   | 'paginatedData'
+  | 'lastLocation'
 >
 export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onFetchAvailableSlots'>
 export type MapDispatch = Dispatch<

src/modules/ui/location/action.ts

@@ -0,0 +1,5 @@
+import { action } from 'typesafe-actions'
+
+export const SAVE_LAST_LOCATION = 'Save last location'
+export const saveLastLocation = (location: string) => action(SAVE_LAST_LOCATION, { location })
+export type SaveLastLocationAction = ReturnType<typeof saveLastLocation>

src/modules/ui/location/reducer.spec.ts

@@ -0,0 +1,18 @@
+import { saveLastLocation } from './action'
+import { locationReducer, LocationState } from './reducer'
+
+let state: LocationState
+
+describe('when reducing the save last location action', () => {
+  beforeEach(() => {
+    state = {
+      lastLocation: undefined
+    }
+  })
+
+  it('should set the last location', () => {
+    expect(locationReducer(state, saveLastLocation('/some-location'))).toEqual({
+      lastLocation: '/some-location'
+    })
+  })
+})

src/modules/ui/location/reducer.ts

@@ -0,0 +1,22 @@
+import { SAVE_LAST_LOCATION, SaveLastLocationAction } from './action'
+
+export type LocationState = {
+  lastLocation?: string
+}
+
+export const INITIAL_STATE: LocationState = {
+  lastLocation: undefined
+}
+
+export function locationReducer(state = INITIAL_STATE, action: SaveLastLocationAction) {
+  switch (action.type) {
+    case SAVE_LAST_LOCATION: {
+      return {
+        ...state,
+        lastLocation: action.payload.location
+      }
+    }
+    default:
+      return state
+  }
+}

src/modules/ui/location/selector.spec.ts

@@ -0,0 +1,36 @@
+import { RootState } from 'modules/common/types'
+import { getLastLocation } from './selector'
+
+let state: RootState
+
+beforeEach(() => {
+  state = {
+    ui: {
+      location: {
+        lastLocation: undefined
+      }
+    }
+  } as RootState
+})
+
+describe('when getting the last location', () => {
+  describe('and the last location is not set', () => {
+    beforeEach(() => {
+      state.ui.location.lastLocation = undefined
+    })
+
+    it('should return undefined', () => {
+      expect(getLastLocation(state)).toBeUndefined()
+    })
+  })
+
+  describe('and the last location is set', () => {
+    beforeEach(() => {
+      state.ui.location.lastLocation = '/some-location'
+    })
+
+    it('should return the last location', () => {
+      expect(getLastLocation(state)).toEqual('/some-location')
+    })
+  })
+})

src/modules/ui/location/selector.ts

@@ -0,0 +1,3 @@
+import { RootState } from 'modules/common/types'
+
+export const getLastLocation = (state: RootState) => state.ui.location.lastLocation

src/modules/ui/reducer.ts

@@ -6,6 +6,7 @@ import { landReducer as land, LandState } from './land/reducer'
 import { CreateMultipleItemsState, createMultipleItemsReducer as createMultipleItems } from './createMultipleItems/reducer'
 import { ThirdPartyReducer as thirdParty } from './thirdparty/reducer'
 import { ThirdPartyState } from './thirdparty/reducer'
+import { LocationState, locationReducer as location } from './location/reducer'
 
 export type UIState = {
   sidebar: SidebarState
@@ -14,6 +15,7 @@ export type UIState = {
   land: LandState
   createMultipleItems: CreateMultipleItemsState
   thirdParty: ThirdPartyState
+  location: LocationState
 }
 
 export const uiReducer = combineReducers({
@@ -22,5 +24,6 @@ export const uiReducer = combineReducers({
   collection,
   land,
   createMultipleItems,
-  thirdParty
+  thirdParty,
+  location
 })

src/routing/AppRoutes/AppRoutes.container.ts

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux'
+import { saveLastLocation } from 'modules/ui/location/action'
+import { AppRoutes } from './AppRoutes'
+import { MapDispatch, MapDispatchProps } from './AppRoutes.types'
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  saveLastLocation: (location: string) => dispatch(saveLastLocation(location))
+})
+
+export default connect(undefined, mapDispatch)(AppRoutes)

src/routing/AppRoutes.tsx src/routing/AppRoutes/AppRoutes.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
-import { Switch, Route, Redirect } from 'react-router-dom'
+import React, { useEffect, useState } from 'react'
+import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
 import { Loader, Responsive } from 'decentraland-ui'
 import { usePageTracking } from 'decentraland-dapps/dist/hooks/usePageTracking'
 
 import { locations } from 'routing/locations'
 import LoadingPage from 'components/LoadingPage'
 import MobilePage from 'components/MobilePage'
 import { ProtectedRoute } from 'modules/ProtectedRoute'
+import { Props } from './AppRoutes.types'
 
 const ScenesPage = React.lazy(() => import('components/ScenesPage'))
 const HomePage = React.lazy(() => import('components/HomePage'))
@@ -39,7 +40,17 @@ const CurationPage = React.lazy(() => import('components/CurationPage'))
 const TemplatesPage = React.lazy(() => import('components/TemplatesPage'))
 const TemplateDetailPage = React.lazy(() => import('components/TemplateDetailPage'))
 
-export function AppRoutes() {
+export function AppRoutes({ saveLastLocation }: Props) {
+  // Save the last location
+  const location = useLocation()
+  const [currentRoute, setCurrentRoute] = useState(location.pathname)
+  useEffect(() => {
+    if (currentRoute !== location.pathname) {
+      saveLastLocation(currentRoute)
+      setCurrentRoute(location.pathname)
+    }
+  }, [location.pathname, currentRoute])
+
   usePageTracking()
   return (
     <React.Suspense fallback={<Loader size="huge" active />}>

src/routing/AppRoutes/AppRoutes.types.ts

@@ -0,0 +1,9 @@
+import { Dispatch } from 'react'
+import { SaveLastLocationAction } from 'modules/ui/location/action'
+
+export type Props = {
+  saveLastLocation: (location: string) => void
+}
+
+export type MapDispatchProps = Pick<Props, 'saveLastLocation'>
+export type MapDispatch = Dispatch<SaveLastLocationAction>

src/routing/AppRoutes/index.ts

@@ -0,0 +1,2 @@
+import AppRoutes from './AppRoutes.container'
+export { AppRoutes }