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

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])
+
+  return null
+}
+
+export default DisconnectReview

src/components/connect/connectRoutes.js

@@ -8,6 +8,7 @@ import ConnectPath from './ConnectPath'
 import ConnectReview from './ConnectReview'
 import ConnectTypes from './ConnectTypes'
 import DisconnectLocation from './DisconnectLocation'
+import DisconnectReview from './DisconnectReview'
 
 const connectRoutes = [
   /*
@@ -131,6 +132,16 @@ const connectRoutes = [
   <Route key="disconnect-location" path={['/map']}>
     {({ match }) => match && <DisconnectLocation />}
   </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,15 +46,14 @@ const SidePane = () => {
   const history = useAppHistory()
   const { t } = useTranslation()
   const { review } = useSelector((state) => state.review)
+  const { locationId, isBeingEdited: isEditingLocation } = useSelector(
+    (state) => state.location,
+  )
 
   const goToMap = (event) => {
     event.stopPropagation()
     history.push('/map')
   }
-  const goBack = (event) => {
-    event.stopPropagation()
-    history.goBack()
-  }
 
   return (
     <FullHeightPane>
@@ -110,7 +109,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>

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