From faf7dbac95c82edbb4fbb74e6cb91dfcd433c64e Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Thu, 17 Jan 2019 21:48:02 +0100 Subject: [PATCH 1/3] Fixes settings item menu in footer missing active state --- components/app.js | 46 +++++++++++---------- components/menu.js | 101 ++++++++++++++++++++++++++++++--------------- 2 files changed, 92 insertions(+), 55 deletions(-) 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 ( + navigate(component)} + /> + )} + )} + + ) +} + +export default Menu \ No newline at end of file From ff8765b9f81be8c2d78cf93820834f502c4b0b9b Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Thu, 17 Jan 2019 22:05:41 +0100 Subject: [PATCH 2/3] Makes also the subpages of Settings to activate the menu item in footer --- components/menu.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/components/menu.js b/components/menu.js index e91466e..26a752d 100644 --- a/components/menu.js +++ b/components/menu.js @@ -5,6 +5,8 @@ import { TouchableOpacity } from 'react-native' +import settingsViews from './settings' + import { menuTitles } from '../i18n/en/labels' import styles, { iconStyles, secondaryColor } from '../styles' @@ -19,7 +21,7 @@ const menuItems = [ { labelKey: 'Home', icon: 'home', - component: 'Home' + component: 'Home', }, { labelKey: 'Calendar', @@ -29,7 +31,7 @@ const menuItems = [ { labelKey: 'Chart', icon: 'chart-line', - component: 'Chart' + component: 'Chart', }, { labelKey: 'Stats', @@ -40,6 +42,7 @@ const menuItems = [ labelKey: 'Settings', icon: 'settings', component: 'SettingsMenu', + children: Object.keys(settingsViews), } ] @@ -61,13 +64,15 @@ const MenuItem = ({ icon, labelKey, active, onPress }) => { const Menu = ({ currentPage, navigate }) => { return ( - { menuItems.map(({ icon, labelKey, component }) => { + { menuItems.map(({ icon, labelKey, component, children }) => { + const isActive = (component === currentPage) || + (children && children.indexOf(currentPage) !== -1) return ( navigate(component)} /> )} From 31268186f17c0200829482bad401ce77c445541f Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Thu, 17 Jan 2019 23:12:50 +0100 Subject: [PATCH 3/3] Refactors app.js for readability --- components/app.js | 97 ++++++++++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 44 deletions(-) diff --git a/components/app.js b/components/app.js index 26405af..fc8f7e3 100644 --- a/components/app.js +++ b/components/app.js @@ -21,15 +21,16 @@ const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => { return acc }, {}) -const isSymptomView = name => Object.keys(symptomViews).includes(name) -const isSettingsView = name => Object.keys(settingsViews).includes(name) -const isMenuItem = name => Object.keys(menuTitles).includes(name) +const HOME_PAGE = 'Home' +const INFO_SYMPTOM_PAGE = 'InfoSymptom' +const CYCLE_DAY_PAGE = 'CycleDay' +const SETTINGS_MENU_PAGE = 'SettingsMenu' export default class App extends Component { constructor(props) { super(props) this.state = { - currentPage: 'Home' + currentPage: HOME_PAGE } this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress) setupNotifications(this.navigate) @@ -40,46 +41,62 @@ export default class App extends Component { } navigate = (pageName, props) => { + const { currentPage } = this.state // for the back button to work properly, we want to // remember two origins: which menu item we came from // and from where we navigated to the symptom view (day // view or home page) - if (isMenuItem(this.state.currentPage)) { - this.menuOrigin = this.state.currentPage + if (this.isMenuItem()) { + this.menuOrigin = currentPage } - if (!isSymptomView(this.state.currentPage) && - this.state.currentPage !== 'InfoSymptom') { - this.originForSymptomView = this.state.currentPage + if (!this.isSymptomView() && !this.isInfoSymptomView()) { + this.originForSymptomView = currentPage } - this.setState({currentPage: pageName, currentProps: props}) + this.setState({ currentPage: pageName, currentProps: props }) } handleBackButtonPress = () => { - if (this.state.currentPage === 'Home') return false - if (isSymptomView(this.state.currentPage)) { + const { currentPage, currentProps } = this.state + if (currentPage === HOME_PAGE) return false + if (this.isSymptomView()) { this.navigate( - this.originForSymptomView, { date: this.state.currentProps.date } + this.originForSymptomView, { date: currentProps.date } ) - } else if (isSettingsView(this.state.currentPage)) { - this.navigate('SettingsMenu') - } else if (this.state.currentPage === 'CycleDay') { + } else if (this.isSettingsView()) { + this.navigate(SETTINGS_MENU_PAGE) + } else if (currentPage === CYCLE_DAY_PAGE) { this.navigate(this.menuOrigin) - } else if (this.state.currentPage === 'InfoSymptom') { + } else if (this.isInfoSymptomView()) { + const { date, cycleDay, symptomView } = currentProps this.navigate( - this.state.currentProps.symptomView, { - date: this.state.currentProps.date, - cycleDay: this.state.currentProps.cycleDay - }) + symptomView, { date, cycleDay }) } else { - this.navigate('Home') + this.navigate(HOME_PAGE) } return true } + isMenuItem() { + return Object.keys(menuTitles).includes(this.state.currentPage) + } + + isSymptomView() { + return Object.keys(symptomViews).includes(this.state.currentPage) + } + + isInfoSymptomView() { + return this.state.currentPage === INFO_SYMPTOM_PAGE + } + + isSettingsView() { + return Object.keys(settingsViews).includes(this.state.currentPage) + } + isDefaultView() { - return this.state.currentPage !== 'CycleDay' && - !isSymptomView(this.state.currentPage) && - this.state.currentPage !== 'InfoSymptom' + const { currentPage } = this.state + return currentPage !== CYCLE_DAY_PAGE && + !this.isSymptomView() && + !this.isInfoSymptomView() } render() { @@ -96,43 +113,35 @@ export default class App extends Component { ...symptomViews } const page = pages[currentPage] + const title = headerTitlesLowerCase[currentPage] + const isSymptomView = this.isSymptomView() return ( {this.isDefaultView() && -
+
} - {currentPage === 'InfoSymptom' && -
+ {this.isInfoSymptomView() && +
} - {isSymptomView(currentPage) && + {isSymptomView &&
this.navigate('InfoSymptom', { - date: currentProps.date, + goToSymptomInfo={() => this.navigate(INFO_SYMPTOM_PAGE, { symptomView: currentPage, - cycleDay: currentProps.cycleDay + ...currentProps })} />} - {React.createElement(page, { navigate: this.navigate, ...currentProps })} - {!isSymptomView(currentPage) && - + {!isSymptomView && + } )