Fixes navigation logic

components/app.js

@@ -10,11 +10,12 @@ import { getNavigation, navigate, goBack } from '../slices/navigation'
 
 import Header from './header'
 import Menu from './menu'
-import { viewsList, isSymptomView, isSettingsView } from './pages'
+import { viewsList } from './views'
+import { isSymptomView, isSettingsView } from './pages'
 
 import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
-import { closeDb, getCycleDay } from '../db'
+import { getCycleDay } from '../db'
 
 class App extends Component {
 
@@ -35,7 +36,7 @@ class App extends Component {
 
     this.backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      this.handleBackButtonPress
+      props.goBack
     )
 
     setupNotifications(this.props.navigate)
@@ -45,21 +46,15 @@ class App extends Component {
     this.backHandler.remove()
   }
 
-  handleBackButtonPress = () => {
+  render() {
-    const { currentPage } = this.props.navigation
+    const { date, navigation, goBack } = this.props
+    const { currentPage } = navigation
 
-    if (currentPage === 'Home') {
+    if (!currentPage) {
-      closeDb()
       return false
     }
 
-    this.props.goBack()
-    return true
-  }
-
-  render() {
     const { cycleDay } = this.state
-    const { currentPage } = this.props.navigation
 
     const Page = viewsList[currentPage]
     const title = headerTitles[currentPage]
@@ -68,20 +63,26 @@ class App extends Component {
     const isSettingsSubView = isSettingsView(currentPage)
     const isCycleDayView = currentPage === 'CycleDay'
 
-    return (
+    const headerProps = {
-      <View style={{ flex: 1 }}>
+      title,
-        { !isSymptomEditView && !isCycleDayView &&
+      handleBack: isSettingsSubView ? goBack : null,
-          <Header
-            handleBack={isSettingsSubView ? this.handleBackButtonPress : null}
-            title={title}
-          />
     }
 
-        <Page
+    const pageProps = {
-          cycleDay={cycleDay}
+      cycleDay,
-          date={this.props.date}
+      date,
-          handleBackButtonPress={this.handleBackButtonPress}
+      handleBackButtonPress: goBack,
-        />
+    }
+
+    return (
+      <View style={{ flex: 1 }}>
+        {
+          !isSymptomEditView &&
+          !isCycleDayView &&
+          <Header { ...headerProps } />
+        }
+
+        <Page { ...pageProps } />
 
         { !isSymptomEditView && <Menu /> }
       </View>

components/pages.js

@@ -1,25 +1,13 @@
-import Home from './home'
-import Calendar from './calendar'
-import CycleDay from './cycle-day/cycle-day-overview'
 import symptomViews from './cycle-day/symptoms'
-import Chart from './chart/chart'
-import SettingsMenu from './settings/settings-menu'
 import settingsViews from './settings'
-import Stats from './stats'
 
 import settingsLabels from '../i18n/en/settings'
 const labels = settingsLabels.menuTitles
 
-export const viewsList = {
+const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
-  Home,
+  component: symptomView,
-  Calendar,
+  parent: 'CycleDay',
-  CycleDay,
+}))
-  Chart,
-  SettingsMenu,
-  ...settingsViews,
-  Stats,
-  ...symptomViews
-}
 
 export const isSymptomView =
   (page) => Object.keys(symptomViews).includes(page)
@@ -27,11 +15,6 @@ export const isSymptomView =
 export const isSettingsView =
   (page) => Object.keys(settingsViews).includes(page)
 
-const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
-  component: symptomView,
-  parent: 'CycleDay',
-}))
-
 export const pages = [
   {
     component: 'Home',

components/views.js

@@ -0,0 +1,19 @@
+import Home from './home'
+import Calendar from './calendar'
+import CycleDay from './cycle-day/cycle-day-overview'
+import symptomViews from './cycle-day/symptoms'
+import Chart from './chart/chart'
+import SettingsMenu from './settings/settings-menu'
+import settingsViews from './settings'
+import Stats from './stats'
+
+export const viewsList = {
+  Home,
+  Calendar,
+  CycleDay,
+  Chart,
+  SettingsMenu,
+  ...settingsViews,
+  Stats,
+  ...symptomViews
+}

slices/navigation.js

@@ -1,25 +1,39 @@
 import { createSlice } from 'redux-starter-kit'
+import { pages, isSymptomView } from '../components/pages'
+import { closeDb } from '../db'
+import { BackHandler } from 'react-native'
 
 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,
+        previousPage: state.currentPage,
       }
     },
-    goBack: (state) => {
+    goBack: ({ currentPage, previousPage }) => {
-      const { history } = state
+
-      const lastIndex = history.length - 1
+      if (currentPage === 'Home') {
+        closeDb()
+        BackHandler.exitApp()
+        return false
+      }
+
+      if (currentPage === 'CycleDay' || isSymptomView(currentPage)) {
+        if (previousPage) {
           return {
-        currentPage: history[lastIndex],
+            currentPage: previousPage
-        history: history.slice(0, lastIndex),
+          }
+        }
+      }
+
+      const page = pages.find(p => p.component === currentPage)
+      return {
+        currentPage: page.parent
       }
     }
   }