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

@@ -1,24 +1,89 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## 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
 
-## [0.0.2] - 2019-04-16
-## Second updated beta release version
 ### 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
+
+### 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
+
+### Changes
+
+- Removes Google services from notification library and use fork of react-native-push-notification: <https://github.com/github:jfr3000/react-native-push-notification>
+
+### Fixed
+
+- Button functionality in settings for password
+
+## v0.0.2 - 2019-04-09
+
+## Second updated beta release version
+
+### Changes
+
 - First day of the week in calendar is now Monday instead of Sunday
 - Minor styling consistency
 
 ### Fixed
+
 - Typos
 - Bleeding value is visible in shortcut from Homescreen
 - Delete button for sex, pain and mood
 - Dates on chart
 
-## [0.0.1] - 2019-02-15
+## v0.0.1 - 2019-02-15
+
 ## First beta release version
+
 ### Added (list of core functionality)
+
 - you can track your menstrual bleeding
 - you can track symptoms related to natural family planning (nfp), i.e. basal temperature and mucus or cervix
 - you can use nfp symptoms for fertility awareness (drip implements the sympto-thermal method)

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/).
 
-The app is build in React Native and currently developed for Android.
+[<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 8 (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 v8
-    ```
+    $ 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.
 
@@ -75,15 +94,41 @@ If you get error messages about `adb` not being found on your path:
     $ ln -s ~/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb
     ```
 
-### [Windows 10] react native problems
-
-Unfortunately, the react native version we use doesn't work on Windows 10 it seems, find [more info here](https://github.com/facebook/react-native/issues/20015).
-
 ## 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:
@@ -96,7 +141,7 @@ More information about how the app calculates fertility status and bleeding pred
 
 ## Adding a new tracking icon
 
-1.  We use [fontello](http://fontello.com/) to create icon fonts for us. You need to upload the complete set of tracking icons (bleeding, mucus, ...) including the new icon you wish to add, all in SVG.
+1.  We use [fontello](http://fontello.com/) to create icon fonts for us. You need to upload the complete set of tracking icons (bleeding, cervical mucus, ...) including the new icon you wish to add, all in SVG.
 2.  Download webfont from fontello
 3.  Copy both the content of `config.json` and `font.tff` into `assets/fonts`, replacing it with the current content of `config-drip-icon-font.json` and `drip-icon-font.tff`.
 4.  Now run the following command in your console:

android/app/build.gradle

@@ -98,15 +98,22 @@ 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
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
+        versionCode 3
+        versionName "0.1905.29-beta"
         ndk {
-            abiFilters "armeabi-v7a", "x86"
+            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", "x86"
+            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, "x86":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 =
@@ -149,17 +156,19 @@ android {
 }
 
 dependencies {
-    compile project(':nodejs-mobile-react-native')
-    compile project(':react-native-restart')
-    compile project(':react-native-push-notification')
-    compile project(':react-native-vector-icons')
-    compile project(':react-native-fs')
-    compile project(':react-native-document-picker')
-    compile project(':react-native-share')
-    compile project(':realm')
-    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 project(':realm')
+    implementation project(':react-native-vector-icons')
+    implementation project(':react-native-share')
+    implementation project(':react-native-restart')
+    implementation project(':react-native-push-notification')
+    implementation project(':react-native-fs')
+    implementation project(':react-native-document-picker')
+    implementation project(':nodejs-mobile-react-native')
+    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/AndroidManifest.xml

@@ -7,6 +7,9 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.WAKE_LOCK" />
+    <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE" />
+    <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE" />
 
     <permission
         android:name="${applicationId}.permission.C2D_MESSAGE"

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/app/src/release/AndroidManifest.xml

@@ -0,0 +1,8 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.drip"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission tools:node="remove" android:name="android.permission.SYSTEM_ALERT_WINDOW" />
+    <uses-permission tools:node="remove" android:name="android.permission.INTERNET" />
+
+</manifest>

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,30 +27,29 @@ 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 = "26.0.3"
-    minSdkVersion = 16
-    compileSdkVersion = 26
-    targetSdkVersion = 26
-    supportLibVersion = "26.1.0"
+    buildToolsVersion = "28.0.3"
+    minSdkVersion = 23
+    compileSdkVersion = 28
+    targetSdkVersion = 28
+    supportLibVersion = "28.0.0"
 }
 
-subprojects {project ->
-  buildscript {
-    repositories {
-      maven { url = 'https://dl.bintray.com/android/android-tools/' }
+subprojects {
+    afterEvaluate {project ->
+        if (project.hasProperty("android")) {
+            android {
+                compileSdkVersion 28
+                buildToolsVersion '28.0.3'
+            }
+        }
     }
-  }
-  // https://stackoverflow.com/questions/52613089/getting-verifyreleaseresources-error-after-upgrading-react-native
-  afterEvaluate {
-    if (project.hasProperty("android")) {
-      android {
-        compileSdkVersion 27
-        buildToolsVersion "27.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.4-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-loading.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { View } from 'react-native'
+
+import AppText from './app-text'
+import { shared } from '../i18n/en/labels'
+
+const AppLoadingView = () => {
+  return (
+    <View flex={1}>
+      <View style={{flex:1, justifyContent: 'center'}}>
+        <AppText style={{alignSelf: 'center'}}>{shared.loading}</AppText>
+      </View>
+    </View>
+  )
+}
+
+export default AppLoadingView

components/app-text-input.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TextInput } from 'react-native'
+import styles from '../styles'
+
+export default function AppTextInput({ style, ...props }) {
+  if (!Array.isArray(style)) style = [style]
+  return (
+    <TextInput
+      style={[styles.textInputField, ...style]}
+      autoFocus={props.autoFocus}
+      onChangeText={props.onChangeText}
+      value={props.value}
+      placeholder={props.placeholder}
+      {...props}
+    />
+  )
+}
+
+AppTextInput.propTypes = {
+  autoFocus: PropTypes.bool,
+  onChangeText: PropTypes.func,
+  placeholder: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  value: PropTypes.string,
+}
+
+AppTextInput.defaultProps = {
+  style: []
+}

components/app-text.js

@@ -1,40 +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 ActionHint(props) {
-  if(props.isVisible) {
-    return (
-      <AppText
-        style={[styles.actionHint, props.style]}>
-        {props.children}
-      </AppText>
-    )
-  } else {
-    return null
-  }
-}
-
-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,150 +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 InfoSymptom from './cycle-day/symptoms/info-symptom'
+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 INFO_SYMPTOM_PAGE = 'InfoSymptom'
-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)
+  }
+
+  goBack = () => {
+    const { currentPage } = this.props.navigation
+
+    if (currentPage === 'Home') {
+      closeDb()
+      BackHandler.exitApp()
+    } else {
+      this.props.goBack()
     }
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress)
-    setupNotifications(this.navigate)
+
+    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.isInfoSymptomView()) {
-      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 if (this.isInfoSymptomView()) {
-      const { date, cycleDay, symptomView } = currentProps
-      this.navigate(
-        symptomView, { date, cycleDay })
-    } 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)
-  }
-
-  isInfoSymptomView() {
-    return this.state.currentPage === INFO_SYMPTOM_PAGE
-  }
-
-  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,
-      InfoSymptom,
-      SettingsMenu,
-      ...settingsViews,
-      Stats,
-      ...symptomViews
+    const { date, navigation, goBack } = this.props
+    const { currentPage } = navigation
+
+    if (!currentPage) {
+      return false
     }
-    const page = pages[currentPage]
-    const title = headerTitlesLowerCase[currentPage]
+
+    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,
+    }
+
     return (
-      <View style={{flex: 1}}>
-        {this.isDefaultView() &&
-          <Header title={title} />
+      <View style={{ flex: 1 }}>
+        {
+          !isSymptomEditView &&
+          !isCycleDayView &&
+          <Header { ...headerProps } />
         }
-        {(this.isInfoSymptomView() || this.isSettingsView()) &&
-          <Header
-            title={title}
-            showBackButton={true}
-            goBack={this.handleBackButtonPress}
-          />
-        }
-        {this.isSymptomView() &&
-          <Header
-            title={title}
-            isSymptomView={true}
-            goBack={this.handleBackButtonPress}
-            date={currentProps.date}
-            goToSymptomInfo={() => this.navigate(INFO_SYMPTOM_PAGE, {
-              symptomView: currentPage,
-              ...currentProps
-            })}
-          />}
 
-        {React.createElement(page, {
-          navigate: this.navigate,
-          ...currentProps
-        })}
+        <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,37 +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 { 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 }) => {
@@ -42,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}
       />
     )
   }
 
+  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 * xAxisCoefficient
+    const remainingHeight = height - this.xAxisHeight
+    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)
+
+    const numberOfColumnsToRender = Math.round(width / config.columnWidth)
+    const columns = makeColumnInfo()
+
+    this.setState({ columns, chartHeight, numberOfColumnsToRender })
+  }
+
   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]
-        })
-      })
 
