Allow 'back to settings' from location

src/components/connect/ConnectSettingsLocation.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { setFromSettings } from '../../redux/locationSlice'
+import { useIsDesktop } from '../../utils/useBreakpoint'
+
+const ConnectSettingsLocation = ({ isSettings }) => {
+  const dispatch = useDispatch()
+  const isDesktop = useIsDesktop()
+
+  useEffect(() => {
+    if (isDesktop) {
+      if (isSettings) {
+        dispatch(setFromSettings(true))
+      }
+      return () => {
+        if (!window.location.pathname.startsWith('/locations')) {
+          dispatch(setFromSettings(false))
+        }
+      }
+    }
+  }, [dispatch, isDesktop, isSettings])
+
+  return null
+}
+
+export default ConnectSettingsLocation

src/components/connect/connectRoutes.js

@@ -6,6 +6,7 @@ import ConnectMap from './ConnectMap'
 import ConnectNewLocation from './ConnectNewLocation'
 import ConnectPath from './ConnectPath'
 import ConnectReview from './ConnectReview'
+import ConnectSettingsLocation from './ConnectSettingsLocation'
 import ConnectTypes from './ConnectTypes'
 import DisconnectLocation from './DisconnectLocation'
 import DisconnectReview from './DisconnectReview'
@@ -142,6 +143,24 @@ const connectRoutes = [
   <Route key="disconnect-review" path={['/map', '/locations']}>
     {({ match }) => match && <DisconnectReview />}
   </Route>,
+  /*
+   * ConnectSettingsLocation
+   * why: we can access location page from either map or settings on desktop and want the back button to work
+   *
+   * action: if on settings page set a flag in Redux. If away from map or settings, remove the flag
+   */
+  <Route
+    key="connect-settings-location"
+    path={['/settings', '/locations/:locationId']}
+  >
+    {({ match }) =>
+      match && (
+        <ConnectSettingsLocation
+          isSettings={match && !match.params.locationId}
+        />
+      )
+    }
+  </Route>,
 ]
 
 export default connectRoutes

src/components/desktop/SidePane.js

@@ -46,15 +46,22 @@ const SidePane = () => {
   const history = useAppHistory()
   const { t } = useTranslation()
   const { review } = useSelector((state) => state.review)
-  const { locationId, isBeingEdited: isEditingLocation } = useSelector(
-    (state) => state.location,
-  )
+  const {
+    locationId,
+    isBeingEdited: isEditingLocation,
+    fromSettings,
+  } = useSelector((state) => state.location)
 
   const goToMap = (event) => {
     event.stopPropagation()
     history.push('/map')
   }
 
+  const goToSettings = (event) => {
+    event.stopPropagation()
+    history.push('/settings')
+  }
+
   return (
     <FullHeightPane>
       <Switch>
@@ -137,7 +144,9 @@ const SidePane = () => {
                 match && (
                   <>
                     <StyledNavBack>
-                      <BackButton onClick={goToMap}>
+                      <BackButton
+                        onClick={fromSettings ? goToSettings : goToMap}
+                      >
                         <ArrowBack />
                         {t('back')}
                       </BackButton>

src/redux/locationSlice.js

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