Refactors app.js for readability

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 HOME_PAGE = 'Home'
-const isSettingsView = name => Object.keys(settingsViews).includes(name)
+const INFO_SYMPTOM_PAGE = 'InfoSymptom'
-const isMenuItem = name => Object.keys(menuTitles).includes(name)
+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)) {
+    if (this.isMenuItem()) {
-      this.menuOrigin = this.state.currentPage
+      this.menuOrigin = currentPage
     }
-    if (!isSymptomView(this.state.currentPage) &&
+    if (!this.isSymptomView() && !this.isInfoSymptomView()) {
-      this.state.currentPage !== 'InfoSymptom') {
+      this.originForSymptomView = currentPage
-      this.originForSymptomView = this.state.currentPage
     }
-    this.setState({currentPage: pageName, currentProps: props})
+    this.setState({ currentPage: pageName, currentProps: props })
   }
 
   handleBackButtonPress = () => {
-    if (this.state.currentPage === 'Home') return false
+    const { currentPage, currentProps } = this.state
-    if (isSymptomView(this.state.currentPage)) {
+    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)) {
+    } else if (this.isSettingsView()) {
-      this.navigate('SettingsMenu')
+      this.navigate(SETTINGS_MENU_PAGE)
-    } else if (this.state.currentPage === 'CycleDay') {
+    } 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, {
+        symptomView, { date, cycleDay })
-          date: this.state.currentProps.date,
-          cycleDay: this.state.currentProps.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' &&
+    const { currentPage } = this.state
-      !isSymptomView(this.state.currentPage) &&
+    return currentPage !== CYCLE_DAY_PAGE &&
-      this.state.currentPage !== 'InfoSymptom'
+      !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
+          <Header title={title} />
-            title={headerTitlesLowerCase[currentPage]}
-          />
         }
-        {currentPage === 'InfoSymptom' &&
+        {this.isInfoSymptomView() &&
-          <Header
+          <Header title={title} goBack={this.handleBackButtonPress} />
-            title={headerTitlesLowerCase[currentPage]}
-            goBack={this.handleBackButtonPress}
-          />
         }
-        {isSymptomView(currentPage) &&
+        {isSymptomView &&
           <Header
-            title={headerTitlesLowerCase[currentPage]}
+            title={title}
             isSymptomView={true}
             goBack={this.handleBackButtonPress}
             date={currentProps.date}
-            goToSymptomInfo={() => this.navigate('InfoSymptom', {
+            goToSymptomInfo={() => this.navigate(INFO_SYMPTOM_PAGE, {
-              date: currentProps.date,
               symptomView: currentPage,
-              cycleDay: currentProps.cycleDay
+              ...currentProps
             })}
           />}
 
-
         {React.createElement(page, {
           navigate: this.navigate,
           ...currentProps
         })}
 
-        {!isSymptomView(currentPage) &&
+        {!isSymptomView &&
-          <Menu
+          <Menu navigate={this.navigate} currentPage={currentPage} />
-            navigate={this.navigate}
-            currentPage={currentPage}
-          />
         }
       </View>
     )