Merge branch 'Adds-drips' into 'master'

Adds Mariya & Sofiya as contributors <3

See merge request bloodyhealth/drip!300

.eslintrc

@@ -19,25 +19,21 @@
   "plugins": [
     "react"
   ],
+  "settings": {
+    "react": {
+      "version": require('./package.json').dependencies.react,
+    },
+  },
   "rules": {
-    "quotemark": false,
-    "ordered-imports": false,
-    "no-var-requires": false,
     "indent": [
       "error",
       2
     ],
-    "no-console": 0,
-    "eofline": false,
-    "no-unused-variable": true,
-    "no-unused-expression": true,
-    "only-arrow-functions": false,
-    "space-before-function-paren": 0,
-    "trailing-comma": [
-      true,
-      "never"
+    "no-console": [
+      "error",
+      { allow: ["warn", "error"] }
     ],
-    "object-literal-sort-keys": false,
+    "space-before-function-paren": 0,
     "semi": [
       "warn",
       "never"
@@ -48,7 +44,7 @@
     "no-var": "error",
     "prefer-const": "error",
     "no-trailing-spaces": "error",
-    "react/prop-types": 0,
+    "react/prop-types": 2,
     "max-len": [
       1,
       {
@@ -56,6 +52,7 @@
         "ignoreComments": true,
         "ignoreTemplateLiterals": true
       }
-    ]
+    ],
+    "no-multi-spaces": 2,
   }
 }

.gitignore

@@ -21,6 +21,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
+ios/Index/DataStore
 
 # Android/IntelliJ
 #
@@ -62,6 +63,9 @@ android/app/src/main/assets/index.android.bundle
 android/.project
 android/app/.project
 
+ios/Podfile.lock
+android/app/src/main/res/drawable-*
+
 # nodejs-mobile creates these with every npm install
 nodejs-assets/nodejs-project/sample-*
 nodejs-assets/build-native-modules-MacOS-helper-script-node.sh

CHANGELOG.md

@@ -2,21 +2,55 @@
 
 All notable changes to this project will be documented in this file.
 
+## v0.20-05-2.beta
+
+### Adds
+* Feature allowing app chart not to show temperature part, when temperature is not tracked and corresponding refactoring
+* Detox support for e2e testing and addition of the e2e tests 
+* Introduction of Redux global state (date and navigation are stored locally now)
+* Introduction of clear.sh script to the project automising clearing project caches and packages reinstallation
+
+### Changes
+* Update of chart shades for bleeding
+* Eslint rule cleanup and addition of new rules (checks for PropTypes definition for React components, multi spaces)
+* sympto library upgrade to version 2.2.0
+* Preparation for support of drip on iOS devices
+* Updates representation of the incomplete mucus and cervix values on chart
+* React Native update to 0.59.10
+* Refactoring of header, cycle day overview, temperature edit view pages
+* Setting minimum SDK version to 23 to allow using drip on earlier versions of Android
+
+### Fixes
+* Fixes adding notes to the future dates
+* Fixes app exiting with error when hitting back button on device
+* Fixes Sex symptom showing on y axis of chart even though the contraception method was deleted 
+* Fix of the clear.sh file name in package.json
+* Fix of navigation from chart to the cycle day overview
+* Bug fix for maximum value of mucus not showing on chart
+* Fixes delete button bug on symptom edit page
+* Fix of home screen centering
+
+### Security
+* Update of node.js to fix security issue
+
 ## v0.1905.29-beta
 
-- Auto save functionality for all symptoms
-- Add donation section to about
-- Styling fixes
-- Clearer labels on cycle day overview
-- Rename mucus to cervical mucus
-- Set show more on homescreen to default and get rid of more/less switch
-- Add loading screen to data import
-- Fix line width in chart
-- Removes logo and adds header on the main login screen
-- Nicer formatting for past bleeding prediction
-- Fixes prediction range in drop on homescreen
-- Removes permissions not required for debug or production
-- Temperature screen styling update
+### Changes
+* Auto save functionality for all symptoms
+* Add donation section to about
+* Clearer labels on cycle day overview
+* Rename mucus to cervical mucus
+* Set show more on homescreen to default and get rid of more/less switch
+* Add loading screen to data import
+* Removes logo and adds header on the main login screen
+* Nicer formatting for past bleeding prediction
+* Removes permissions not required for debug or production
+* Temperature screen styling update
+
+### Fixed
+* Styling
+* Line width in chart
+* Prediction range in drop on homescreen
 
 ## v0.0.3 - 2019-04-17
 

CONTRIBUTING.md

@@ -14,12 +14,12 @@ So good to see you here, hello :wave\_tone1: :wave\_tone2: :wave\_tone3: :wave\_
 
 ## TL;DR
 