-      this.xAxisHeight = height * config.xAxisHeightPercentage
-      const remainingHeight = height - this.xAxisHeight
-      this.symptomHeight = config.symptomHeightPercentage * remainingHeight
-      this.symptomRowHeight = this.symptomRowSymptoms.length *
-        this.symptomHeight
-      this.columnHeight = remainingHeight - this.symptomRowHeight
-
-      this.chartSymptoms = [...this.symptomRowSymptoms]
-      if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
-        this.chartSymptoms.push('temperature')
-      }
-
-      const columnData = this.makeColumnInfo()
-      this.setState({
-        columns: columnData,
-        chartHeight: height
-      })
-    }
-
-    reCalculateChartInfo()
-    this.updateListeners(reCalculateChartInfo)
+    this.reCalculateChartInfo(nativeEvent)
+    this.updateListeners(this.reCalculateChartInfo)
   }
 
   updateListeners(dataUpdateHandler) {
@@ -114,110 +119,85 @@ 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 &&
-          <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
-            <AppText>{labels.loading}</AppText>
-          </View>
-        }
+      <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>
-              })}
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  <YAxis
+                    height={this.columnHeight}
+                    symptomsToDisplay={this.symptomRowSymptoms}
+                    symptomsSectionHeight={this.symptomRowHeight}
+                    shouldShowTemperatureColumn=
+                      {this.shouldShowTemperatureColumn}
+                    xAxisHeight={this.xAxisHeight}
+                  />
+                  {this.shouldShowTemperatureColumn && (<HorizontalGrid
+                    height={this.columnHeight}
+                    startPosition={this.symptomRowHeight}
+                  />)}
+                </React.Fragment>
+              )}
+
+              {chartHeight &&
+               <FlatList
+                 horizontal={true}
+                 inverted={true}
+                 showsHorizontalScrollIndicator={false}
+                 data={this.state.columns}
+                 renderItem={this.renderColumn}
+                 keyExtractor={item => item}
+                 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 style={[styles.yAxis, {height: this.columnHeight}]}>
-              {makeYAxisLabels(this.columnHeight)}
+          )}
+        </View>
+        {shouldShowChart && chartLoaded && !this.shouldShowTemperatureColumn
+          && (
+            <View style={styles.centerItem}>
+              <AppText style={{textAlign: 'center'}}>{shared.noTemperatureWarning}</AppText>
             </View>
-            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <DripHomeIcon
-                name="circle"
-                size={styles.yAxis.width - 7}
-                color={cycleDayColor}
-              />
-              <AppText style={[styles.yAxisLabels.dateLabel]}>
-                {labels.date.toLowerCase()}
-              </AppText>
-            </View>
-          </View>}
-
-
-        {this.state.chartHeight && this.state.chartLoaded &&
-          makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
-        }
-
-        {this.state.chartHeight &&
-          <FlatList
-            horizontal={true}
-            inverted={true}
-            showsHorizontalScrollIndicator={false}
-            data={this.state.columns}
-            renderItem={this.renderColumn}
-            keyExtractor={item => item}
-            initialNumToRender={15}
-            windowSize={30}
-            onLayout={() => this.setState({chartLoaded: true})}
-            onEndReached={() => this.setState({end: true})}
-            ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
-            updateCellsBatchingPeriod={800}
-          />
-        }
+          )}
       </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

@@ -7,10 +7,33 @@ export const dotRadius = 5
 const lineWidth = 1.5
 const colorLtl = '#feb47b'
 const gridColor = '#d3d3d3'
-const gridLineWidth = 0.5
+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,
@@ -44,42 +67,47 @@ const styles = {
     },
     stroke: {
       color: gridColor,
-      width: gridLineWidth,
+      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,
@@ -108,12 +136,24 @@ const styles = {
       fontWeight: '100',
     }
   },
+  symptomIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chartLegend: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  boldTick: {
+    fontWeight: 'bold',
+    fontSize: 11,
+  },
   horizontalGrid: {
     position:'absolute',
-    borderColor: gridColor,
-    borderWidth: gridLineWidth,
-    width: '100%',
     borderStyle: 'solid',
+    borderBottomColor: gridColor,
+    borderBottomWidth: gridLineWidthHorizontal,
+    width: '100%',
     left: config.columnWidth
   },
   nfpLine: {

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>
-    )
-  })
+  return (
+    <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>
+  )
 }
 
-export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
-  return getTickPositions(columnHeight).map(tick => {
-    return (
-      <View
-        top={tick + symptomRowHeight}
-        {...styles.horizontalGrid}
-        key={tick}
-      />
-    )
-  })
+YAxis.propTypes = {
+  height: PropTypes.number,
+  symptomsToDisplay: PropTypes.array,
+  symptomsSectionHeight: PropTypes.number,
+  shouldShowTemperatureColumn: PropTypes.bool,
+  xAxisHeight: PropTypes.number.isRequired
 }
 
-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 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,265 +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 AppText from '../app-text'
-import DripIcon from '../../assets/drip-icons'
 
