Add go back functionality

components/app.js

@@ -6,11 +6,11 @@ import { LocalDate } from 'js-joda'
 import { connect } from 'react-redux'
 
 import { getDate, setDate } from '../slices/date'
-import { getNavigation, navigate } from '../slices/navigation'
+import { getNavigation, navigate, goBack } from '../slices/navigation'
 
 import Header from './header'
 import Menu from './menu'
-import { viewsList, isSymptomView, isSettingsView, pages } from './pages'
+import { viewsList, isSymptomView, isSettingsView } from './pages'
 
 import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
@@ -53,9 +53,7 @@ class App extends Component {
       return false
     }
 
-    const page = pages.find(item => item.component ===  currentPage)
+    this.props.goBack()
-    this.props.navigate(page.parent)
-
     return true
   }
 
@@ -102,6 +100,7 @@ const mapDispatchToProps = (dispatch) => {
   return({
     setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
+    goBack: () => dispatch(goBack()),
   })
 }
 

components/pages.js

@@ -28,7 +28,8 @@ export const isSettingsView =
   (page) => Object.keys(settingsViews).includes(page)
 
 const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
-  component: symptomView, parent: 'CycleDay',
+  component: symptomView,
+  parent: 'CycleDay',
 }))
 
 export const pages = [

slices/navigation.js

@@ -4,12 +4,23 @@ const navigationSlice = createSlice({
   slice: 'navigation',
   initialState: {
     currentPage: 'Home',
+    history: [],
   },
   reducers: {
     navigate: (state, action) => {
+      const { history, currentPage } = state
       return {
+        history: history.concat(currentPage),
         currentPage: action.payload,
       }
+    },
+    goBack: (state) => {
+      const { history } = state
+      const lastIndex = history.length - 1
+      return {
+        currentPage: history[lastIndex],
+        history: history.slice(0, lastIndex),
+      }
     }
   }
 })
@@ -17,7 +28,7 @@ const navigationSlice = createSlice({
 // Extract the action creators object and the reducer
 const { actions, reducer, selectors } = navigationSlice
 // Extract and export each action creator by name
-export const { navigate } = actions
+export const { navigate, goBack } = actions
 
 export const { getNavigation } = selectors