Go back from settings to location / edit location / review / map (#545)

* Go back from settings to location / edit location / review / map

* Only 'back from settings' for location if opened through map

Opening location page through back button shouldn't count
because then we have an infinite loop

src/components/connect/ConnectLocation.js

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import {
   fetchLocationData,
+  setFromSettings,
   setIsBeingEditedAndResetPosition,
   setStreetView,
 } from '../../redux/locationSlice'
@@ -73,6 +74,13 @@ const ConnectLocation = ({
     dispatch(setStreetView(isStreetView))
   }, [dispatch, isStreetView])
 
+  useEffect(
+    () => () => {
+      dispatch(setFromSettings(false))
+    },
+    [dispatch, locationId],
+  )
+
   useEffect(() => {
     if (
       isBeingEdited &&

src/components/connect/DisconnectReview.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { clearReview } from '../../redux/reviewSlice'
+
+const DisconnectReview = () => {
+  const dispatch = useDispatch()
+  const { review } = useSelector((state) => state.review)
+
+  useEffect(() => {
+    if (review) {
+      dispatch(clearReview())
+    }
+  }, [dispatch, review?.id]) //eslint-disable-line
+
+  return null
+}
+
+export default DisconnectReview

src/components/connect/connectRoutes.js

@@ -9,6 +9,7 @@ import ConnectPath from './ConnectPath'
 import ConnectReview from './ConnectReview'
 import ConnectTypes from './ConnectTypes'
 import DisconnectLocation from './DisconnectLocation'
+import DisconnectReview from './DisconnectReview'
 
 const connectRoutes = [
   /*
@@ -71,6 +72,7 @@ const connectRoutes = [
    * - on mobile, we need to center the map on the edited location because the UX involves panning the map on central pin
    * - on mobile, we need to disable the drawer when arriving from list view
    * - on mobile, the drawer needs the user scrolling up and down
+   * - on desktop, clicking location from a settings page should make 'back' go to settings instead if map
    *
    * actions:
    * - fetch data from backend
@@ -80,6 +82,7 @@ const connectRoutes = [
    * - on mobile, center and zoom on edited location
    * - on mobile, keep track of whether we arrived via list-locations URL
    * - on mobile, disable default overscroll (e.g. a refresh on scroll down in Chrome)
+   * - on desktop, reset the isFromSettings flag when leaving location
    */
   <Route
     key="connect-location"
@@ -161,6 +164,16 @@ const connectRoutes = [
         match.params.nextNextSegment === 'position') && <ConnectOverscroll />
     }
   </Route>,
+
+  /*
+   * DisconnectReview
+   * why: if we start editing the review and then go back to location or to the map, and then open settings, the back button should not take us to the abandoned review
+   *
+   * action: clear review in Redux
+   */
+  <Route key="disconnect-review" path={['/map', '/locations']}>
+    {({ match }) => match && <DisconnectReview />}
+  </Route>,
 ]
 
 export default connectRoutes

src/components/desktop/SidePane.js

@@ -46,14 +46,20 @@ const SidePane = () => {
   const history = useAppHistory()
   const { t } = useTranslation()
   const { review } = useSelector((state) => state.review)
+  const {
+    locationId,
+    isBeingEdited: isEditingLocation,
+    fromSettings,
+  } = useSelector((state) => state.location)
 
   const goToMap = (event) => {
     event.stopPropagation()
     history.push('/map')
   }
-  const goBack = (event) => {
+
+  const goToSettings = (event) => {
     event.stopPropagation()
-    history.goBack()
+    history.push('/settings')
   }
 
   return (
@@ -110,7 +116,22 @@ const SidePane = () => {
             </Route>
             <Route path="/settings">
               <StyledNavBack>
-                <BackButton onClick={goBack}>
+                <BackButton
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    if (review) {
+                      history.push(`/reviews/${review.id}/edit`)
+                    } else if (locationId) {
+                      if (isEditingLocation) {
+                        history.push(`/locations/${locationId}/edit`)
+                      } else {
+                        history.push(`/locations/${locationId}`)
+                      }
+                    } else {
+                      history.push('/map')
+                    }
+                  }}
+                >
                   <ArrowBack />
                   {t('back')}
                 </BackButton>
@@ -123,7 +144,9 @@ const SidePane = () => {
                 match && (
                   <>
                     <StyledNavBack>
-                      <BackButton onClick={goToMap}>
+                      <BackButton
+                        onClick={fromSettings ? goToSettings : goToMap}
+                      >
                         <ArrowBack />
                         {t('back')}
                       </BackButton>

src/components/map/MapPage.js

@@ -2,12 +2,13 @@ import GoogleMapReact from 'google-map-react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import styled from 'styled-components/macro'
 
 import { VISIBLE_CLUSTER_ZOOM_LIMIT } from '../../constants/map'
 import { fetchFilterCounts } from '../../redux/filterSlice'
-import { updatePosition } from '../../redux/locationSlice'
+import { setFromSettings, updatePosition } from '../../redux/locationSlice'
 import { setGoogle } from '../../redux/mapSlice'
 import { fetchLocations } from '../../redux/viewChange'
 import { updateLastMapView } from '../../redux/viewportSlice'
@@ -168,6 +169,7 @@ const MapPage = ({ isDesktop }) => {
   const { geolocation, geolocationState } = useSelector(
     (state) => state.geolocation,
   )
+  const { pathname } = useLocation()
   const {
     locationId,
     position,
@@ -247,9 +249,10 @@ const MapPage = ({ isDesktop }) => {
   }
 
   const handleLocationClick = (location) => {
-    if (!isAddingLocation && !isEditingLocation) {
-      history.push(`/locations/${location.id}`)
+    if (isDesktop && pathname.includes('/settings')) {
+      dispatch(setFromSettings(true))
     }
+    history.push(`/locations/${location.id}`)
   }
 
   const handleNonspecificClick = ({ event }) => {

src/redux/locationSlice.js

@@ -59,6 +59,7 @@ const locationSlice = createSlice({
     position: null, // {lat: number, lng: number}
     locationId: null,
     isBeingEdited: false,
+    fromSettings: false,
     form: null,
     tooltipOpen: false,
     streetViewOpen: false,
@@ -151,6 +152,9 @@ const locationSlice = createSlice({
     setTabIndex: (state, action) => {
       state.pane.tabIndex = action.payload
     },
+    setFromSettings: (state, action) => {
+      state.fromSettings = action.payload
+    },
   },
   extraReducers: {
     [updateLastMapView]: (state, action) => {
@@ -271,6 +275,7 @@ export const {
   setTabIndex,
   fullyOpenPaneDrawer,
   partiallyClosePaneDrawer,
+  setFromSettings,
 } = locationSlice.actions
 
 export default locationSlice.reducer

src/redux/reviewSlice.js

@@ -14,10 +14,15 @@ export const fetchReviewData = createAsyncThunk(
 const reviewSlice = createSlice({
   name: 'review',
   initialState: {
-    reviewId: null,
     isLoading: false,
     review: null,
   },
+  reducers: {
+    clearReview: (state) => {
+      state.isLoading = false
+      state.review = null
+    },
+  },
   extraReducers: {
     [fetchReviewData.pending]: (state) => {
       state.isLoading = true
@@ -35,4 +40,6 @@ const reviewSlice = createSlice({
   },
 })
 
+export const { clearReview } = reviewSlice.actions
+
 export default reviewSlice.reducer