diff --git a/components/app.js b/components/app.js
index 73403d6..26405af 100644
--- a/components/app.js
+++ b/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 = {
- Home, Calendar, CycleDay, Chart, InfoSymptom,
- SettingsMenu, ...settingsViews, Stats, ...symptomViews
- }[this.state.currentPage]
+ const { currentPage, currentProps } = this.state
+ const pages = {
+ Home,
+ Calendar,
+ CycleDay,
+ Chart,
+ InfoSymptom,
+ SettingsMenu,
+ ...settingsViews,
+ Stats,
+ ...symptomViews
+ }
+ const page = pages[currentPage]
return (
{this.isDefaultView() &&
}
- {this.state.currentPage === 'InfoSymptom' &&
+ {currentPage === 'InfoSymptom' &&
}
- {isSymptomView(this.state.currentPage) &&
+ {isSymptomView(currentPage) &&
this.navigate('InfoSymptom', {
- date: this.state.currentProps.date,
- symptomView: this.state.currentPage,
- cycleDay: this.state.currentProps.cycleDay
+ date: currentProps.date,
+ symptomView: currentPage,
+ cycleDay: currentProps.cycleDay
})}
/>}
{React.createElement(page, {
navigate: this.navigate,
- ...this.state.currentProps
+ ...currentProps
})}
- {!isSymptomView(this.state.currentPage) &&
+ {!isSymptomView(currentPage) &&
}
diff --git a/components/menu.js b/components/menu.js
index 7a692e0..e91466e 100644
--- a/components/menu.js
+++ b/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 (
-
-
-
- {title}
-
-
- )
- }
+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 (
-
- {[
- { 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)}
-
- )
- }
+const MenuItem = ({ icon, labelKey, active, onPress }) => {
+ const styleActive = active ? { color: secondaryColor } : null
+ return (
+
+
+
+ {menuTitlesLowerCase[labelKey]}
+
+
+ )
}
+
+const Menu = ({ currentPage, navigate }) => {
+ return (
+
+ { menuItems.map(({ icon, labelKey, component }) => {
+ return (
+
+ )
+}
+
+export default Menu
\ No newline at end of file