Fixes settings item menu in footer missing active state

components/app.js

@@ -20,10 +20,6 @@ const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
   acc[curr] = headerTitles[curr].toLowerCase()
   return acc
 }, {})
-const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
-  acc[curr] = menuTitles[curr].toLowerCase()
-  return acc
-}, {})
 
 const isSymptomView = name => Object.keys(symptomViews).includes(name)
 const isSettingsView = name => Object.keys(settingsViews).includes(name)
@@ -87,47 +83,55 @@ export default class App extends Component {
   }
 
   render() {
-    const page = {
+    const { currentPage, currentProps } = this.state
-      Home, Calendar, CycleDay, Chart, InfoSymptom,
+    const pages = {
-      SettingsMenu, ...settingsViews, Stats, ...symptomViews
+      Home,
-    }[this.state.currentPage]
+      Calendar,
+      CycleDay,
+      Chart,
+      InfoSymptom,
+      SettingsMenu,
+      ...settingsViews,
+      Stats,
+      ...symptomViews
+    }
+    const page = pages[currentPage]
     return (
       <View style={{flex: 1}}>
         {this.isDefaultView() &&
           <Header
-            title={headerTitlesLowerCase[this.state.currentPage]}
+            title={headerTitlesLowerCase[currentPage]}
           />
         }
-        {this.state.currentPage === 'InfoSymptom' &&
+        {currentPage === 'InfoSymptom' &&
           <Header
-            title={headerTitlesLowerCase[this.state.currentPage]}
+            title={headerTitlesLowerCase[currentPage]}
             goBack={this.handleBackButtonPress}
           />
         }
-        {isSymptomView(this.state.currentPage) &&
+        {isSymptomView(currentPage) &&
           <Header
-            title={headerTitlesLowerCase[this.state.currentPage]}
+            title={headerTitlesLowerCase[currentPage]}
             isSymptomView={true}
             goBack={this.handleBackButtonPress}
-            date={this.state.currentProps.date}
+            date={currentProps.date}
             goToSymptomInfo={() => this.navigate('InfoSymptom', {
-              date: this.state.currentProps.date,
+              date: currentProps.date,
-              symptomView: this.state.currentPage,
+              symptomView: currentPage,
-              cycleDay: this.state.currentProps.cycleDay
+              cycleDay: currentProps.cycleDay
             })}
           />}
 
 
         {React.createElement(page, {
           navigate: this.navigate,
-          ...this.state.currentProps
+          ...currentProps
         })}
 
-        {!isSymptomView(this.state.currentPage) &&
+        {!isSymptomView(currentPage) &&
           <Menu
             navigate={this.navigate}
-            titles={menuTitlesLowerCase}
+            currentPage={currentPage}
-            currentPage={this.state.currentPage}
           />
         }
       </View>

components/menu.js

@@ -1,46 +1,79 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   Text,
   TouchableOpacity
 } from 'react-native'
+
+import { menuTitles } from '../i18n/en/labels'
+
 import styles, { iconStyles, secondaryColor } from '../styles'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
-export default class Menu extends Component {
+const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
-  makeMenuItem = ({ title, icon, onPress}, i) => {
+  acc[curr] = menuTitles[curr].toLowerCase()
-    const styleActive = (this.props.currentPage.toLowerCase() === title) ?
+  return acc
-      {color: secondaryColor} : {}
+}, {})
+
+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',
+  }
+]
+
+const MenuItem = ({ icon, labelKey, active, onPress }) => {
+  const styleActive = active ? { color: secondaryColor } : null
   return (
     <TouchableOpacity
-        onPress={onPress}
       style={styles.menuItem}
-        key={i.toString()}
+      onPress={onPress}
     >
       <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
       <Text style={[styles.menuText, styleActive]}>
-          {title}
+        {menuTitlesLowerCase[labelKey]}
       </Text>
     </TouchableOpacity>
   )
-  }
+}
 
-  goTo(componentName) {
+const Menu = ({ currentPage, navigate }) => {
-    this.props.navigate(componentName)
-  }
-
-  render() {
-    const t = this.props.titles
   return (
     <View style={styles.menu}>
-        {[
+      { menuItems.map(({ icon, labelKey, component }) => {
-          { title: t.Home, icon: 'home', onPress: () => this.goTo('Home') },
+        return (
-          { title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
+          <MenuItem
-          { title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
+            key={labelKey}
-          { title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
+            labelKey={labelKey}
-          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('SettingsMenu') },
+            icon={icon}
-        ].map(this.makeMenuItem)}
+            active={component === currentPage}
+            onPress={() => navigate(component)}
+          />
+        )}
+      )}
     </View >
   )
-  }
 }
+
+export default Menu