-You just want to say hello? Send us a [nice email](mailto:bl00dyhealth@mailbox.org?Subject=Nice%20incoming%20mail) :postbox: or tweet :bird: at us [@bl00dyhealth](https://twitter.com/bl00dyhealth).
+You just want to say hello? Send us a [nice email](mailto:drip@mailbox.org?Subject=Nice%20incoming%20mail) :postbox: or tweet :bird: at us [@bl00dyhealth](https://twitter.com/bl00dyhealth).
 
 ## What should I know before I get started?
 
 We have prepared something for **you**: check out our [README](https://gitlab.com/bloodyhealth/drip/blob/master/README.md) for more information on how to set up and install everything you'll need.
-[Ping us](mailto:bl00dyhealth@mailbox.org) if you could need some help :helmet\_with\_cross: !
+[Ping us](mailto:drip@mailbox.org) if you could need some help :helmet\_with\_cross: !
 
 Let us know if you want to suggest improvements for the README and open a merge request (which is just like Github's pull request)
 

README.md

@@ -3,35 +3,54 @@
 A menstrual cycle tracking app that's open-source and leaves your data on your phone. Use it to track your menstrual cycle and/or for fertility awareness!
 Find more information on [our website](https://bloodyhealth.gitlab.io/).
 
+[<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
+     alt="Get it on F-Droid"
+     height="80">](https://f-droid.org/packages/com.drip/)
+[<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png"
+     alt="Get it on Google Play"
+     height="80">](https://play.google.com/store/apps/details?id=com.drip)
+
 The app is built in React Native and currently developed for Android.
 
 Here --> you will find our [contributing guide](https://gitlab.com/bloodyhealth/drip/blob/master/CONTRIBUTING.md).
 
 ## Development setup
 
-1.  Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
+#### 1. Android Studio
+    
+Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
+
+#### 2. Node version
+
+Make sure you are running Node 10 (newer versions won’t work). It's easiest to switch Node versions using `nvm`, here’s how to do it:
 
-1.  Make sure you are running Node 10 (newer versions won’t work). It's easiest to switch Node versions using `nvm`, here’s how to do it:
 
-    ```
     $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
     $ nvm install v10
-    ```
 
-1.  Clone this repository:
 
-    ```
+#### 3. Get this repository
+
+Clone it with SSH
+    
     $ git clone git@gitlab.com:bloodyhealth/drip.git
+
+or clone it with HTTPS
+    
+    $ git clone https://gitlab.com/bloodyhealth/drip.git
+    
+and run
+    
     $ cd drip
-    ```
-    and run
-    ```
     $ npm install
-    ```
 
-1.  Open Android Studio and click on "Open an existing Android Studio project". Navigate to the drip repository you cloned and double click the android folder. It detects, downloads and cofigures requirements that might be missing, like the NDK and CMake to build the native code part of the project. Also see the [nodejs-mobile repository](https://github.com/janeasystems/nodejs-mobile) for the necessary prerequisites for your system.
+#### 4. More requirements from Android Studio
 
-1.  Either start a [virtual device in Android Studio](https://developer.android.com/studio/run/emulator) or [set your physical device like your Android phone up](https://developer.android.com/training/basics/firstapp/running-app) to run the app.
+Open Android Studio and click on "Open an existing Android Studio project". Navigate to the drip repository you cloned and double click the android folder. It detects, downloads and cofigures requirements that might be missing, like the NDK and CMake to build the native code part of the project. Also see the [nodejs-mobile repository](https://github.com/janeasystems/nodejs-mobile) for the necessary prerequisites for your system.
+
+#### 5. Run the app
+
+Either start a [virtual device in Android Studio](https://developer.android.com/studio/run/emulator) or [set your physical device like your Android phone up](https://developer.android.com/training/basics/firstapp/running-app) to run the app.
 
 1.  Open a terminal and run
     ```
@@ -57,9 +76,9 @@ Make sure that you have Java 1.8 by running `java -version`.
 
 If you don't have Java installed, or your Java version is different, the app may not work. You can try just using Android Studio's Java by prepending it to your `$PATH` in your shell profile:
 
-```
-$ export PATH="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin:${PATH}"
-```
+    ```
+    $ export PATH="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin:${PATH}"
+    ```
 
 Now, `which java` should output `/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java`, and the correct Java version should be used.
 
@@ -76,10 +95,40 @@ If you get error messages about `adb` not being found on your path:
     ```
 
 ## Tests
+
+### Unit tests
 You can run the tests with:
-```
-$ npm test
-```
+    ```
+    $ npm test
+    ```
+
+### End to end tests
+1. Check what testing device is specified in [package.json](https://gitlab.com/bloodyhealth/drip/blob/master/package.json) under:
+    ```
+    {"detox":
+     {"configurations":
+      {"name": "NEXUS_DEVICE_OR_WHATEVER_SPECIFIED_DEVICE"}
+      }
+     }
+    }
+    ```
+2. Check if the current device is already installed on your machine. Go to `cd ~/Android/sdk/emulator/` or wherever you have Android installed on your machine. Here you can run `./emulator -list-avds` and compare the devices with the one you found in step 1.
+3. Open Android Studio and go to -> Tools -> AVD manager -> `+Create virtual device` and select the device checked in the previous step
+4. Use the emulator on your machine to run it without heavy Android Studio, e.g. in `~/Android/Sdk/emulator` OR chose to run the emulator within Android Studio
+4.1 Here run: `$ ./emulator -avd NEXUS_DEVICE_OR_WHATEVER_SPECIFIED_DEVICE`
+4.2 You might need to specify the following environment variables in your zsh or bash file according to where you have it installed. You can find exact path in Android Studio (Android Studio Preferences → Appearance and Behavior → System Settings → Android SDK). After adding environment variables, you might need to restart your terminal or source the modified bash profile (i.e. "source ~/.bash_profile"). 
+    ```
+    export ANDROID_HOME="/home/myname/Android/Sdk"
+    export ANDROID_SDK_ROOT="/home/myname/Android/Sdk"
+    export ANDROID_AVD_HOME="/home/myname/.android/avd"
+    ```
+5. For the first time you need to get the app on the phone or if you run into this error:
+    `'app-debug-androidTest.apk' could not be found`
+--> open a new 2nd tab and run (in your drip folder): `cd android and ./gradlew assembleAndroidTest`
+Otherwise just open a new 2nd tab to run (in your drip folder) `npm run android`
+6. Open a new 3rd tab to run `./node_modules/.bin/detox test -c android.emu.debug`
+
+Hopefully you see the magic happening clicking through the app and happy test results on your console :sun_with_face: !
 
 ## Debugging
 In order to see logging output from the app, run `npm run log` in a separate terminal. You can output specific code you want to see, with:

android/app/build.gradle

@@ -98,6 +98,11 @@ android {
     compileSdkVersion rootProject.ext.compileSdkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
 
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
     defaultConfig {
         applicationId "com.drip"
         minSdkVersion rootProject.ext.minSdkVersion
@@ -105,8 +110,10 @@ android {
         versionCode 3
         versionName "0.1905.29-beta"
         ndk {
-            abiFilters "armeabi-v7a"
+            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }
+        testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
     signingConfigs {
         release {
@@ -123,7 +130,7 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "arm64-v8a"
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }
     }
     buildTypes {
@@ -138,7 +145,7 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "arm64-v8a":2]
+            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a":3, "x86_64":4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
@@ -157,9 +164,11 @@ dependencies {
     implementation project(':react-native-fs')
     implementation project(':react-native-document-picker')
     implementation project(':nodejs-mobile-react-native')
-    compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
-    compile "com.facebook.react:react-native:+"  // From node_modules
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+    implementation "com.facebook.react:react-native:+"  // From node_modules
+    androidTestImplementation('com.wix:detox:+') { transitive = true }
+    androidTestImplementation 'junit:junit:4.12'
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/androidTest/java/com/drip/DetoxTest.java

@@ -0,0 +1,24 @@
+package com.drip;
+
+import com.wix.detox.Detox;
+
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.filters.LargeTest;
+import androidx.test.rule.ActivityTestRule;
+
+@RunWith(AndroidJUnit4.class)
+@LargeTest
+public class DetoxTest {
+
+    @Rule
+    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
+
+    @Test
+    public void runDetoxTests() {
+        Detox.runTests(mActivityRule);
+    }
+}

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+</manifest>

android/app/src/main/java/com/drip/MainActivity.java

@@ -10,6 +10,6 @@ public class MainActivity extends ReactActivity {
      */
     @Override
     protected String getMainComponentName() {
-        return "home";
+        return "drip";
     }
 }

android/build.gradle

@@ -5,11 +5,13 @@ buildscript {
         jcenter()
         google()
     }
+    ext.kotlinVersion = '1.3.10'
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.1.0'
+        classpath 'com.android.tools.build:gradle:3.4.0'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     }
 }
 
@@ -25,24 +27,28 @@ allprojects {
             url 'https://maven.google.com/'
             name 'Google'
         }
+        google()
+        maven {
+            // All of Detox' artifacts are provided via the npm module
+            url "$rootDir/../node_modules/detox/Detox-android"
+        }
     }
 }
 
 ext {
-    buildToolsVersion = "27.0.3"
-    minSdkVersion = 16
-    compileSdkVersion = 27
-    targetSdkVersion = 27
-    supportLibVersion = "27.1.1"
+    buildToolsVersion = "28.0.3"
+    minSdkVersion = 23
+    compileSdkVersion = 28
+    targetSdkVersion = 28
+    supportLibVersion = "28.0.0"
 }
 
-subprojects {project ->
-  // https://stackoverflow.com/questions/52613089/getting-verifyreleaseresources-error-after-upgrading-react-native
-  afterEvaluate {
+subprojects {
+    afterEvaluate {project ->
         if (project.hasProperty("android")) {
             android {
-        compileSdkVersion 27
-        buildToolsVersion "27.0.3"
+                compileSdkVersion 28
+                buildToolsVersion '28.0.3'
             }
         }
     }

android/gradle.properties

@@ -16,5 +16,3 @@
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
-
-android.useDeprecatedNdk=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip

android/gradlew

@@ -1,5 +1,21 @@
 #!/usr/bin/env bash
 
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
 ##############################################################################
 ##
 ##  Gradle start up script for UN*X
@@ -7,7 +23,7 @@
 ##############################################################################
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS=""
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 APP_NAME="Gradle"
 APP_BASE_NAME=`basename "$0"`

android/gradlew.bat

@@ -1,3 +1,19 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      http://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
 @if "%DEBUG%" == "" @echo off
 @rem ##########################################################################
 @rem
@@ -9,7 +25,7 @@
 if "%OS%"=="Windows_NT" setlocal
 
 @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS=
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
 
 set DIRNAME=%~dp0
 if "%DIRNAME%" == "" set DIRNAME=.

components/app-text-input.js

@@ -18,7 +18,11 @@ export default function AppTextInput({ style, ...props }) {
 }
 
 AppTextInput.propTypes = {
-  secureTextEntry: PropTypes.bool
+  autoFocus: PropTypes.bool,
+  onChangeText: PropTypes.func,
+  placeholder: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  value: PropTypes.string,
 }
 
 AppTextInput.defaultProps = {

components/app-text.js

@@ -1,27 +1,26 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Text } from 'react-native'
 import styles from "../styles"
 import Link from './link'
 
-export default function AppText(props) {
+export default function AppText({ children, onPress, numberOfLines, style}) {
   // we parse for links in case the text contains any
   return (
     <Link>
-      <Text
-        style={[styles.appText, props.style]}
-        onPress={props.onPress}
-        numberOfLines={props.numberOfLines}
+      <Text style={[styles.appText, style]}
+        onPress={onPress}
+        numberOfLines={numberOfLines}
       >
-        {props.children}
+        {children}
       </Text>
     </Link>
   )
 }
 
-export function SymptomSectionHeader(props) {
-  return (
-    <AppText style={styles.symptomViewHeading}>
-      {props.children}
-    </AppText>
-  )
+AppText.propTypes = {
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+  numberOfLines: PropTypes.number,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 }

components/app-wrapper.js

@@ -1,44 +1,90 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
+
+import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
+import { openDb } from '../db'
+
 import App from './app'
 import PasswordPrompt from './password-prompt'
 import License from './license'
-import { getLicenseFlag } from '../local-storage'
+import AppLoadingView from './app-loading'
+
+import store from "../store"
+import { Provider } from 'react-redux'
 
 export default class AppWrapper extends Component {
   constructor() {
     super()
     this.state = {
-      retrievingLicenseSetting: true
+      isCheckingLicenseAgreement: true,
+      shouldShowLicenseAgreement: false,
+      shouldShowPasswordPrompt: false,
+      shouldShowApp: false,
     }
     nodejs.start('main.js')
     this.checkLicenseAgreement()
+    this.checkDbPasswordSet()
   }
 
   async checkLicenseAgreement() {
-    const agreed = await getLicenseFlag()
-    this.setState({retrievingLicenseSetting: false})
-    if (!agreed) this.setState({showLicense: true})
+    const isLicenseFlagSet = await getLicenseFlag()
+    if (!isLicenseFlagSet) {
+      this.enableShowLicenseAgreement()
+    } else {
+      this.setState({ isCheckingLicenseAgreement: false })
+    }
+  }
+
+  async checkDbPasswordSet() {
+    const canConnectToDb = await openDb()
+    if (canConnectToDb) {
+      this.enableShowApp()
+      await saveEncryptionFlag(false)
+      return false
+    }
+    this.setState({ shouldShowPasswordPrompt: true })
+    await saveEncryptionFlag(true)
+  }
+
+  enableShowLicenseAgreement = () => {
+    this.setState({
+      shouldShowLicenseAgreement: true,
+      isCheckingLicenseAgreement: false
+    })
+  }
+
+  disableShowLicenseAgreement = () => {
+    this.setState({ shouldShowLicenseAgreement: false })
+  }
+
+  enableShowApp = () => {
+    this.setState({
+      shouldShowApp: true,
+      shouldShowPasswordPrompt: false
+    })
   }
 
   render() {
-    const whiteScreen = <View style={{ flex: 1 }}></View>
-    const licenseScreen = <License setLicense={() => {
-      this.setState({showLicense: false})
-    }}/>
-    const passwordPrompt = <PasswordPrompt showApp={() => {
-      this.setState({showApp: true})
-    }}/>
+    const {
+      isCheckingLicenseAgreement,
+      shouldShowLicenseAgreement,
+      shouldShowPasswordPrompt,
+      shouldShowApp,
+    } = this.state
 
-    if (this.state.retrievingLicenseSetting) {
-      return whiteScreen
-    } else if (this.state.showLicense) {
-      return licenseScreen
-    } else if (!this.state.showApp) {
-      return passwordPrompt
-    } else {
-      return <App/>
+    let initialView = null
+
+    if (isCheckingLicenseAgreement) {
+      initialView = <AppLoadingView />
+    } else if (shouldShowLicenseAgreement) {
+      initialView = <License setLicense={this.disableShowLicenseAgreement}/>
+    } else if (shouldShowPasswordPrompt) {
+      initialView = <PasswordPrompt enableShowApp={this.enableShowApp} />
+    } else if (shouldShowApp) {
+      initialView = <App />
     }
+
+    return <Provider store={store}>{initialView}</Provider>
+
   }
 }

components/app.js

@@ -1,130 +1,114 @@
 import React, { Component } from 'react'
 import { View, BackHandler } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { connect } from 'react-redux'
+
+import { getDate } from '../slices/date'
+import { getNavigation, navigate, goBack } from '../slices/navigation'
+
 import Header from './header'
 import Menu from './menu'
-import Home from './home'
-import Calendar from './calendar'
-import CycleDay from './cycle-day/cycle-day-overview'
-import symptomViews from './cycle-day/symptoms'
-import Chart from './chart/chart'
-import SettingsMenu from './settings/settings-menu'
-import settingsViews from './settings'
-import Stats from './stats'
-import {headerTitles, menuTitles} from '../i18n/en/labels'
+import { viewsList } from './views'
+import { isSymptomView, isSettingsView } from './pages'
+
+import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
+import { getCycleDay, closeDb } from '../db'
 
-// design wants everyhting lowercased, but we don't
-// have CSS pseudo properties
-const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
-  acc[curr] = headerTitles[curr].toLowerCase()
-  return acc
-}, {})
+class App extends Component {
 
-const HOME_PAGE = 'Home'
-const CYCLE_DAY_PAGE = 'CycleDay'
-const SETTINGS_MENU_PAGE = 'SettingsMenu'
+  static propTypes = {
+    date: PropTypes.string,
+    navigation: PropTypes.object.isRequired,
+    navigate: PropTypes.func,
+    goBack: PropTypes.func,
+  }
 
-export default class App extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      currentPage: HOME_PAGE
+
+    this.backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      this.goBack
+    )
+
+    setupNotifications(this.props.navigate)
   }
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress)
-    setupNotifications(this.navigate)
+
+  goBack = () => {
+    const { currentPage } = this.props.navigation
+
+    if (currentPage === 'Home') {
+      closeDb()
+      BackHandler.exitApp()
+    } else {
+      this.props.goBack()
+    }
+
+    return true
   }
 
   componentWillUnmount() {
     this.backHandler.remove()
   }
 
-  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 (this.isMenuItem()) {
-      this.menuOrigin = currentPage
-    }
-    if (!this.isSymptomView()) {
-      this.originForSymptomView = currentPage
-    }
-    this.setState({ currentPage: pageName, currentProps: props })
-  }
-
-  handleBackButtonPress = () => {
-    const { currentPage, currentProps } = this.state
-    if (currentPage === HOME_PAGE) return false
-    if (this.isSymptomView()) {
-      this.navigate(
-        this.originForSymptomView, { date: currentProps.date }
-      )
-    } else if (this.isSettingsView()) {
-      this.navigate(SETTINGS_MENU_PAGE)
-    } else if (currentPage === CYCLE_DAY_PAGE) {
-      this.navigate(this.menuOrigin)
-    } else {
-      this.navigate(HOME_PAGE)
-    }
-    return true
-  }
-
-  isMenuItem() {
-    return Object.keys(menuTitles).includes(this.state.currentPage)
-  }
-
-  isSymptomView() {
-    return Object.keys(symptomViews).includes(this.state.currentPage)
-  }
-
-  isSettingsView() {
-    return Object.keys(settingsViews).includes(this.state.currentPage)
-  }
-
-  isDefaultView() {
-    const { currentPage } = this.state
-    return this.isMenuItem(currentPage) || currentPage === SETTINGS_MENU_PAGE
-  }
-
   render() {
-    const { currentPage, currentProps } = this.state
-    const pages = {
-      Home,
-      Calendar,
-      CycleDay,
-      Chart,
-      SettingsMenu,
-      ...settingsViews,
-      Stats,
-      ...symptomViews
+    const { date, navigation, goBack } = this.props
+    const { currentPage } = navigation
+
+    if (!currentPage) {
+      return false
+    }
+
+    const Page = viewsList[currentPage]
+    const title = headerTitles[currentPage]
+
+    const isSymptomEditView = isSymptomView(currentPage)
+    const isSettingsSubView = isSettingsView(currentPage)
+    const isCycleDayView = currentPage === 'CycleDay'
+
+    const headerProps = {
+      title,
+      handleBack: isSettingsSubView ? goBack : null,
+    }
+
+    const pageProps = {
+      cycleDay: date && getCycleDay(date),
+      date,
     }
-    const Page = pages[currentPage]
-    const title = headerTitlesLowerCase[currentPage]
 
     return (
-      <View style={{flex: 1}}>
-        {this.isDefaultView() &&
-          <Header title={title} />
-        }
-        {(this.isSettingsView()) &&
-          <Header
-            title={title}
-            showBackButton={true}
-            goBack={this.handleBackButtonPress}
-          />
+      <View style={{ flex: 1 }}>
+        {
+          !isSymptomEditView &&
+          !isCycleDayView &&
+          <Header { ...headerProps } />
         }
 
-        <Page
-          navigate={this.navigate}
-          {...currentProps}
-          handleBackButtonPress={this.handleBackButtonPress}
-        />
+        <Page { ...pageProps } />
 
-        {!this.isSymptomView() &&
-          <Menu navigate={this.navigate} currentPage={currentPage} />
-        }
+        { !isSymptomEditView && <Menu /> }
       </View>
     )
   }
 }
+
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+    navigation: getNavigation(state)
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+    goBack: () => dispatch(goBack()),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App)

components/button.js

@@ -1,20 +1,31 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
 import AppText from './app-text'
 import styles from '../styles'
 
-export default function Button(props) {
+export default function Button({
+  backgroundColor,
+  children,
+  onPress,
+  style,
+  testID
+}) {
   return (
     <TouchableOpacity
-      onPress={props.onPress}
-      style={[
-        styles.button,
-        props.style,
-        {backgroundColor: props.backgroundColor}
-      ]}>
-      <AppText style={styles.homeButtonText}>
-        {props.children}
-      </AppText>
+      onPress={onPress}
+      style={[styles.button, style, { backgroundColor }]}
+      testID={testID}
+    >
+      <AppText style={styles.homeButtonText}>{children}</AppText>
     </TouchableOpacity>
   )
 }
+
+Button.propTypes = {
+  backgroundColor: PropTypes.string,
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+  style: PropTypes.object,
+  testID: PropTypes.string
+}

components/calendar.js

@@ -1,5 +1,11 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { CalendarList } from 'react-native-calendars'
+import { connect } from 'react-redux'
+
+import { setDate } from '../slices/date'
+import { navigate } from '../slices/navigation'
+
 import { LocalDate } from 'js-joda'
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
@@ -7,7 +13,12 @@ import { shadesOfRed, calendarTheme } from '../styles/index'
 import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
 
-export default class CalendarView extends Component {
+class CalendarView extends Component {
+  static propTypes = {
+    setDate: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props)
     this.bleedingDays = getBleedingDaysSortedByDate()
@@ -36,9 +47,10 @@ export default class CalendarView extends Component {
   }
 
   passDateToDayView = (result) => {
-    const navigate = this.props.navigate
-    navigate('CycleDay', { date: result.dateString })
+    this.props.setDate(result.dateString)
+    this.props.navigate('CycleDay')
   }
+
   render() {
     return (
       <CalendarList
@@ -60,6 +72,19 @@ export default class CalendarView extends Component {
   }
 }
 
+const mapDispatchToProps = (dispatch) => {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(CalendarView)
+
+
 function toCalFormat(bleedingDaysSortedByDate) {
   const todayDateString = LocalDate.now().toString()
   return bleedingDaysSortedByDate.reduce((acc, day) => {

components/chart/chart-legend.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import AppText from '../app-text'
+import DripHomeIcon from '../../assets/drip-home-icons'
+
+import styles from './styles'
+import { cycleDayColor } from '../../styles'
+
+import { shared as labels } from '../../i18n/en/labels'
+
+const ChartLegend = ({ xAxisHeight }) => {
+  return (
+    <View style={[styles.yAxis, styles.chartLegend, {height: xAxisHeight}]}>
+      <DripHomeIcon
+        name="circle"
+        size={styles.yAxis.width - 7}
+        color={cycleDayColor}
+      />
+      <AppText style={styles.yAxisLabels.dateLabel}>
+        {labels.date.toLowerCase()}
+      </AppText>
+    </View>
+  )
+}
+
+ChartLegend.propTypes = {
+  xAxisHeight: PropTypes.number.isRequired
+}
+
+export default ChartLegend

components/chart/chart-line.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
+
+import styles from './styles'
+
+const ChartLine = ({ path, isNfpLine = false }) => {
+  const strokeStyle =
+    isNfpLine ? styles.nfpLine.stroke : styles.column.stroke.color
+  const strokeWidth =
+    isNfpLine ? styles.nfpLine.strokeWidth : styles.column.stroke.width
+
+  return (
+    <Shape
+      stroke={strokeStyle}
+      strokeWidth={strokeWidth}
+      d={path}
+    />
+  )
+}
+
+ChartLine.propTypes = {
+  path: PropTypes.object,
+  isNfpLine: PropTypes.bool,
+}
+
+export default ChartLine

components/chart/chart.js

@@ -1,38 +1,55 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { View, FlatList, ActivityIndicator } from 'react-native'
-import { LocalDate } from 'js-joda'
-import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
+
+import NoData from './no-data'
+import AppLoadingView from '../app-loading'
+import YAxis from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
-import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
-import styles from './styles'
-import { cycleDayColor } from '../../styles'
-import { scaleObservable } from '../../local-storage'
-import config from '../../config'
+import HorizontalGrid from './horizontal-grid'
 import AppText from '../app-text'
-import AppLoadingView from '../app-loading'
-import { shared as labels } from '../../i18n/en/labels'
-import DripIcon from '../../assets/drip-icons'
-import DripHomeIcon from '../../assets/drip-home-icons'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { getCycleDaysSortedByDate } from '../../db'
 import nothingChanged from '../../db/db-unchanged'
+import { scaleObservable } from '../../local-storage'
+import { makeColumnInfo } from '../helpers/chart'
 
-const symptomIcons = {
-  bleeding: <DripIcon size={16} name='drip-icon-bleeding' color={styles.iconShades.bleeding[3]}/>,
-  mucus: <DripIcon size={16} name='drip-icon-mucus' color={styles.iconShades.mucus[4]}/>,
-  cervix: <DripIcon size={16} name='drip-icon-cervix' color={styles.iconShades.cervix[3]}/>,
-  desire: <DripIcon size={16} name='drip-icon-desire' color={styles.iconShades.desire[2]}/>,
-  sex: <DripIcon size={16} name='drip-icon-sex' color={styles.iconShades.sex[2]}/>,
-  pain: <DripIcon size={16} name='drip-icon-pain' color={styles.iconShades.pain[0]}/>,
-  mood: <DripIcon size={16} name='drip-icon-mood' color={styles.iconShades.mood[0]}/>,
-  note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
-}
+import config from '../../config'
+import { shared } from '../../i18n/en/labels'
+import styles from './styles'
+
+class CycleChart extends Component {
+  static propTypes = {
+    navigate: PropTypes.func,
+    end: PropTypes.bool
+  }
 
-export default class CycleChart extends Component {
   constructor(props) {
     super(props)
+
     this.state = {}
     this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
     this.getFhmAndLtlInfo = nfpLines()
+    this.shouldShowTemperatureColumn = false
+
+    this.prepareSymptomData()
+  }
+
+  prepareSymptomData = () => {
+    this.symptomRowSymptoms = config.symptoms.filter((symptomName) => {
+      return this.cycleDaysSortedByDate.some(cycleDay => {
+        return cycleDay[symptomName]
+      })
+    })
+    this.chartSymptoms = [...this.symptomRowSymptoms]
+    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+      this.chartSymptoms.push('temperature')
+      this.shouldShowTemperatureColumn = true
+    }
   }
 
   renderColumn = ({ item, index }) => {
@@ -43,55 +60,42 @@ export default class CycleChart extends Component {
         navigate={this.props.navigate}
         symptomHeight={this.symptomHeight}
         columnHeight={this.columnHeight}
-        chartHeight={this.state.chartHeight}
         symptomRowSymptoms={this.symptomRowSymptoms}
         chartSymptoms={this.chartSymptoms}
+        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
         getFhmAndLtlInfo={this.getFhmAndLtlInfo}
+        xAxisHeight={this.xAxisHeight}
       />
     )
   }
 
-  onLayout = ({ nativeEvent }) => {
-    if (this.state.chartHeight) return
-    const height = nativeEvent.layout.height
-    const reCalculateChartInfo = () => {
-      // how many symptoms need to be displayed on the chart's upper symptom row?
-      this.symptomRowSymptoms = [
-        'bleeding',
-        'mucus',
-        'cervix',
-        'sex',
-        'desire',
-        'pain',
-        'mood',
-        'note'
-      ].filter((symptomName) => {
-        return this.cycleDaysSortedByDate.some(cycleDay => {
-          return cycleDay[symptomName]
-        })
-      })
+  reCalculateChartInfo = (nativeEvent) => {
+    const { height, width } = nativeEvent.layout
+    const xAxisCoefficient = this.shouldShowTemperatureColumn ?
+      config.xAxisHeightPercentage : config.xAxisHeightPercentageLarge
+    const symptomCoefficient = this.shouldShowTemperatureColumn ?
+      config.symptomHeightPercentage : config.symptomHeightPercentageLarge
 
-      this.xAxisHeight = height * config.xAxisHeightPercentage
+    this.xAxisHeight = height * xAxisCoefficient
     const remainingHeight = height - this.xAxisHeight
-      this.symptomHeight = config.symptomHeightPercentage * remainingHeight
+    this.symptomHeight = remainingHeight * symptomCoefficient
     this.symptomRowHeight = this.symptomRowSymptoms.length *
       this.symptomHeight
     this.columnHeight = remainingHeight - this.symptomRowHeight
+    const chartHeight = this.shouldShowTemperatureColumn ?
+      height : (this.symptomRowHeight + this.xAxisHeight)
 
-      this.chartSymptoms = [...this.symptomRowSymptoms]
-      if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
-        this.chartSymptoms.push('temperature')
+    const numberOfColumnsToRender = Math.round(width / config.columnWidth)
+    const columns = makeColumnInfo()
+
+    this.setState({ columns, chartHeight, numberOfColumnsToRender })
   }
 
-      const columnData = this.makeColumnInfo()
-      this.setState({
-        columns: columnData,
-        chartHeight: height
-      })
-    }
+  onLayout = ({ nativeEvent }) => {
+    if (this.state.chartHeight) return
 
-    reCalculateChartInfo()
-    this.updateListeners(reCalculateChartInfo)
+    this.reCalculateChartInfo(nativeEvent)
+    this.updateListeners(this.reCalculateChartInfo)
   }
 
   updateListeners(dataUpdateHandler) {
@@ -115,63 +119,36 @@ export default class CycleChart extends Component {
     this.removeObvListener()
   }
 
-  makeColumnInfo() {
-    let amountOfCycleDays = getAmountOfCycleDays()
-    // if there's not much data yet, we want to show at least 30 days on the chart
-    if (amountOfCycleDays < 30) {
-      amountOfCycleDays = 30
-    } else {
-      // we don't want the chart to end abruptly before the first data day
-      amountOfCycleDays += 5
-    }
-    const localDates = getTodayAndPreviousDays(amountOfCycleDays)
-    return localDates.map(localDate => localDate.toString())
-  }
-
   render() {
+    const { chartHeight, chartLoaded, numberOfColumnsToRender } = this.state
+    const shouldShowChart = this.chartSymptoms.length > 0 ? true : false
+
     return (
-      <View
-        onLayout={this.onLayout}
-        style={{ flexDirection: 'row', flex: 1 }}
-      >
-        {!this.state.chartLoaded && <AppLoadingView />}
+      <View onLayout={this.onLayout} style={styles.container}>
+        {!shouldShowChart && <NoData navigate={this.props.navigate}/>}
+        {shouldShowChart && !chartHeight && !chartLoaded && <AppLoadingView />}
+        <View style={styles.chartContainer}>
+          {shouldShowChart && (
+            <View style={styles.chartArea}>
 
-        {this.state.chartHeight && this.state.chartLoaded &&
-          <View>
-            <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
-              {this.symptomRowSymptoms.map(symptomName => {
-                return <View
-                  style={{ alignItems: 'center', justifyContent: 'center' }}
-                  key={symptomName}
-                  width={styles.yAxis.width}
-                  height={this.symptomRowHeight /
-                    this.symptomRowSymptoms.length}
-                >
-                  {symptomIcons[symptomName]}
-                </View>
-              })}
-            </View>
-            <View style={[styles.yAxis, {height: this.columnHeight}]}>
-              {makeYAxisLabels(this.columnHeight)}
-            </View>
-            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <DripHomeIcon
-                name="circle"
-                size={styles.yAxis.width - 7}
-                color={cycleDayColor}
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  <YAxis
+                    height={this.columnHeight}
+                    symptomsToDisplay={this.symptomRowSymptoms}
+                    symptomsSectionHeight={this.symptomRowHeight}
+                    shouldShowTemperatureColumn=
+                      {this.shouldShowTemperatureColumn}
+                    xAxisHeight={this.xAxisHeight}
                   />
-              <AppText style={[styles.yAxisLabels.dateLabel]}>
-                {labels.date.toLowerCase()}
-              </AppText>
-            </View>
-          </View>}
+                  {this.shouldShowTemperatureColumn && (<HorizontalGrid
+                    height={this.columnHeight}
+                    startPosition={this.symptomRowHeight}
+                  />)}
+                </React.Fragment>
+              )}
 
-
-        {this.state.chartHeight && this.state.chartLoaded &&
-          makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
-        }
-
-        {this.state.chartHeight &&
+              {chartHeight &&
                <FlatList
                  horizontal={true}
                  inverted={true}
@@ -179,42 +156,48 @@ export default class CycleChart extends Component {
                  data={this.state.columns}
                  renderItem={this.renderColumn}
                  keyExtractor={item => item}
-            initialNumToRender={15}
+                 initialNumToRender={numberOfColumnsToRender}
                  windowSize={30}
                  onLayout={() => this.setState({chartLoaded: true})}
                  onEndReached={() => this.setState({end: true})}
                  ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
                  updateCellsBatchingPeriod={800}
+                 contentContainerStyle={{height: chartHeight}}
                />
               }
             </View>
+          )}
+        </View>
+        {shouldShowChart && chartLoaded && !this.shouldShowTemperatureColumn
+          && (
+            <View style={styles.centerItem}>
+              <AppText style={{textAlign: 'center'}}>{shared.noTemperatureWarning}</AppText>
+            </View>
+          )}
+      </View>
     )
   }
 }
 
-function LoadingMoreView(props) {
+function LoadingMoreView({ end }) {
   return (
     <View style={styles.loadingMore}>
-      {!props.end &&
-        <ActivityIndicator size={'large'} color={'white'}/>
-      }
+      {!end && <ActivityIndicator size={'large'} color={'white'}/>}
     </View>
   )
 }
 
-function getTodayAndPreviousDays(n) {
-  const today = LocalDate.now()
-  const targetDate = today.minusDays(n)
-
-  function getDaysInRange(currDate, range) {
-    if (currDate.isBefore(targetDate)) {
-      return range
-    } else {
-      range.push(currDate)
-      const next = currDate.minusDays(1)
-      return getDaysInRange(next, range)
-    }
-  }
-
-  return getDaysInRange(today, [])
+LoadingMoreView.propTypes = {
+  end: PropTypes.bool
 }
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(CycleChart)

components/chart/cycle-day-label.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Text, View } from 'react-native'
+
+import moment from 'moment'
+import { LocalDate } from 'js-joda'
+
+import styles from './styles'
+import cycleModule from '../../lib/cycle'
+
+const CycleDayLabel = ({ height, date }) => {
+  const { label } = styles.column
+  const dayDate = LocalDate.parse(date)
+  const cycleDayNumber = cycleModule().getCycleDayNumber(date)
+
+  const isFirstDayOfMonth = dayDate.dayOfMonth() === 1
+  const dateFormatting = isFirstDayOfMonth ? 'MMM' : 'Do'
+  const shortDate = moment(date, "YYYY-MM-DD").format(dateFormatting)
+  const boldDateLabel = isFirstDayOfMonth ? {fontWeight: 'bold'} : {}
+
+  return (
+    <View style={[styles.chartLegend, { height }]}>
+      <Text style={label.number}>
+        {cycleDayNumber ? cycleDayNumber : ' '}
+      </Text>
+      <Text style={[label.date, boldDateLabel]}>
+        {shortDate}
+      </Text>
+    </View>
+  )
+}
+
+CycleDayLabel.propTypes = {
+  height: PropTypes.number,
+  date: PropTypes.string,
+}
+
+export default CycleDayLabel

components/chart/day-column.js

@@ -1,305 +1,137 @@
 import React, { Component } from 'react'
-import {
-  Text, View, TouchableOpacity
-} from 'react-native'
-import { Surface, Group as G, Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
-import { LocalDate } from 'js-joda'
-import moment from 'moment'
-import styles from './styles'
-import config from '../../config'
-import cycleModule from '../../lib/cycle'
+import PropTypes from 'prop-types'
+import { TouchableOpacity } from 'react-native'
+import { connect } from 'react-redux'
+
+import { setDate } from '../../slices/date'
+import { navigate } from '../../slices/navigation'
+
 import { getCycleDay } from '../../db'
-import DotAndLine from './dot-and-line'
-import { normalizeToScale } from './y-axis'
 
-const label = styles.column.label
+import SymptomCell from './symptom-cell'
+import TemperatureColumn from './temperature-column'
+import CycleDayLabel from './cycle-day-label'
+
+import {
+  symptomColorMethods,
+  getTemperatureProps,
+  isSymptomDataComplete
+} from '../helpers/chart'
+
+class DayColumn extends Component {
+  static propTypes = {
+    dateString: PropTypes.string.isRequired,
+    chartSymptoms: PropTypes.array,
+    columnHeight: PropTypes.number.isRequired,
+    getFhmAndLtlInfo: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired,
+    setDate: PropTypes.func.isRequired,
+    shouldShowTemperatureColumn: PropTypes.bool,
+    symptomHeight: PropTypes.number.isRequired,
+    symptomRowSymptoms: PropTypes.array,
+    xAxisHeight: PropTypes.number,
+  }
 
-export default class DayColumn extends Component {
   constructor(props) {
     super()
-    const dateString = props.dateString
-    const columnHeight = props.columnHeight
-    this.getCycleDayNumber = cycleModule().getCycleDayNumber
-    const cycleDay = getCycleDay(dateString)
+
+    const { dateString, chartSymptoms, columnHeight } = props
+    const cycleDayData = getCycleDay(dateString)
     this.data = {}
-    if (cycleDay) {
-      this.data = props.chartSymptoms.reduce((acc, symptom) => {
-        if (['bleeding', 'temperature', 'mucus', 'desire', 'note'].includes(symptom)) {
-          acc[symptom] = cycleDay[symptom] && cycleDay[symptom].value
-          if (symptom === 'temperature' && acc.temperature) {
-            acc.y = normalizeToScale(acc.temperature, columnHeight)
-            const neighbor = getInfoForNeighborColumns(dateString, columnHeight)
-            for (const key in neighbor) {
-              acc[key] = neighbor[key]
+
+    if (cycleDayData) {
+      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
+        const symptomData = cycleDayData[symptom]
+
+        if (symptomData && symptom === 'temperature') {
+          symptomDataToDisplay[symptom] =
+           getTemperatureProps(symptomData, columnHeight, dateString)
+        } else {
+          if (symptomData && ! symptomData.exclude) {
+            // if symptomColorMethods entry doesn't exist for given symptom,
+            // use 'default'
+            const getSymptomColorIndex =
+              symptomColorMethods[symptom] || symptomColorMethods['default']
+
+            symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
           }
         }
-        } else if (symptom === 'cervix') {
-          acc.cervix = cycleDay.cervix &&
-            (cycleDay.cervix.opening + cycleDay.cervix.firmness)
-        } else if (symptom === 'sex') {
-          // solo = 1 + partner = 2
-          acc.sex = cycleDay.sex &&
-            (cycleDay.sex.solo + 2 * cycleDay.sex.partner)
-        } else if (symptom === 'pain') {
-          // is any pain documented?
-          acc.pain = cycleDay.pain &&
-            Object.values({...cycleDay.pain}).some(x => x === true)
-        } else if (symptom === 'mood') {
-          // is mood documented?
-          acc.mood = cycleDay.mood &&
-            Object.values({...cycleDay.mood}).some(x => x === true)
-        }
-        acc[`${symptom}Exclude`] = cycleDay[symptom] && cycleDay[symptom].exclude
-        return acc
+
+        return symptomDataToDisplay
       }, this.data)
     }
 
     this.fhmAndLtl = props.getFhmAndLtlInfo(
       props.dateString,
-      this.data.temperature,
+      this.data.temperature ? this.data.temperature.value : null,
       props.columnHeight
     )
   }
 
+  onDaySelect = (date) => {
+    this.props.setDate(date)
+    this.props.navigate('CycleDay')
+  }
+
   shouldComponentUpdate() {
     return false
   }
 
   render() {
-    const columnElements = []
-    const dateString = this.props.dateString
-    const symptomHeight = this.props.symptomHeight
-
-    if(this.fhmAndLtl.drawLtlAt) {
-      const ltlLine = (<Shape
-        stroke={styles.nfpLine.stroke}
-        strokeWidth={styles.nfpLine.strokeWidth}
-        d={new Path()
-          .moveTo(0, this.fhmAndLtl.drawLtlAt)
-          .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
-        }
-        key='ltl'
-      />)
-      columnElements.push(ltlLine)
-    }
-
-    if (this.fhmAndLtl.drawFhmLine) {
-      const x = styles.nfpLine.strokeWidth / 2
-      const fhmLine = (<Shape
-        fill="red"
-        stroke={styles.nfpLine.stroke}
-        strokeWidth={styles.nfpLine.strokeWidth}
-        d={new Path()
-          .moveTo(x, x)
-          .lineTo(x, this.props.columnHeight)
-        }
-        key='fhm'
-      />)
-      columnElements.push(fhmLine)
-    }
-
-
-    if (this.data.y) {
-      columnElements.push(
-        <DotAndLine
-          y={this.data.y}
-          exclude={this.data.temperatureExclude}
-          rightY={this.data.rightY}
-          rightTemperatureExclude={this.data.rightTemperatureExclude}
-          leftY={this.data.leftY}
-          leftTemperatureExclude={this.data.leftTemperatureExclude}
-          key='dotandline'
-        />
-      )
-    }
-
-    const cycleDayNumber = this.getCycleDayNumber(dateString)
-    const dayDate = LocalDate.parse(dateString)
-    const shortDate = dayDate.dayOfMonth() === 1 ?
-      moment(dateString, "YYYY-MM-DD").format('MMM')
-      :
-      moment(dateString, "YYYY-MM-DD").format('Do')
-    const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
-    const cycleDayLabel = (
-      <Text style = {label.number}>
-        {cycleDayNumber ? cycleDayNumber : ' '}
-      </Text>)
-    const dateLabel = (
-      <Text style = {[label.date, boldDateLabel]}>
-        {shortDate}
-      </Text>
-    )
-
-    const column = (
-      <G>
-        <Shape
-          stroke={styles.column.stroke.color}
-          strokeWidth={styles.column.stroke.width}
-          d={new Path().lineTo(0, this.props.chartHeight)}
-        />
-        { columnElements }
-      </G>
-    )
-
-    const symptomIconViews = {
-      bleeding: (
-        <SymptomIconView
-          value={this.data.bleeding}
-          symptomHeight={symptomHeight}
-          key='bleeding'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.bleeding[this.data.bleeding]}
-          />
-        </SymptomIconView>
-      ),
-      mucus: (
-        <SymptomIconView
-          value={this.data.mucus}
-          symptomHeight={symptomHeight}
-          key='mucus'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.mucus[this.data.mucus]}
-          />
-        </SymptomIconView>
-      ),
-      cervix: (
-        <SymptomIconView
-          value={this.data.cervix}
-          symptomHeight={symptomHeight}
-          key='cervix'
-        >
-          <View
-            {...styles.symptomIcon}
-            // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
-            backgroundColor={this.data.cervix > 0 ?
-              styles.iconShades.cervix[2] :
-              styles.iconShades.cervix[0]
-            }
-          />
-        </SymptomIconView>
-      ),
-      sex: (
-        <SymptomIconView
-          value={this.data.sex}
-          symptomHeight={symptomHeight}
-          key='sex'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.sex[this.data.sex - 1]}
-          />
-        </SymptomIconView>
-      ),
-      desire: (
-        <SymptomIconView
-          value={this.data.desire}
-          symptomHeight={symptomHeight}
-          key='desire'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.desire[this.data.desire]}
-          />
-        </SymptomIconView>
-      ),
-      pain: (
-        <SymptomIconView
-          value={this.data.pain}
-          symptomHeight={symptomHeight}
-          key='pain'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.pain}
-          />
-        </SymptomIconView>
-      ),
-      mood: (
-        <SymptomIconView
-          value={this.data.mood}
-          symptomHeight={symptomHeight}
-          key='mood'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.mood}
-          />
-        </SymptomIconView>
-      ),
-      note: (
-        <SymptomIconView
-          value={this.data.note}
-          symptomHeight={symptomHeight}
-          key='note'
-        >
-          <View
-            {...styles.symptomIcon}
-            backgroundColor={styles.iconShades.note}
-          />
-        </SymptomIconView>
-      )
-    }
+    const { columnHeight,
+      dateString,
+      shouldShowTemperatureColumn,
+      symptomHeight,
+      symptomRowSymptoms,
+      xAxisHeight
+    } = this.props
 
     return (
       <TouchableOpacity
-        onPress={() => this.props.navigate('CycleDay', { date: dateString })}
+        onPress={() => this.onDaySelect(dateString)}
         activeOpacity={1}
       >
-        <View>
-          {this.props.symptomRowSymptoms.map(symptomName => {
-            return symptomIconViews[symptomName]
-          })}
-        </View>
 
-        <Surface width={config.columnWidth} height={this.props.columnHeight}>
-          {column}
-        </Surface>
+        { symptomRowSymptoms.map(symptom => {
+          const hasSymptomData = this.data.hasOwnProperty(symptom)
+          return (
+            <SymptomCell
+              key={symptom}
+              symptom={symptom}
+              symptomValue={hasSymptomData && this.data[symptom]}
+              isSymptomDataComplete={
+                hasSymptomData && isSymptomDataComplete(symptom, dateString)
+              }
+              height={symptomHeight}
+            />)
+        }
+        )}
+
+        {shouldShowTemperatureColumn && <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
+          columnHeight={columnHeight}
+        />}
+
+        <CycleDayLabel
+          height={xAxisHeight}
+          date={dateString}
+        />
 
-        <View style={{height: this.props.xAxisHeight}}>
-          {cycleDayLabel}
-          {dateLabel}
-        </View>
       </TouchableOpacity>
     )
   }
 }
 
-
-function SymptomIconView(props) {
-  const style = [styles.symptomRow, {height: props.symptomHeight}]
-  return (
-    <View style={style}>
-      {(typeof props.value === 'number' || props.value === true || typeof props.value === 'string') &&
-        props.children
-      }
-    </View>
-  )
+const mapDispatchToProps = (dispatch) => {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  })
 }
 
-function getInfoForNeighborColumns(dateString, columnHeight) {
-  const ret = {
-    rightY: null,
-    rightTemperatureExclude: null,
-    leftY: null,
-    leftTemperatureExclude: null
-  }
-  const target = LocalDate.parse(dateString)
-  const dayBefore = target.minusDays(1).toString()
-  const dayAfter = target.plusDays(1).toString()
-  const cycleDayBefore = getCycleDay(dayBefore)
-  const cycleDayAfter = getCycleDay(dayAfter)
-  if (cycleDayAfter && cycleDayAfter.temperature) {
-    ret.rightY = normalizeToScale(cycleDayAfter.temperature.value, columnHeight)
-    ret.rightTemperatureExclude = cycleDayAfter.temperature.exclude
-  }
-  if (cycleDayBefore && cycleDayBefore.temperature) {
-    ret.leftY = normalizeToScale(cycleDayBefore.temperature.value, columnHeight)
-    ret.leftTemperatureExclude = cycleDayBefore.temperature.exclude
-  }
-
-  return ret
-}
+export default connect(
+  null,
+  mapDispatchToProps,
+)(DayColumn)

components/chart/dot-and-line.js

@@ -1,10 +1,20 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
 import styles from './styles'
 import config from '../../config'
 
 export default class DotAndLine extends Component {
+  static propTypes = {
+    exclude: PropTypes.bool,
+    leftY: PropTypes.number,
+    leftTemperatureExclude: PropTypes.bool,
+    rightY: PropTypes.number,
+    rightTemperatureExclude: PropTypes.bool,
+    y: PropTypes.number.isRequired
+  }
+
   shouldComponentUpdate(newProps) {
     return Object.keys(newProps).some(key => newProps[key] != this.props[key])
   }

components/chart/horizontal-grid.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import { getTickPositions } from '../helpers/chart'
+
+import styles from './styles'
+
+const HorizontalGrid = ({ height, startPosition }) => {
+  return getTickPositions(height).map(tick => {
+    return (
+      <View
+        top={startPosition + tick}
+        {...styles.horizontalGrid}
+        key={tick}
+      />
+    )
+  })
+}
+
+HorizontalGrid.propTypes = {
+  height: PropTypes.number,
+  startPosition: PropTypes.number,
+}
+
+export default HorizontalGrid

components/chart/nfp-lines.js

@@ -1,5 +1,5 @@
 import { getCycleStatusForDay } from '../../lib/sympto-adapter'
-import { normalizeToScale } from './y-axis'
+import { normalizeToScale } from '../helpers/chart'
 
 export default function () {
   const cycle = {

components/chart/no-data.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import AppText from '../app-text'
+import SettingsButton from '../settings/shared/settings-button'
+
+import { shared } from '../../i18n/en/labels'
+import styles from './styles'
+
+const NoData = ({ navigate }) => {
+  return (
+    <View flex={1}>
+      <View style={styles.centerItem}>
+        <AppText>{shared.noDataWarning}</AppText>
+        <SettingsButton
+          onPress={() => {navigate('CycleDay')}}
+          style={{marginHorizontal: 40}}
+        >
+          {shared.noDataButtonText}
+        </SettingsButton>
+      </View>
+    </View>
+  )
+}
+
+NoData.propTypes = {
+  navigate: PropTypes.func,
+}
+
+export default NoData

components/chart/styles.js

@@ -11,7 +11,29 @@ const gridLineWidthVertical = 0.6
 const gridLineWidthHorizontal = 0.3
 const numberLabelFontSize = 13
 
+const redColor = '#c3000d'
+const violetColor = '#6a7b98'
+const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', '#7689a9', violetColor] // light to dark
+const yellowColor = '#dbb40c'
+const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark
+const magentaColor = '#6f2565'
+const shadesOfMagenta = ['#a87ca2', '#8b5083', magentaColor] // light to dark
+const pinkColor = '#9e346c'
+const shadesOfPink = ['#c485a6', '#b15c89', pinkColor] // light to dark
+const lightGreenColor = '#bccd67'
+const orangeColor = '#bc6642'
+const mintColor = '#6ca299'
+
 const styles = {
+  container: { flex: 1 },
+  chartContainer: { flexDirection: 'column' },
+  chartArea: { flexDirection: 'row' },
+  centerItem: {
+    flex:1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 25,
+  },
   curve: {
     stroke: colorTemperature,
     strokeWidth: lineWidth,
@@ -48,39 +70,44 @@ const styles = {
       width: gridLineWidthVertical,
     }
   },
-  symptomIcon: {
+  symptomDot: {
     width: 12,
     height: 12,
     borderRadius: 50,
   },
-  iconShades: {
-    'bleeding': shadesOfRed,
-    'mucus': [
-      '#e3e7ed',
-      '#c8cfdc',
-      '#acb8cb',
-      '#91a0ba',
-      '#7689a9'
-    ],
-    'cervix': [
-      '#f0e19d',
-      '#e9d26d',
-      '#e2c33c',
-      '#dbb40c',
-    ],
-    'sex': [
-      '#a87ca2',
-      '#8b5083',
-      '#6f2565',
-    ],
-    'desire': [
-      '#c485a6',
-      '#b15c89',
-      '#9e346c',
-    ],
-    'pain': ['#bccd67'],
-    'mood': ['#bc6642'],
-    'note': ['#6ca299']
+  iconColors: {
+    'bleeding': {
+      color: redColor,
+      shades: shadesOfRed,
+    },
+    'mucus': {
+      color: violetColor,
+      shades: shadesOfViolet,
+    },
+    'cervix': {
+      color: yellowColor,
+      shades: shadesOfYellow,
+    },
+    'sex': {
+      color: magentaColor,
+      shades: shadesOfMagenta,
+    },
+    'desire': {
+      color: pinkColor,
+      shades: shadesOfPink,
+    },
+    'pain': {
+      color: lightGreenColor,
+      shades: [lightGreenColor],
+    },
+    'mood': {
+      color: orangeColor,
+      shades: [orangeColor],
+    },
+    'note': {
+      color: mintColor,
+      shades: [mintColor],
+    },
   },
   yAxis: {
     width: 27,
@@ -109,6 +136,18 @@ const styles = {
       fontWeight: '100',
     }
   },
+  symptomIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chartLegend: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  boldTick: {
+    fontWeight: 'bold',
+    fontSize: 11,
+  },
   horizontalGrid: {
     position:'absolute',
     borderStyle: 'solid',

components/chart/symptom-cell.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import styles from './styles'
+import config from '../../config'
+
+const SymptomCell = ({
+  height,
+  symptom,
+  symptomValue,
+  isSymptomDataComplete
+}) => {
+
+  const shouldDrawDot = symptomValue !== false
+  const styleParent = [styles.symptomRow, { height, width: config.columnWidth }]
+  let styleChild
+
+  if (shouldDrawDot) {
+    const styleSymptom = styles.iconColors[symptom]
+    const symptomColor = styleSymptom.shades[symptomValue]
+
+    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
+
+    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
+      'white' : symptomColor
+    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
+    const borderColor = symptomColor
+    styleChild = [styles.symptomDot, {
+      backgroundColor,
+      borderColor,
+      borderWidth
+    }]
+  }
+
+  return (
+    <View style={styleParent} key={symptom}>
+      {shouldDrawDot && <View style={styleChild} />}
+    </View>
+  )
+}
+
+SymptomCell.propTypes = {
+  height: PropTypes.number,
+  symptom: PropTypes.string,
+  symptomValue: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+  ]),
+  isSymptomDataComplete: PropTypes.bool,
+}
+
+export default SymptomCell

components/chart/symptom-icon.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import DripIcon from '../../assets/drip-icons'
+
+import styles from './styles'
+
+const SymptomIcon = ({ symptom, height }) => {
+  return (
+    <View style={styles.symptomIcon} width={styles.yAxis.width} height={height}>
+      <DripIcon
+        size={16}
+        name={`drip-icon-${symptom}`}
+        color={styles.iconColors[symptom].color}
+      />
+    </View>
+  )
+}
+
+SymptomIcon.propTypes = {
+  height: PropTypes.number,
+  symptom: PropTypes.string,
+}
+
+export default SymptomIcon

components/chart/temperature-column.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
+
+import ChartLine from './chart-line'
+import DotAndLine from './dot-and-line'
+
+import styles from './styles'
+import config from '../../config'
+
+const TemperatureColumn = ({
+  horizontalLinePosition,
+  isVerticalLine,
+  data,
+  columnHeight
+}) => {
+
+  const x = styles.nfpLine.strokeWidth / 2
+
+  return (
+    <Surface width={config.columnWidth} height={columnHeight}>
+
+      <ChartLine
+        path={new Path().lineTo(0, columnHeight)}
+      />
+
+      {horizontalLinePosition && <ChartLine
+        path={new Path()
+          .moveTo(0, horizontalLinePosition)
+          .lineTo(config.columnWidth, horizontalLinePosition)
+        }
+        isNfpLine={true}
+        key='ltl'
+      />}
+
+      {isVerticalLine && <ChartLine
+        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+        isNfpLine={true}
+        key='fhm'
+      />}
+
+      {data && data.y && <DotAndLine
+        y={data.y}
+        exclude={data.temperatureExclude}
+        rightY={data.rightY}
+        rightTemperatureExclude={data.rightTemperatureExclude}
+        leftY={data.leftY}
+        leftTemperatureExclude={data.leftTemperatureExclude}
+        key='dotandline'
+      />}
+
+    </Surface>
+  )
+}
+
+TemperatureColumn.propTypes = {
+  horizontalLinePosition: PropTypes.number,
+  isVerticalLine: PropTypes.bool,
+  data: PropTypes.object,
+  columnHeight: PropTypes.number,
+}
+
+export default TemperatureColumn

components/chart/tick-list.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import Tick from './tick'
+
+import { getTickList } from '../helpers/chart'
+
+import styles from './styles'
+
+const TickList = ({ height }) => {
+  return (
+    <View style={[styles.yAxis, { height }]}>{
+      getTickList(height)
+        .map(({ label, position, isBold, shouldShowLabel}) => {
+          return (
+            <Tick
+              key={label}
+              yPosition={position}
+              isBold={isBold}
+              shouldShowLabel={shouldShowLabel}
+              label={label}
+            />
+          )
+        })
+    }</View>
+  )
+}
+
+TickList.propTypes = {
+  height: PropTypes.number,
+}
+
+export default TickList

components/chart/tick.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import AppText from '../app-text'
+
+import styles from './styles'
+
+const Tick = ({ yPosition, isBold, shouldShowLabel, label }) => {
+  // this eyeballing is sadly necessary because RN does not
+  // support percentage values for transforms, which we'd need
+  // to reliably place the label vertically centered to the grid
+  const topPosition = yPosition - 8
+  const style = [
+    styles.yAxisLabels.tempScale,
+    {top: topPosition},
+    isBold && styles.boldTick
+  ]
+
+  return <AppText style={style}>{shouldShowLabel && label}</AppText>
+}
+
+Tick.propTypes = {
+  yPosition: PropTypes.number,
+  isBold: PropTypes.bool,
+  shouldShowLabel: PropTypes.bool,
+  label: PropTypes.string,
+}
+
+export default Tick

components/chart/y-axis.js

@@ -1,75 +1,46 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { View } from 'react-native'
-import config from '../../config'
+
+import SymptomIcon from './symptom-icon'
+import TickList from './tick-list'
+import ChartLegend from './chart-legend'
+
 import styles from './styles'
-import { scaleObservable, unitObservable } from '../../local-storage'
-import AppText from '../app-text'
 
-export function makeYAxisLabels(columnHeight) {
-  const units = unitObservable.value
-  const scaleMax = scaleObservable.value.max
-  const style = styles.yAxisLabels.tempScale
+const YAxis = ({
+  height,
+  symptomsToDisplay,
+  symptomsSectionHeight,
+  shouldShowTemperatureColumn,
+  xAxisHeight
+}) => {
+  const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
-  return getTickPositions(columnHeight).map((y, i) => {
-    const tick = scaleMax - i * units
-    const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
-    let showTick
-    let tickBold
-    if (units === 0.1) {
-      showTick =  (tick * 10 % 2) ? false : true
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
-    } else {
-      showTick =  (tick * 10 % 5) ? false : true
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
-    }
-    // this eyeballing is sadly necessary because RN does not
-    // support percentage values for transforms, which we'd need
-    // to reliably place the label vertically centered to the grid
   return (
-      <AppText
-        style={[style, {top: y - 8}, tickBold]}
-        key={i}>
-        {showTick && tickLabel}
-      </AppText>
-    )
-  })
-}
-
-export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
-  return getTickPositions(columnHeight).map(tick => {
-    return (
-      <View
-        top={tick + symptomRowHeight}
-        {...styles.horizontalGrid}
-        key={tick}
+    <View>
+      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
+        {symptomsToDisplay.map(symptom => (
+          <SymptomIcon
+            key={symptom}
+            symptom={symptom}
+            height={symptomIconHeight}
           />
         )
-  })
+        )}
+      </View>
+      {shouldShowTemperatureColumn && <TickList height={height} />}
+      <ChartLegend xAxisHeight={xAxisHeight} />
+    </View>
+  )
 }
 
-function getTickPositions(columnHeight) {
-  const units = unitObservable.value
-  const scaleMin = scaleObservable.value.min
-  const scaleMax = scaleObservable.value.max
-  const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
-  const tickDistance = 1 / (numberOfTicks - 1)
-  const tickPositions = []
-  for (let i = 0; i < numberOfTicks; i++) {
-    const position = getAbsoluteValue(tickDistance * i, columnHeight)
-    tickPositions.push(position)
-  }
-  return tickPositions
+YAxis.propTypes = {
+  height: PropTypes.number,
+  symptomsToDisplay: PropTypes.array,
+  symptomsSectionHeight: PropTypes.number,
+  shouldShowTemperatureColumn: PropTypes.bool,
+  xAxisHeight: PropTypes.number.isRequired
 }
 
-export function normalizeToScale(temp, columnHeight) {
-  const scale = scaleObservable.value
-  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
-  return getAbsoluteValue(valueRelativeToScale, columnHeight)
-}
-
-function getAbsoluteValue(relative, columnHeight) {
-  // we add some height to have some breathing room
-  const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
-  const scaleHeight = columnHeight - 2 * verticalPadding
-  return scaleHeight * relative + verticalPadding
-}
+export default YAxis

components/cycle-day/FillerBoxes.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import { View, Dimensions } from 'react-native'
+import styles from '../../styles'
+
+export default class FillerBoxes extends Component {
+  render() {
+    const n = Dimensions.get('window').width / styles.symptomBox.width
+    const fillerBoxes = []
+    for (let i = 0; i < Math.ceil(n); i++) {
+      fillerBoxes.push(
+        <View
+          width={styles.symptomBox.width}
+          height={0}
+          key={i.toString()}
+        />
+      )
+    }
+    return fillerBoxes
+  }
+}

components/cycle-day/SymptomBox.js

@@ -0,0 +1,174 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, TouchableOpacity } from 'react-native'
+
+import AppText from '../app-text'
+import DripIcon from '../../assets/drip-icons'
+
+import styles from '../../styles'
+
+import { headerTitles as symptomTitles } from '../../i18n/en/labels'
+import * as labels from '../../i18n/en/cycle-day'
+const bleedingLabels = labels.bleeding.labels
+const intensityLabels = labels.intensity
+const sexLabels = labels.sex.categories
+const contraceptiveLabels = labels.contraceptives.categories
+const painLabels = labels.pain.categories
+const moodLabels = labels.mood.categories
+
+function isNumber(val) {
+  return typeof val === 'number'
+}
+
+const l = {
+  bleeding: ({ value, exclude }) => {
+    if (isNumber(value)) {
+      const bleedingLabel = bleedingLabels[value]
+      return exclude ? `(${bleedingLabel})` : bleedingLabel
+    }
+  },
+  temperature: ({ value, time, exclude }) => {
+    if (isNumber(value)) {
+      let temperatureLabel = `${value} °C`
+      if (time) {
+        temperatureLabel += ` - ${time}`
+      }
+      if (exclude) {
+        temperatureLabel = `(${temperatureLabel})`
+      }
+      return temperatureLabel
+    }
+  },
+  mucus: mucus => {
+    const filledCategories = ['feeling', 'texture'].filter(c => isNumber(mucus[c]))
+    let label = filledCategories.map(category => {
+      return labels.mucus.subcategories[category] + ': ' + labels.mucus[category].categories[mucus[category]]
+    }).join(', ')
+
+    if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}`
+    if (mucus.exclude) label = `(${label})`
+
+    return label
+  },
+  cervix: cervix => {
+    const filledCategories = ['opening', 'firmness', 'position'].filter(c => isNumber(cervix[c]))
+    let label = filledCategories.map(category => {
+      return labels.cervix.subcategories[category] + ': ' + labels.cervix[category].categories[cervix[category]]
+    }).join(', ')
+
+    if (cervix.exclude) label = `(${label})`
+
+    return label
+  },
+  note: note => note.value,
+  desire: ({ value }) => {
+    if (isNumber(value)) {
+      return intensityLabels[value]
+    }
+  },
+  sex: sex => {
+    const sexLabel = []
+    if (sex && Object.values({...sex}).some(val => val)){
+      Object.keys(sex).forEach(key => {
+        if(sex[key] && key !== 'other' && key !== 'note') {
+          sexLabel.push(
+            sexLabels[key] ||
+            contraceptiveLabels[key]
+          )
+        }
+        if(key === 'other' && sex.other) {
+          let label = contraceptiveLabels[key]
+          if(sex.note) {
+            label = `${label} (${sex.note})`
+          }
+          sexLabel.push(label)
+        }
+      })
+      return sexLabel.join(', ')
+    }
+  },
+  pain: pain => {
+    const painLabel = []
+    if (pain && Object.values({...pain}).some(val => val)){
+      Object.keys(pain).forEach(key => {
+        if(pain[key] && key !== 'other' && key !== 'note') {
+          painLabel.push(painLabels[key])
+        }
+        if(key === 'other' && pain.other) {
+          let label = painLabels[key]
+          if(pain.note) {
+            label = `${label} (${pain.note})`
+          }
+          painLabel.push(label)
+        }
+      })
+      return painLabel.join(', ')
+    }
+  },
+  mood: mood => {
+    const moodLabel = []
+    if (mood && Object.values({...mood}).some(val => val)){
+      Object.keys(mood).forEach(key => {
+        if(mood[key] && key !== 'other' && key !== 'note') {
+          moodLabel.push(moodLabels[key])
+        }
+        if(key === 'other' && mood.other) {
+          let label = moodLabels[key]
+          if(mood.note) {
+            label = `${label} (${mood.note})`
+          }
+          moodLabel.push(label)
+        }
+      })
+      return moodLabel.join(', ')
+    }
+  }
+}
+
+const getLabel = (symptom, symptomData) => {
+  return symptomData && l[symptom](symptomData)
+}
+
+export default function SymptomBox(
+  { disabled, onPress, symptom, symptomData }) {
+
+  const data = getLabel(symptom, symptomData)
+  const iconName = `drip-icon-${symptom}`
+
+  const disabledStyle = disabled ? styles.symptomInFuture : null
+  const containerStyle = [
+    styles.symptomBox,
+    data && styles.symptomBoxActive,
+    disabledStyle
+  ]
+  const titleStyle = [
+    data && styles.symptomTextActive,
+    disabledStyle,
+    {fontSize: 15}
+  ]
+  const dataBoxStyle = [styles.symptomDataBox, disabledStyle]
+  const iconColor = data ? 'white' : 'black'
+
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled} testID={iconName}>
+      <View style={containerStyle}>
+        <DripIcon name={iconName} size={50} color={iconColor} />
+        <AppText style={titleStyle} numberOfLines={1}>
+          {symptomTitles[symptom].toLowerCase()}
+        </AppText>
+      </View>
+      <View style={dataBoxStyle}>
+        <AppText style={styles.symptomDataText} numberOfLines={3}>
+          {data}
+        </AppText>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+SymptomBox.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onPress: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired,
+  symptomData: PropTypes.object
+}

components/cycle-day/cycle-day-overview.js

@@ -1,258 +1,110 @@
 import React, { Component } from 'react'
-import {
-  ScrollView,
-  View,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native'
+import { ScrollView, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { connect } from 'react-redux'
+import { getDate, setDate } from '../../slices/date'
+import { navigate } from '../../slices/navigation'
+
 import { LocalDate } from 'js-joda'
 import Header from '../header'
-import { getCycleDay } from '../../db'
+import FillerBoxes from './FillerBoxes'
+import SymptomBox from './SymptomBox'
+
 import cycleModule from '../../lib/cycle'
+import formatDate from '../helpers/format-date'
+import { getCycleDay } from '../../db'
 import styles from '../../styles'
-import * as labels from '../../i18n/en/cycle-day'
-import { headerTitles as symptomTitles } from '../../i18n/en/labels'
-import AppText from '../app-text'
-import DripIcon from '../../assets/drip-icons'
 
-const bleedingLabels = labels.bleeding.labels
-const intensityLabels = labels.intensity
-const sexLabels = labels.sex.categories
-const contraceptiveLabels = labels.contraceptives.categories
-const painLabels = labels.pain.categories
-const moodLabels = labels.mood.categories
+class CycleDayOverView extends Component {
+
+  static propTypes = {
+    navigate: PropTypes.func,
+    setDate: PropTypes.func,
+    // The following are not being used,
+    // we could see if it's possible to not pass them from the <App />
+    cycleDay: PropTypes.object,
+    date: PropTypes.string,
+  }
 
-export default class CycleDayOverView extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      date: this.props.date,
-      cycleDay: getCycleDay(this.props.date)
+      cycleDay: getCycleDay(props.date)
     }
   }
 
-  goToCycleDay = (target) => {
-    const localDate = LocalDate.parse(this.state.date)
-    const targetDate = target === 'before' ?
-      localDate.minusDays(1).toString() :
-      localDate.plusDays(1).toString()
+  updateCycleDay = (date) => {
+    this.props.setDate(date)
     this.setState({
-      date: targetDate,
-      cycleDay: getCycleDay(targetDate)
+      cycleDay: getCycleDay(date)
     })
   }
 
-  navigate(symptom) {
-    this.props.navigate(symptom, this.state)
+  goToPrevDay = () => {
+    const { date } = this.props
+    const prevDate = LocalDate.parse(date).minusDays(1).toString()
+    this.updateCycleDay(prevDate)
   }
 
-  getLabel(symptomName) {
-    const cycleDay = this.state.cycleDay
-    if (!cycleDay || !cycleDay[symptomName]) return
-
-    const l = {
-      bleeding: bleeding => {
-        if (isNumber(bleeding.value)) {
-          let bleedingLabel = bleedingLabels[bleeding.value]
-          if (bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
-          return bleedingLabel
-        }
-      },
-      temperature: temperature => {
-        if (isNumber(temperature.value)) {
-          let temperatureLabel = `${temperature.value} °C - ${temperature.time}`
-          if (temperature.exclude) {
-            temperatureLabel = "( " + temperatureLabel + " )"
-          }
-          return temperatureLabel
-        }
-      },
-      mucus: mucus => {
-        const filledCategories = ['feeling', 'texture'].filter(c => isNumber(mucus[c]))
-        let label = filledCategories.map(category => {
-          return labels.mucus.subcategories[category] + ': ' + labels.mucus[category].categories[mucus[category]]
-        }).join(', ')
-
-        if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}`
-        if (mucus.exclude) label = `(${label})`
-
-        return label
-      },
-      cervix: cervix => {
-        const filledCategories = ['opening', 'firmness', 'position'].filter(c => isNumber(cervix[c]))
-        let label = filledCategories.map(category => {
-          return labels.cervix.subcategories[category] + ': ' + labels.cervix[category].categories[cervix[category]]
-        }).join(', ')
-
-        if (cervix.exclude) label = `(${label})`
-
-        return label
-      },
-      note: note => {
-        return note.value
-      },
-      desire: desire => {
-        if (isNumber(desire.value)) {
-          const desireLabel = `${intensityLabels[desire.value]}`
-          return desireLabel
-        }
-      },
-      sex: sex => {
-        let sexLabel = []
-        if (sex && Object.values({...sex}).some(val => val)){
-          Object.keys(sex).forEach(key => {
-            if(sex[key] && key !== 'other' && key !== 'note') {
-              sexLabel.push(
-                sexLabels[key] ||
-                contraceptiveLabels[key]
-              )
-            }
-            if(key === 'other' && sex.other) {
-              let label = contraceptiveLabels[key]
-              if(sex.note) {
-                label = `${label} (${sex.note})`
-              }
-              sexLabel.push(label)
-            }
-          })
-          sexLabel = sexLabel.join(', ')
-          return sexLabel
-        }
-      },
-      pain: pain => {
-        let painLabel = []
-        if (pain && Object.values({...pain}).some(val => val)){
-          Object.keys(pain).forEach(key => {
-            if(pain[key] && key !== 'other' && key !== 'note') {
-              painLabel.push(painLabels[key])
-            }
-            if(key === 'other' && pain.other) {
-              let label = painLabels[key]
-              if(pain.note) {
-                label = `${label} (${pain.note})`
-              }
-              painLabel.push(label)
-            }
-          })
-          painLabel = painLabel.join(', ')
-          return painLabel
-        }
-      },
-      mood: mood => {
-        let moodLabel = []
-        if (mood && Object.values({...mood}).some(val => val)){
-          Object.keys(mood).forEach(key => {
-            if(mood[key] && key !== 'other' && key !== 'note') {
-              moodLabel.push(moodLabels[key])
-            }
-            if(key === 'other' && mood.other) {
-              let label = moodLabels[key]
-              if(mood.note) {
-                label = `${label} (${mood.note})`
-              }
-              moodLabel.push(label)
-            }
-          })
-          moodLabel = moodLabel.join(', ')
-          return moodLabel
-        }
-      }
-    }
-
-    const symptomValue = cycleDay[symptomName]
-    return l[symptomName](symptomValue)
+  goToNextDay = () => {
+    const { date } = this.props
+    const nextDate = LocalDate.parse(date).plusDays(1).toString()
+    this.updateCycleDay(nextDate)
   }
 
   render() {
-    const getCycleDayNumber = cycleModule().getCycleDayNumber
-    const cycleDayNumber = getCycleDayNumber(this.state.date)
-    const dateInFuture = LocalDate
-      .now()
-      .isBefore(LocalDate.parse(this.state.date))
+    const { cycleDay } = this.state
+    const { date } = this.props
+
+    const dateInFuture = LocalDate.now().isBefore(LocalDate.parse(date))
+
+    const symptomBoxesList = [
+      'bleeding',
+      'temperature',
+      'mucus',
+      'cervix',
+      'desire',
+      'sex',
+      'pain',
+      'mood',
+      'note',
+    ]
+
+    const { getCycleDayNumber } = cycleModule()
+    const cycleDayNumber = getCycleDayNumber(date)
+    const headerSubtitle = cycleDayNumber && `Cycle day ${cycleDayNumber}`
 
     return (
       <View style={{ flex: 1 }}>
         <Header
-          isCycleDayOverView={true}
-          cycleDayNumber={cycleDayNumber}
-          date={this.state.date}
-          goToCycleDay={this.goToCycleDay}
+          handleBack={this.goToPrevDay}
+          handleNext={this.goToNextDay}
+          title={formatDate(date)}
+          subtitle={headerSubtitle}
         />
         <ScrollView>
           <View style={styles.symptomBoxesView}>
+            {
+              symptomBoxesList.map(symptom => {
+                const symptomEditView =
+                  `${symptom[0].toUpperCase() + symptom.substring(1)}EditView`
+                const symptomData =
+                  cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
+                return(
                   <SymptomBox
-              title={symptomTitles.bleeding}
-              onPress={() => this.navigate('BleedingEditView')}
-              data={this.getLabel('bleeding')}
-              disabled={dateInFuture}
-              iconName='drip-icon-bleeding'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.temperature}
-              onPress={() => this.navigate('TemperatureEditView')}
-              data={this.getLabel('temperature')}
-              disabled={dateInFuture}
-              iconName='drip-icon-temperature'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.mucus}
-              onPress={() => this.navigate('MucusEditView')}
-              data={this.getLabel('mucus')}
-              disabled={dateInFuture}
-              iconName='drip-icon-mucus'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.cervix}
-              onPress={() => this.navigate('CervixEditView')}
-              data={this.getLabel('cervix')}
-              disabled={dateInFuture}
-              iconName='drip-icon-cervix'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.desire}
-              onPress={() => this.navigate('DesireEditView')}
-              data={this.getLabel('desire')}
-              disabled={dateInFuture}
-              iconName='drip-icon-desire'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.sex}
-              onPress={() => this.navigate('SexEditView')}
-              data={this.getLabel('sex')}
-              disabled={dateInFuture}
-              iconName='drip-icon-sex'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.pain}
-              onPress={() => this.navigate('PainEditView')}
-              data={this.getLabel('pain')}
-              disabled={dateInFuture}
-              iconName='drip-icon-pain'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.mood}
-              onPress={() => this.navigate('MoodEditView')}
-              data={this.getLabel('mood')}
-              disabled={dateInFuture}
-              iconName='drip-icon-mood'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.note}
-              onPress={() => this.navigate('NoteEditView')}
-              data={this.getLabel('note')}
-              iconName='drip-icon-note'
-            >
-            </SymptomBox>
-            {/*  this is just to make the last row adhere to the grid
-        (and) because there are no pseudo properties in RN */}
+                    key={symptom}
+                    symptom={symptom}
+                    symptomData={symptomData}
+                    onPress={() => this.props.navigate(symptomEditView)}
+                    disabled={dateInFuture && symptom !== 'note'}
+                  />)
+              })
+            }
+            {
+              // this is just to make the last row adhere to the grid
+              // (and) because there are no pseudo properties in RN
+            }
             <FillerBoxes />
           </View>
         </ScrollView>
@@ -261,58 +113,20 @@ export default class CycleDayOverView extends Component {
   }
 }
 
-
-
-
-class SymptomBox extends Component {
-  render() {
-    const hasData = this.props.data
-    const boxActive = hasData ? styles.symptomBoxActive : {}
-    const textActive = hasData ? styles.symptomTextActive : {}
-    const disabledStyle = this.props.disabled ? styles.symptomInFuture : {}
-
-    return (
-      <TouchableOpacity
-        onPress={this.props.onPress}
-        disabled={this.props.disabled}
-      >
-        <View style={[styles.symptomBox, boxActive, disabledStyle]}>
-          <DripIcon name={this.props.iconName} size={50} color={hasData ? 'white' : 'black'}/>
-          <AppText
-            style={[textActive, disabledStyle, {fontSize: 15}]}
-            numberOfLines={1}
-          >
-            {this.props.title.toLowerCase()}
-          </AppText>
-        </View>
-        <View style={[styles.symptomDataBox, disabledStyle]}>
-          <AppText
-            style={styles.symptomDataText}
-            numberOfLines={3}
-          >{this.props.data}</AppText>
-        </View>
-      </TouchableOpacity>
-    )
-  }
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
 }
 
-class FillerBoxes extends Component {
-  render() {
-    const n = Dimensions.get('window').width / styles.symptomBox.width
-    const fillerBoxes = []
-    for (let i = 0; i < Math.ceil(n); i++) {
-      fillerBoxes.push(
-        <View
-          width={styles.symptomBox.width}
-          height={0}
-          key={i.toString()}
-        />
-      )
-    }
-    return fillerBoxes
-  }
+const mapDispatchToProps = (dispatch) => {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  })
 }
 
-function isNumber(val) {
-  return typeof val === 'number'
-}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CycleDayOverView)

components/cycle-day/select-box-group.js

@@ -1,34 +1,38 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, TouchableOpacity } from 'react-native'
+
 import AppText from '../app-text'
 
-export default class SelectBoxGroup extends Component {
-  render() {
+import styles from '../../styles'
+
+export default function SelectBoxGroup({ labels, onSelect, optionsState }) {
   return (
     <View style={styles.selectBoxSection}>
-        {Object.keys(this.props.labels).map(key => {
+      {Object.keys(labels).map(key => {
         const style = [styles.selectBox]
         const textStyle = []
-          if (this.props.optionsState[key]) {
+        if (optionsState[key]) {
           style.push(styles.selectBoxActive)
           textStyle.push(styles.selectBoxTextActive)
         }
         return (
           <TouchableOpacity
-              onPress={() => this.props.onSelect(key)}
+            onPress={() => onSelect(key)}
             key={key}
           >
             <View style={style}>
-                <AppText style={textStyle}>{this.props.labels[key]}</AppText>
+              <AppText style={textStyle}>{labels[key]}</AppText>
             </View>
           </TouchableOpacity>
         )
       })}
     </View>
   )
-  }
+}
+
+SelectBoxGroup.propTypes = {
+  labels: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  optionsState: PropTypes.object.isRequired
 }

components/cycle-day/select-tab-group.js

@@ -1,29 +1,28 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, TouchableOpacity } from 'react-native'
+
 import AppText from '../app-text'
 
-export default class SelectTabGroup extends Component {
-  render() {
+import styles from '../../styles'
+
+export default function SelectTabGroup({ active, buttons, onSelect }) {
   return (
     <View style={styles.selectTabGroup}>
       {
-          this.props.buttons.map(({ label, value }, i) => {
+        buttons.map(({ label, value }, i) => {
           let firstOrLastStyle
-            if (i === this.props.buttons.length - 1) {
+          if (i === buttons.length - 1) {
             firstOrLastStyle = styles.selectTabLast
           } else if (i === 0) {
             firstOrLastStyle = styles.selectTabFirst
           }
           let activeStyle
-            const isActive = value === this.props.active
+          const isActive = value === active
           if (isActive) activeStyle = styles.selectTabActive
           return (
             <TouchableOpacity
-                onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
+              onPress={() => onSelect(isActive ? null : value)}
               key={i}
               activeOpacity={1}
             >
@@ -42,5 +41,10 @@ export default class SelectTabGroup extends Component {
       }
     </View>
   )
-  }
+}
+
+SelectTabGroup.propTypes = {
+  active: PropTypes.number,
+  buttons: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired
 }

components/cycle-day/symptoms/bleeding.js

@@ -1,55 +1,68 @@
-import React from 'react'
-import {
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import React, { Component } from 'react'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { bleeding } from '../../../i18n/en/cycle-day'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
-export default class Bleeding extends SymptomView {
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Bleeding extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.bleeding = cycleDay && cycleDay.bleeding
-    this.state = {
-      currentValue: this.bleeding && this.bleeding.value,
-      exclude: this.bleeding ? this.bleeding.exclude : false
-    }
+    const symptom = 'bleeding'
+    const { cycleDay } = props
+
+    const defaultSymptomData = {
+      value: null,
+      exclude: false
     }
 
-  symptomName = 'bleeding'
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.bleedingRadioProps = getLabelsList(bleeding.labels)
+
+    this.symptom = symptom
+  }
 
   autoSave = () => {
-    if (typeof this.state.currentValue != 'number') {
-      this.deleteSymptomEntry()
-      return
-    }
-    this.saveSymptomEntry({
-      value: this.state.currentValue,
-      exclude: this.state.exclude
-    })
+    const { date } = this.props
+    const valuesToSave = { ...this.state }
+    const hasValueToSave = typeof this.state.value === 'number'
+    saveSymptom(this.symptom, date, hasValueToSave ? valuesToSave : null)
   }
 
-  renderContent() {
-    const bleedingRadioProps = [
-      { label: bleeding.labels[0], value: 0 },
-      { label: bleeding.labels[1], value: 1 },
-      { label: bleeding.labels[2], value: 2 },
-      { label: bleeding.labels[3], value: 3 },
-    ]
+  componentDidUpdate() {
+    this.autoSave()
+  }
+
+  render() {
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           header={bleeding.heaviness.header}
           explainer={bleeding.heaviness.explainer}
         >
           <SelectTabGroup
-            buttons={bleedingRadioProps}
-            active={this.state.currentValue}
-            onSelect={val => this.setState({ currentValue: val })}
+            buttons={this.bleedingRadioProps}
+            active={this.state.value}
+            onSelect={val => this.setState({ value: val })}
           />
         </SymptomSection>
         <SymptomSection
@@ -64,7 +77,9 @@ export default class Bleeding extends SymptomView {
             value={this.state.exclude}
           />
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Bleeding

components/cycle-day/symptoms/cervix.js

@@ -1,64 +1,74 @@
-import React from 'react'
-import {
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import React, { Component } from 'react'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { cervix as labels } from '../../../i18n/en/cycle-day'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
-export default class Cervix extends SymptomView {
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Cervix extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.cervix = cycleDay && cycleDay.cervix
-    this.state = this.cervix ? this.cervix : {}
-  }
+    const symptom = 'cervix'
+    const { cycleDay } = props
 
-  symptomName = 'cervix'
+    const defaultSymptomData = {}
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.cervixOpeningRadioProps = getLabelsList(labels.opening.categories)
+    this.cervixFirmnessRadioProps = getLabelsList(labels.firmness.categories)
+    this.cervixPositionRadioProps = getLabelsList(labels.position.categories)
+
+    this.symptom = symptom
+  }
 
   autoSave = () => {
-    const nothingEntered = ['opening', 'firmness', 'position'].every(val => typeof this.state[val] != 'number')
-    if (nothingEntered) {
-      this.deleteSymptomEntry()
-      return
+    const { date } = this.props
+    const { opening, firmness, position, exclude } = this.state
+    const valuesToSave = {
+      opening,
+      firmness,
+      position,
+      exclude: Boolean(exclude)
+    }
+    const nothingEntered = ['opening', 'firmness', 'position'].every(
+      val => typeof this.state[val] !== 'number')
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
   }
 
-    this.saveSymptomEntry({
-      opening: this.state.opening,
-      firmness: this.state.firmness,
-      position: this.state.position,
-      exclude: Boolean(this.state.exclude)
-    })
+  componentDidUpdate() {
+    this.autoSave()
   }
 
-  renderContent() {
-    const cervixOpeningRadioProps = [
-      { label: labels.opening.categories[0], value: 0 },
-      { label: labels.opening.categories[1], value: 1 },
-      { label: labels.opening.categories[2], value: 2 }
-    ]
-    const cervixFirmnessRadioProps = [
-      { label: labels.firmness.categories[0], value: 0 },
-      { label: labels.firmness.categories[1], value: 1 }
-    ]
-    const cervixPositionRadioProps = [
-      { label: labels.position.categories[0], value: 0 },
-      { label: labels.position.categories[1], value: 1 },
-      { label: labels.position.categories[2], value: 2 }
-    ]
+  render() {
     // TODO saving this info for notice when leaving incomplete data
     // const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           header="Opening"
           explainer={labels.opening.explainer}
         >
           <SelectTabGroup
-            buttons={cervixOpeningRadioProps}
+            buttons={this.cervixOpeningRadioProps}
             active={this.state.opening}
             onSelect={val => this.setState({ opening: val })}
           />
@@ -68,7 +78,7 @@ export default class Cervix extends SymptomView {
           explainer={labels.firmness.explainer}
         >
           <SelectTabGroup
-            buttons={cervixFirmnessRadioProps}
+            buttons={this.cervixFirmnessRadioProps}
             active={this.state.firmness}
             onSelect={val => this.setState({ firmness: val })}
           />
@@ -78,7 +88,7 @@ export default class Cervix extends SymptomView {
           explainer={labels.position.explainer}
         >
           <SelectTabGroup
-            buttons={cervixPositionRadioProps}
+            buttons={this.cervixPositionRadioProps}
             active={this.state.position}
             onSelect={val => this.setState({ position: val })}
           />
@@ -95,7 +105,9 @@ export default class Cervix extends SymptomView {
             value={this.state.exclude}
           />
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Cervix

components/cycle-day/symptoms/desire.js

@@ -1,51 +1,69 @@
-import React from 'react'
-import {
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
 import { intensity, desire } from '../../../i18n/en/cycle-day'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
-export default class Desire extends SymptomView {
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Desire extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.desire = cycleDay && cycleDay.desire
-    const desireValue = this.desire && this.desire.value
-    this.state = { currentValue: desireValue }
-  }
+    const symptom = 'desire'
+    const { cycleDay } = props
 
-  symptomName = 'desire'
+    const defaultSymptomData = { value: null }
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.symptom = symptom
+
+    this.desireRadioProps = getLabelsList(intensity)
+  }
 
   autoSave = () => {
-    if (typeof this.state.currentValue != 'number') {
-      this.deleteSymptomEntry()
-      return
-    }
-    this.saveSymptomEntry({ value: this.state.currentValue })
+    const { date } = this.props
+    const valuesToSave = { ...this.state }
+    const hasValueToSave = typeof this.state.value === 'number'
+    saveSymptom(this.symptom, date, hasValueToSave ? valuesToSave : null)
   }
 
-  renderContent() {
-    const desireRadioProps = [
-      { label: intensity[0], value: 0 },
-      { label: intensity[1], value: 1 },
-      { label: intensity[2], value: 2 }
-    ]
+  componentDidUpdate() {
+    this.autoSave()
+  }
+
+  render() {
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           header={desire.header}
           explainer={desire.explainer}
         >
           <SelectTabGroup
-            buttons={desireRadioProps}
-            active={this.state.currentValue}
-            onSelect={val => this.setState({ currentValue: val })}
+            buttons={this.desireRadioProps}
+            active={this.state.value}
+            onSelect={val => this.setState({ value: val })}
           />
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Desire

components/cycle-day/symptoms/info-symptom.js

@@ -1,22 +1,28 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ScrollView, View, TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/SimpleLineIcons'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
 import styles, {iconStyles} from '../../../styles/index'
 
-export default function InfoSymptom(props) {
+export default function InfoSymptom({ close, symptom }) {
   return (
     <View style={styles.infoPopUpWrapper}>
       <View style={styles.dimmed}></View>
-      <View style={styles.infoPopUp}>
-        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
+      <View style={styles.infoPopUp} testID="symptomInfoPopup">
+        <TouchableOpacity onPress={close} style={styles.infoSymptomClose}>
           <Icon name='close' {...iconStyles.infoPopUpClose}/>
         </TouchableOpacity>
         <ScrollView style={styles.infoSymptomText}>
-          <AppText>{labels[props.symptom].text}</AppText>
+          <AppText>{labels[symptom].text}</AppText>
         </ScrollView>
       </View>
     </View>
   )
 }
+
+InfoSymptom.propTypes = {
+  close: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired
+}

components/cycle-day/symptoms/mood.js

@@ -1,40 +1,53 @@
-import React from 'react'
-import {
-  ScrollView,
-  TextInput} from 'react-native'
+import React, { Component } from 'react'
+import { TextInput } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { mood as labels } from '../../../i18n/en/cycle-day'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
-import styles from '../../../styles'
 import SymptomView from './symptom-view'
 
-export default class Mood extends SymptomView {
+import { saveSymptom } from '../../../db'
+
+class Mood extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    if (cycleDay && cycleDay.mood) {
-      this.state = Object.assign({}, cycleDay.mood)
-    } else {
-      this.state = {}
-    }
-    if (this.state.note) {
-      this.state.other = true
-    }
-  }
+    const symptom = 'mood'
+    const { cycleDay } = props
 
-  symptomName = "mood"
+    const defaultSymptomData = {}
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    // We make sure other is always true when there is a note,
+    // e.g. when import is messed up.
+    if (this.state.note) this.state.other = true
+
+    this.symptom = symptom
+  }
 
   autoSave = () => {
+    const { date } = this.props
+    const valuesToSave = Object.assign({}, this.state)
+    if (!valuesToSave.other) {
+      valuesToSave.note = null
+    }
     const nothingEntered = Object.values(this.state).every(val => !val)
-    if (nothingEntered) {
-      this.deleteSymptomEntry()
-      return
+
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
   }
-    const copyOfState = Object.assign({}, this.state)
-    if (!copyOfState.other) {
-      copyOfState.note = null
-    }
-    this.saveSymptomEntry(copyOfState)
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   toggleState = (key) => {
@@ -45,9 +58,13 @@ export default class Mood extends SymptomView {
     }
   }
 
-  renderContent() {
+  render() {
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           explainer={labels.explainer}
         >
@@ -68,7 +85,9 @@ export default class Mood extends SymptomView {
               />
           }
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Mood

components/cycle-day/symptoms/mucus.js

@@ -1,64 +1,75 @@
-import React from 'react'
-import {
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import React, { Component } from 'react'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { mucus as labels } from '../../../i18n/en/cycle-day'
 import computeNfpValue from '../../../lib/nfp-mucus'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
-export default class Mucus extends SymptomView {
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Mucus extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.mucus = cycleDay && cycleDay.mucus
-    this.state = this.mucus ? this.mucus : {}
+    const symptom = 'mucus'
+    const { cycleDay } = props
+
+    const defaultSymptomData = {}
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.mucusFeeling = getLabelsList(labels.feeling.categories)
+    this.mucusTexture = getLabelsList(labels.texture.categories)
+
+    this.symptom = symptom
   }
 
-  symptomName = 'mucus'
-
-  autoSave = () => {
-    const nothingEntered = ['feeling', 'texture'].every(val => typeof this.state[val] != 'number')
-    if (nothingEntered) {
-      this.deleteSymptomEntry()
-      return
-    }
-
-    const feeling = this.state.feeling
-    const texture = this.state.texture
-    this.saveSymptomEntry({
+  shouldAutoSave = () => {
+    const { date } = this.props
+    const nothingEntered = ['feeling', 'texture'].every(
+      val => typeof this.state[val] !== 'number'
+    )
+    const { feeling, texture, exclude} = this.state
+    const valuesToSave = {
       feeling,
       texture,
       value: computeNfpValue(feeling, texture),
-      exclude: Boolean(this.state.exclude)
-    })
+      exclude: Boolean(exclude)
+    }
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
   }
 
-  renderContent() {
-    const mucusFeeling = [
-      { label: labels.feeling.categories[0], value: 0 },
-      { label: labels.feeling.categories[1], value: 1 },
-      { label: labels.feeling.categories[2], value: 2 },
-      { label: labels.feeling.categories[3], value: 3 }
-    ]
-    const mucusTexture = [
-      { label: labels.texture.categories[0], value: 0 },
-      { label: labels.texture.categories[1], value: 1 },
-      { label: labels.texture.categories[2], value: 2 }
-    ]
+  componentDidUpdate() {
+    this.shouldAutoSave()
+  }
+
+  render() {
     // TODO leaving this info for notice when leaving incomplete data
     // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           header='Feeling'
           explainer={labels.feeling.explainer}
         >
           <SelectTabGroup
-            buttons={mucusFeeling}
+            buttons={this.mucusFeeling}
             onSelect={val => this.setState({ feeling: val })}
             active={this.state.feeling}
           />
@@ -68,7 +79,7 @@ export default class Mucus extends SymptomView {
           explainer={labels.texture.explainer}
         >
           <SelectTabGroup
-            buttons={mucusTexture}
+            buttons={this.mucusTexture}
             onSelect={val => this.setState({ texture: val })}
             active={this.state.texture}
           />
@@ -85,7 +96,9 @@ export default class Mucus extends SymptomView {
             value={this.state.exclude}
           />
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Mucus

components/cycle-day/symptoms/note.js

@@ -1,55 +1,65 @@
-import React from 'react'
-import {
-  ScrollView,
-  TextInput,
-} from 'react-native'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { TextInput } from 'react-native'
 
-import styles from '../../../styles'
 import SymptomSection from './symptom-section'
 import { noteExplainer } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import SymptomView from './symptom-view'
 
-export default class Note extends SymptomView {
+import { saveSymptom } from '../../../db'
+
+class Note extends Component {
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.note = cycleDay && cycleDay.note
+    const symptom = 'note'
+    const { cycleDay } = props
 
-    this.state = {
-      currentValue: this.note && this.note.value || ''
-    }
-  }
+    const defaultSymptomData = { value: '' }
 
-  symptomName = 'note'
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.symptom = symptom
+  }
 
   autoSave = () => {
-    if (!this.state.currentValue) {
-      this.deleteSymptomEntry()
-      return
-    }
-    this.saveSymptomEntry({
-      value: this.state.currentValue
-    })
+    const { date } = this.props
+    const valuesToSave = { ...this.state }
+    saveSymptom(this.symptom, date, this.state.value ? valuesToSave : null)
   }
 
-  renderContent() {
+  componentDidUpdate() {
+    this.autoSave()
+  }
+
+  render() {
     return (
-      <ScrollView style={styles.page}>
-        <SymptomSection
-          explainer={noteExplainer}
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
       >
+        <SymptomSection explainer={noteExplainer} >
           <TextInput
-            autoFocus={!this.state.currentValue}
+            autoFocus={true}
             multiline={true}
             placeholder={sharedLabels.enter}
-            onChangeText={(val) => {
-              this.setState({ currentValue: val })
-            }}
-            value={this.state.currentValue}
+            onChangeText={(val) => { this.setState({ value: val })}}
+            value={this.state.value}
+            testID='noteInput'
           />
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Note

components/cycle-day/symptoms/pain.js

@@ -1,43 +1,54 @@
-import React from 'react'
-import {
-  ScrollView,
-  TextInput,
-} from 'react-native'
+import React, { Component } from 'react'
+import { TextInput } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { pain as labels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
-import styles from '../../../styles'
 import SymptomView from './symptom-view'
 
-export default class Pain extends SymptomView {
+import { saveSymptom } from '../../../db'
+
+class Pain extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    if (cycleDay && cycleDay.pain) {
-      this.state = Object.assign({}, cycleDay.pain)
-    } else {
-      this.state = {}
-    }
-    if (this.state.note) {
-      this.state.other = true
-    }
-  }
+    const symptom = 'pain'
+    const { cycleDay } = props
 
-  symptomName = 'pain'
+    const defaultSymptomData = {}
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    // We make sure other is always true when there is a note,
+    // e.g. when import is messed up.
+    if (this.state.note) this.state.other = true
+
+    this.symptom = symptom
+  }
 
   autoSave = () => {
+    const { date } = this.props
+    const valuesToSave = Object.assign({}, this.state)
+    if (!valuesToSave.other) {
+      valuesToSave.note = null
+    }
     const nothingEntered = Object.values(this.state).every(val => !val)
-    if (nothingEntered) {
-      this.deleteSymptomEntry()
-      return
+
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
   }
 
-    const copyOfState = Object.assign({}, this.state)
-    if (!copyOfState.other) {
-      copyOfState.note = null
-    }
-    this.saveSymptomEntry(copyOfState)
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   toggleState = (key) => {
@@ -48,9 +59,13 @@ export default class Pain extends SymptomView {
     }
   }
 
-  renderContent() {
+  render() {
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           explainer={labels.explainer}
         >
@@ -71,6 +86,9 @@ export default class Pain extends SymptomView {
               />
           }
         </SymptomSection>
-      </ScrollView>)
+      </SymptomView>
+    )
   }
 }
+
+export default Pain

components/cycle-day/symptoms/sex.js

@@ -1,56 +1,75 @@
-import React from 'react'
-import {
-  TextInput,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import React, { Component } from 'react'
+import { TextInput } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { sex as sexLabels, contraceptives as contraceptivesLabels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
-export default class Sex extends SymptomView {
+import { saveSymptom } from '../../../db'
+
+class Sex extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    if (cycleDay && cycleDay.sex) {
-      this.state = Object.assign({}, cycleDay.sex)
-    } else {
-      this.state = {}
-    }
+    const symptom = 'sex'
+    const { cycleDay } = props
+
+    const defaultSymptomData = {}
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
     // We make sure other is always true when there is a note,
     // e.g. when import is messed up.
     if (this.state.note) this.state.other = true
-  }
 
-  symptomName = "sex"
+    this.symptom = symptom
+  }
 
   autoSave = () => {
+    const { date } = this.props
+    const valuesToSave = Object.assign({}, this.state)
+    if (!valuesToSave.other) {
+      valuesToSave.note = null
+    }
     const nothingEntered = Object.values(this.state).every(val => !val)
-    if (nothingEntered) {
-      this.deleteSymptomEntry()
-      return
+
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
   }
 
-    const copyOfState = Object.assign({}, this.state)
-    if (!copyOfState.other) {
-      copyOfState.note = null
-    }
-    this.saveSymptomEntry(copyOfState)
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   toggleState = (key) => {
     const curr = this.state[key]
     this.setState({[key]: !curr})
-    if (key === 'other' && !curr) {
+    if (key === 'other'){
+      if (curr){
+        this.setState({note: ""})
+      } else {
         this.setState({focusTextArea: true})
       }
     }
+  }
 
-  renderContent() {
+  render() {
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           header={sexLabels.header}
           explainer={sexLabels.explainer}
@@ -83,7 +102,9 @@ export default class Sex extends SymptomView {
               }}
             />
         }
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
+
+export default Sex

components/cycle-day/symptoms/symptom-info.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+import Icon from 'react-native-vector-icons/Entypo'
+
+import InfoPopUp from './info-symptom'
+
+import styles, { iconStyles } from '../../../styles'
+
+export default class SymptomInfo extends Component {
+
+  static propTypes = {
+    symptom: PropTypes.string
+  }
+
+  constructor() {
+    super()
+    this.state = { showInfo: false }
+  }
+
+  showInfo = () => this.setState({ showInfo: true })
+
+  hideInfo = () => this.setState({ showInfo: false })
+
+  render() {
+    return (
+      <React.Fragment>
+        <TouchableOpacity
+          onPress={this.showInfo}
+          style={styles.infoButtonSymptomView}
+          testID="symptomInfoButton"
+        >
+          <Icon name="info-with-circle" style={iconStyles.info} />
+        </TouchableOpacity>
+        { this.state.showInfo &&
+            <InfoPopUp symptom={this.props.symptom} close={this.hideInfo} />
+        }
+      </React.Fragment>
+    )
+  }
+}

components/cycle-day/symptoms/symptom-section.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import AppText, { SymptomSectionHeader } from '../../app-text'
+import AppText from '../../app-text'
 import styles from '../../../styles'
 
 export default class SymptomSection extends Component {
@@ -16,7 +16,7 @@ export default class SymptomSection extends Component {
     return (
       <View style={[placeHeadingInline, styles.symptomSection]}>
         { p.header &&
-          <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+          <AppText style={styles.symptomViewHeading}>{p.header}</AppText>
         }
         <View
           flexDirection={p.inline ? 'row' : null}

components/cycle-day/symptoms/symptom-view.js

@@ -1,97 +1,117 @@
 import React, { Component } from 'react'
-import {
-  View, Alert, TouchableOpacity
-} from 'react-native'
+import { ScrollView, View, Alert } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { connect } from 'react-redux'
+import { getDate } from '../../../slices/date'
+import { goBack } from '../../../slices/navigation'
+
 import { saveSymptom } from '../../../db'
-import InfoPopUp from './info-symptom'
-import Header from '../../header/symptom-view'
+import formatDate from '../../helpers/format-date'
+
+import Header from '../../header'
+import SymptomInfo from './symptom-info'
+
 import { headerTitles } from '../../../i18n/en/labels'
 import { sharedDialogs } from '../../../i18n/en/cycle-day'
-import Icon from 'react-native-vector-icons/Entypo'
-import styles, { iconStyles } from '../../../styles'
 
-export default class SymptomView extends Component {
+import styles from '../../../styles'
+
+const checkIfHasValues = data => {
+  const isMeaningfulValue = value => value || value === 0
+  return Object.values(data).some(isMeaningfulValue)
+}
+
+class SymptomView extends Component {
+
+  static propTypes = {
+    symptom: PropTypes.string.isRequired,
+    values: PropTypes.object,
+    date: PropTypes.string,
+    children: PropTypes.node,
+    goBack: PropTypes.func,
+  }
+
   constructor(props) {
     super()
-    this.date = props.date
-    this.navigate = props.navigate
     this.state = {
-      showInfo: false
+      shouldShowDelete: checkIfHasValues(props.values)
     }
   }
 
   componentDidUpdate() {
-    this.autoSave()
+    const shouldShowDelete = checkIfHasValues(this.props.values)
+    if (shouldShowDelete !== this.state.shouldShowDelete) {
+      this.setState({ shouldShowDelete })
     }
-
-  saveSymptomEntry(entry) {
-    saveSymptom(this.symptomName, this.date, entry)
   }
 
   deleteSymptomEntry() {
-    saveSymptom(this.symptomName, this.date)
+    const { symptom, date } = this.props
+    saveSymptom(symptom, date, null)
   }
 
-  isDeleteIconActive() {
-    const symptomValueHasBeenFilledOut = key => {
-      // the state tracks whether the symptom info should be shown,
-      // we ignore that property
-      if (key === 'showInfo') return
-      // is there any meaningful value in the current state?
-      return this.state[key] || this.state[key] === 0
+  onDeleteConfirmation = () => {
+    this.deleteSymptomEntry()
+    this.props.goBack()
   }
 
-    const symptomValues =  Object.keys(this.state)
+  showConfirmationAlert = () => {
 
-    return symptomValues.some(symptomValueHasBeenFilledOut)
+    const cancelButton = {
+      text: sharedDialogs.cancel,
+      style: 'cancel'
+    }
+
+    const confirmationButton = {
+      text: sharedDialogs.reallyDeleteData,
+      onPress: this.onDeleteConfirmation
+    }
+
+    return Alert.alert(
+      sharedDialogs.areYouSureTitle,
+      sharedDialogs.areYouSureToDelete,
+      [cancelButton, confirmationButton]
+    )
   }
 
   render() {
+    const { symptom, date, goBack } = this.props
+    const { shouldShowDelete } = this.state
+    const handleDelete = shouldShowDelete ? this.showConfirmationAlert : null
+
     return (
       <View style={{flex: 1}}>
         <Header
-          title={headerTitles[this.symptomName].toLowerCase()}
-          date={this.date}
-          goBack={this.props.handleBackButtonPress}
-          deleteIconActive={this.isDeleteIconActive()}
-          deleteEntry={() => {
-            Alert.alert(
-              sharedDialogs.areYouSureTitle,
-              sharedDialogs.areYouSureToDelete,
-              [{
-                text: sharedDialogs.cancel,
-                style: 'cancel'
-              }, {
-                text: sharedDialogs.reallyDeleteData,
-                onPress: () => {
-                  this.deleteSymptomEntry()
-                  this.props.handleBackButtonPress()
-                }
-              }]
-            )
-          }}
+          title={headerTitles[symptom]}
+          subtitle={formatDate(date)}
+          handleBack={goBack}
+          handleDelete={handleDelete}
         />
         <View flex={1}>
-          { this.renderContent() }
-          <TouchableOpacity
-            onPress={() => {
-              this.setState({showInfo: true})
-            }}
-            style={styles.infoButtonSymptomView}
-          >
-            <Icon
-              name="info-with-circle"
-              style={iconStyles.info}
-            />
-          </TouchableOpacity>
-          { this.state.showInfo &&
-              <InfoPopUp
-                symptom={this.symptomName}
-                close={() => this.setState({showInfo: false})}
-              />
-          }
+          <ScrollView style={styles.page}>
+            {this.props.children}
+          </ScrollView>
+          <SymptomInfo symptom={symptom} />
         </View>
       </View>
     )
   }
 }
+
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    goBack: () => dispatch(goBack()),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SymptomView)

components/cycle-day/symptoms/temperature-input.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from '../../app-text'
+import AppTextInput from '../../app-text-input'
+
+import { temperature as labels } from '../../../i18n/en/cycle-day'
+
+import styles from '../../../styles'
+
+import { getPreviousTemperature } from '../../../db'
+import { scaleObservable } from '../../../local-storage'
+import config from '../../../config'
+
+export default class TemperatureInput extends Component {
+
+  static propTypes = {
+    temperature: PropTypes.string,
+    handleTemperatureChange: PropTypes.func,
+    date: PropTypes.string,
+  }
+
+  constructor(props) {
+    super(props)
+
+    let shouldShowSuggestion = false
+    let suggestedTemperature = null
+
+    if (!props.temperature) {
+      const prevTemp = getPreviousTemperature(props.date)
+      if (prevTemp) {
+        shouldShowSuggestion = true
+        suggestedTemperature = prevTemp.toString()
+      }
+    }
+
+    this.state = {
+      temperature: props.temperature,
+      shouldShowSuggestion,
+      suggestedTemperature
+    }
+  }
+
+  setTemperature = (temperature) => {
+    this.setState({
+      shouldShowSuggestion: false,
+      temperature
+    })
+    this.props.handleTemperatureChange(Number(temperature))
+  }
+
+  render () {
+    const {
+      shouldShowSuggestion,
+      suggestedTemperature,
+      temperature
+    } = this.state
+    const inputStyle = [
+      styles.temperatureTextInput,
+      shouldShowSuggestion ? styles.temperatureTextInputSuggestion : null
+    ]
+    return (
+      <React.Fragment>
+        <View style={styles.framedSegmentInlineChildren}>
+          <AppTextInput
+            style={inputStyle}
+            autoFocus={true}
+            value={shouldShowSuggestion ? suggestedTemperature : temperature}
+            onChangeText={this.setTemperature}
+            keyboardType='numeric'
+            maxLength={5}
+            testID='temperatureInput'
+          />
+          <AppText style={{ marginLeft: 5 }}>°C</AppText>
+        </View>
+        <OutOfRangeWarning temperature={this.props.temperature} />
+      </React.Fragment>
+    )
+  }
+}
+
+const OutOfRangeWarning = ({ temperature }) => {
+  if (temperature === '') {
+    return false
+  }
+
+  const value = Number(temperature)
+  const { min, max } = config.temperatureScale
+  const range = { min, max }
+  const scale = scaleObservable.value
+
+  let warningMsg
+
+  if (value < range.min || value > range.max) {
+    warningMsg = labels.outOfAbsoluteRangeWarning
+  } else if (value < scale.min || value > scale.max) {
+    warningMsg = labels.outOfRangeWarning
+  } else {
+    warningMsg = null
+  }
+
+  return <AppText style={styles.hint}>{warningMsg}</AppText>
+}
+
+OutOfRangeWarning.propTypes = {
+  temperature: PropTypes.string.isRequired
+}

components/cycle-day/symptoms/temperature.js

@@ -1,58 +1,48 @@
-import React from 'react'
-import {
-  View,
-  Switch,
-  Keyboard,
-  ScrollView
-} from 'react-native'
-import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import padWithZeros from '../../helpers/pad-time-with-zeros'
+import React, { Component } from 'react'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
 
-import { getPreviousTemperature } from '../../../db'
-import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
 import { temperature as labels } from '../../../i18n/en/cycle-day'
-import { scaleObservable } from '../../../local-storage'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
-import config from '../../../config'
+
 import AppTextInput from '../../app-text-input'
-import AppText from '../../app-text'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
+import TimeInput from './time-input'
+import TemperatureInput from './temperature-input'
+
+import { saveSymptom } from '../../../db'
 
 const minutes = ChronoUnit.MINUTES
 
-export default class Temp extends SymptomView {
+class Temperature extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
+
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.temperature = cycleDay && cycleDay.temperature
+    const symptom = 'temperature'
+    const { cycleDay } = props
 
-    const temp = this.temperature
-
-    this.state = {
-      exclude: temp ? temp.exclude : false,
-      time: temp ? temp.time : LocalTime.now().truncatedTo(minutes).toString(),
-      isTimePickerVisible: false,
-      note: temp ? temp.note : null
+    const defaultSymptomData = {
+      time: LocalTime.now().truncatedTo(minutes).toString(),
+      temperature: null,
+      note: '',
+      exclude: false
     }
 
-    if (temp) {
-      this.state.temperature = temp.value.toString()
-      if (temp.value === Math.floor(temp.value)) {
-        this.state.temperature = `${this.state.temperature}.0`
-      }
-      this.state.outOfRangeWarning = makeOutOfRangeWarningMessage(this.state.temperature)
-    } else {
-      const prevTemp = getPreviousTemperature(props.date)
-      if (prevTemp) {
-        this.state.suggestedTemperature = prevTemp.toString()
-        this.state.isSuggestion = true
-      }
-    }
-  }
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
 
-  symptomName = 'temperature'
+    const { value, ...restSymptomData } = symptomData
+    this.state = { temperature: value, ...restSymptomData }
+
+    this.symptom = symptom
+  }
 
   isDeleteIconActive() {
     return ['temperature', 'note', 'exclude'].some(key => {
@@ -63,88 +53,59 @@ export default class Temp extends SymptomView {
   }
 
   autoSave = () => {
-    if (typeof this.state.temperature != 'string' || this.state.temperature === '') {
-      this.deleteSymptomEntry()
-      return
+    const { date } = this.props
+    const { temperature, exclude, time, note } = this.state
+
+    const valuesToSave = {
+      value: temperature,
+      exclude,
+      time,
+      note
     }
 
-    const dataToSave = {
-      value: Number(this.state.temperature),
-      exclude: this.state.exclude,
-      time: this.state.time,
-      note: this.state.note
+    saveSymptom(this.symptom, date, temperature ? valuesToSave : null)
   }
 
-    this.saveSymptomEntry(dataToSave)
+  setTime = (time) => {
+    this.setState({ time })
   }
 
-
   setTemperature = (temperature) => {
-    if (isNaN(Number(temperature))) return
-    this.setState({
-      temperature, isSuggestion: false,
-      outOfRangeWarning: makeOutOfRangeWarningMessage(temperature)
-    })
+    this.setState({ temperature })
   }
 
   setNote = (note) => {
     this.setState({ note })
   }
 
-  showTimePicker = () => {
-    Keyboard.dismiss()
-    this.setState({ isTimePickerVisible: true })
+  componentDidUpdate() {
+    this.autoSave()
   }
 
-  renderContent() {
-    const inputStyle = [styles.temperatureTextInput]
-    if (this.state.isSuggestion) {
-      inputStyle.push(styles.temperatureTextInputSuggestion)
-    }
+  render() {
+    const { temperature } = this.state
+
     return (
-      <ScrollView style={styles.page}>
+      <SymptomView
+        symptom={'temperature'}
+        values={this.state}
+        date={this.props.date}
+      >
         <SymptomSection
           header={labels.temperature.header}
           explainer={labels.temperature.explainer}
         >
-          <View style={styles.framedSegmentInlineChildren}>
-            <AppTextInput
-              style={[inputStyle]}
-              autoFocus={true}
-              value={this.state.temperature || this.state.suggestedTemperature}
-              onChangeText={this.setTemperature}
-              keyboardType='numeric'
-              maxLength={5}
+          <TemperatureInput
+            temperature={temperature ? temperature.toFixed(2) : ''}
+            date={this.props.date}
+            handleTemperatureChange={this.setTemperature}
           />
-            <AppText style={{ marginLeft: 5 }}>°C</AppText>
-          </View>
-          {this.state.outOfRangeWarning &&
-            <AppText style={styles.hint}>
-              {this.state.outOfRangeWarning}
-            </AppText>
-          }
         </SymptomSection>
-        <SymptomSection
-          header={labels.time}
-        >
-          <View style={styles.framedSegmentInlineChildren}>
-            <AppTextInput
-              style={[styles.temperatureTextInput]}
-              onFocus={this.showTimePicker}
-              value={this.state.time}
+        <SymptomSection header={labels.time}>
+          <TimeInput
+            time={this.state.time}
+            handleTimeChange={this.setTime}
           />
-            <DateTimePicker
-              mode="time"
-              isVisible={this.state.isTimePickerVisible}
-              onConfirm={jsDate => {
-                this.setState({
-                  time: padWithZeros(jsDate),
-                  isTimePickerVisible: false
-                })
-              }}
-              onCancel={() => this.setState({ isTimePickerVisible: false })}
-            />
-          </View>
         </SymptomSection>
         <SymptomSection
           header={labels.note.header}
@@ -152,10 +113,10 @@ export default class Temp extends SymptomView {
         >
           <AppTextInput
             multiline={true}
-            autoFocus={this.state.focusTextArea}
             placeholder={sharedLabels.enter}
             value={this.state.note}
             onChangeText={this.setNote}
+            testID='noteInput'
           />
         </SymptomSection>
         <SymptomSection
@@ -170,26 +131,9 @@ export default class Temp extends SymptomView {
             value={this.state.exclude}
           />
         </SymptomSection>
-      </ScrollView>
+      </SymptomView>
     )
   }
 }
 
-function makeOutOfRangeWarningMessage(temperature) {
-  if (temperature === '') return
-  const value = Number(temperature)
-  const { min, max } = config.temperatureScale
-  const range = { min, max }
-  const scale = scaleObservable.value
-  let warningMsg
-
-  if (value < range.min || value > range.max) {
-    warningMsg = labels.outOfAbsoluteRangeWarning
-  } else if (value < scale.min || value > scale.max) {
-    warningMsg = labels.outOfRangeWarning
-  } else {
-    warningMsg = null
-  }
-
-  return warningMsg
-}
+export default Temperature

components/cycle-day/symptoms/time-input.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Keyboard } from 'react-native'
+
+import AppTextInput from '../../app-text-input'
+import styles from '../../../styles'
+
+import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
+import moment from 'moment'
+
+export default class TimeInput extends Component {
+
+  static propTypes = {
+    time: PropTypes.string,
+    handleTimeChange: PropTypes.func,
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isTimePickerVisible: false,
+    }
+  }
+
+  showTimePicker = () => {
+    Keyboard.dismiss()
+    this.setState({ isTimePickerVisible: true })
+  }
+
+  hideTimePicker = () => {
+    this.setState({ isTimePickerVisible: false })
+  }
+
+  handleConfirm = (jsDate) => {
+    // DateTimePicker also when in mode="time" returns full date (with time)
+    const time = moment(jsDate).format('HH:mm')
+    this.props.handleTimeChange(time)
+    this.setState({
+      isTimePickerVisible: false
+    })
+  }
+
+  render () {
+    return (
+      <React.Fragment>
+        <AppTextInput
+          style={styles.temperatureTextInput}
+          onFocus={this.showTimePicker}
+          value={this.props.time}
+          testID='timeInput'
+        />
+        <DateTimePicker
+          mode="time"
+          isVisible={this.state.isTimePickerVisible}
+          onConfirm={this.handleConfirm}
+          onCancel={this.hideTimePicker}
+        />
+      </React.Fragment>
+    )
+  }
+}

components/framed-segment.js

@@ -5,21 +5,24 @@ import { View } from 'react-native'
 import AppText from './app-text'
 import styles from '../styles'
 
-const FramedSegment = ({children, ...props}) => {
-  const style = [styles.framedSegment, props.style]
-  if (props.last) style.push(styles.framedSegmentLast)
+const FramedSegment = ({ children, last, style, title }) => {
+  const viewStyle = [styles.framedSegment, style]
+  if (last) viewStyle.push(styles.framedSegmentLast)
   return (
-    <View style={[style]}>
-      {
-        props.title
-        && <AppText style={styles.framedSegmentTitle}>{props.title}</AppText>
-      }
+    <View style={[viewStyle]}>
+      {title && <AppText style={styles.framedSegmentTitle}>{title}</AppText>}
       {children}
     </View>
   )
 }
 
 FramedSegment.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  last: PropTypes.bool,
+  style: PropTypes.object,
   title: PropTypes.string
 }
 

components/header/back-button.js

@@ -1,24 +0,0 @@
-import React from 'react'
-import {
-  Text,
-  View
-} from 'react-native'
-import styles from '../../styles'
-import NavigationArrow from './navigation-arrow'
-
-export default function BackButtonHeader(props) {
-  return (
-    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
-      <View
-        style={styles.accentCircle}
-        left={props.middle - styles.accentCircle.width / 2}
-      />
-      <NavigationArrow direction='left' {...props}/>
-      <View>
-        <Text style={styles.headerText}>
-          {props.title}
-        </Text>
-      </View>
-    </View>
-  )
-}

components/header/cycle-day.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text} from 'react-native'
-import styles from '../../styles'
-import NavigationArrow from './navigation-arrow'
-import formatDate from '../helpers/format-date'
-
-export default function CycleDayHeader({ date, ...props }) {
-  return (<View style={[styles.header, styles.headerCycleDay]}>
-    <View
-      style={styles.accentCircle}
-      left={props.middle - styles.accentCircle.width / 2}
-    />
-    <NavigationArrow direction='left' {...props}/>
-    <View>
-      <Text style={styles.dateHeader}>
-        {formatDate(date)}
-      </Text>
-      {props.cycleDayNumber &&
-        <Text style={styles.cycleDayNumber}>
-          {`Cycle day ${props.cycleDayNumber}`.toLowerCase()}
-        </Text>}
-    </View>
-    <NavigationArrow direction='right' {...props}/>
-  </View>
-  )
-}

components/header/default.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text} from 'react-native'
-import styles from '../../styles'
-
-export default function DefaultHeader(props) {
-  return (
-    <View style={styles.header}>
-      <View style={styles.accentCircle} />
-      <Text style={styles.headerText}>
-        {props.title}
-      </Text>
-    </View >
-  )
-}

components/header/delete-icon.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+import Icon from 'react-native-vector-icons/AntDesign'
+
+import styles, { iconStyles } from '../../styles'
+
+export default function DeleteIcon({ handleDelete }) {
+
+  return (
+    <TouchableOpacity
+      onPress={handleDelete}
+      style={styles.headerDeleteButton}
+      testID="deleteIcon"
+    >
+      <Icon
+        name="delete"
+        {...iconStyles.symptomHeaderIcons}
+      />
+    </TouchableOpacity>
+  )
+}
+
+DeleteIcon.propTypes = {
+  handleDelete: PropTypes.func,
+}

components/header/index.js

@@ -1,19 +1,36 @@
 import React from 'react'
-import { Dimensions } from 'react-native'
-import CycleDayHeader from './cycle-day'
-import DefaultHeader from './default'
-import BackButtonHeader from './back-button'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
 
-export default function Header(p) {
-  const middle = Dimensions.get('window').width / 2
-  const props = Object.assign({}, p, {middle})
+import Title from './title'
+import NavigationArrow from './navigation-arrow'
+import DeleteIcon from './delete-icon'
 
-  if (props.isCycleDayOverView) {
-    return (<CycleDayHeader {...props} />)
-  } else if (props.showBackButton) {
-    return (<BackButtonHeader {...props} />)
-  }
-  else {
-    return (<DefaultHeader {...props} />)
-  }
+import styles from '../../styles'
+
+export default function Header({
+  handleBack,
+  handleNext,
+  handleDelete,
+  title,
+  subtitle,
+}) {
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.accentCircle} />
+      { handleBack && <NavigationArrow handleBack={handleBack} /> }
+      <Title title={title} subtitle={subtitle} />
+      { handleNext && <NavigationArrow handleNext={handleNext} /> }
+      { handleDelete && <DeleteIcon handleDelete={handleDelete} /> }
+    </View >
+  )
+}
+
+Header.propTypes = {
+  handleBack: PropTypes.func,
+  handleDelete: PropTypes.func,
+  handleNext: PropTypes.func,
+  subtitle: PropTypes.string,
+  title: PropTypes.string.isRequired
 }

components/header/navigation-arrow.js

@@ -1,35 +1,30 @@
 import React from 'react'
 import { TouchableOpacity } from 'react-native'
-import styles, { iconStyles } from '../../styles'
+import PropTypes from 'prop-types'
 import Icon from 'react-native-vector-icons/Entypo'
 
-export default function NavigationArrow(props) {
-  const iconName = {
-    left: 'chevron-thin-left',
-    right: 'chevron-thin-right'
-  }[props.direction]
-  const iconPosition = {
-    left: 'navigationArrowLeft',
-    right: 'navigationArrowRight'
-  }[props.direction]
-  let pressHandler
-  if (props.goBack) {
-    pressHandler = () => props.goBack()
-  } else {
-    pressHandler = () => {
-      const target = props.direction === 'left' ? 'before' : 'after'
-      props.goToCycleDay(target)
-    }
-  }
+import styles, { iconStyles } from '../../styles'
+
+export default function NavigationArrow({ handleBack, handleNext }) {
+  const navigationDirection = handleBack ? 'Left' : 'Right'
   return (
     <TouchableOpacity
-      style={[styles.navigationArrow, styles[iconPosition]]}
-      onPress={pressHandler}
+      style={[
+        styles.navigationArrow,
+        styles[`navigationArrow${navigationDirection}`]
+      ]}
+      onPress={ handleBack || handleNext }
+      testID={ handleBack ? 'backButton' : 'nextButton'}
     >
       <Icon
-        name={iconName}
+        name={`chevron-thin-${navigationDirection.toLowerCase()}`}
         {...iconStyles.navigationArrow}
       />
     </TouchableOpacity>
   )
 }
+
+NavigationArrow.propTypes = {
+  handleBack: PropTypes.func,
+  handleNext: PropTypes.func,
+}

components/header/symptom-view.js

@@ -1,49 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native'
-import styles, { iconStyles } from '../../styles'
-import Icon from 'react-native-vector-icons/AntDesign'
-import NavigationArrow from './navigation-arrow'
-import formatDate from '../helpers/format-date'
-
-export default function SymptomViewHeader(props) {
-  const middle = Dimensions.get('window').width / 2
-  return (
-    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
-      <View
-        style={styles.accentCircle}
-        left={middle - styles.accentCircle.width / 2}
-      />
-      <NavigationArrow
-        direction='left'
-        {...props}
-      />
-      <View>
-        <Text style={styles.dateHeader}>
-          {props.title}
-        </Text>
-        <Text style={styles.cycleDayNumber}>
-          {formatDate(props.date)}
-        </Text>
-      </View >
-      { props.deleteIconActive &&
-        <TouchableOpacity
-          onPress={props.deleteEntry}
-          style={[
-            styles.headerDeleteButton,
-          ]}
-        >
-          <Icon
-            name="delete"
-            {...iconStyles.symptomHeaderIcons}
-          />
-        </TouchableOpacity>
-      }
-
-    </View>
-  )
-}

components/header/title.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { View, Text} from 'react-native'
+import PropTypes from 'prop-types'
+
+import styles from '../../styles'
+
+export default function Title({ title, subtitle }) {
+
+  if (subtitle !== undefined) {
+    return (
+      <View>
+        <Text style={styles.dateHeader} testID='headerTitle'>
+          { // design wants everyhting lowercased, but we don't
+            // have CSS pseudo properties
+            title.toLowerCase()}
+        </Text>
+        { subtitle &&
+          <Text style={styles.cycleDayNumber} testID='headerSubtitle'>
+            {subtitle.toLowerCase()}
+          </Text>
+        }
+      </View>
+    )
+  }
+
+  return (
+    <Text testID='headerTitle' style={styles.headerText}>
+      {title.toLowerCase()}
+    </Text>
+  )
+}
+
+Title.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+}

components/helpers/chart.js

@@ -0,0 +1,204 @@
+import { LocalDate } from 'js-joda'
+
+import { scaleObservable, unitObservable } from '../../local-storage'
+import { getCycleDay, getAmountOfCycleDays } from '../../db'
+
+import config from '../../config'
+
+//YAxis helpers
+
+export function normalizeToScale(temp, columnHeight) {
+  const scale = scaleObservable.value
+  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
+  return getAbsoluteValue(valueRelativeToScale, columnHeight)
+}
+
+function getAbsoluteValue(relative, columnHeight) {
+  // we add some height to have some breathing room
+  const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
+  const scaleHeight = columnHeight - 2 * verticalPadding
+  return scaleHeight * relative + verticalPadding
+}
+
+export function getTickPositions(columnHeight) {
+  const units = unitObservable.value
+  const scaleMin = scaleObservable.value.min
+  const scaleMax = scaleObservable.value.max
+  const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
+  const tickDistance = 1 / (numberOfTicks - 1)
+  const tickPositions = []
+  for (let i = 0; i < numberOfTicks; i++) {
+    const position = getAbsoluteValue(tickDistance * i, columnHeight)
+    tickPositions.push(position)
+  }
+  return tickPositions
+}
+
+export function getTickList(columnHeight) {
+
+  const units = unitObservable.value
+  const scaleMax = scaleObservable.value.max
+
+  return getTickPositions(columnHeight).map((tickPosition, i) => {
+
+    const tick = scaleMax - i * units
+    let isBold, label, shouldShowLabel
+
+    if (Number.isInteger(tick)) {
+      isBold = true
+      label = tick.toString() + '.0'
+    } else {
+      isBold = false
+      label = tick.toString()
+    }
+
+    // when temp range <= 3, units === 0.1 we show temp values with step 0.2
+    // when temp range > 3, units === 0.5 we show temp values with step 0.5
+
+    if (units === 0.1) {
+      // show label with step 0.2
+      shouldShowLabel = !(tick * 10 % 2)
+    } else {
+      // show label with step 0.5
+      shouldShowLabel = !(tick * 10 % 5)
+    }
+
+    return {
+      position: tickPosition,
+      label,
+      isBold,
+      shouldShowLabel,
+    }
+  })
+}
+
+//DayColumn helpers
+
+export function isSymptomDataComplete(symptom, dateString) {
+  const cycleDayData = getCycleDay(dateString)
+  const symptomData = cycleDayData[symptom]
+
+  const dataCompletenessCheck = {
+    'cervix': () => {
+      const { opening, firmness } = symptomData
+      return (opening !== null) && (firmness !== null)
+    },
+    'mucus': () => {
+      const { feeling, texture } = symptomData
+      return (feeling !== null) && (texture !== null)
+    },
+    'default': () => {
+      return true
+    }
+  }
+  return (dataCompletenessCheck[symptom] || dataCompletenessCheck['default'])()
+}
+
+function getInfoForNeighborColumns(dateString, columnHeight) {
+  const ret = {
+    rightY: null,
+    rightTemperatureExclude: null,
+    leftY: null,
+    leftTemperatureExclude: null
+  }
+  const target = LocalDate.parse(dateString)
+  const dayBefore = target.minusDays(1).toString()
+  const dayAfter = target.plusDays(1).toString()
+  const cycleDayBefore = getCycleDay(dayBefore)
+  const cycleDayAfter = getCycleDay(dayAfter)
+
+  if (cycleDayAfter && cycleDayAfter.temperature) {
+    ret.rightY = normalizeToScale(cycleDayAfter.temperature.value, columnHeight)
+    ret.rightTemperatureExclude = cycleDayAfter.temperature.exclude
+  }
+  if (cycleDayBefore && cycleDayBefore.temperature) {
+    ret.leftY = normalizeToScale(cycleDayBefore.temperature.value, columnHeight)
+    ret.leftTemperatureExclude = cycleDayBefore.temperature.exclude
+  }
+
+  return ret
+}
+
+export function getTemperatureProps(symptomData, columnHeight, dateString) {
+  const extractedData = {}
+  const { value, exclude } = symptomData
+  const neighborTemperatureGraphPoints =
+    getInfoForNeighborColumns(dateString, columnHeight)
+
+  for (const key in neighborTemperatureGraphPoints) {
+    extractedData[key] = neighborTemperatureGraphPoints[key]
+  }
+  return Object.assign({
+    value,
+    y: normalizeToScale(value, columnHeight),
+    temperatureExclude: exclude,
+  }, extractedData)
+}
+
+export const symptomColorMethods = {
+  'mucus': (symptomData) => {
+    const { feeling, texture } = symptomData
+    const colorIndex = feeling + texture
+    return colorIndex
+  },
+  'cervix': (symptomData) => {
+    const { opening, firmness } = symptomData
+    const isDataComplete = opening !== null && firmness !== null
+    const isClosedAndHard =
+      isDataComplete &&
+      (opening === 0 && firmness === 0)
+    const colorIndex = isClosedAndHard ? 0 : 2
+    return colorIndex
+  },
+  'sex': (symptomData) => {
+    const { solo, partner } = symptomData
+    const colorIndex = (solo !== null && partner !== null) ?
+      (solo + 2 * partner - 1) : 0
+    return colorIndex
+  },
+  'bleeding': (symptomData) => {
+    const { value } = symptomData
+    const colorIndex = value
+    return colorIndex
+  },
+  'desire': (symptomData) => {
+    const { value } = symptomData
+    const colorIndex = value
+    return colorIndex
+  },
+  'default': () => { //pain, mood, note
+    return 0
+  }
+}
+
+// Chart helpers
+
+export function makeColumnInfo() {
+  let amountOfCycleDays = getAmountOfCycleDays()
+  // if there's not much data yet, we want to show at least 30 days on the chart
+  if (amountOfCycleDays < 30) {
+    amountOfCycleDays = 30
+  } else {
+    // we don't want the chart to end abruptly before the first data day
+    amountOfCycleDays += 5
+  }
+  const localDates = getTodayAndPreviousDays(amountOfCycleDays)
+  return localDates.map(localDate => localDate.toString())
+}
+
+function getTodayAndPreviousDays(n) {
+  const today = LocalDate.now()
+  const targetDate = today.minusDays(n)
+
+  function getDaysInRange(currDate, range) {
+    if (currDate.isBefore(targetDate)) {
+      return range
+    } else {
+      range.push(currDate)
+      const next = currDate.minusDays(1)
+      return getDaysInRange(next, range)
+    }
+  }
+
+  return getDaysInRange(today, [])
+}

components/helpers/format-date.js

@@ -4,8 +4,9 @@ import moment from 'moment'
 export default function (date) {
   const today = LocalDate.now()
   const dateToDisplay = LocalDate.parse(date)
-  const formattedDate = today.equals(dateToDisplay) ? 'today' : moment(date).format('MMMM Do YYYY')
-  return formattedDate.toLowerCase()
+  return today.equals(dateToDisplay) ?
+    'today' :
+    moment(date).format('MMMM Do YYYY')
 }
 
 export function formatDateForShortText (date) {

components/helpers/home.js

@@ -0,0 +1,64 @@
+import { ChronoUnit, LocalDate } from 'js-joda'
+
+import { formatDateForShortText } from './format-date'
+
+import {
+  home as labels,
+  bleedingPrediction as predictLabels,
+} from '../../i18n/en/labels'
+
+function getTimes(prediction) {
+  const todayDate = LocalDate.now()
+  const predictedBleedingStart = LocalDate.parse(prediction[0][0])
+  /* the range of predicted bleeding days can be either 3 or 5 */
+  const predictedBleedingEnd =
+    LocalDate.parse(prediction[0][ prediction[0].length - 1 ])
+  const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
+  return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
+}
+
+export function determinePredictionText(bleedingPrediction) {
+  if (!bleedingPrediction.length) return predictLabels.noPrediction
+  const {
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(bleedingPrediction)
+  if (todayDate.isBefore(predictedBleedingStart)) {
+    return predictLabels.predictionInFuture(
+      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
+      todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
+    )
+  }
+  if (todayDate.isAfter(predictedBleedingEnd)) {
+    return predictLabels.predictionInPast(
+      formatDateForShortText(predictedBleedingStart),
+      formatDateForShortText(predictedBleedingEnd)
+    )
+  }
+  if (daysToEnd === 0) {
+    return predictLabels.predictionStartedNoDaysLeft
+  } else if (daysToEnd === 1) {
+    return predictLabels.predictionStarted1DayLeft
+  } else {
+    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
+  }
+}
+
+export function getBleedingPredictionRange(prediction) {
+  if (!prediction.length) return labels.unknown
+  const {
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(prediction)
+  if (todayDate.isBefore(predictedBleedingStart)) {
+    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
+  }
+  if (todayDate.isAfter(predictedBleedingEnd)) {
+    return labels.unknown
+  }
+  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
+}

components/helpers/labels.js

@@ -0,0 +1,2 @@
+export const getLabelsList =
+  (categories) => categories.map((label, i) => ({ label, value: i }))

components/home-element.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import Button from './button'
+
+import styles from '../styles'
+
+const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => {
+  return (
+    <View
+      onPress={ onPress }
+      style={ styles.homeElement }
+    >
+      <View style={styles.homeIconAndText}>
+        {children[0]}
+        {children[1]}
+      </View>
+
+      <View style={{paddingLeft: 15}}>
+        {children.slice(2)}
+        <Button
+          style={styles.homeButton}
+          onPress={ onPress }
+          backgroundColor={ buttonColor }>
+          { buttonLabel }
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+HomeElement.propTypes = {
+  buttonColor: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+}
+
+export default HomeElement

components/home.js

@@ -1,136 +1,126 @@
-import { ChronoUnit, LocalDate } from 'js-joda'
+import { LocalDate } from 'js-joda'
 import React, { Component } from 'react'
 import { ScrollView, View } from 'react-native'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+import { navigate } from '../slices/navigation'
+import { getDate, setDate } from '../slices/date'
 
 import DripHomeIcon from '../assets/drip-home-icons'
-import { getCycleDay } from '../db'
-import {
-  bleedingPrediction as predictLabels,
-  home as labels
-} from '../i18n/en/labels'
+
+import AppText from './app-text'
+import IconText from './icon-text'
+import HomeElement from './home-element'
+
+import { home as labels } from '../i18n/en/labels'
 import links from '../i18n/en/links'
+
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
+import {
+  determinePredictionText,
+  getBleedingPredictionRange
+} from './helpers/home'
+
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
-import AppText from './app-text'
-import Button from './button'
-import { formatDateForShortText } from './helpers/format-date'
 
-const IconText = ({ children, wrapperStyles }) => {
-  return (
-    <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
-      <AppText style={styles.iconText}>
-        { children }
-      </AppText>
-    </View>
-  )
-}
+class Home extends Component {
 
-const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
-  return (
-    <View
-      onPress={ onPress }
-      style={ styles.homeElement }
-    >
-      <View style={styles.homeIconAndText}>
-        {children[0]}
-        {children[1]}
-      </View>
+  static propTypes = {
+    navigate: PropTypes.func,
+    setDate: PropTypes.func,
+    // The following are not being used,
+    // we could see if it's possible to not pass them from the <App />
+    cycleDay: PropTypes.object,
+    date: PropTypes.string,
+  }
 
-      <View style={{paddingLeft: 15}}>
-        {children.slice(2)}
-        <Button
-          style={styles.homeButton}
-          onPress={ onPress }
-          backgroundColor={ buttonColor }>
-          { buttonLabel }
-        </Button>
-      </View>
-    </View>
-  )
-}
-
-export default class Home extends Component {
   constructor(props) {
     super(props)
+
     const { getCycleDayNumber, getPredictedMenses } = cycleModule()
-    this.getCycleDayNumber = getCycleDayNumber
-    this.getBleedingPrediction = getPredictedMenses
+
     this.todayDateString = LocalDate.now().toString()
-    const prediction = this.getBleedingPrediction()
-    const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
+    this.cycleDayNumber = getCycleDayNumber(this.todayDateString)
 
-    this.state = {
-      cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
-      predictionText: determinePredictionText(prediction),
-      bleedingPredictionRange: getBleedingPredictionRange(prediction),
-      ...fertilityStatus
-    }
+    const prediction = getPredictedMenses()
+    this.predictionText = determinePredictionText(prediction)
+    this.bleedingPredictionRange = getBleedingPredictionRange(prediction)
+
+    this.fertilityStatus = getFertilityStatusForDay(this.todayDateString)
   }
 
-  passTodayTo(componentName) {
-    const { navigate } = this.props
-    navigate(componentName, {
-      date: this.todayDateString,
-      cycleDay: getCycleDay(this.todayDateString)
-    })
+  navigateToCycleDayView = () => {
+    this.props.setDate(this.todayDateString)
+    this.props.navigate('CycleDay')
+  }
+
+  navigateToBleedingEditView = () => {
+    this.props.setDate(this.todayDateString)
+    this.props.navigate('BleedingEditView')
+  }
+
+  navigateToChart = () => {
+    this.props.navigate('Chart')
   }
 
   render() {
-    const { cycleDayNumber, phase, status } = this.state
-    const { navigate } = this.props
+    const {
+      cycleDayNumber,
+      predictionText,
+      bleedingPredictionRange,
+    } = this
+
+    const { phase, status, statusText } = this.fertilityStatus
+
     const cycleDayMoreText = cycleDayNumber ?
       labels.cycleDayKnown(cycleDayNumber) :
       labels.cycleDayNotEnoughInfo
 
-    const { statusText } = this.state
-
     return (
       <View flex={1}>
         <ScrollView>
           <View style={styles.homeView}>
-
             <HomeElement
-              onPress={ () => this.passTodayTo('CycleDay') }
+              onPress={this.navigateToCycleDayView}
               buttonColor={ cycleDayColor }
               buttonLabel={ labels.editToday }
             >
               <View>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
-              <IconText wrapperStyles={styles.wrapperIcon}>
-                {cycleDayNumber || labels.unknown}
-              </IconText>
+              <IconText>{cycleDayNumber || labels.unknown}</IconText>
 
-              <AppText style={styles.homeDescriptionText}>{cycleDayMoreText}</AppText>
+              <AppText style={styles.homeDescriptionText}>
+                {cycleDayMoreText}
+              </AppText>
             </HomeElement>
 
             <HomeElement
-              onPress={ () => this.passTodayTo('BleedingEditView') }
+              onPress={this.navigateToBleedingEditView}
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
               <DripHomeIcon name="drop" size={100} color={periodColor} />
 
-              <IconText wrapperStyles={{top: '45%', ...styles.wrapperIcon}}>
-                {this.state.bleedingPredictionRange}
+              <IconText wrapperStyles={{ top: '45%' }}>
+                {bleedingPredictionRange}
               </IconText>
 
               <AppText style={styles.homeDescriptionText}>
-                {this.state.predictionText}
+                {predictionText}
               </AppText>
             </HomeElement>
 
             <HomeElement
-              onPress={ () => navigate('Chart') }
+              onPress={this.navigateToChart}
               buttonColor={ secondaryColor }
               buttonLabel={ labels.checkFertility }
             >
               <View style={styles.homeCircle}/>
 
-              <IconText wrapperStyles={styles.wrapperIcon}>
-                { phase ? phase.toString() : labels.unknown }
-              </IconText>
+              <IconText>{ phase ? phase.toString() : labels.unknown }</IconText>
 
               { phase &&
                 <AppText style={styles.homeDescriptionText}>
@@ -148,47 +138,20 @@ export default class Home extends Component {
   }
 }
 
-function getTimes(prediction) {
-  const todayDate = LocalDate.now()
-  const predictedBleedingStart = LocalDate.parse(prediction[0][0])
-  /* the range of predicted bleeding days can be either 3 or 5 */
-  const predictedBleedingEnd = LocalDate.parse(prediction[0][ prediction[0].length - 1 ])
-  const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
-  return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
 }
 
-function determinePredictionText(bleedingPrediction) {
-  if (!bleedingPrediction.length) return predictLabels.noPrediction
-  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } = getTimes(bleedingPrediction)
-  if (todayDate.isBefore(predictedBleedingStart)) {
-    return predictLabels.predictionInFuture(
-      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
-      todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
-    )
-  }
-  if (todayDate.isAfter(predictedBleedingEnd)) {
-    return predictLabels.predictionInPast(
-      formatDateForShortText(predictedBleedingStart),
-      formatDateForShortText(predictedBleedingEnd)
-    )
-  }
-  if (daysToEnd === 0) {
-    return predictLabels.predictionStartedNoDaysLeft
-  } else if (daysToEnd === 1) {
-    return predictLabels.predictionStarted1DayLeft
-  } else {
-    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
-  }
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+    setDate: (date) => dispatch(setDate(date)),
+  })
 }
 
-function getBleedingPredictionRange(prediction) {
-  if (!prediction.length) return labels.unknown
-  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } = getTimes(prediction)
-  if (todayDate.isBefore(predictedBleedingStart)) {
-    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
-  }
-  if (todayDate.isAfter(predictedBleedingEnd)) {
-    return labels.unknown
-  }
-  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
-}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Home)

components/icon-text.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import styles from '../styles'
+
+const IconText = ({ children, wrapperStyles }) => {
+  return (
+    <View style={[ styles.homeIconTextWrapper, wrapperStyles ]}>
+      <AppText style={styles.iconText}>
+        { children }
+      </AppText>
+    </View>
+  )
+}
+
+IconText.propTypes = {
+  children: PropTypes.node,
+  wrapperStyles: PropTypes.object,
+}
+
+export default IconText

components/license.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ScrollView, View, BackHandler } from 'react-native'
 import AppText from './app-text'
 import { shared } from '../i18n/en/labels'
@@ -10,14 +11,15 @@ import { saveLicenseFlag } from '../local-storage'
 const labels = settingsLabels.license
 export default function License({setLicense}) {
   return (
-    <ScrollView style={styles.licensePage}>
+    <ScrollView testID='licensePage' style={styles.licensePage}>
       <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
-      <AppText>{labels.text}</AppText>
+      <AppText testID='test'>{labels.text}</AppText>
       <View style={styles.licenseButtons}>
         <Button
           style={styles.licenseButton}
           backgroundColor={'grey'}
           onPress={() => BackHandler.exitApp()}
+          testID='licenseCancelButton'
         >
           {shared.cancel}
         </Button>
@@ -28,6 +30,7 @@ export default function License({setLicense}) {
             await saveLicenseFlag()
             setLicense()
           }}
+          testID='licenseOkButton'
         >
           {shared.ok}
         </Button>
@@ -35,3 +38,7 @@ export default function License({setLicense}) {
     </ScrollView>
   )
 }
+
+License.propTypes = {
+  setLicense: PropTypes.func.isRequired
+}

components/link.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Hyperlink from 'react-native-hyperlink'
 import styles from '../styles'
 import links from '../i18n/en/links'
@@ -15,6 +16,13 @@ export default function Link(props) {
   )
 }
 
+Link.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ])
+}
+
 function replaceUrlWithText(url) {
   const link = Object.values(links).find(l => l.url === url)
   return (link && link.text) || url

components/menu.js

@@ -1,84 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text,
-  TouchableOpacity
-} from 'react-native'
-
-import settingsViews from './settings'
-
-import { menuTitles } from '../i18n/en/labels'
-
-import styles, { iconStyles, secondaryColor } from '../styles'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
-  acc[curr] = menuTitles[curr].toLowerCase()
-  return acc
-}, {})
-
-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',
-    children: Object.keys(settingsViews),
-  }
-]
-
-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, children }) => {
-        const isActive = (component === currentPage) ||
-          (children && children.indexOf(currentPage) !== -1)
-        return (
-          <MenuItem
-            key={labelKey}
-            labelKey={labelKey}
-            icon={icon}
-            active={isActive}
-            onPress={() => navigate(component)}
-          />
-        )}
-      )}
-    </View >
-  )
-}
-
-export default Menu

components/menu/index.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import MenuItem from './menu-item'
+
+import { connect } from 'react-redux'
+import { getNavigation, navigate } from '../../slices/navigation'
+
+import { pages } from '../pages'
+
+import styles from '../../styles'
+
+const Menu = ({ navigate, navigation }) => {
+  const menuItems = pages.filter(page => page.isInMenu)
+  return (
+    <View style={styles.menu}>
+      { menuItems.map(({ icon, label, component, children }) => {
+        const isActive = (component === navigation.currentPage) ||
+          (children && children.indexOf(navigation.currentPage) !== -1)
+        return (
+          <MenuItem
+            key={label}
+            label={label}
+            icon={icon}
+            active={isActive}
+            onPress={() => navigate(component)}
+          />
+        )}
+      )}
+    </View >
+  )
+}
+
+Menu.propTypes = {
+  navigation: PropTypes.object,
+  navigate: PropTypes.func,
+}
+
+const mapStateToProps = (state) => {
+  return({
+    navigation: getNavigation(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Menu)

components/menu/menu-item.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text, TouchableOpacity } from 'react-native'
+
+import styles, { iconStyles, secondaryColor } from '../../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+import { menuTitles } from '../../i18n/en/labels'
+
+const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
+  acc[curr] = menuTitles[curr].toLowerCase()
+  return acc
+}, {})
+
+export default function MenuItem({ active, icon, label, onPress }) {
+  const styleActive = active ? { color: secondaryColor } : null
+
+  return (
+    <TouchableOpacity style={styles.menuItem} onPress={onPress} >
+      <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
+      <Text
+        testID={active ? 'activeMenuItem' : `menuItem${label}`}
+        style={[styles.menuText, styleActive]}
+      >
+        {menuTitlesLowerCase[label]}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+MenuItem.propTypes = {
+  active: PropTypes.bool,
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+}

components/pages.js

@@ -0,0 +1,89 @@
+import symptomViews from './cycle-day/symptoms'
+import settingsViews from './settings'
+
+import settingsLabels from '../i18n/en/settings'
+const labels = settingsLabels.menuTitles
+
+const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
+  component: symptomView,
+  parent: 'CycleDay',
+}))
+
+export const isSymptomView =
+  (page) => Object.keys(symptomViews).includes(page)
+
+export const isSettingsView =
+  (page) => Object.keys(settingsViews).includes(page)
+
+export const pages = [
+  {
+    component: 'Home',
+    icon: 'home',
+    isInMenu: true,
+    label: 'Home',
+  },
+  {
+    component: 'Calendar',
+    icon: 'calendar-range',
+    isInMenu: true,
+    label: 'Calendar',
+    parent: 'Home',
+  },
+  {
+    component: 'Chart',
+    icon: 'chart-line',
+    isInMenu: true,
+    label: 'Chart',
+    parent: 'Home',
+  },
+  {
+    component: 'Stats',
+    icon: 'chart-pie',
+    isInMenu: true,
+    label: 'Stats',
+    parent: 'Home',
+  },
+  {
+    children: Object.keys(settingsViews),
+    component: 'SettingsMenu',
+    icon: 'settings',
+    isInMenu: true,
+    label: 'Settings',
+    parent: 'Home',
+  },
+  {
+    component: 'Reminders',
+    label: labels.reminders,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'NfpSettings',
+    label: labels.nfpSettings,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'DataManagement',
+    label: labels.dataManagement,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'Password',
+    label: labels.password,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'About',
+    label: labels.about,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'License',
+    label: labels.license,
+    parent: 'SettingsMenu',
+  },
+  {
+    component: 'CycleDay',
+    parent: 'Home',
+  },
+  ...symptomsPages
+]

components/password-prompt.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { View, TextInput, TouchableOpacity, Alert } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { saveEncryptionFlag } from '../local-storage'
@@ -9,6 +10,10 @@ import { passwordPrompt as labels, shared, menuTitles } from '../i18n/en/labels'
 import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 
 export default class PasswordPrompt extends Component {
+  static propTypes = {
+    enableShowApp: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props)
     this.state = {
@@ -20,19 +25,6 @@ export default class PasswordPrompt extends Component {
       this.passHashToDb,
       this
     )
-
-    this.tryToOpenDb()
-  }
-
-  async tryToOpenDb() {
-    const connected = await openDb()
-    if (!connected) {
-      this.setState({ showPasswordPrompt: true })
-      await saveEncryptionFlag(true)
-      return
-    }
-    await saveEncryptionFlag(false)
-    this.props.showApp()
   }
 
   passHashToDb = async hash => {
@@ -48,7 +40,7 @@ export default class PasswordPrompt extends Component {
       )
       return
     }
-    this.props.showApp()
+    this.props.enableShowApp()
   }
 
   confirmDeletion = async () => {
@@ -72,7 +64,7 @@ export default class PasswordPrompt extends Component {
               onPress: async () => {
                 await deleteDbAndOpenNew()
                 await saveEncryptionFlag(false)
-                this.props.showApp()
+                this.props.enableShowApp()
               }
             }]
           )
@@ -89,9 +81,7 @@ export default class PasswordPrompt extends Component {
     return (
       <View flex={1}>
         <Header title={menuTitles.PasswordPrompt.toLowerCase()} />
-        {this.state.showPasswordPrompt &&
         <View style={styles.passwordPromptPage}>
-
           <TextInput
             onChangeText={val => this.setState({ password: val })}
             style={styles.passwordPromptField}
@@ -117,7 +107,6 @@ export default class PasswordPrompt extends Component {
             </AppText>
           </TouchableOpacity>
         </View>
-        }
       </View>
     )
   }

components/settings/settings-menu.js

@@ -1,10 +1,14 @@
 import React from 'react'
-import {
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native'
+import PropTypes from 'prop-types'
+import { TouchableOpacity, ScrollView } from 'react-native'
+import { connect } from 'react-redux'
+
+import { navigate } from '../../slices/navigation'
+
 import styles from '../../styles/index'
+
 import settingsLabels from '../../i18n/en/settings'
+
 import AppText from '../app-text'
 
 const labels = settingsLabels.menuTitles
@@ -18,7 +22,7 @@ const menu = [
   {title: labels.license, component: 'License'}
 ]
 
-export default function SettingsMenu(props) {
+const SettingsMenu = ({ navigate }) => {
   return (
     <ScrollView>
       { menu.map(menuItem)}
@@ -30,10 +34,25 @@ export default function SettingsMenu(props) {
       <TouchableOpacity
         style={styles.framedSegment}
         key={item.title}
-        onPress={() => props.navigate(item.component)}
+        onPress={() => navigate(item.component)}
       >
         <AppText>{item.title.toLowerCase()}</AppText>
       </TouchableOpacity>
     )
   }
 }
+
+SettingsMenu.propTypes = {
+  navigate: PropTypes.func.isRequired
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(SettingsMenu)

components/settings/shared/settings-button.js

@@ -28,8 +28,11 @@ const SettingsButton = ({ children, style, secondary, ...props }) => {
 }
 
 SettingsButton.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
   onPress: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
+  secondary: PropTypes.bool,
+  style: PropTypes.object
 }
 
 export default SettingsButton

components/views.js

@@ -0,0 +1,19 @@
+import Home from './home'
+import Calendar from './calendar'
+import CycleDay from './cycle-day/cycle-day-overview'
+import symptomViews from './cycle-day/symptoms'
+import Chart from './chart/chart'
+import SettingsMenu from './settings/settings-menu'
+import settingsViews from './settings'
+import Stats from './stats'
+
+export const viewsList = {
+  Home,
+  Calendar,
+  CycleDay,
+  Chart,
+  SettingsMenu,
+  ...settingsViews,
+  Stats,
+  ...symptomViews
+}

config.js

@@ -1,7 +1,9 @@
 const config = {
   columnWidth: 25,
   xAxisHeightPercentage: 0.08,
+  xAxisHeightPercentageLarge: 0.12,
   symptomHeightPercentage: 0.05,
+  symptomHeightPercentageLarge: 0.1,
   temperatureScale: {
     defaultLow: 35,
     defaultHigh: 38,
@@ -9,7 +11,17 @@ const config = {
     max: 40,
     units: 0.1,
     verticalPadding: 0.03
-  }
+  },
+  symptoms: [
+    'bleeding',
+    'mucus',
+    'cervix',
+    'sex',
+    'desire',
+    'pain',
+    'mood',
+    'note'
+  ],
 }
 
 config.columnMiddle = config.columnWidth / 2

db/index.js

@@ -5,9 +5,10 @@ import fs from 'react-native-fs'
 import restart from 'react-native-restart'
 import schemas from './schemas'
 import cycleModule from '../lib/cycle'
+import maybeSetNewCycleStart from '../lib/set-new-cycle-start'
 
 let db
-let isMensesStart
+let checkIsMensesStart
 let getMensesDaysRightAfter
 
 export async function openDb (hash) {
@@ -50,11 +51,15 @@ export async function openDb (hash) {
 
   db = connection
   const cycle = cycleModule()
-  isMensesStart = cycle.isMensesStart
+  checkIsMensesStart = cycle.isMensesStart
   getMensesDaysRightAfter = cycle.getMensesDaysRightAfter
   return true
 }
 
+export function closeDb() {
+  db.close()
+}
+
 export function getBleedingDaysSortedByDate() {
   return db.objects('CycleDay').filtered('bleeding != null').sorted('date', true)
 }
@@ -73,52 +78,21 @@ export function saveSymptom(symptom, date, val) {
   if (!cycleDay) cycleDay = createCycleDay(date)
 
   db.write(() => {
-    if (bleedingValueDeleted(symptom, val)) {
-      cycleDay.bleeding = val
-      cycleDay.isCycleStart = false
-      maybeSetNewCycleStart(cycleDay, val)
-    } else if (bleedingValueAddedOrChanged(symptom, val)) {
-      cycleDay.bleeding = val
-      cycleDay.isCycleStart = isMensesStart(cycleDay)
-      maybeClearOldCycleStarts(cycleDay)
+    if (symptom === 'bleeding') {
+      const mensesDaysAfter = getMensesDaysRightAfter(cycleDay)
+      maybeSetNewCycleStart({
+        val, cycleDay, mensesDaysAfter, checkIsMensesStart
+      })
     } else {
       cycleDay[symptom] = val
     }
   })
-
-  function bleedingValueDeleted(symptom, val) {
-    return symptom === 'bleeding' && !val
-  }
-
-  function bleedingValueAddedOrChanged(symptom, val) {
-    return symptom === 'bleeding' && val
-  }
-
-  function maybeSetNewCycleStart(dayWithDeletedBleeding) {
-    // if a bleeding value is deleted, we need to check if
-    // there are any following bleeding days and if the
-    // next one of them is now a cycle start
-    const mensesDaysAfter = getMensesDaysRightAfter(dayWithDeletedBleeding)
-    if (!mensesDaysAfter.length) return
-    const nextOne = mensesDaysAfter[mensesDaysAfter.length - 1]
-    if (isMensesStart(nextOne)) {
-      nextOne.isCycleStart = true
-    }
-  }
-
-  function maybeClearOldCycleStarts(cycleDay) {
-    // if we have a new bleeding day, we need to clear the
-    // menses start marker from all following days of this
-    // menses that may have been marked as start before
-    const mensesDaysAfter = getMensesDaysRightAfter(cycleDay)
-    mensesDaysAfter.forEach(day => day.isCycleStart = false)
-  }
 }
 
 export function updateCycleStartsForAllCycleDays() {
   db.write(() => {
     getBleedingDaysSortedByDate().forEach(day => {
-      if (isMensesStart(day)) {
+      if (checkIsMensesStart(day)) {
         day.isCycleStart = true
       }
     })

e2e/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "globals": {
+    "expect": true,
+    "element": true,
+    "by": true,
+    "device": true,
+  }
+}

e2e/dataInput.spec.js

@@ -0,0 +1,144 @@
+const LocalTime = require("js-joda").LocalTime
+const ChronoUnit = require("js-joda").ChronoUnit
+
+const {
+  symptomValues,
+  reloadApp,
+  goToHomePage,
+  goBack,
+} = require('./helpers')
+
+const minutes = ChronoUnit.MINUTES
+let currentTime
+
+const symptoms = Object.keys(symptomValues).map( symptom => {
+  return symptom === 'mucus' ? 'cervical mucus' : symptom
+})
+
+const navigateToSymptomView = (symptom) => {
+  return element(by.text(symptom)).tap()
+}
+
+const navigateToCycleDayOverview = () => {
+  return element(by.text('add data for today')).tap()
+}
+
+const tapExclude = () => {
+  return element(by.type('android.widget.CompoundButton')).tap()
+}
+
+const enterSymptomData = async (symptom) => {
+  const { valuesToSelect, shouldExclude } = symptomValues[symptom]
+
+  for (const value of valuesToSelect) {
+    await element(by.text(value)).tap()
+  }
+
+  if (shouldExclude) {
+    await tapExclude()
+  }
+}
+
+const formExpectedSymptomSummary = (symptom) => {
+  const { valuesToSelect, shouldExclude } = symptomValues[symptom]
+  let expectedText, temperature
+
+  switch (symptom) {
+  case 'temperature':
+    temperature = valuesToSelect[0]
+    expectedText = `${temperature} °C - ${currentTime}`
+    break
+  case 'mucus':
+    expectedText = `feeling: ${valuesToSelect[0]}, texture: ${valuesToSelect[1]}\n => S`
+    break
+  case 'cervix':
+    expectedText = `opening: ${valuesToSelect[0]}, firmness: ${valuesToSelect[1]}, position: ${valuesToSelect[2]}`
+    break
+  case 'note':
+    expectedText = valuesToSelect[0]
+    break
+  default: expectedText = valuesToSelect.join(', ')
+  }
+
+  if (shouldExclude) {
+    expectedText = `(${expectedText})`
+  }
+
+  return expectedText
+}
+
+const enterNote = async() => {
+  const note = symptomValues['note'].valuesToSelect[0]
+  await element(by.id('noteInput')).replaceText(note)
+}
+
+const enterTemperature = async() => {
+  const temperature = symptomValues['temperature'].valuesToSelect[0]
+  currentTime = LocalTime.now().truncatedTo(minutes).toString()
+  const note = symptomValues['temperature'].valuesToSelect[1]
+
+  await element(by.id('temperatureInput')).typeText(temperature)
+  await element(by.id('timeInput')).tap()
+  await element(by.text('OK')).tap()
+  await element(by.id('noteInput')).replaceText(note)
+  await tapExclude()
+}
+
+describe('Symptom Data Input', () => {
+
+  before(async () => {
+    await reloadApp()
+    await goToHomePage()
+    await navigateToCycleDayOverview()
+  })
+
+  for (const symptom of symptoms) {
+    it(`Should test ${symptom} data input.`, async () => {
+
+      await navigateToSymptomView(symptom)
+
+      let expectedSymptomSummary
+      await expect(element(by.id('headerTitle').and(by.text(symptom))))
+        .toBeVisible()
+
+      switch (symptom) {
+      case 'temperature':
+        await enterTemperature()
+        expectedSymptomSummary = formExpectedSymptomSummary('temperature')
+        console.log(
+          'This test a bit flaky. console.log apparently helps to fix it.'
+        )
+
+        await goBack()
+        await expect(element(by.text(expectedSymptomSummary))).toExist()
+
+        // Testing here additionally the deletion of data
+        await navigateToSymptomView(symptom)
+        await element(by.id('deleteIcon')).tap()
+        await element(by.text('YES, I AM SURE')).tap()
+        await expect(element(by.text(expectedSymptomSummary))).toNotExist()
+
+        await navigateToSymptomView(symptom)
+        await enterTemperature()
+
+        break
+      case 'note':
+        await enterNote()
+        expectedSymptomSummary = formExpectedSymptomSummary('note')
+        break
+      case 'cervical mucus':
+        await enterSymptomData('mucus')
+        expectedSymptomSummary = formExpectedSymptomSummary('mucus')
+        break
+      default:
+        await enterSymptomData(symptom)
+        expectedSymptomSummary = formExpectedSymptomSummary(symptom)
+      }
+
+      await goBack()
+
+      await expect(element(by.text(expectedSymptomSummary))).toExist()
+    })
+  }
+
+})

e2e/date.spec.js

@@ -0,0 +1,29 @@
+const LocalDate = require("js-joda").LocalDate
+const moment = require('moment')
+
+describe('Date', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative()
+  })
+
+  it('should have same date when navigating between cycle day and symptom view', async () => {
+
+    await element(by.text('add data for today')).tap()
+    await expect(
+      element(by.id('headerTitle').and(by.text('today')))
+    ).toBeVisible()
+    await element(by.id('backButton')).tap()
+    await element(by.id('drip-icon-bleeding')).tap()
+
+    const today = LocalDate.now()
+    const yesterday = today.minusDays(1)
+    const yesterdayFormatted = moment(
+      yesterday.toString()).format('MMMM Do YYYY')
+      .toLowerCase()
+
+    await expect(
+      element(by.id('headerSubtitle').and(by.text(yesterdayFormatted)))
+    ).toBeVisible()
+  })
+
+})

e2e/helpers.js

@@ -0,0 +1,62 @@
+const symptomValues = {
+  bleeding: {
+    valuesToSelect: ['spotting'],
+    shouldExclude: true,
+  },
+  temperature: {
+    valuesToSelect: ['36.63', 'This is test text'],
+    shouldExclude: true,
+  },
+  mucus: {
+    valuesToSelect: ['dry', 'creamy'],
+    shouldExclude: true,
+  },
+  cervix: {
+    valuesToSelect: ['closed', 'hard', 'low'],
+    shouldExclude: true,
+  },
+  desire: {
+    valuesToSelect: ['low'],
+    shouldExclude: false,
+  },
+  sex: {
+    valuesToSelect: ['solo', 'condom'],
+    shouldExclude: false,
+  },
+  pain: {
+    valuesToSelect: ['cramps'],
+    shouldExclude: false,
+  },
+  mood: {
+    valuesToSelect: ['happy'],
+    shouldExclude: false,
+  },
+  note: {
+    valuesToSelect: ['This is test text'],
+    shouldExclude: false,
+  }
+}
+
+function goBack() {
+  return device.pressBack()
+}
+
+function reloadApp() {
+  return device.reloadReactNative()
+}
+
+function goToHomePage() {
+  try {
+    element(by.id('licenseOkButton')).tap()
+  } catch (error) {
+    goBack()
+    element(by.text('home')).tap()
+  }
+}
+
+module.exports = {
+  symptomValues,
+  reloadApp,
+  goToHomePage,
+  goBack,
+}

e2e/homeNavigation.spec.js

@@ -0,0 +1,60 @@
+const isOnPage = async (page, parentPage) => {
+  await expect(
+    element(by.id('headerTitle').and(by.text(page)))
+  ).toBeVisible()
+  await expect(
+    element(
+      by.id('activeMenuItem').and(by.text(parentPage ? parentPage : page))
+    )
+  ).toBeVisible()
+}
+
+describe('Home Navigation', () => {
+  before(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+  beforeEach(async () => {
+    await device.reloadReactNative()
+  })
+
+  // TODO: clarify how to test that exiting from the app happened
+  // https://stackoverflow.com/questions/57133730/how-to-test-an-exit-app-scenario-using-detox
+  // it('should exit the app when license agreement declined', async () => {
+  //   await expect(element(by.id('licensePage'))).toBeVisible();
+  //   await element(by.id('licenseOkCance')).tap();
+  // });
+
+  // TODO: figure out how to clean the localStorage between the different specs are running
+  // for now disabling the License Agreement test.
+  // it('should navigate to home on accepting the license agreement', async () => {
+  //   await expect(element(by.id('licensePage'))).toBeVisible()
+  //   await element(by.id('licenseOkButton')).tap()
+  //   await isOnPage('home')
+  // })
+
+  it('should navigate to today bleeding symptom', async () => {
+    await element(by.text('track your period')).tap()
+    await expect(
+      element(by.id('headerTitle').and(by.text('bleeding')))
+    ).toBeVisible()
+    await expect(
+      element(by.id('headerSubtitle').and(by.text('today')))
+    ).toBeVisible()
+  })
+
+  it('should navigate to chart to check your fertility', async () => {
+    await element(by.text('check your fertility')).tap()
+    await isOnPage('chart')
+  })
+
+  it('should navigate to settings, its sub pages and back', async () => {
+    await element(by.id('menuItemSettings')).tap()
+    await isOnPage('settings')
+    await element(by.text('reminders')).tap()
+    await isOnPage('reminders', 'settings')
+    await element(by.id('backButton')).tap()
+    await element(by.text('nfp settings')).tap()
+    await isOnPage('nfp settings', 'settings')
+    await device.pressBack()
+  })
+})

e2e/init.js

@@ -0,0 +1,19 @@
+const detox = require('detox');
+const config = require('../package.json').detox;
+const adapter = require('detox/runners/mocha/adapter');
+
+before(async () => {
+  await detox.init(config);
+});
+
+beforeEach(async function () {
+  await adapter.beforeEach(this);
+});
+
+afterEach(async function () {
+  await adapter.afterEach(this);
+});
+
+after(async () => {
+  await detox.cleanup();
+});

e2e/mocha.opts

@@ -0,0 +1 @@
+--recursive --timeout 120000 --bail --file e2e/init.js

i18n/en/labels.js

@@ -15,7 +15,10 @@ export const shared = {
   date: 'Date',
   cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',
-  enter: 'Enter'
+  noDataWarning: 'You haven\'t entered any data yet.',
+  noTemperatureWarning: 'You haven\'t entered any temperature data yet.',
+  noDataButtonText: 'Start entering data now',
+  enter: 'Enter',
 }
 
 export const headerTitles = {

i18n/en/settings.js

@@ -1,5 +1,7 @@
 import links from './links'
 
+const currentYear = new Date().getFullYear()
+
 export default {
   menuTitles: {
     reminders: 'Reminders',
@@ -104,7 +106,7 @@ export default {
   },
   license: {
     title: 'drip is an open-source cycle tracking app',
-    text: `Copyright (C) 2019 Bloody Health GbR
+    text: `Copyright (C) ${currentYear} Bloody Health GbR
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details: https://www.gnu.org/licenses/gpl-3.0.html
 

index.js

@@ -1,4 +1,4 @@
 import { AppRegistry } from 'react-native'
 import AppWrapper from './components/app-wrapper'
 
-AppRegistry.registerComponent('home', () => AppWrapper)
+AppRegistry.registerComponent('drip', () => AppWrapper)

ios/drip.xcodeproj/project.pbxproj

@@ -42,14 +42,16 @@
 		2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
 		3DF2498A20844F298CD84CC3 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E954835D62BD45F0A5FFC523 /* SimpleLineIcons.ttf */; };
 		3F0F9C6368674C66AEAC3807 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C783C08EEEB541D2A30FEE44 /* FontAwesome5_Regular.ttf */; };
-		42C7FA34220248E900F22656 /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 42C7FA10220248C300F22656 /* libRCTPushNotification.a */; };
 		42DA1D39221B24CD00C56795 /* libART.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 42DA1D07221B24C500C56795 /* libART.a */; };
 		4E04B0A1FECA4915AD4A6CCF /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F59A471BDE4144A1A41D4B52 /* Feather.ttf */; };
+		54E1D49723E75880003FA37B /* libRNCPushNotificationIOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 54E1D49623E75862003FA37B /* libRNCPushNotificationIOS.a */; };
+		54E1D49923E7588F003FA37B /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 54E1D49823E7588F003FA37B /* JavaScriptCore.framework */; };
 		5D921C348AC14944835A4D82 /* OpenSans-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 673C016DDDD74C2F89050279 /* OpenSans-Light.ttf */; };
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		62F2A4645AC84CDC9506FF27 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 9AEBF0735214455AAEDF56D5 /* libc++.tbd */; };
 		71D0BCE4666A4AB8A0874B5A /* OpenSans-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 644690BCCEBF41789960B9A2 /* OpenSans-SemiBold.ttf */; };
 		72DA6B4241504DB096AFAD40 /* libRCTRestart.a in Frameworks */ = {isa = PBXBuildFile; fileRef = AB636AA0286D45CE9B23B2C3 /* libRCTRestart.a */; };
+		77500FAD5ADD402AAD2D9972 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3102FB76D69C42938E0E126D /* AntDesign.ttf */; };
 		7D48A7B9435741CCA9678C42 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0BE71E2D5A634744A662DF44 /* FontAwesome5_Solid.ttf */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		87508EF4BE7548878981BE9E /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B41CDA1146DB4492B1796444 /* EvilIcons.ttf */; };
@@ -58,6 +60,7 @@
 		96687426D3D64D0F8E15FE4B /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */; };
 		A1410AC4C98A49B2820D9E45 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B6F5078F7DEC470782757471 /* Zocial.ttf */; };
 		A16B351C3F3644CF95F104D2 /* builtin_modules in Resources */ = {isa = PBXBuildFile; fileRef = 36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */; };
+		AA800A96BB73482AA90E29B8 /* OpenSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
 		AED64B7892744F21B3A156BB /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */; };
 		AF2EAEC3772C41A49A4AF117 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 044ECCD7D9B8470782A453CA /* FontAwesome5_Brands.ttf */; };
@@ -71,8 +74,9 @@
 		E09F3B05A4F84E9883101CC7 /* libRNNodeJsMobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */; };
 		E43EF009AC8C4698AB322190 /* NodeMobile.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C225FC4966694B9FBD32E946 /* NodeMobile.framework */; };
 		E4584E55EEC24302A3E84A23 /* nodejs-project in Resources */ = {isa = PBXBuildFile; fileRef = 6466AE2461BE4FA88B8372F0 /* nodejs-project */; };
-		77500FAD5ADD402AAD2D9972 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3102FB76D69C42938E0E126D /* AntDesign.ttf */; };
-		AA800A96BB73482AA90E29B8 /* OpenSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */; };
+		D9D0CDA164E74C0EA3FC53EC /* libGCDWebServers.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 90224CB4571D41C4969E9722 /* libGCDWebServers.a */; };
+		FDC5A23FB0A04961ABE52950 /* libRealmJS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F710D85E391D4094816E1B62 /* libRealmJS.a */; };
+		BD7041F2826E4A2CBE6CB87D /* RealmJSTests.xctest in Resources */ = {isa = PBXBuildFile; fileRef = F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -209,20 +213,6 @@
 			remoteGlobalIDString = 3D383D621EBD27B9005632C8;
 			remoteInfo = "double-conversion-tvOS";
 		};
-		2DF0FFEA2056DD460020B375 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 9936F3131F5F2E4B0010BF04;
-			remoteInfo = privatedata;
-		};
-		2DF0FFEC2056DD460020B375 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 9936F32F1F5F2E5B0010BF04;
-			remoteInfo = "privatedata-tvOS";
-		};
 		3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -300,20 +290,6 @@
 			remoteGlobalIDString = 3D3CD9321DE5FBEE00167DC4;
 			remoteInfo = "cxxreact-tvOS";
 		};
-		3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3CD90B1DE5FBD600167DC4;
-			remoteInfo = jschelpers;
-		};
-		3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3CD9181DE5FBD800167DC4;
-			remoteInfo = "jschelpers-tvOS";
-		};
 		42C7F9CA2202468600F22656 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */;
@@ -370,20 +346,6 @@
 			remoteGlobalIDString = 5DBEB1501B18CEA900B34395;
 			remoteInfo = RNVectorIcons;
 		};
-		42C7FA0F220248C300F22656 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTPushNotification;
-		};
-		42C7FA11220248C300F22656 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D05745F1DE6004600184BB4;
-			remoteInfo = "RCTPushNotification-tvOS";
-		};
 		42DA1D06221B24C500C56795 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 42DA1D01221B24C500C56795 /* ART.xcodeproj */;
@@ -398,6 +360,48 @@
 			remoteGlobalIDString = 323A12871E5F266B004975B8;
 			remoteInfo = "ART-tvOS";
 		};
+		54E1D47923E75847003FA37B /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = EDEBC6D6214B3E7000DD5AC8;
+			remoteInfo = jsi;
+		};
+		54E1D47B23E75847003FA37B /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = EDEBC73B214B45A300DD5AC8;
+			remoteInfo = jsiexecutor;
+		};
+		54E1D47D23E75847003FA37B /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = ED296FB6214C9A0900B7C4FE;
+			remoteInfo = "jsi-tvOS";
+		};
+		54E1D47F23E75847003FA37B /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = ED296FEE214C9CF800B7C4FE;
+			remoteInfo = "jsiexecutor-tvOS";
+		};
+		54E1D48923E75847003FA37B /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = D1E5ACC4B66345868F556374 /* RNVectorIcons.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = A39873CE1EA65EE60051E01A;
+			remoteInfo = "RNVectorIcons-tvOS";
+		};
+		54E1D49523E75862003FA37B /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 9B97F66B220DEC6000B61540;
+			remoteInfo = RNCPushNotificationIOS;
+		};
 		5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
@@ -476,13 +480,15 @@
 		2D02E47B1E0B4A5D006451C7 /* drip-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "drip-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D02E4901E0B4A5D006451C7 /* drip-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "drip-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		3102FB76D69C42938E0E126D /* AntDesign.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = AntDesign.ttf; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; };
 		36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = builtin_modules; path = "../node_modules/nodejs-mobile-react-native/install/resources/nodejs-modules/builtin_modules"; sourceTree = "<group>"; };
-		42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTPushNotification.xcodeproj; path = "../node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj"; sourceTree = "<group>"; };
 		42DA1D01221B24C500C56795 /* ART.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ART.xcodeproj; path = "../node_modules/react-native/Libraries/ART/ART.xcodeproj"; sourceTree = "<group>"; };
 		4902D5DCD46748BD8DC403FD /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
 		49089E09BFCF4F3DB209B6E9 /* RNFS.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNFS.xcodeproj; path = "../node_modules/react-native-fs/RNFS.xcodeproj"; sourceTree = "<group>"; };
 		4E6AB77B55F2491487B6124E /* RNShare.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNShare.xcodeproj; path = "../node_modules/react-native-share/ios/RNShare.xcodeproj"; sourceTree = "<group>"; };
 		50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTRestart.xcodeproj; path = "../node_modules/react-native-restart/ios/RCTRestart.xcodeproj"; sourceTree = "<group>"; };
+		54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = PushNotificationIOS.xcodeproj; path = "../node_modules/@react-native-community/push-notification-ios/ios/PushNotificationIOS.xcodeproj"; sourceTree = "<group>"; };
+		54E1D49823E7588F003FA37B /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
 		5E7B0A75F8004C6699B70F86 /* Prompt-ExtraLight.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Prompt-ExtraLight.ttf"; path = "../assets/fonts/Prompt-ExtraLight.ttf"; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
@@ -495,6 +501,7 @@
 		7F6C9FA9B66B453CA602B334 /* RealmReact.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RealmReact.xcodeproj; path = "../node_modules/realm/react-native/ios/RealmReact.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		84CCEBD3B2C44758853BC941 /* libRNFS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFS.a; sourceTree = "<group>"; };
+		885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenSans-LightItalic.ttf"; path = "../assets/fonts/OpenSans-LightItalic.ttf"; sourceTree = "<group>"; };
 		887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "drip-home-icons.ttf"; path = "../assets/fonts/drip-home-icons.ttf"; sourceTree = "<group>"; };
 		8F2C7294680449AEA698AF76 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
 		9AEBF0735214455AAEDF56D5 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
@@ -516,8 +523,10 @@
 		F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = "<group>"; };
 		F59A471BDE4144A1A41D4B52 /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNNodeJsMobile.a; sourceTree = "<group>"; };
-		3102FB76D69C42938E0E126D /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
-		885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */ = {isa = PBXFileReference; name = "OpenSans-LightItalic.ttf"; path = "../assets/fonts/OpenSans-LightItalic.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		BB052EE60D044AD3A9D08692 /* RealmJS.xcodeproj */ = {isa = PBXFileReference; name = "RealmJS.xcodeproj"; path = "../node_modules/realm/src/RealmJS.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		90224CB4571D41C4969E9722 /* libGCDWebServers.a */ = {isa = PBXFileReference; name = "libGCDWebServers.a"; path = "libGCDWebServers.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		F710D85E391D4094816E1B62 /* libRealmJS.a */ = {isa = PBXFileReference; name = "libRealmJS.a"; path = "libRealmJS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */ = {isa = PBXFileReference; name = "RealmJSTests.xctest"; path = "RealmJSTests.xctest"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.cfbundle; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -533,8 +542,9 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				54E1D49923E7588F003FA37B /* JavaScriptCore.framework in Frameworks */,
+				54E1D49723E75880003FA37B /* libRNCPushNotificationIOS.a in Frameworks */,
 				42DA1D39221B24CD00C56795 /* libART.a in Frameworks */,
-				42C7FA34220248E900F22656 /* libRCTPushNotification.a in Frameworks */,
 				ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
 				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
@@ -558,6 +568,9 @@
 				72DA6B4241504DB096AFAD40 /* libRCTRestart.a in Frameworks */,
 				E09F3B05A4F84E9883101CC7 /* libRNNodeJsMobile.a in Frameworks */,
 				E43EF009AC8C4698AB322190 /* NodeMobile.framework in Frameworks */,
+				D9D0CDA164E74C0EA3FC53EC /* libGCDWebServers.a in Frameworks */,
+				FDC5A23FB0A04961ABE52950 /* libRealmJS.a in Frameworks */,
+				BD7041F2826E4A2CBE6CB87D /* RealmJSTests.xctest in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -717,16 +730,16 @@
 				3DAD3EA71DF850E9000B6D8A /* libyoga.a */,
 				3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */,
 				3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,
-				3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */,
-				3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */,
 				2DF0FFDF2056DD460020B375 /* libjsinspector.a */,
 				2DF0FFE12056DD460020B375 /* libjsinspector-tvOS.a */,
 				2DF0FFE32056DD460020B375 /* libthird-party.a */,
 				2DF0FFE52056DD460020B375 /* libthird-party.a */,
 				2DF0FFE72056DD460020B375 /* libdouble-conversion.a */,
 				2DF0FFE92056DD460020B375 /* libdouble-conversion.a */,
-				2DF0FFEB2056DD460020B375 /* libprivatedata.a */,
-				2DF0FFED2056DD460020B375 /* libprivatedata-tvOS.a */,
+				54E1D47A23E75847003FA37B /* libjsi.a */,
+				54E1D47C23E75847003FA37B /* libjsiexecutor.a */,
+				54E1D47E23E75847003FA37B /* libjsi-tvOS.a */,
+				54E1D48023E75847003FA37B /* libjsiexecutor-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -734,6 +747,7 @@
 		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				54E1D49823E7588F003FA37B /* JavaScriptCore.framework */,
 				2D16E6891FA4F8E400B85C8A /* libReact.a */,
 				9AEBF0735214455AAEDF56D5 /* libc++.tbd */,
 				CD8C8B91E0A747B3883A0D56 /* libz.tbd */,
@@ -776,6 +790,7 @@
 			isa = PBXGroup;
 			children = (
 				42C7F9E02202468600F22656 /* libRNVectorIcons.a */,
+				54E1D48A23E75847003FA37B /* libRNVectorIcons-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -813,15 +828,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		42C7F9FF220248C300F22656 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				42C7FA10220248C300F22656 /* libRCTPushNotification.a */,
-				42C7FA12220248C300F22656 /* libRCTPushNotification-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 		42DA1D02221B24C500C56795 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -831,6 +837,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		54E1D49223E75862003FA37B /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				54E1D49623E75862003FA37B /* libRNCPushNotificationIOS.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -852,6 +866,7 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */,
 				42DA1D01221B24C500C56795 /* ART.xcodeproj */,
 				5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
@@ -871,8 +886,8 @@
 				1F05FE29622E4F21AF70C2B7 /* RNDocumentPicker.xcodeproj */,
 				49089E09BFCF4F3DB209B6E9 /* RNFS.xcodeproj */,
 				50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */,
-				42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */,
 				65F706FAFA1444AE9937D472 /* RNNodeJsMobile.xcodeproj */,
+				BB052EE60D044AD3A9D08692 /* RealmJS.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -954,9 +969,9 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				2B572382D4504B8FB4B9D251 /* Embed Frameworks */,
-				D6AE48E8124449EE863F342D /* Build NodeJS Mobile Native Modules */,
-				7D43D3729FAE42C0859CDC36 /* Sign NodeJS Mobile Native Modules */,
-				54483AF1DA474A71931D6D6A /* Remove NodeJS Mobile Framework Simulator Strips */,
+				DE9DD9049EBE47E5A1EA3F5D /* Build NodeJS Mobile Native Modules */,
+				6C10CEE2CE544C7F9400F1B4 /* Sign NodeJS Mobile Native Modules */,
+				B93B657279074F0DB95BCDE2 /* Remove NodeJS Mobile Framework Simulator Strips */,
 			);
 			buildRules = (
 			);
@@ -1043,6 +1058,10 @@
 					ProductGroup = 42DA1D02221B24C500C56795 /* Products */;
 					ProjectRef = 42DA1D01221B24C500C56795 /* ART.xcodeproj */;
 				},
+				{
+					ProductGroup = 54E1D49223E75862003FA37B /* Products */;
+					ProjectRef = 54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */;
+				},
 				{
 					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
 					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
@@ -1071,10 +1090,6 @@
 					ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */;
 					ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
 				},
-				{
-					ProductGroup = 42C7F9FF220248C300F22656 /* Products */;
-					ProjectRef = 42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */;
-				},
 				{
 					ProductGroup = 42C7F9C72202468600F22656 /* Products */;
 					ProjectRef = 50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */;
@@ -1254,20 +1269,6 @@
 			remoteRef = 2DF0FFE82056DD460020B375 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		2DF0FFEB2056DD460020B375 /* libprivatedata.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libprivatedata.a;
-			remoteRef = 2DF0FFEA2056DD460020B375 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		2DF0FFED2056DD460020B375 /* libprivatedata-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libprivatedata-tvOS.a";
-			remoteRef = 2DF0FFEC2056DD460020B375 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 		3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1345,20 +1346,6 @@
 			remoteRef = 3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libjschelpers.a;
-			remoteRef = 3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libjschelpers.a;
-			remoteRef = 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 		42C7F9CB2202468600F22656 /* libRCTRestart.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1415,20 +1402,6 @@
 			remoteRef = 42C7F9DF2202468600F22656 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		42C7FA10220248C300F22656 /* libRCTPushNotification.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTPushNotification.a;
-			remoteRef = 42C7FA0F220248C300F22656 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		42C7FA12220248C300F22656 /* libRCTPushNotification-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTPushNotification-tvOS.a";
-			remoteRef = 42C7FA11220248C300F22656 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 		42DA1D07221B24C500C56795 /* libART.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1443,6 +1416,48 @@
 			remoteRef = 42DA1D08221B24C500C56795 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		54E1D47A23E75847003FA37B /* libjsi.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libjsi.a;
+			remoteRef = 54E1D47923E75847003FA37B /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		54E1D47C23E75847003FA37B /* libjsiexecutor.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libjsiexecutor.a;
+			remoteRef = 54E1D47B23E75847003FA37B /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		54E1D47E23E75847003FA37B /* libjsi-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libjsi-tvOS.a";
+			remoteRef = 54E1D47D23E75847003FA37B /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		54E1D48023E75847003FA37B /* libjsiexecutor-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libjsiexecutor-tvOS.a";
+			remoteRef = 54E1D47F23E75847003FA37B /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		54E1D48A23E75847003FA37B /* libRNVectorIcons-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRNVectorIcons-tvOS.a";
+			remoteRef = 54E1D48923E75847003FA37B /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		54E1D49623E75862003FA37B /* libRNCPushNotificationIOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNCPushNotificationIOS.a;
+			remoteRef = 54E1D49523E75862003FA37B /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1566,159 +1581,47 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		D6AE48E8124449EE863F342D /* Build NodeJS Mobile Native Modules */ = {
+		6C10CEE2CE544C7F9400F1B4 /* Sign NodeJS Mobile Native Modules */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
-			runOnlyForDeploymentPostprocessing = 0;
-			name = "Build NodeJS Mobile Native Modules";
 			inputPaths = (
 			);
-			outputPaths = (
-			);
-			shellPath = /bin/sh;
-			shellScript = "
-set -e
-if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
-# If build native modules preference is not set, look for it in the project's
-#nodejs-assets/BUILD_NATIVE_MODULES.txt file.
-NODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"
-PREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"
-  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then
-    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"
-  fi
-fi
-if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
-# If build native modules preference is not set, try to find .gyp files
-#to turn it on.
-  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))
-  if [ ${#gypfiles[@]} -gt 0 ]; then
-    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1
-  else
-    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0
-  fi
-fi
-if [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi
-# Delete object files that may already come from within the npm package.
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type f -delete
-# Delete bundle contents that may be there from previous builds.
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.node/*\" -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type d -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
-# Apply patches to the modules package.json
-if [ -d \"$CODESIGNING_FOLDER_PATH\"/nodejs-project/node_modules/ ]; then
-  PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"
-  NODEJS_PROJECT_MODULES_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/node_modules/ && pwd )\"
-  node \"$PATCH_SCRIPT_DIR\"/patch-package.js $NODEJS_PROJECT_MODULES_DIR
-fi
-# Get the nodejs-mobile-gyp location
-if [ -d \"$PROJECT_DIR/../node_modules/nodejs-mobile-gyp/\" ]; then
-  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-gyp/ && pwd )\"
-else
-  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/node_modules/nodejs-mobile-gyp/ && pwd )\"
-fi
-NODEJS_MOBILE_GYP_BIN_FILE=\"$NODEJS_MOBILE_GYP_DIR\"/bin/node-gyp.js
-# Rebuild modules with right environment
-NODEJS_HEADERS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/ios/libnode/ && pwd )\"
-pushd $CODESIGNING_FOLDER_PATH/nodejs-project/
-if [ \"$PLATFORM_NAME\" == \"iphoneos\" ]
-then
-  GYP_DEFINES=\"OS=ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"arm64\" npm --verbose rebuild --build-from-source
-else
-  GYP_DEFINES=\"OS=ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"x64\" npm --verbose rebuild --build-from-source
-fi
-popd
-";
-		};
-		7D43D3729FAE42C0859CDC36 /* Sign NodeJS Mobile Native Modules */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
 			name = "Sign NodeJS Mobile Native Modules";
-			inputPaths = (
-			);
 			outputPaths = (
 			);
+			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "
-set -e
-if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
-# If build native modules preference is not set, look for it in the project's
-#nodejs-assets/BUILD_NATIVE_MODULES.txt file.
-NODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"
-PREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"
-  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then
-    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"
-  fi
-fi
-if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
-# If build native modules preference is not set, try to find .gyp files
-#to turn it on.
-  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))
-  if [ ${#gypfiles[@]} -gt 0 ]; then
-    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1
-  else
-    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0
-  fi
-fi
-if [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi
-# Delete object files
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete
-# Create Info.plist for each framework built and loader override.
-PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"
-NODEJS_PROJECT_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/ && pwd )\"
-node \"$PATCH_SCRIPT_DIR\"/ios-create-plists-and-dlopen-override.js $NODEJS_PROJECT_DIR
-# Embed every resulting .framework in the application and delete them afterwards.
-embed_framework()
-{
-    FRAMEWORK_NAME=\"$(basename \"$1\")\"
-    cp -r \"$1\" \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/\"
-    
-    /usr/bin/codesign --force --sign $EXPANDED_CODE_SIGN_IDENTITY --preserve-metadata=identifier,entitlements,flags --timestamp=none \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/$FRAMEWORK_NAME\"
-}
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d | while read frmwrk_path; do embed_framework \"$frmwrk_path\"; done
-
-#Delete gyp temporary .deps dependency folders from the project structure.
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/.deps/*\" -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \".deps\" -type d -delete
-
-#Delete frameworks from their build paths
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete
-find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
-";
+			shellScript = "\nset -e\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, look for it in the project's\n#nodejs-assets/BUILD_NATIVE_MODULES.txt file.\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nPREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"\n  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"\n  fi\nfi\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, try to find .gyp files\n#to turn it on.\n  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))\n  if [ ${#gypfiles[@]} -gt 0 ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1\n  else\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0\n  fi\nfi\nif [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi\n# Delete object files\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete\n# Create Info.plist for each framework built and loader override.\nPATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"\nNODEJS_PROJECT_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/ && pwd )\"\nnode \"$PATCH_SCRIPT_DIR\"/ios-create-plists-and-dlopen-override.js $NODEJS_PROJECT_DIR\n# Embed every resulting .framework in the application and delete them afterwards.\nembed_framework()\n{\n    FRAMEWORK_NAME=\"$(basename \"$1\")\"\n    cp -r \"$1\" \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/\"\n    \n    /usr/bin/codesign --force --sign $EXPANDED_CODE_SIGN_IDENTITY --preserve-metadata=identifier,entitlements,flags --timestamp=none \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/$FRAMEWORK_NAME\"\n}\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d | while read frmwrk_path; do embed_framework \"$frmwrk_path\"; done\n\n#Delete gyp temporary .deps dependency folders from the project structure.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/.deps/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \".deps\" -type d -delete\n\n#Delete frameworks from their build paths\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete\n";
 		};
-		54483AF1DA474A71931D6D6A /* Remove NodeJS Mobile Framework Simulator Strips */ = {
+		B93B657279074F0DB95BCDE2 /* Remove NodeJS Mobile Framework Simulator Strips */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
-			runOnlyForDeploymentPostprocessing = 0;
-			name = "Remove NodeJS Mobile Framework Simulator Strips";
 			inputPaths = (
 			);
+			name = "Remove NodeJS Mobile Framework Simulator Strips";
 			outputPaths = (
 			);
+			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "
-set -e
-FRAMEWORK_BINARY_PATH=\"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/NodeMobile.framework/NodeMobile\"
-FRAMEWORK_STRIPPED_PATH=\"$FRAMEWORK_BINARY_PATH-strip\"
-if [ \"$PLATFORM_NAME\" != \"iphonesimulator\" ]; then
-  if $(lipo \"$FRAMEWORK_BINARY_PATH\" -verify_arch \"x86_64\") ; then
-    lipo -output \"$FRAMEWORK_STRIPPED_PATH\" -remove \"x86_64\" \"$FRAMEWORK_BINARY_PATH\"
-    rm \"$FRAMEWORK_BINARY_PATH\"
-    mv \"$FRAMEWORK_STRIPPED_PATH\" \"$FRAMEWORK_BINARY_PATH\"
-    echo \"Removed simulator strip from NodeMobile.framework\"
-  fi
-fi
-";
+			shellScript = "\nset -e\nFRAMEWORK_BINARY_PATH=\"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/NodeMobile.framework/NodeMobile\"\nFRAMEWORK_STRIPPED_PATH=\"$FRAMEWORK_BINARY_PATH-strip\"\nif [ \"$PLATFORM_NAME\" != \"iphonesimulator\" ]; then\n  if $(lipo \"$FRAMEWORK_BINARY_PATH\" -verify_arch \"x86_64\") ; then\n    lipo -output \"$FRAMEWORK_STRIPPED_PATH\" -remove \"x86_64\" \"$FRAMEWORK_BINARY_PATH\"\n    rm \"$FRAMEWORK_BINARY_PATH\"\n    mv \"$FRAMEWORK_STRIPPED_PATH\" \"$FRAMEWORK_BINARY_PATH\"\n    echo \"Removed simulator strip from NodeMobile.framework\"\n  fi\nfi\n";
+		};
+		DE9DD9049EBE47E5A1EA3F5D /* Build NodeJS Mobile Native Modules */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Build NodeJS Mobile Native Modules";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\nset -e\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, look for it in the project's\n#nodejs-assets/BUILD_NATIVE_MODULES.txt file.\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nPREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"\n  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"\n  fi\nfi\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, try to find .gyp files\n#to turn it on.\n  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))\n  if [ ${#gypfiles[@]} -gt 0 ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1\n  else\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0\n  fi\nfi\nif [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi\n# Delete object files that may already come from within the npm package.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type f -delete\n# Delete bundle contents that may be there from previous builds.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.node/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type d -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete\n# Apply patches to the modules package.json\nif [ -d \"$CODESIGNING_FOLDER_PATH\"/nodejs-project/node_modules/ ]; then\n  PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"\n  NODEJS_PROJECT_MODULES_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/node_modules/ && pwd )\"\n  node \"$PATCH_SCRIPT_DIR\"/patch-package.js $NODEJS_PROJECT_MODULES_DIR\nfi\n# Get the nodejs-mobile-gyp location\nif [ -d \"$PROJECT_DIR/../node_modules/nodejs-mobile-gyp/\" ]; then\n  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-gyp/ && pwd )\"\nelse\n  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/node_modules/nodejs-mobile-gyp/ && pwd )\"\nfi\nNODEJS_MOBILE_GYP_BIN_FILE=\"$NODEJS_MOBILE_GYP_DIR\"/bin/node-gyp.js\n# Rebuild modules with right environment\nNODEJS_HEADERS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/ios/libnode/ && pwd )\"\npushd $CODESIGNING_FOLDER_PATH/nodejs-project/\nif [ \"$PLATFORM_NAME\" == \"iphoneos\" ]\nthen\n  GYP_DEFINES=\"OS=ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"arm64\" npm --verbose rebuild --build-from-source\nelse\n  GYP_DEFINES=\"OS=ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"x64\" npm --verbose rebuild --build-from-source\nfi\npopd\n";
 		};
 /* End PBXShellScriptBuildPhase section */
 
@@ -1809,11 +1712,17 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = dripTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1844,11 +1753,17 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = dripTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1878,6 +1793,8 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/@react-native-community/push-notification-ios/ios",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = drip/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1910,6 +1827,8 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/@react-native-community/push-notification-ios/ios",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = drip/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1951,10 +1870,16 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = "drip-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1995,10 +1920,16 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = "drip-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -2037,10 +1968,16 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = "drip-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -2079,10 +2016,16 @@ fi
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
 					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
+					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = "drip-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",

ios/drip/AppDelegate.m

@@ -5,24 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import "AppDelegate.h"
+#import <AppDelegate.h>
 
+#import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
-#import <React/RCTPushNotificationManager.h>
+#import <RNCPushNotificationIOS.h>
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+                                                   moduleName:@"drip"
+                                            initialProperties:nil];
 
-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"home"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
@@ -36,28 +34,37 @@
 // Required to register for notifications
 - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
 {
-  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
+  [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
 }
 // Required for the register event.
 - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
 {
-  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+  [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
 }
 // Required for the notification event. You must call the completion handler after handling the remote notification.
 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
 fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
 {
-  [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
 }
 // Required for the registrationError event.
 - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
 {
-  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
+  [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
 }
 // Required for the localNotification event.
 - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
 {
-  [RCTPushNotificationManager didReceiveLocalNotification:notification];
+  [RNCPushNotificationIOS didReceiveLocalNotification:notification];
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
 }
 
 @end

lib/cycle.js

@@ -51,7 +51,7 @@ export default function config(opts) {
     const i = cycleStartsSortedByDate.indexOf(cycleStart)
     const earlierCycleStart = cycleStartsSortedByDate[i + 1]
     if (!earlierCycleStart) return null
-    return getCycleForCycleStartDay(earlierCycleStart)
+    return getCycleByStartDay(earlierCycleStart)
   }
 
   function getCyclesBefore(targetCycleStartDay) {
@@ -61,38 +61,70 @@ export default function config(opts) {
     if (startFromHere < 0) return null
     return cycleStartsSortedByDate
       .slice(startFromHere)
-      .map(start => getCycleForCycleStartDay(start))
+      .map(start => getCycleByStartDay(start))
       // filter the ones exceeding maxCycleLength, those are null
       .filter(cycle => cycle)
   }
 
-  function getCycleForCycleStartDay(startDay, todayDate) {
-    const todayAsLocalDate = todayDate ? LocalDate.parse(todayDate) : LocalDate.now()
-    const cycleStartIndex = cycleDaysSortedByDate.indexOf(startDay)
-    const i = cycleStartsSortedByDate.indexOf(startDay)
-    const startLocalDate = LocalDate.parse(startDay.date)
-    const nextMensesStart = cycleStartsSortedByDate[i - 1]
-    let cycle
-    let cycleLength
-    if (nextMensesStart) {
-      cycle = cycleDaysSortedByDate.slice(
-        cycleDaysSortedByDate.indexOf(nextMensesStart) + 1,
-        cycleStartIndex + 1,
-      )
-      const nextLocalDate = LocalDate.parse(nextMensesStart.date)
-      cycleLength = startLocalDate.until(nextLocalDate, DAYS)
-    } else {
-      cycle = cycleDaysSortedByDate.slice(0, cycleStartIndex + 1)
-      cycleLength = startLocalDate.until(todayAsLocalDate, DAYS)
+  function findIndexOfDay(day, daysSortedByDate) {
+    return daysSortedByDate.findIndex(d => d.date === day.date)
   }
-    return cycleLength > maxCycleLength ? null : cycle
+
+  function getNextCycleStartDay(startDay, cycleStartsSortedByDate) {
+    const cycleStartIndex = findIndexOfDay(
+      startDay,
+      cycleStartsSortedByDate)
+    return cycleStartsSortedByDate[cycleStartIndex - 1]
+  }
+
+  function getTodayDate() {
+    return new Date().toISOString().slice(0, 10)
+  }
+
+  function getCycleLength(startDate, endDate) {
+    return LocalDate.parse(startDate)
+      .until(LocalDate.parse(endDate), DAYS)
+  }
+
+  function isValidCycle(startDate, endDate) {
+    return getCycleLength(startDate, endDate) <= maxCycleLength
+  }
+
+  function getCycleByStartDay(startDay, todayDate) {
+    let cycleEndDate = todayDate || getTodayDate()
+    let cycleEndIndex = 0
+
+    const nextCycleStart = getNextCycleStartDay(
+      startDay,
+      cycleStartsSortedByDate
+    )
+
+    if (nextCycleStart) {
+      const nextCycleIndex = findIndexOfDay(
+        nextCycleStart,
+        cycleDaysSortedByDate
+      )
+      cycleEndIndex = nextCycleIndex + 1
+      cycleEndDate = nextCycleStart.date
+    }
+
+    if (isValidCycle(startDay.date, cycleEndDate)) {
+      const cycleStartIndex = findIndexOfDay(
+        startDay,
+        cycleDaysSortedByDate
+      )
+      return cycleDaysSortedByDate
+        .slice(cycleEndIndex, cycleStartIndex + 1)
+    }
+
+    return null
   }
 
   function getCycleForDay(dayOrDate, todayDate) {
     const dateString = typeof dayOrDate === 'string' ? dayOrDate : dayOrDate.date
     const cycleStart = getLastMensesStartForDay(dateString)
     if (!cycleStart) return null
-    return getCycleForCycleStartDay(cycleStart, todayDate)
+    return getCycleByStartDay(cycleStart, todayDate)
   }
 
   function isMensesStart(cycleDay) {
@@ -199,6 +231,7 @@ export default function config(opts) {
     getAllCycleLengths,
     getPredictedMenses,
     isMensesStart,
-    getMensesDaysRightAfter
+    getMensesDaysRightAfter,
+    getCycleByStartDay,
   }
 }

lib/set-new-cycle-start.js

@@ -0,0 +1,34 @@
+export default function ({
+  val, cycleDay, mensesDaysAfter, checkIsMensesStart
+}) {
+
+  cycleDay.bleeding = val
+
+  // if a bleeding value is deleted or excluded, we need to check if there are
+  // any following bleeding days and if the next one of them is now a cycle
+  // start
+  if (bleedingValueDeletedOrExluded(val)) {
+    cycleDay.isCycleStart = false
+    if (!mensesDaysAfter.length) return
+    const nextOne = mensesDaysAfter[mensesDaysAfter.length - 1]
+    if (checkIsMensesStart(nextOne)) {
+      nextOne.isCycleStart = true
+    }
+  } else {
+    cycleDay.isCycleStart = checkIsMensesStart(cycleDay)
+    maybeClearOldCycleStarts(cycleDay)
+  }
+
+  function bleedingValueDeletedOrExluded(val) {
+    const bleedingDeleted = !val
+    const bleedingExcluded = val && val.exclude
+    return bleedingDeleted || bleedingExcluded
+  }
+
+  function maybeClearOldCycleStarts() {
+  // if we have a new bleeding day, we need to clear the
+  // menses start marker from all following days of this
+  // menses that may have been marked as start before
+    mensesDaysAfter.forEach(day => day.isCycleStart = false)
+  }
+}

metadata/en-US/full_description.txt

@@ -0,0 +1,20 @@
+Key Features
+• Track your bleeding, fertility, sex, mood, pain, and more if you want
+• Graphs to analyze cycle and period duration as well as other symptoms
+• Get notified about your next period and required temperature measurements
+• Easily import, export and password protect your data
+
+What makes drip special
+• Your data, your choice. Everything stays on your device.
+• Not another cute, pink app. drip is designed with gender inclusivity in mind.
+• Your body is not a black box. drip is transparent in its calculations and encourages you to think for yourself.
+• Based on science. drip detects your fertility using the symptothermal method.
+• Track what you like. Just your period or fertility symptoms, and more.
+• Open source. Contribute to the code, the documentation, translations and get involved with the community.
+• Non-commercial. drip doesn’t sell your data, no ads.
+
+SPECIAL THANKS TO:
+• All the condriputors!
+• The Prototype Fund
+• The Feminist Tech Fellowship
+• The Mozilla Foundation