From 07ac56f921a2edc13d46ce64bb4d8723279888a9 Mon Sep 17 00:00:00 2001
From: Wojtek Bazant <wojciech.bazant+ebi@gmail.com>
Date: Sun, 27 Oct 2024 17:33:01 +0000
Subject: [PATCH] Go back from settings to location / edit location / review /
 map

---
 src/components/connect/DisconnectReview.js | 19 +++++++++++++++++
 src/components/connect/connectRoutes.js    | 11 ++++++++++
 src/components/desktop/SidePane.js         | 24 +++++++++++++++++-----
 src/redux/reviewSlice.js                   |  9 +++++++-
 4 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 src/components/connect/DisconnectReview.js

diff --git a/src/components/connect/DisconnectReview.js b/src/components/connect/DisconnectReview.js
new file mode 100644
index 000000000..b5bd24ada
--- /dev/null
+++ b/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
diff --git a/src/components/connect/connectRoutes.js b/src/components/connect/connectRoutes.js
index c5c5f837b..56a2bbc0b 100644
--- a/src/components/connect/connectRoutes.js
+++ b/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
diff --git a/src/components/desktop/SidePane.js b/src/components/desktop/SidePane.js
index 2582c0a94..ef5e24f1a 100644
--- a/src/components/desktop/SidePane.js
+++ b/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>
diff --git a/src/redux/reviewSlice.js b/src/redux/reviewSlice.js
index 99a43ba0d..6aaa5e018 100644
--- a/src/redux/reviewSlice.js
+++ b/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