Adds navigation tree to define the hierarchy

components/app.js

@@ -10,7 +10,7 @@ import { getNavigation, navigate } from '../slices/navigation'
 
 import Header from './header'
 import Menu from './menu'
-import { pagesList, isSymptomView, isSettingsView } from './pages'
+import { viewsList, isSymptomView, isSettingsView, pages } from './pages'
 
 import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
@@ -46,20 +46,24 @@ class App extends Component {
   }
 
   handleBackButtonPress = () => {
-    const { current, prev } = this.props.navigation
-    if (current === 'Home') {
+    const { currentPage } = this.props.navigation
+
+    if (currentPage === 'Home') {
       closeDb()
       return false
     }
-    this.props.navigate(prev)
+
+    const page = pages.find(item => item.component ===  currentPage)
+    this.props.navigate(page.parent)
+
     return true
   }
 
   render() {
     const { cycleDay } = this.state
-    const currentPage = this.props.navigation.current
+    const { currentPage } = this.props.navigation
 
-    const Page = pagesList[currentPage]
+    const Page = viewsList[currentPage]
     const title = headerTitles[currentPage]
 
     const isSymptomEditView = isSymptomView(currentPage)

components/menu/index.js

@@ -7,20 +7,21 @@ import MenuItem from './menu-item'
 import { connect } from 'react-redux'
 import { getNavigation, navigate } from '../../slices/navigation'
 
-import { menuItems } from './menu-config'
+import { pages } from '../pages'
 
 import styles from '../../styles'
 
-const Menu = ({ navigation, navigate }) => {
+const Menu = ({ navigate, navigation }) => {
+  const menuItems = pages.filter(page => page.isInMenu)
   return (
     <View style={styles.menu}>
-      { menuItems.map(({ icon, labelKey, component, children }) => {
-        const isActive = (component === navigation.current) ||
-          (children && children.indexOf(navigation.current) !== -1)
+      { menuItems.map(({ icon, label, component, children }) => {
+        const isActive = (component === navigation.currentPage) ||
+          (children && children.indexOf(navigation.currentPage) !== -1)
         return (
           <MenuItem
-            key={labelKey}
-            labelKey={labelKey}
+            key={label}
+            label={label}
             icon={icon}
             active={isActive}
             onPress={() => navigate(component)}

components/menu/menu-config.js

@@ -1,30 +0,0 @@
-import settingsViews from '../settings'
-
-export const menuItems = [
-  {
-    labelKey: 'Home',
-    icon: 'home',
-    component: 'Home',
-  },
-  {
-    labelKey: 'Calendar',
-    icon: 'calendar-range',
-    component: 'Calendar',
-  },
-  {
-    labelKey: 'Chart',
-    icon: 'chart-line',
-    component: 'Chart',
-  },
-  {
-    labelKey: 'Stats',
-    icon: 'chart-pie',
-    component: 'Stats',
-  },
-  {
-    labelKey: 'Settings',
-    icon: 'settings',
-    component: 'SettingsMenu',
-    children: Object.keys(settingsViews),
-  }
-]

components/menu/menu-item.js

@@ -11,7 +11,7 @@ const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
   return acc
 }, {})
 
-const MenuItem = ({ icon, labelKey, active, onPress }) => {
+const MenuItem = ({ icon, label, active, onPress }) => {
   const styleActive = active ? { color: secondaryColor } : null
   return (
     <TouchableOpacity
@@ -20,10 +20,10 @@ const MenuItem = ({ icon, labelKey, active, onPress }) => {
     >
       <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
       <Text
-        testID={active ? 'activeMenuItem' : `menuItem${labelKey}`}
+        testID={active ? 'activeMenuItem' : `menuItem${label}`}
         style={[styles.menuText, styleActive]}
       >
-        {menuTitlesLowerCase[labelKey]}
+        {menuTitlesLowerCase[label]}
       </Text>
     </TouchableOpacity>
   )

components/pages.js

@@ -7,7 +7,10 @@ import SettingsMenu from './settings/settings-menu'
 import settingsViews from './settings'
 import Stats from './stats'
 
-export const pagesList = {
+import settingsLabels from '../i18n/en/settings'
+const labels = settingsLabels.menuTitles
+
+export const viewsList = {
   Home,
   Calendar,
   CycleDay,
@@ -22,4 +25,81 @@ export const isSymptomView =
   (page) => Object.keys(symptomViews).includes(page)
 
 export const isSettingsView =
-  (page) => Object.keys(settingsViews).includes(page)
+  (page) => Object.keys(settingsViews).includes(page)
+
+const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
+  component: symptomView, parent: 'CycleDay',
+}))
+
+export const pages = [
+  {
+    component: 'Home',
+    icon: 'home',
+    isInMenu: true,
+    label: 'Home',
+  },
+  {
+    component: 'Calendar',
+    icon: 'calendar-range',
+    isInMenu: true,
+    label: 'Calendar',
+    parent: 'Home',
+  },
+  {
+    component: 'Chart',
+    icon: 'chart-line',
+    isInMenu: true,
+    label: 'Chart',
+    parent: 'Home',
+  },
+  {
+    component: 'Stats',
+    icon: 'chart-pie',
+    isInMenu: true,
+    label: 'Stats',
+    parent: 'Home',
+  },
+  {
+    children: Object.keys(settingsViews),
+    component: 'SettingsMenu',
+    icon: 'settings',
+    isInMenu: true,
+    label: 'Settings',
+    parent: 'Home',
+  },
+  {
+    component: 'Reminders',
+    label: labels.reminders,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'NfpSettings',
+    label: labels.nfpSettings,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'DataManagement',
+    label: labels.dataManagement,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'Password',
+    label: labels.password,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'About',
+    label: labels.about,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'License',
+    label: labels.license,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'CycleDay',
+    parent: 'Home',
+  },
+  ...symptomsPages
+]

slices/navigation.js

@@ -3,14 +3,12 @@ import { createSlice } from 'redux-starter-kit'
 const navigationSlice = createSlice({
   slice: 'navigation',
   initialState: {
-    current: 'Home',
-    prev: null,
+    currentPage: 'Home',
   },
   reducers: {
     navigate: (state, action) => {
       return {
-        current: action.payload,
-        prev: state.current
+        currentPage: action.payload,
       }
     }
   }