-const bleedingLabels = labels.bleeding.labels
-const feelingLabels = labels.mucus.feeling.categories
-const textureLabels = labels.mucus.texture.categories
-const openingLabels = labels.cervix.opening.categories
-const firmnessLabels = labels.cervix.firmness.categories
-const positionLabels = labels.cervix.position.categories
-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 categories = ['feeling', 'texture', 'value']
-        if (categories.every(c => isNumber(mucus[c]))) {
-          let mucusLabel = [feelingLabels[mucus.feeling], textureLabels[mucus.texture]].join(', ')
-          mucusLabel += `\n${labels.mucusNFP[mucus.value]}`
-          if (mucus.exclude) mucusLabel = `(${mucusLabel})`
-          return mucusLabel
-        }
-      },
-      cervix: cervix => {
-        let cervixLabel = []
-        if (isNumber(cervix.opening) && isNumber(cervix.firmness)) {
-          cervixLabel.push(
-            openingLabels[cervix.opening],
-            firmnessLabels[cervix.firmness]
-          )
-          if (isNumber(cervix.position)) {
-            cervixLabel.push(positionLabels[cervix.position])
-          }
-          cervixLabel = cervixLabel.join(', ')
-          if (cervix.exclude) cervixLabel = `(${cervixLabel})`
-          return cervixLabel
-        }
-      },
-      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}>
-            <SymptomBox
-              title='Bleeding'
-              onPress={() => this.navigate('BleedingEditView')}
-              data={this.getLabel('bleeding')}
-              disabled={dateInFuture}
-              iconName='drip-icon-bleeding'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Temperature'
-              onPress={() => this.navigate('TemperatureEditView')}
-              data={this.getLabel('temperature')}
-              disabled={dateInFuture}
-              iconName='drip-icon-temperature'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Mucus'
-              onPress={() => this.navigate('MucusEditView')}
-              data={this.getLabel('mucus')}
-              disabled={dateInFuture}
-              iconName='drip-icon-mucus'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Cervix'
-              onPress={() => this.navigate('CervixEditView')}
-              data={this.getLabel('cervix')}
-              disabled={dateInFuture}
-              iconName='drip-icon-cervix'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Desire'
-              onPress={() => this.navigate('DesireEditView')}
-              data={this.getLabel('desire')}
-              disabled={dateInFuture}
-              iconName='drip-icon-desire'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Sex'
-              onPress={() => this.navigate('SexEditView')}
-              data={this.getLabel('sex')}
-              disabled={dateInFuture}
-              iconName='drip-icon-sex'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Pain'
-              onPress={() => this.navigate('PainEditView')}
-              data={this.getLabel('pain')}
-              disabled={dateInFuture}
-              iconName='drip-icon-pain'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='Mood'
-              onPress={() => this.navigate('MoodEditView')}
-              data={this.getLabel('mood')}
-              disabled={dateInFuture}
-              iconName='drip-icon-mood'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title='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 */}
+            {
+              symptomBoxesList.map(symptom => {
+                const symptomEditView =
+                  `${symptom[0].toUpperCase() + symptom.substring(1)}EditView`
+                const symptomData =
+                  cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
+                return(
+                  <SymptomBox
+                    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>
@@ -268,55 +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]}>
-            {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() {
-    return (
-      <View style={styles.selectBoxSection}>
-        {Object.keys(this.props.labels).map(key => {
-          const style = [styles.selectBox]
-          const textStyle = []
-          if (this.props.optionsState[key]) {
-            style.push(styles.selectBoxActive)
-            textStyle.push(styles.selectBoxTextActive)
-          }
-          return (
-            <TouchableOpacity
-              onPress={() => this.props.onSelect(key)}
-              key={key}
-            >
-              <View style={style}>
-                <AppText style={textStyle}>{this.props.labels[key]}</AppText>
-              </View>
-            </TouchableOpacity>
-          )
-        })}
-      </View>
-    )
-  }
+import styles from '../../styles'
+
+export default function SelectBoxGroup({ labels, onSelect, optionsState }) {
+  return (
+    <View style={styles.selectBoxSection}>
+      {Object.keys(labels).map(key => {
+        const style = [styles.selectBox]
+        const textStyle = []
+        if (optionsState[key]) {
+          style.push(styles.selectBoxActive)
+          textStyle.push(styles.selectBoxTextActive)
+        }
+        return (
+          <TouchableOpacity
+            onPress={() => onSelect(key)}
+            key={key}
+          >
+            <View style={style}>
+              <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,46 +1,50 @@
-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() {
-    return (
-      <View style={styles.selectTabGroup}>
-        {
-          this.props.buttons.map(({ label, value }, i) => {
-            let firstOrLastStyle
-            if (i === this.props.buttons.length - 1) {
-              firstOrLastStyle = styles.selectTabLast
-            } else if (i === 0) {
-              firstOrLastStyle = styles.selectTabFirst
-            }
-            let activeStyle
-            const isActive = value === this.props.active
-            if (isActive) activeStyle = styles.selectTabActive
-            return (
-              <TouchableOpacity
-                onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
-                key={i}
-                activeOpacity={1}
-              >
-                <View>
-                  <View style={[
-                    styles.selectTab,
-                    firstOrLastStyle,
-                    activeStyle
-                  ]}>
-                    <AppText style={activeStyle}>{label}</AppText>
-                  </View>
+import styles from '../../styles'
+
+export default function SelectTabGroup({ active, buttons, onSelect }) {
+  return (
+    <View style={styles.selectTabGroup}>
+      {
+        buttons.map(({ label, value }, i) => {
+          let firstOrLastStyle
+          if (i === buttons.length - 1) {
+            firstOrLastStyle = styles.selectTabLast
+          } else if (i === 0) {
+            firstOrLastStyle = styles.selectTabFirst
+          }
+          let activeStyle
+          const isActive = value === active
+          if (isActive) activeStyle = styles.selectTabActive
+          return (
+            <TouchableOpacity
+              onPress={() => onSelect(isActive ? null : value)}
+              key={i}
+              activeOpacity={1}
+            >
+              <View>
+                <View style={[
+                  styles.selectTab,
+                  firstOrLastStyle,
+                  activeStyle
+                ]}>
+                  <AppText style={activeStyle}>{label}</AppText>
                 </View>
-              </TouchableOpacity>
-            )
-          })
-        }
-      </View>
-    )
-  }
+              </View>
+            </TouchableOpacity>
+          )
+        })
+      }
+    </View>
+  )
+}
+
+SelectTabGroup.propTypes = {
+  active: PropTypes.number,
+  buttons: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired
 }

components/cycle-day/symptoms/action-button-footer.js

@@ -1,94 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View, TouchableOpacity, Text, Alert, ToastAndroid
-} from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { saveSymptom } from '../../../db'
-import styles, {iconStyles} from '../../../styles'
-import {sharedDialogs as labels} from '../../../i18n/en/cycle-day'
-
-
-export default class ActionButtonFooter extends Component {
-  render() {
-    const {
-      symptom,
-      currentSymptomValue,
-      date,
-      saveAction,
-      saveDisabled,
-      navigate,
-      autoShowDayView = true}
-      = this.props
-    const navigateToOverView = () => navigate('CycleDay', {date})
-    const buttons = [
-      {
-        title: labels.delete,
-        action: () => {
-          Alert.alert(
-            labels.areYouSureTitle,
-            labels.areYouSureToDelete,
-            [{
-              text: labels.cancel,
-              style: 'cancel'
-            }, {
-              text: labels.reallyDeleteData,
-              onPress: () => {
-                saveSymptom(symptom, date)
-                navigateToOverView()
-              }
-            }]
-          )
-        },
-        disabledCondition: (!currentSymptomValue ||
-          (Object.keys(currentSymptomValue).length === 0 && currentSymptomValue.constructor === Object) ||
-          (Object.values(currentSymptomValue).every(x => !x) && currentSymptomValue.constructor === Object)
-        ),
-        icon: 'delete-outline'
-      }, {
-        title: labels.save,
-        action: () => {
-          if(saveDisabled) {
-            ToastAndroid.show(labels.disabledInfo, ToastAndroid.LONG)
-          } else {
-            saveAction()
-            if (autoShowDayView) navigateToOverView()
-          }
-
-        },
-        disabledCondition: saveDisabled,
-        icon: 'content-save-outline'
-      }
-    ]
-    return (
-      <View style={styles.menu}>
-        {buttons.map(({ title, action, disabledCondition, icon }, i) => {
-          const textStyle = [styles.menuText]
-          if (disabledCondition) {
-            textStyle.push(styles.menuTextInActive)
-          }
-          const iconStyle = disabledCondition ?
-            Object.assign(
-              {},
-              iconStyles.menuIcon,
-              iconStyles.menuIconInactive
-            )
-            :
-            iconStyles.menuIcon
-          return (
-            <TouchableOpacity
-              onPress={action}
-              style={styles.menuItem}
-              key={i.toString()}
-            >
-              <Icon name={icon} {...iconStyle} />
-              <Text style={textStyle}>
-                {title.toLowerCase()}
-              </Text>
-            </TouchableOpacity>
-
-          )
-        })}
-      </View>
-    )
-  }
-}

components/cycle-day/symptoms/bleeding.js

@@ -1,75 +1,85 @@
 import React, { Component } from 'react'
-import {
-  View,
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { saveSymptom } from '../../../db'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { bleeding } from '../../../i18n/en/cycle-day'
-import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
+
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Bleeding extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
 
-export default class Bleeding extends Component {
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.bleeding = cycleDay && cycleDay.bleeding
-    this.makeActionButtons = props.makeActionButtons
-    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
     }
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.bleedingRadioProps = getLabelsList(bleeding.labels)
+
+    this.symptom = symptom
+  }
+
+  autoSave = () => {
+    const { date } = this.props
+    const valuesToSave = { ...this.state }
+    const hasValueToSave = typeof this.state.value === 'number'
+    saveSymptom(this.symptom, date, hasValueToSave ? valuesToSave : null)
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   render() {
-    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 },
-    ]
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            header={bleeding.heaviness.header}
-            explainer={bleeding.heaviness.explainer}
-          >
-            <SelectTabGroup
-              buttons={bleedingRadioProps}
-              active={this.state.currentValue}
-              onSelect={val => this.setState({ currentValue: val })}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header={bleeding.exclude.header}
-            explainer={bleeding.exclude.explainer}
-            inline={true}
-          >
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </SymptomSection>
-        </ScrollView>
-        <ActionButtonFooter
-          symptom='bleeding'
-          date={this.props.date}
-          currentSymptomValue={this.bleeding}
-          saveAction={() => {
-            saveSymptom('bleeding', this.props.date, {
-              value: this.state.currentValue,
-              exclude: this.state.exclude
-            })
-          }}
-          saveDisabled={typeof this.state.currentValue != 'number'}
-          navigate={this.props.navigate}
-        />
-      </View>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          header={bleeding.heaviness.header}
+          explainer={bleeding.heaviness.explainer}
+        >
+          <SelectTabGroup
+            buttons={this.bleedingRadioProps}
+            active={this.state.value}
+            onSelect={val => this.setState({ value: val })}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header={bleeding.exclude.header}
+          explainer={bleeding.exclude.explainer}
+          inline={true}
+        >
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
+
+export default Bleeding

components/cycle-day/symptoms/cervix.js

@@ -1,105 +1,113 @@
 import React, { Component } from 'react'
-import {
-  View,
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { saveSymptom } from '../../../db'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { cervix as labels } from '../../../i18n/en/cycle-day'
-import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
-import { ActionHint } from '../../app-text'
+import SymptomView from './symptom-view'
+
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Cervix extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
 
-export default class Cervix extends Component {
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.cervix = cycleDay && cycleDay.cervix
-    this.makeActionButtons = props.makeActionButtons
-    this.state = this.cervix ? this.cervix : {}
+    const symptom = 'cervix'
+    const { cycleDay } = props
+
+    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 { 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)
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   render() {
-    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 }
-    ]
-    const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
+    // TODO saving this info for notice when leaving incomplete data
+    // const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            header="Opening"
-            explainer={labels.opening.explainer}
-          >
-            <SelectTabGroup
-              buttons={cervixOpeningRadioProps}
-              active={this.state.opening}
-              onSelect={val => this.setState({ opening: val })}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header="Firmness"
-            explainer={labels.firmness.explainer}
-          >
-            <SelectTabGroup
-              buttons={cervixFirmnessRadioProps}
-              active={this.state.firmness}
-              onSelect={val => this.setState({ firmness: val })}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header="Position"
-            explainer={labels.position.explainer}
-          >
-            <SelectTabGroup
-              buttons={cervixPositionRadioProps}
-              active={this.state.position}
-              onSelect={val => this.setState({ position: val })}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header="Exclude"
-            explainer="You can exclude this value if you don't want to use it for fertility detection"
-            inline={true}
-          >
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </SymptomSection>
-        </ScrollView>
-        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
-        <ActionButtonFooter
-          symptom='cervix'
-          date={this.props.date}
-          currentSymptomValue={this.cervix}
-          saveAction={() => {
-            saveSymptom('cervix', this.props.date, {
-              opening: this.state.opening,
-              firmness: this.state.firmness,
-              position: this.state.position,
-              exclude: Boolean(this.state.exclude)
-            })
-          }}
-          saveDisabled={mandatoryNotCompletedYet}
-          navigate={this.props.navigate}
-        />
-      </View>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          header="Opening"
+          explainer={labels.opening.explainer}
+        >
+          <SelectTabGroup
+            buttons={this.cervixOpeningRadioProps}
+            active={this.state.opening}
+            onSelect={val => this.setState({ opening: val })}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header="Firmness"
+          explainer={labels.firmness.explainer}
+        >
+          <SelectTabGroup
+            buttons={this.cervixFirmnessRadioProps}
+            active={this.state.firmness}
+            onSelect={val => this.setState({ firmness: val })}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header="Position"
+          explainer={labels.position.explainer}
+        >
+          <SelectTabGroup
+            buttons={this.cervixPositionRadioProps}
+            active={this.state.position}
+            onSelect={val => this.setState({ position: val })}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header="Exclude"
+          explainer="You can exclude this value if you don't want to use it for fertility detection"
+          inline={true}
+        >
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
+
+export default Cervix

components/cycle-day/symptoms/desire.js

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

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

@@ -1,35 +1,28 @@
-import React, { Component } from 'react'
-import { ScrollView } from 'react-native'
+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 FramedSegment from '../../framed-segment'
-import styles from '../../../styles/index'
+import styles, {iconStyles} from '../../../styles/index'
 
-export default class InfoSymptom extends Component {
-  render() {
-    const symptomView = this.props.symptomView
-    const symptomMapping = {
-      BleedingEditView: 'bleeding',
-      CervixEditView: 'cervix',
-      DesireEditView: 'desire',
-      MoodEditView: 'mood',
-      MucusEditView: 'mucus',
-      NoteEditView: 'note',
-      PainEditView: 'pain',
-      SexEditView: 'sex',
-      TemperatureEditView: 'temperature'
-    }
-    const currentSymptom = symptomMapping[symptomView]
-
-    return (
-      <ScrollView>
-        <FramedSegment
-          style={styles.framedSegmentLast}
-          title={labels[currentSymptom].title}
-        >
-          <AppText>{labels[currentSymptom].text}</AppText>
-        </FramedSegment>
-      </ScrollView>
-    )
-  }
+export default function InfoSymptom({ close, symptom }) {
+  return (
+    <View style={styles.infoPopUpWrapper}>
+      <View style={styles.dimmed}></View>
+      <View style={styles.infoPopUp} testID="symptomInfoPopup">
+        <TouchableOpacity onPress={close} style={styles.infoSymptomClose}>
+          <Icon name='close' {...iconStyles.infoPopUpClose}/>
+        </TouchableOpacity>
+        <ScrollView style={styles.infoSymptomText}>
+          <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,28 +1,53 @@
 import React, { Component } from 'react'
-import {
-  ScrollView,
-  TextInput,
-  View
-} from 'react-native'
-import { saveSymptom } from '../../../db'
+import { TextInput } from 'react-native'
+import PropTypes from 'prop-types'
+
 import { mood as labels } from '../../../i18n/en/cycle-day'
-import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
-import styles from '../../../styles'
+import SymptomView from './symptom-view'
+
+import { saveSymptom } from '../../../db'
+
+class Mood extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
 
-export default class Mood extends Component {
   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
+
+    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)
+
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   toggleState = (key) => {
@@ -35,17 +60,20 @@ export default class Mood extends Component {
 
   render() {
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            explainer={labels.explainer}
-          >
-            <SelectBoxGroup
-              labels={labels.categories}
-              onSelect={this.toggleState}
-              optionsState={this.state}
-            />
-            { this.state.other &&
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          explainer={labels.explainer}
+        >
+          <SelectBoxGroup
+            labels={labels.categories}
+            onSelect={this.toggleState}
+            optionsState={this.state}
+          />
+          { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
@@ -55,24 +83,11 @@ export default class Mood extends Component {
                   this.setState({note: val})
                 }}
               />
-            }
-          </SymptomSection>
-        </ScrollView>
-        <ActionButtonFooter
-          symptom='mood'
-          date={this.props.date}
-          currentSymptomValue={this.state}
-          saveAction={() => {
-            const copyOfState = Object.assign({}, this.state)
-            if (!copyOfState.other) {
-              copyOfState.note = null
-            }
-            saveSymptom('mood', this.props.date, copyOfState)
-          }}
-          saveDisabled={Object.values(this.state).every(value => !value)}
-          navigate={this.props.navigate}
-        />
-      </View>
+          }
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
+
+export default Mood

components/cycle-day/symptoms/mucus.js

@@ -1,95 +1,104 @@
 import React, { Component } from 'react'
-import {
-  View,
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { saveSymptom } from '../../../db'
+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 ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
-import { ActionHint } from '../../app-text'
+import SymptomView from './symptom-view'
+
+import { getLabelsList } from '../../helpers/labels'
+import { saveSymptom } from '../../../db'
+
+class Mucus extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
 
-export default class Mucus extends Component {
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.mucus = cycleDay && cycleDay.mucus
-    this.makeActionButtons = props.makeActionButtons
-    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
+  }
+
+  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(exclude)
+    }
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
+  }
+
+  componentDidUpdate() {
+    this.shouldAutoSave()
   }
 
   render() {
-    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 }
-    ]
-    const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
+    // TODO leaving this info for notice when leaving incomplete data
+    // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            header='Feeling'
-            explainer={labels.feeling.explainer}
-          >
-            <SelectTabGroup
-              buttons={mucusFeeling}
-              onSelect={val => this.setState({ feeling: val })}
-              active={this.state.feeling}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header='Texture'
-            explainer={labels.texture.explainer}
-          >
-            <SelectTabGroup
-              buttons={mucusTexture}
-              onSelect={val => this.setState({ texture: val })}
-              active={this.state.texture}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header="Exclude"
-            explainer={labels.excludeExplainer}
-            inline={true}
-          >
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </SymptomSection>
-        </ScrollView>
-        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
-        <ActionButtonFooter
-          symptom='mucus'
-          date={this.props.date}
-          currentSymptomValue={this.mucus}
-          saveAction={() => {
-            const feeling = this.state.feeling
-            const texture = this.state.texture
-            saveSymptom('mucus', this.props.date, {
-              feeling,
-              texture,
-              value: computeNfpValue(feeling, texture),
-              exclude: Boolean(this.state.exclude)
-            })
-          }}
-          saveDisabled={mandatoryNotCompletedYet}
-          navigate={this.props.navigate}
-        />
-      </View>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          header='Feeling'
+          explainer={labels.feeling.explainer}
+        >
+          <SelectTabGroup
+            buttons={this.mucusFeeling}
+            onSelect={val => this.setState({ feeling: val })}
+            active={this.state.feeling}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header='Texture'
+          explainer={labels.texture.explainer}
+        >
+          <SelectTabGroup
+            buttons={this.mucusTexture}
+            onSelect={val => this.setState({ texture: val })}
+            active={this.state.texture}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header="Exclude"
+          explainer={labels.excludeExplainer}
+          inline={true}
+        >
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
+
+export default Mucus

components/cycle-day/symptoms/note.js

@@ -1,60 +1,65 @@
 import React, { Component } from 'react'
-import {
-  View,
-  ScrollView,
-  TextInput,
-} from 'react-native'
+import PropTypes from 'prop-types'
+import { TextInput } from 'react-native'
 
-import styles from '../../../styles'
-import { saveSymptom } from '../../../db'
-import ActionButtonFooter from './action-button-footer'
 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'
+
+import { saveSymptom } from '../../../db'
+
+class Note extends Component {
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired
+  }
 
-export default class Note extends Component {
   constructor(props) {
     super(props)
-    const cycleDay = props.cycleDay
-    this.note = cycleDay && cycleDay.note
-    this.makeActionButtons = props.makeActionButtons
+    const symptom = 'note'
+    const { cycleDay } = props
 
-    this.state = {
-      currentValue: this.note && this.note.value || ''
-    }
+    const defaultSymptomData = { value: '' }
+
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    this.state = { ...symptomData }
+
+    this.symptom = symptom
+  }
+
+  autoSave = () => {
+    const { date } = this.props
+    const valuesToSave = { ...this.state }
+    saveSymptom(this.symptom, date, this.state.value ? valuesToSave : null)
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   render() {
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            explainer={noteExplainer}
-          >
-            <TextInput
-              autoFocus={!this.state.currentValue}
-              multiline={true}
-              placeholder={sharedLabels.enter}
-              onChangeText={(val) => {
-                this.setState({ currentValue: val })
-              }}
-              value={this.state.currentValue}
-            />
-          </SymptomSection>
-        </ScrollView>
-        <ActionButtonFooter
-          symptom='note'
-          date={this.props.date}
-          currentSymptomValue={this.note}
-          saveAction={() => {
-            saveSymptom('note', this.props.date, {
-              value: this.state.currentValue
-            })
-          }}
-          saveDisabled={!this.state.currentValue}
-          navigate={this.props.navigate}
-        />
-      </View>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection explainer={noteExplainer} >
+          <TextInput
+            autoFocus={true}
+            multiline={true}
+            placeholder={sharedLabels.enter}
+            onChangeText={(val) => { this.setState({ value: val })}}
+            value={this.state.value}
+            testID='noteInput'
+          />
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
+
+export default Note

components/cycle-day/symptoms/pain.js

@@ -1,29 +1,54 @@
 import React, { Component } from 'react'
-import {
-  ScrollView,
-  TextInput,
-  View
-} from 'react-native'
-import { saveSymptom } from '../../../db'
+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 ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
-import styles from '../../../styles'
+import SymptomView from './symptom-view'
+
+import { saveSymptom } from '../../../db'
+
+class Pain extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
 
-export default class Pain extends Component {
   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
+
+    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)
+
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   toggleState = (key) => {
@@ -36,17 +61,20 @@ export default class Pain extends Component {
 
   render() {
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            explainer={labels.explainer}
-          >
-            <SelectBoxGroup
-              labels={labels.categories}
-              onSelect={this.toggleState}
-              optionsState={this.state}
-            />
-            { this.state.other &&
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          explainer={labels.explainer}
+        >
+          <SelectBoxGroup
+            labels={labels.categories}
+            onSelect={this.toggleState}
+            optionsState={this.state}
+          />
+          { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
@@ -56,24 +84,11 @@ export default class Pain extends Component {
                   this.setState({note: val})
                 }}
               />
-            }
-          </SymptomSection>
-        </ScrollView>
-        <ActionButtonFooter
-          symptom='pain'
-          date={this.props.date}
-          currentSymptomValue={this.state}
-          saveAction={() => {
-            const copyOfState = Object.assign({}, this.state)
-            if (!copyOfState.other) {
-              copyOfState.note = null
-            }
-            saveSymptom('pain', this.props.date, copyOfState)
-          }}
-          saveDisabled={Object.values(this.state).every(value => !value)}
-          navigate={this.props.navigate}
-        />
-      </View>
+          }
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
+
+export default Pain

components/cycle-day/symptoms/sex.js

@@ -1,65 +1,97 @@
 import React, { Component } from 'react'
-import {
-  TextInput,
-  View,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { saveSymptom } from '../../../db'
+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 ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
+
+import { saveSymptom } from '../../../db'
+
+class Sex extends Component {
+
+  static propTypes = {
+    cycleDay: PropTypes.object,
+    date: PropTypes.string.isRequired,
+  }
 
-export default class Sex extends Component {
   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
+
+    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)
+
+    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
   }
 
   toggleState = (key) => {
     const curr = this.state[key]
     this.setState({[key]: !curr})
-    if (key === 'other' && !curr) {
-      this.setState({focusTextArea: true})
+    if (key === 'other'){
+      if (curr){
+        this.setState({note: ""})
+      } else {
+        this.setState({focusTextArea: true})
+      }
     }
   }
 
   render() {
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <SymptomSection
-            header={sexLabels.header}
-            explainer={sexLabels.explainer}
-          >
-            <SelectBoxGroup
-              labels={sexLabels.categories}
-              onSelect={this.toggleState}
-              optionsState={this.state}
-            />
-          </SymptomSection>
-          <SymptomSection
-            header={contraceptivesLabels.header}
-            explainer={contraceptivesLabels.explainer}
-          >
-            <SelectBoxGroup
-              labels={contraceptivesLabels.categories}
-              onSelect={this.toggleState}
-              optionsState={this.state}
-            />
-          </SymptomSection>
+      <SymptomView
+        symptom={this.symptom}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          header={sexLabels.header}
+          explainer={sexLabels.explainer}
+        >
+          <SelectBoxGroup
+            labels={sexLabels.categories}
+            onSelect={this.toggleState}
+            optionsState={this.state}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header={contraceptivesLabels.header}
+          explainer={contraceptivesLabels.explainer}
+        >
+          <SelectBoxGroup
+            labels={contraceptivesLabels.categories}
+            onSelect={this.toggleState}
+            optionsState={this.state}
+          />
+        </SymptomSection>
 
-          {this.state.other &&
+        {this.state.other &&
             <TextInput
               autoFocus={this.state.focusTextArea}
               multiline={true}
@@ -69,23 +101,10 @@ export default class Sex extends Component {
                 this.setState({ note: val })
               }}
             />
-          }
-        </ScrollView>
-        <ActionButtonFooter
-          symptom='sex'
-          date={this.props.date}
-          currentSymptomValue={this.state}
-          saveAction={() => {
-            const copyOfState = Object.assign({}, this.state)
-            if (!copyOfState.other) {
-              copyOfState.note = null
-            }
-            saveSymptom('sex', this.props.date, copyOfState)
-          }}
-          saveDisabled={Object.values(this.state).every(value => !value)}
-          navigate={this.props.navigate}
-        />
-      </View>
+        }
+      </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,7 @@
 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 {
   render() {
@@ -13,16 +14,20 @@ export default class SymptomSection extends Component {
       }
     }
     return (
-      <View style={placeHeadingInline}>
-        <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+      <View style={[placeHeadingInline, styles.symptomSection]}>
+        { p.header &&
+          <AppText style={styles.symptomViewHeading}>{p.header}</AppText>
+        }
         <View
           flexDirection={p.inline ? 'row' : null}
           flex={1}
           alignItems={p.inline ? 'center' : null}
         >
-          <View flex={1}>
-            <AppText>{p.explainer}</AppText>
-          </View>
+          { p.explainer && (
+            <View flex={1}>
+              <AppText>{p.explainer}</AppText>
+            </View>
+          )}
           {p.children}
         </View>
       </View>

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

@@ -0,0 +1,117 @@
+import React, { Component } from 'react'
+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 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 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.state = {
+      shouldShowDelete: checkIfHasValues(props.values)
+    }
+  }
+
+  componentDidUpdate() {
+    const shouldShowDelete = checkIfHasValues(this.props.values)
+    if (shouldShowDelete !== this.state.shouldShowDelete) {
+      this.setState({ shouldShowDelete })
+    }
+  }
+
+  deleteSymptomEntry() {
+    const { symptom, date } = this.props
+    saveSymptom(symptom, date, null)
+  }
+
+  onDeleteConfirmation = () => {
+    this.deleteSymptomEntry()
+    this.props.goBack()
+  }
+
+  showConfirmationAlert = () => {
+
+    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[symptom]}
+          subtitle={formatDate(date)}
+          handleBack={goBack}
+          handleDelete={handleDelete}
+        />
+        <View flex={1}>
+          <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,213 +1,139 @@
 import React, { Component } from 'react'
-import {
-  View,
-  TextInput,
-  Switch,
-  Keyboard,
-  Alert,
-  ScrollView
-} from 'react-native'
-import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import padWithZeros from '../../helpers/pad-time-with-zeros'
+import { Switch } from 'react-native'
+import PropTypes from 'prop-types'
 
-import { getPreviousTemperature, saveSymptom } 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 ActionButtonFooter from './action-button-footer'
-import config from '../../../config'
+
+import AppTextInput from '../../app-text-input'
 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 Component {
+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
-    this.makeActionButtons = props.makeActionButtons
+    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,
-      outOfRange: null,
-      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`
-      }
-    } else {
-      const prevTemp = getPreviousTemperature(this.props.date)
-      if (prevTemp) {
-        this.state.temperature = prevTemp.toString()
-        this.state.isSuggestion = true
-      }
-    }
+    const symptomData =
+      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
+
+    const { value, ...restSymptomData } = symptomData
+    this.state = { temperature: value, ...restSymptomData }
+
+    this.symptom = symptom
   }
 
-  saveTemperature = () => {
-    const dataToSave = {
-      value: Number(this.state.temperature),
-      exclude: this.state.exclude,
-      time: this.state.time,
-      note: this.state.note
-    }
-    saveSymptom('temperature', this.props.date, dataToSave)
-    this.props.navigate('CycleDay', {date: this.props.date})
+  isDeleteIconActive() {
+    return ['temperature', 'note', 'exclude'].some(key => {
+    // the time is always and the suggested temp sometimes prefilled, so they're not relevant for setting
+    // the delete button active.
+      return this.state[key] || this.state[key] === 0
+    })
   }
 
-  checkRangeAndSave = () => {
-    const value = Number(this.state.temperature)
+  autoSave = () => {
+    const { date } = this.props
+    const { temperature, exclude, time, note } = this.state
 
-    const absolute = {
-      min: config.temperatureScale.min,
-      max: config.temperatureScale.max
-    }
-    const scale = scaleObservable.value
-    let warningMsg
-    if (value < absolute.min || value > absolute.max) {
-      warningMsg = labels.outOfAbsoluteRangeWarning
-    } else if (value < scale.min || value > scale.max) {
-      warningMsg = labels.outOfRangeWarning
-    }
-
-    if (warningMsg) {
-      Alert.alert(
-        sharedLabels.warning,
-        warningMsg,
-        [
-          { text: sharedLabels.cancel },
-          { text: sharedLabels.save, onPress: this.saveTemperature}
-        ]
-      )
-    } else {
-      this.saveTemperature()
+    const valuesToSave = {
+      value: temperature,
+      exclude,
+      time,
+      note
     }
 
+    saveSymptom(this.symptom, date, temperature ? valuesToSave : null)
   }
 
+  setTime = (time) => {
+    this.setState({ time })
+  }
+
+  setTemperature = (temperature) => {
+    this.setState({ temperature })
+  }
+
+  setNote = (note) => {
+    this.setState({ note })
+  }
+
+  componentDidUpdate() {
+    this.autoSave()
+  }
 
   render() {
+    const { temperature } = this.state
+
     return (
-      <View style={{ flex: 1 }}>
-        <ScrollView style={styles.page}>
-          <View>
-            <SymptomSection
-              header={labels.temperature.header}
-              explainer={labels.temperature.explainer}
-              inline={true}
-            >
-              <TempInput
-                value={this.state.temperature}
-                setState={(val) => this.setState(val)}
-                isSuggestion={this.state.isSuggestion}
-              />
-            </SymptomSection>
-            <SymptomSection
-              header={labels.time}
-              inline={true}
-            >
-              <TextInput
-                style={styles.temperatureTextInput}
-                onFocus={() => {
-                  Keyboard.dismiss()
-                  this.setState({ isTimePickerVisible: true })
-                }}
-                value={this.state.time}
-              />
-              <DateTimePicker
-                mode="time"
-                isVisible={this.state.isTimePickerVisible}
-                onConfirm={jsDate => {
-                  this.setState({
-                    time: padWithZeros(jsDate),
-                    isTimePickerVisible: false
-                  })
-                }}
-                onCancel={() => this.setState({ isTimePickerVisible: false })}
-              />
-            </SymptomSection>
-            <SymptomSection
-              header={labels.note.header}
-              explainer={labels.note.explainer}
-            >
-              <TextInput
-                multiline={true}
-                autoFocus={this.state.focusTextArea}
-                placeholder={sharedLabels.enter}
-                value={this.state.note}
-                onChangeText={(val) => {
-                  this.setState({ note: val })
-                }}
-              />
-            </SymptomSection>
-            <SymptomSection
-              header={labels.exclude.header}
-              explainer={labels.exclude.explainer}
-              inline={true}
-            >
-              <Switch
-                onValueChange={(val) => {
-                  this.setState({ exclude: val })
-                }}
-                value={this.state.exclude}
-              />
-            </SymptomSection>
-          </View>
-        </ScrollView>
-        <ActionButtonFooter
-          symptom='temperature'
-          date={this.props.date}
-          currentSymptomValue={this.temperature}
-          saveAction={() => this.checkRangeAndSave()}
-          saveDisabled={
-            this.state.temperature === '' ||
-            isNaN(Number(this.state.temperature)) ||
-            isInvalidTime(this.state.time)
-          }
-          navigate={this.props.navigate}
-          autoShowDayView={false}
-        />
-      </View>
+      <SymptomView
+        symptom={'temperature'}
+        values={this.state}
+        date={this.props.date}
+      >
+        <SymptomSection
+          header={labels.temperature.header}
+          explainer={labels.temperature.explainer}
+        >
+          <TemperatureInput
+            temperature={temperature ? temperature.toFixed(2) : ''}
+            date={this.props.date}
+            handleTemperatureChange={this.setTemperature}
+          />
+        </SymptomSection>
+        <SymptomSection header={labels.time}>
+          <TimeInput
+            time={this.state.time}
+            handleTimeChange={this.setTime}
+          />
+        </SymptomSection>
+        <SymptomSection
+          header={labels.note.header}
+          explainer={labels.note.explainer}
+        >
+          <AppTextInput
+            multiline={true}
+            placeholder={sharedLabels.enter}
+            value={this.state.note}
+            onChangeText={this.setNote}
+            testID='noteInput'
+          />
+        </SymptomSection>
+        <SymptomSection
+          header={labels.exclude.header}
+          explainer={labels.exclude.explainer}
+          inline={true}
+        >
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </SymptomSection>
+      </SymptomView>
     )
   }
 }
 
-class TempInput extends Component {
-  render() {
-    const style = [styles.temperatureTextInput]
-    if (this.props.isSuggestion) {
-      style.push(styles.temperatureTextInputSuggestion)
-    }
-    return (
-      <TextInput
-        style={style}
-        onChangeText={(val) => {
-          if (isNaN(Number(val))) return
-          this.props.setState({ temperature: val, isSuggestion: false })
-        }}
-        keyboardType='numeric'
-        value={this.props.value}
-        onBlur={this.checkRange}
-        autoFocus={true}
-      />
-    )
-  }
-}
-
-function isInvalidTime(timeString) {
-  try {
-    LocalTime.parse(timeString)
-  } catch (err) {
-    return true
-  }
-  return false
-}
+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,32 +0,0 @@
-import React from 'react'
-import {
-  Text,
-  TouchableOpacity,
-  View
-} from 'react-native'
-import styles, { iconStyles } from '../../styles'
-import NavigationArrow from './navigation-arrow'
-import Icon from 'react-native-vector-icons/Entypo'
-
-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>
-      <TouchableOpacity style={styles.hiddenIcon}>
-        <Icon
-          name={'chevron-thin-right'}
-          {...iconStyles.hiddenIcon}
-        />
-      </TouchableOpacity>
-    </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,24 +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 SymptomViewHeader from './symptom-view'
+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.isSymptomView) {
-    return (<SymptomViewHeader {...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,31 +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]
-  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}
-      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,44 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text,
-  TouchableOpacity
-} from 'react-native'
-import styles, { iconStyles } from '../../styles'
-import FeatherIcon from 'react-native-vector-icons/Feather'
-import NavigationArrow from './navigation-arrow'
-import formatDate from '../helpers/format-date'
-
-export default function SymptomViewHeader(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.dateHeader}>
-          {props.title}
-        </Text>
-        <Text style={styles.cycleDayNumber}>
-          {formatDate(props.date)}
-        </Text>
-      </View >
-      <TouchableOpacity
-        onPress={() => props.goToSymptomInfo()}
-        style={styles.infoButton}
-      >
-        <FeatherIcon
-          name="info"
-          style={styles.symptomInfoIcon}
-          {...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,6 +4,11 @@ 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) {
+  return moment(date.toString()).format('dddd, MMMM Do')
 }

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,221 +1,157 @@
-import { ChronoUnit, LocalDate } from 'js-joda'
+import { LocalDate } from 'js-joda'
 import React, { Component } from 'react'
-import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native'
-import Icon from 'react-native-vector-icons/Entypo'
+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,
-  shared,
-} 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'
 
-const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
-  const {height, width} = Dimensions.get('window')
-  const leftPosition = isShowingMore ? 10 : width - 40
-  const style = isShowingMore ? styles.showLess : styles.showMore
-  const topPosition = height / 2 - styles.header.height - 30
+class Home extends Component {
 
-  return (
-    <TouchableHighlight
-      onPress={onToggle}
-      style={[style, { top: topPosition, left: leftPosition}]}
-    >
-      <View style={{alignItems: 'center'}}>
-        <AppText>{isShowingMore ? shared.less : shared.more}</AppText>
-        <Icon name='chevron-thin-down' />
-      </View>
-    </TouchableHighlight>
-  )
-}
+  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,
+  }
 
-const IconText = ({ children, wrapperStyles }) => {
-  return (
-    <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
-      <AppText style={styles.iconText}>
-        { children }
-      </AppText>
-    </View>
-  )
-}
-
-const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
-  return (
-    <View
-      onPress={ onPress }
-      style={ styles.homeIconElement }
-    >
-      { children }
-      <Button
-        style={styles.homeButton}
-        onPress={ onPress }
-        backgroundColor={ buttonColor }>
-        { buttonLabel }
-      </Button>
-    </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 = {
-      isShowingMore: false,
-      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')
   }
 
-  toggleShowingMore = () => {
-    this.setState({ isShowingMore: !this.state.isShowingMore })
+  navigateToBleedingEditView = () => {
+    this.props.setDate(this.todayDateString)
+    this.props.navigate('BleedingEditView')
+  }
+
+  navigateToChart = () => {
+    this.props.navigate('Chart')
   }
 
   render() {
-    const { isShowingMore, 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.wrapperCycle}>
-                {cycleDayNumber || labels.unknown}
-              </IconText>
+              <IconText>{cycleDayNumber || labels.unknown}</IconText>
 
-              { isShowingMore &&
-                  <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
-              }
+              <AppText style={styles.homeDescriptionText}>
+                {cycleDayMoreText}
+              </AppText>
             </HomeElement>
 
             <HomeElement
-              onPress={ () => this.passTodayTo('BleedingEditView') }
+              onPress={this.navigateToBleedingEditView}
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
-              <View>
-                <DripHomeIcon name="drop" size={105} color={periodColor} />
-              </View>
+              <DripHomeIcon name="drop" size={100} color={periodColor} />
 
-              <IconText wrapperStyles={styles.wrapperDrop}>
-                {this.state.bleedingPredictionRange}
+              <IconText wrapperStyles={{ top: '45%' }}>
+                {bleedingPredictionRange}
               </IconText>
 
-              { isShowingMore &&
-                <AppText style={styles.paragraph}>
-                  {this.state.predictionText}
-                </AppText>
-              }
+              <AppText style={styles.homeDescriptionText}>
+                {predictionText}
+              </AppText>
             </HomeElement>
 
             <HomeElement
-              onPress={ () => navigate('Chart') }
+              onPress={this.navigateToChart}
               buttonColor={ secondaryColor }
               buttonLabel={ labels.checkFertility }
             >
               <View style={styles.homeCircle}/>
 
-              <IconText wrapperStyles={styles.wrapperCircle}>
-                { phase ? phase.toString() : labels.unknown }
-              </IconText>
+              <IconText>{ phase ? phase.toString() : labels.unknown }</IconText>
 
               { phase &&
-                <AppText>{`${labels.phase(phase)} (${status})`}</AppText>
-              }
-              { isShowingMore &&
-                <View>
-                  <AppText styles={styles.paragraph}>
-                    { `${statusText} ${links.wiki.url}.` }
-                  </AppText>
-                </View>
+                <AppText style={styles.homeDescriptionText}>
+                  {`${labels.phase(phase)} (${status})`}
+                </AppText>
               }
+              <AppText style={styles.homeDescriptionText}>
+                { `${statusText} Visit ${links.wiki.url}.` }
+              </AppText>
             </HomeElement>
           </View>
         </ScrollView>
-        <ShowMoreToggler
-          isShowingMore={isShowingMore}
-          onToggle={this.toggleShowingMore}
-        />
       </View>
     )
   }
 }
 
-function determinePredictionText(bleedingPrediction) {
-  if (!bleedingPrediction.length) return predictLabels.noPrediction
-  const todayDate = LocalDate.now()
-  const bleedingStart = LocalDate.parse(bleedingPrediction[0][0])
-  const bleedingEnd = LocalDate.parse(
-    bleedingPrediction[0][ bleedingPrediction[0].length - 1 ]
-  )
-  if (todayDate.isBefore(bleedingStart)) {
-    return predictLabels.predictionInFuture(
-      todayDate.until(bleedingStart, ChronoUnit.DAYS),
-      todayDate.until(bleedingEnd, ChronoUnit.DAYS)
-    )
-  }
-  if (todayDate.isAfter(bleedingEnd)) {
-    return predictLabels.predictionInPast(
-      bleedingStart.toString(), bleedingEnd.toString()
-    )
-  }
-  const daysToEnd = todayDate.until(bleedingEnd, ChronoUnit.DAYS)
-  if (daysToEnd === 0) {
-    return predictLabels.predictionStartedNoDaysLeft
-  } else if (daysToEnd === 1) {
-    return predictLabels.predictionStarted1DayLeft
-  } else {
-    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
-  }
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
 }
 
-function getBleedingPredictionRange(prediction) {
-  if (!prediction.length) return labels.unknown
-  const todayDate = LocalDate.now()
-  const bleedingStart = LocalDate.parse(prediction[0][0])
-  const bleedingEnd = LocalDate.parse(prediction[0][ prediction[0].length - 1 ])
-  if (todayDate.isBefore(bleedingStart)) {
-    return `${todayDate.until(bleedingStart, ChronoUnit.DAYS)}-${todayDate.until(bleedingEnd, ChronoUnit.DAYS)}`
-  }
-  if (todayDate.isAfter(bleedingEnd)) {
-    return labels.unknown
-  }
-  return '0'
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+    setDate: (date) => dispatch(setDate(date)),
+  })
 }
+
+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,13 +1,19 @@
 import React, { Component } from 'react'
-import { View, TextInput, TouchableOpacity, Alert, Image } from 'react-native'
+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'
 import AppText from './app-text'
+import Header from './header'
 import styles from '../styles'
-import { passwordPrompt as labels, shared } from '../i18n/en/labels'
+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 = {
@@ -19,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 => {
@@ -47,7 +40,7 @@ export default class PasswordPrompt extends Component {
       )
       return
     }
-    this.props.showApp()
+    this.props.enableShowApp()
   }
 
   confirmDeletion = async () => {
@@ -71,7 +64,7 @@ export default class PasswordPrompt extends Component {
               onPress: async () => {
                 await deleteDbAndOpenNew()
                 await saveEncryptionFlag(false)
-                this.props.showApp()
+                this.props.enableShowApp()
               }
             }]
           )
@@ -87,38 +80,33 @@ export default class PasswordPrompt extends Component {
   render() {
     return (
       <View flex={1}>
-        {this.state.showPasswordPrompt &&
-          <View style={styles.passwordPromptPage}>
-            <Image
-              source={require('../assets/drip_small.png')}
-              style={styles.passwordPromptImage}
-            />
-            <TextInput
-              onChangeText={val => this.setState({ password: val })}
-              style={styles.passwordPromptField}
-              secureTextEntry={true}
-              placeholder={labels.enterPassword}
-            />
-            <TouchableOpacity
-              style={styles.passwordPromptButton}
-              onPress={() => {
-                requestHash('check-pw', this.state.password)
-              }}
-              disabled={!this.state.password}
-            >
-              <AppText style={styles.passwordPromptButtonText}>
-                {labels.title}
-              </AppText>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={this.confirmDeletion}
-            >
-              <AppText style={styles.passwordPromptForgotPasswordText}>
-                {labels.forgotPassword}
-              </AppText>
-            </TouchableOpacity>
-          </View>
-        }
+        <Header title={menuTitles.PasswordPrompt.toLowerCase()} />
+        <View style={styles.passwordPromptPage}>
+          <TextInput
+            onChangeText={val => this.setState({ password: val })}
+            style={styles.passwordPromptField}
+            secureTextEntry={true}
+            placeholder={labels.enterPassword}
+          />
+          <TouchableOpacity
+            style={styles.passwordPromptButton}
+            onPress={() => {
+              requestHash('check-pw', this.state.password)
+            }}
+            disabled={!this.state.password}
+          >
+            <AppText style={styles.passwordPromptButtonText}>
+              {labels.title}
+            </AppText>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={this.confirmDeletion}
+          >
+            <AppText style={styles.passwordPromptForgotPasswordText}>
+              {labels.forgotPassword}
+            </AppText>
+          </TouchableOpacity>
+        </View>
       </View>
     )
   }

components/settings/about.js

@@ -18,6 +18,9 @@ export default class AboutSection extends Component {
         <FramedSegment title={labels.credits.title}>
           <AppText>{labels.credits.note}</AppText>
         </FramedSegment>
+        <FramedSegment title={labels.donate.title}>
+          <AppText>{labels.donate.note}</AppText>
+        </FramedSegment>
         <FramedSegment title={labels.website.title}>
           <AppText>{links.website.url}</AppText>
         </FramedSegment>

components/settings/data-management/delete-data.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import RNFS from 'react-native-fs'
 import { Alert, ToastAndroid } from 'react-native'
+import PropTypes from 'prop-types'
 
 import { clearDb, isDbEmpty } from '../../../db'
 import { hasEncryptionObservable } from '../../../local-storage'
@@ -24,6 +25,7 @@ export default class DeleteData extends Component {
   }
 
   onAlertConfirmation = () => {
+    this.props.onStartDeletion()
     if (this.state.isPasswordSet) {
       this.setState({ isConfirmingWithPassword: true })
     } else {
@@ -78,8 +80,9 @@ export default class DeleteData extends Component {
 
   render() {
     const { isConfirmingWithPassword } = this.state
+    const { isDeletingData } = this.props
 
-    if (isConfirmingWithPassword) {
+    if (isConfirmingWithPassword && isDeletingData) {
       return (
         <ConfirmWithPassword
           onSuccess={this.deleteAppData}
@@ -95,3 +98,8 @@ export default class DeleteData extends Component {
     )
   }
 }
+
+DeleteData.propTypes = {
+  isDeletingData: PropTypes.bool,
+  onStartDeletion: PropTypes.func.isRequired
+}

components/settings/data-management/import-dialog.js

@@ -6,23 +6,23 @@ import { shared as sharedLabels } from '../../../i18n/en/labels'
 import labels from '../../../i18n/en/settings'
 import alertError from '../shared/alert-error'
 
-export default function openImportDialogAndImport() {
+export function openImportDialog(onImportData) {
   Alert.alert(
     labels.import.title,
     labels.import.message,
     [{
-      text: labels.import.replaceOption,
-      onPress: () => getFileContentAndImport({ deleteExisting: false })
+      text: sharedLabels.cancel, style: 'cancel', onPress: () => { }
     }, {
       text: labels.import.deleteOption,
-      onPress: () => getFileContentAndImport({ deleteExisting: true })
+      onPress: () => onImportData(true)
     }, {
-      text: sharedLabels.cancel, style: 'cancel', onPress: () => { }
+      text: labels.import.replaceOption,
+      onPress: () => onImportData(false)
     }]
   )
 }
 
-async function getFileContentAndImport({ deleteExisting }) {
+export async function getFileContent() {
   let fileInfo
   try {
     fileInfo = await new Promise((resolve, reject) => {
@@ -45,8 +45,13 @@ async function getFileContentAndImport({ deleteExisting }) {
     return importError(labels.import.errors.couldNotOpenFile)
   }
 
+  return fileContent
+}
+
+export async function importData(shouldDeleteExistingData, fileContent) {
+
   try {
-    await importCsv(fileContent, deleteExisting)
+    await importCsv(fileContent, shouldDeleteExistingData)
     Alert.alert(sharedLabels.successTitle, labels.import.success.message)
   } catch(err) {
     importError(err.message)

components/settings/data-management/index.js

@@ -1,37 +1,91 @@
-import React from 'react'
-import { ScrollView } from 'react-native'
+import React, { Component } from 'react'
+import { ScrollView, View } from 'react-native'
 import AppText from '../../app-text'
 import FramedSegment from '../../framed-segment'
+import AppLoadingView from '../../app-loading'
 import SettingsButton from '../shared/settings-button'
-import openImportDialogAndImport from './import-dialog'
+import { openImportDialog, getFileContent, importData } from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'
 import labels from '../../../i18n/en/settings'
 
-const DataManagement = () => {
-  return (
-    <ScrollView>
-      <FramedSegment title={labels.export.button}>
-        <AppText>{labels.export.segmentExplainer}</AppText>
-        <SettingsButton onPress={openShareDialogAndExport}>
-          {labels.export.button}
-        </SettingsButton>
-      </FramedSegment>
-      <FramedSegment title={labels.import.button}>
-        <AppText>{labels.import.segmentExplainer}</AppText>
-        <SettingsButton onPress={openImportDialogAndImport}>
-          {labels.import.button}
-        </SettingsButton>
-      </FramedSegment>
-      <FramedSegment
-        title={labels.deleteSegment.title}
-        last
-      >
-        <AppText>{labels.deleteSegment.explainer}</AppText>
-        <DeleteData />
-      </FramedSegment>
-    </ScrollView>
-  )
-}
+export default class DataManagement extends Component {
 
-export default DataManagement
+  constructor(props) {
+    super(props)
+    this.state = {
+      isLoading: false,
+      currentAction: null
+    }
+  }
+
+  startLoading = () => {
+    this.setState({ isLoading: true })
+  }
+
+  endLoading = () => {
+    this.setState({ isLoading: false })
+  }
+
+  startImportFlow = async (shouldDeleteExistingData) => {
+    this.startLoading()
+    const fileContent = await getFileContent()
+    if (fileContent) {
+      await importData(shouldDeleteExistingData, fileContent)
+    }
+    this.endLoading()
+  }
+
+  startExport = () => {
+    this.setCurrentAction('export')
+    openShareDialogAndExport()
+  }
+
+  startImport = () => {
+    this.setCurrentAction('import')
+    openImportDialog(this.startImportFlow)
+  }
+
+  setCurrentAction = (action) => {
+    this.setState({ currentAction: action })
+  }
+
+  render() {
+    const { currentAction } = this.state
+    return (
+      <View flex={1}>
+        {this.state.isLoading && <AppLoadingView />}
+        {!this.state.isLoading &&
+          <ScrollView>
+            <View>
+              <FramedSegment title={labels.export.button}>
+                <AppText>{labels.export.segmentExplainer}</AppText>
+                <SettingsButton onPress={this.startExport}>
+                  {labels.export.button}
+                </SettingsButton>
+              </FramedSegment>
+              <FramedSegment title={labels.import.button}>
+                <AppText>{labels.import.segmentExplainer}</AppText>
+                <SettingsButton
+                  onPress= {this.startImport}
+                >
+                  {labels.import.button}
+                </SettingsButton>
+              </FramedSegment>
+              <FramedSegment
+                title={labels.deleteSegment.title}
+                last
+              >
+                <AppText>{labels.deleteSegment.explainer}</AppText>
+                <DeleteData
+                  isDeletingData = { currentAction === 'delete' }
+                  onStartDeletion = {() => this.setCurrentAction('delete')}
+                />
+              </FramedSegment>
+            </View>
+          </ScrollView>
+        }
+      </View>
+    )
+  }
+}

components/settings/nfp-settings/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {
   ScrollView, View
 } from 'react-native'
-import styles, { iconStyles } from '../../../styles'
+import styles from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
 import FramedSegment from '../../framed-segment'
@@ -28,8 +28,8 @@ export default class Settings extends Component {
         </FramedSegment>
         <FramedSegment style={styles.framedSegmentLast} >
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
-            <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
-            <AppText style={styles.framedSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
+            <Icon name="info-with-circle"/>
+            <AppText style={styles.framedSegmentTitle}>{` ${labels.preOvu.title} `}</AppText>
           </View>
           <AppText>{labels.preOvu.note}</AppText>
         </FramedSegment>

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/password-field.js

@@ -1,19 +1,22 @@
 import React from 'react'
-import { TextInput } from 'react-native'
-import styles, {secondaryColor} from '../../../styles'
+import PropTypes from 'prop-types'
+import AppTextInput from '../../app-text-input'
+
+import styles from '../../../styles'
 
 export default function PasswordField(props) {
   return (
-    <TextInput
-      style={styles.passwordField}
-      autoFocus={props.autoFocus === false ? false : true}
-      secureTextEntry={true}
-      onChangeText={props.onChangeText}
-      value={props.value}
-      placeholder={props.placeholder}
-      borderWidth={1}
-      borderColor={secondaryColor}
-      borderStyle={'solid'}
+    <AppTextInput
+      style={ styles.passwordField }
+      secureTextEntry
+      {...props}
     />
   )
 }
+
+PasswordField.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChangeText: PropTypes.func,
+  autoFocus: PropTypes.bool
+}

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