Adds navigation tree to define the hierarchy

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>
   )