Fixes settings item menu in footer missing active state

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