diff --git a/components/app.js b/components/app.js index 26405af58ac656078f98498ee727ca848a9d4c83..fc8f7e39ec1696a4aa47d318ab51df50406624af 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 ( <View style={{flex: 1}}> {this.isDefaultView() && - <Header - title={headerTitlesLowerCase[currentPage]} - /> + <Header title={title} /> } - {currentPage === 'InfoSymptom' && - <Header - title={headerTitlesLowerCase[currentPage]} - goBack={this.handleBackButtonPress} - /> + {this.isInfoSymptomView() && + <Header title={title} goBack={this.handleBackButtonPress} /> } - {isSymptomView(currentPage) && + {isSymptomView && <Header - title={headerTitlesLowerCase[currentPage]} + title={title} isSymptomView={true} goBack={this.handleBackButtonPress} date={currentProps.date} - goToSymptomInfo={() => 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) && - <Menu - navigate={this.navigate} - currentPage={currentPage} - /> + {!isSymptomView && + <Menu navigate={this.navigate} currentPage={currentPage} /> } </View> )