Merge branch 'Release-1.2102.28' into 'master'

Release: 1.2102.28 See merge request bloodyhealth/drip!357
Adding back detox
2021-02-28 16:51:08 +00:00 · 2021-02-28 17:40:31 +01:00 · 2021-02-28 17:09:13 +01:00 · 2021-02-28 16:05:01 +00:00 · 2021-02-28 17:03:18 +01:00 · 2021-02-20 15:02:39 +01:00
235 changed files with 15549 additions and 8528 deletions
@@ -4,10 +4,7 @@
    "mocha": true,
    "es6": true
  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
@@ -16,39 +13,22 @@
    },
    "ecmaVersion": 2018
  },
-  "plugins": [
-    "react"
-  ],
+  "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,
+    "indent": ["error", 2],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
    "space-before-function-paren": 0,
-    "trailing-comma": [
-      true,
-      "never"
-    ],
-    "object-literal-sort-keys": false,
-    "semi": [
-      "warn",
-      "never"
-    ],
-    "space-infix-ops": [
-      "warn"
-    ],
+    "semi": ["warn", "never"],
+    "space-infix-ops": ["warn"],
    "no-var": "error",
    "prefer-const": "error",
    "no-trailing-spaces": "error",
-    "react/prop-types": 0,
+    "react/prop-types": 2,
    "max-len": [
      1,
      {
@@ -56,6 +36,7 @@
        "ignoreComments": true,
        "ignoreTemplateLiterals": true
      }
-    ]
+    ],
+    "no-multi-spaces": 2
  }
 }
@@ -2,6 +2,9 @@
 #
 .DS_Store

+# VSCode
+.vscode/
+
 # Xcode
 #
 build/
@@ -21,6 +24,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
+ios/Index/DataStore

 # Android/IntelliJ
 #
@@ -62,6 +66,10 @@ android/app/src/main/assets/index.android.bundle
 android/.project
 android/app/.project

+ios/Podfile.lock
+android/app/src/main/res/drawable-*
+android/app/src/main/assets/*
+
 # nodejs-mobile creates these with every npm install
 nodejs-assets/nodejs-project/sample-*
 nodejs-assets/build-native-modules-MacOS-helper-script-node.sh
@@ -2,22 +2,316 @@

 All notable changes to this project will be documented in this file.

+## v1.2102.28
+
+### Changes
+- Temperature range is now between 35 - 39°C and its default values are now set to 35.5 - 37.5°C
+
+### Fixed
+- Blocks invalid input of temperature value
+- Error message for incorrect password on login screen
+- Phase text on home screen for last fertile day
+- Styling improvements
+
+## v1.2101.9
+
+### Adds
+
+- Introduces complete redesign of all sections of the app
+- Adds new font
+- Adds Lisa as condriputor
+- Adds updated text about credits.
+- Adds missing notification icon
+- Adds padding between keyboard and text input
+- Adds limit line length on text of symptom box
+
+### Changes
+
+- Updates createVersion tag for production releases
+- Better wording for prediction text
+- Changes the icon
+- Changes font color of marked calendar days
+- Updates styling of Stats page
+- Updates settings menu styling
+- Increases hitSlop of menu icon and navigation arrows
+- Sets calendar pastScrollRange to 10 years
+- Introduces RN Alert component styling update
+- Introduces PasswordPrompt component redesign
+- Updates button activity definition when entering new password
+- Forbids landscape orientation for app
+- Updates README.md
+- Updates sdk 28 -> 29 and migrate to androidx
+
+### Fixed
+
+- Fixed drip typo
+- Fixed the date label on chart from breaking
+- Fixed chart dots and lines
+- Fixed error on highes/lowest scale values
+- Fixed extra horizontal grid line on chart
+- Fixed error occurring when navigating back from settings section
+- Fixed redirect to TemperatureEditView from reminder
+- Fixed ordinal number suffix on chart date labels
+- Fixed bug when .8 and .3 labels are not shown in chart
+- Fixed react-native-vector-icon
+- Fixed AppLoadingView component centering
+
+## v0.2007-12.beta
+
+### Adds
+
+- Allows 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 
+- Introduces Redux global state (date and navigation are stored locally now)
+- Introduces clear.sh script to the project automising clearing project caches and packages reinstallation
+
+### Changes
+
+- Updates 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
+- Refactors of header, cycle day overview, temperature edit view pages
+- Setting minimum SDK version to 23 to allow using drip on earlier versions of Android
+
+### Fixed
+
+- Fixed adding notes to the future dates
+- Fixed app exiting with error when hitting back button on device
+- Fixed Sex symptom showing on y axis of chart even though the contraception method was deleted 
+- Fixed of the clear.sh file name in package.json
+- Fixed of navigation from chart to the cycle day overview
+- Bug fix for maximum value of mucus not showing on chart
+- Fixed delete button bug on symptom edit page
+- Fixed of home screen centering
+
+### Security
+
+- Updates of node.js to fix security issue
+
+## v0.2005.3-beta
+
+- Adds arm64-v8a and x86_64 for supporting 64-bit architecture
+- Adds Mariya & Sofiya as contributors &lt;3
+- Fixed the error on app exiting on via the device back button
+- Updates README.md
+- Allows to enter note in the future
+- Chart navigation bug fix.
+- Changes clear to lowercase to make it case sensitive and executable
+- fix 306 by setting other-note empty as contraception method 'other' is deactivated
+- Don't show temperature chart part of chart when temp not tracked
+- Bring in different shades for desire dots on chart
+- Splits the rest of the tests without modifying them
+- Moves out the test for getCyclesBefore method of cycle module
+- Moves out the test for getPReviousCycle method of cycle module
+- Lint rule react prop types addition
+- Adds test and fixes getCycleByStartDate method of cycle module
+- Moves out the tests for getCycleDayNumber and organises them
+- Adds propTypes definition
+- Gets rid of a top level prop passed down through a tree of components
+- Cleanups symptom view
+- Removes unnecessary prop and defines the missing propTypes
+- Adds propTypes definition
+- Gets rid of the redundant state on Home
+- Moves out home helpers from the component
+- Moves out HomeElement component
+- Moves out IconText component
+- Resets the date in store for today date when navigating home
+- Sets initial value of date in the store
+- Removes redundant state and corrects the cycle day prop
+- Use new published sympto
+- Fixed missing navigation state on exiting the app
+- Adds e2e test device config for Nexus 5
+- De-duplicate line
+- Fixed navigation logic
+- Adds go back functionality
+- Adds navigation tree to define the hierarchy
+- Moves navigation to the state
+- Removes the lowercasing to the header title component
+- Remove now superfluous check for bleeding symptom
+- Adds remaining tests for maybeSetNewCycleStart
+- Adds test for deleted bleeding value
+- Extract maybeSetNewCycleStart into own module
+- Set new cycle start when bleeding value excluded
+- Changes the name of the main component
+- Makes drip work on iOS
+- Adds a handy script to clear builds/cache/etc
+- Fixed bug - not showing maximum value of mucus in chart
+- Moves calculations functions to helpers file
+- Moves YAxis & HorizontalGrid components in a common conditional expression
+- Moves auxiliary functions from day-column.js component file to helpers file
+- Moves Surface element to TemperatureColumn component
+- Introduces CycleDayLabel component
+- Introduces TemperatureColumn component
+- Introduces ChartLine component
+- Formatting fix
+- Introduces SymptomCell component
+- Introduces HorizontalGrid component
+- Moves out chart (data modelling) helpers to a separate file
+- Introduces Tick & TickList components
+- Introduces ChartLegend component
+- Introduces SymptomIcon component
+- Rafactors symptom color definition
+- Introduces YAxis component
+- Use updated sympto
+- Fixed typo, and removes a redundant line
+- Naming update: isFertile>isClosedAndHard, getSymptomColorIndex>symptomColorMethods; update of symptom index retrieval for the sake of readibility
+- Naming update, change switch to object, fertility logic review
+- make graph display for incomplete mucus and cervix values
+- Fixed some warnings on build
+- Updates the RN version to 0.59.10
+- Re-add missing build script
+- Updates the RN version to 0.59
+- Moves metadata directory to root of project. So fdroid can find it.
+- Cleans the console.log
+- Adds test for data deletion
+- Refactors the header
+- Replaces the inheritance with composition pattern in the Symptom view
+- Adds e2e symptom data input tests and necessary testIDs to the existing components
+- Splits the temperature view to simplify it
+- Updates README.md
+- Fixed the cycle day data is not being passed to the symptom view
+- Fixed the date not being set on changing cycle day, and adds a test for this case
+- Starts using redux store for storing the date
+- Redux initial setup
+- Implements review feedback
+- Splits &lt;CycleDayOverView /> to smaller components, to simplify it
+- Adds e2e test setup to README
+- Adding more tests
+- Adds initial tests
+- Introduces detox
+- Moves app store metadata for here from fdroiddata repo
+- Set minSdk to Marshmallow (earlier versions don't work)
+- Only show timestamp when it has a value
+- Refactors App wrapper component
+- Fixed reopenning after back button
+- Make home screen centered
+- Adds release wizard
+- Updates nodejs-mobile to fix security issue
+
 ## v0.1905.29-beta

+### Changes
+
 - Auto save functionality for all symptoms
- Add donation section to about
- Styling fixes
+- Adds 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
- Fix line width in chart
+- Adds loading screen to data import
 - Removes logo and adds header on the main login screen
 - Nicer formatting for past bleeding prediction
- Fixes prediction range in drop on homescreen
 - Removes permissions not required for debug or production
 - Temperature screen styling update

+### Fixed
+
+- Styling
+- Line width in chart
+- Prediction range in drop on homescreen
+
+## v0.1905.28-beta
+
+- Displays all the text for Home Elements; Shortens margin btw Home Elements; Adds missing "visit" to text
+- Adds donation section to about
+- Gets rid of hidden icon in back button header
+- Adds subcategories of cevix and mucus as labels
+- Adds subcategory names to the selected options
+- Changes fontSize of titles in SymptomBoxes;makes sure it stays in 1 line
+- Fixed delete button
+- Get rid of extra styling for non functional info icon
+- Clean up
+- Adds autosave for temperate
+- Auto save whenever symptom view updates
+- Fixed delete data bug
+- Make uniform info icon and leave some space
+- Align droplet text on homescreen
+- Make info modal only as big as it needs to be
+- Make sure info icon is always well pressable
+- Specifying mucus as cervical mucus
+- Make sure drop text is always positioned correctly
+- Position icon text for droplet
+- Styling for homescreen elements to breathe
+- simple way to rearrange home screen
+- Set show more on homescreen to default and get rid of more/less switch
+- Don't render delete icon, instead of just setting it invisible
+- Make isDeleteIconActive more readable
+- Updates README.md
+- Changes order of buttons in the import alert
+- Remove formatting improvements that clutter up the diff
+- Fixed cervix value display on overview
+- Fixed mucus value display on overview
+- Don't show delete icon just because symptom info is open
+- Clean up markup
+- Use own modal instead of alert for symptom info
+- Gets rid of trailing spaces
+- Gets rid of old info symptom screen
+- \[WIP] Adds info button to body as alert for: \* mood, pain, temperature
+- Adds info button to the body as alert
+- Try out moving it to body
+- For temperature, only show delete button when certain fields active
+- Let symptom views overwrite isDeleteIconActive method
+- Show or hide delete button based on entered data
+- Remove unused style
+- Ask before deleting entry
+- Changes icon to trash can
+- Replace info icon in header with delete
+- Await alert result before navigating back
+- Address MR change requests
+- Reset inadvertently changed file
+- Filter incomplete mucus values in sympto adapter
+- Don't crash on missing temperature value
+- Make header back arrow function for auto save
+- Remove action button footer from symptom views
+- When nothing entered, delete entry
+- Adds symptom view component with back button listener
+- Remove save button from footer
+- Remove unused line
+- Make saving incomplete value possible
+- Filter out incomplete cervix value days in sympto adapter
+- Updates sympto
+- Adds migration making mucus and cervix values optional
+- Don't compute nfp mucus value when data missing
+- Adds test for missing mucus vaues
+- excludes internet and system alert window from default permission
+- Adds comment for bleeding prediction ranges
+- Changes if statement with conditional operator
+- changes action buttons color to teal, rounded corners for buttons in settings
+- Fixed line width in chart
+- makes the action button footer more like buttons
+- Adds getTime function for bleedingPredictions reuse; minor style formatting
+- Renames function to say what it 'does'
+- Rename to predictedBleeding
+- Nicer formatting for past bleeding prediction
+- Fixed prediction range in drop on homescreen
+
+## v0.1905.10-beta
+
+- Filter release commits from changelog
+- Adds update-changelog script
+- Remove square brackets from CHANGELOG. They are parsed as links
+- Adds commit-release and npm scripts
+- Adds update version script from manyverse
+- Updates RN to 58
+- Remove superfluous try/catch
+- Rename methods
+- Adds loading screen to data import
+- Improves readability of app page rendering
+- Updates README.md
+- adds maxLength to temperature input field
+- Removes logo and adds header on the main login screen
+- Adjust version name
+- Don't build for x86
+- Upgrade nodejs-mobile-rn to latest
+- Remove unneeded maven repo and upgrade gradle to 4.10
+- Lowercase values for sex, pain and mood
+- Removes permissions not required for debug or production
+- Adds proptypes to DeletePassword, ChangePassword and ConfirmWithPassword components
+- Delete password button bug fix
+- temperature screen styling update
+
 ## v0.0.3 - 2019-04-17

 ### Changes
@@ -1,4 +1,4 @@
-# Contributing to drip aka CONDRIBUTING
+# Contributing to drip aka CONDRIPUTING
 So good to see you here, hello :wave\_tone1: :wave\_tone2: :wave\_tone3: :wave\_tone4: :wave\_tone5:


@@ -8,24 +8,24 @@ So good to see you here, hello :wave\_tone1: :wave\_tone2: :wave\_tone3: :wave\_

 [What should I know before I get started?](#what-should-i-know-before-i-get-started)

-[How can I condribute?](#how-can-i-condribute)
+[How can I condripute?](#how-can-i-condripute)

 [Thank you](#thank-you)

 ## 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)

-## How can I condribute?
+## How can I condripute?

-### Your First Code Condribution
+### Your First Code Condripution

 We are fans of labels, at least for our issues. You can find a list of `newbie` issues [here](https://gitlab.com/bloodyhealth/drip/issues?label_name%5B%5D=Newbie).
 If you decide to work on an issue, please click on `Create branch` based on that issue. You can find this as a dropdown option right under `Create merge request`.
@@ -54,5 +54,5 @@ To send us a new issue you can also use our [gitlab email](mailto:incoming+blood

 ![](https://media.giphy.com/media/kPA88elN9kYco/giphy.gif)

-Thank you for condributing to open source, thank you for condributing to drip!
+Thank you for condriputing to open source, thank you for condriputing to drip!
 Much love from Bloody Health :heart\_exclamation:
@@ -3,35 +3,59 @@
 A menstrual cycle tracking app that's open-source and leaves your data on your phone. Use it to track your menstrual cycle and/or for fertility awareness!
 Find more information on [our website](https://bloodyhealth.gitlab.io/).

+[<img src="https://bloodyhealth.gitlab.io/assets/get.png"
+     alt="Get it here"
+     height="55">](https://bloodyhealth.gitlab.io/release/5.apk)
+[<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).
+▶ [How to contribute to the project](https://gitlab.com/bloodyhealth/drip/blob/master/CONTRIBUTING.md) 
+
+▶ [How to release a new version](https://gitlab.com/bloodyhealth/drip/blob/master/RELEASE.md)

 ## Development setup

-1.  Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
+#### 1. Android Studio
+    
+Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
+
+#### 2. Node version
+
+Make sure you are running Node 10 (newer versions won't work). It's easiest to switch Node versions using `nvm`, here's how to do it:

-1.  Make sure you are running Node 10 (newer versions won’t work). It's easiest to switch Node versions using `nvm`, here’s how to do it:

-    ```
    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
    $ nvm install v10
-    ```

-1.  Clone this repository:

-    ```
+#### 3. Get this repository
+
+Clone it with SSH
+    
    $ git clone git@gitlab.com:bloodyhealth/drip.git
-    $ cd drip
-    ```
+
+or clone it with HTTPS
+    
+    $ git clone https://gitlab.com/bloodyhealth/drip.git
+    
 and run
-    ```
+    
+    $ cd drip
    $ 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
    ```
@@ -76,11 +100,40 @@ If you get error messages about `adb` not being found on your path:
    ```

 ## Tests
+
+### Unit tests
 You can run the tests with:
    ```
    $ npm test
    ```

+### 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:
 `console.log(theVariableIWantToSeeHere)`
@@ -88,12 +141,12 @@ or just a random string to check if this piece of code is actually running:
 `console.log("HELLO")`.

 ## NFP rules
-More information about how the app calculates fertility status and bleeding predictions in the [wiki on Gitlab](https://gitlab.com/bloodyhealth/drip/wikis/home)
+More information about how the app calculates fertility status and bleeding predictions in the [wiki on Gitlab](https://gitlab.com/bloodyhealth/drip/wikis/home).

 ## 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, cervical mucus, ...) including the new icon you wish to add, all in SVG.
-2.  Download webfont from fontello
+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:
    ```
@@ -0,0 +1,33 @@
+# How to release a new version
+
+Note: You need the release-key to bundle a release that can be uploaded to Google Play Store.
+
+Run the release wizard that takes you through all the steps necessary to prepare a new release:
+
+```
+npm run release
+```
+This will trigger the following:
+* update version number
+* create a new tag for the release
+* update the changelog
+* make a release commit
+
+To then bundle a release run the following command on your branch:
+
+```
+cd android && ./gradlew bundleRelease
+```
+
+This command creates an `app.aab` file in the folder `/android/app/build/outputs/bundle/release`.
+
+[More on Android App Bundle](https://blog.swmansion.com/make-your-react-native-app-3x-smaller-44c993eda2c9)
+
+You need to manually push the created tag to Gitlab:
+
+```
+git push origin <tagname>
+```
+Also don't forget to push your branch to Gitlab and review and merge it if ready!
+
+Yay, done (have a scoop of ice cream, I suggest coconut 🍦)!
@@ -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 3
-        versionName "0.1905.29-beta"
+        versionCode 8
+        versionName "1.2102.28"
        ndk {
-            abiFilters "armeabi-v7a"
+            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
+        testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
    }
    signingConfigs {
        release {
@@ -123,7 +130,7 @@ android {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "arm64-v8a"
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
@@ -138,7 +145,7 @@ android {
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "arm64-v8a":2]
+            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a":3, "x86_64":4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
@@ -157,9 +164,12 @@ dependencies {
    implementation project(':react-native-fs')
    implementation project(':react-native-document-picker')
    implementation project(':nodejs-mobile-react-native')
-    compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
-    compile "com.facebook.react:react-native:+"  // From node_modules
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+    implementation 'androidx.appcompat:appcompat:1.0.0'
+    implementation 'androidx.annotation:annotation:1.1.0'
+    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
@@ -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);
+    }
+}
@@ -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>
@@ -23,13 +23,15 @@
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustResize"
+        android:screenOrientation="sensorPortrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
@@ -37,7 +39,7 @@
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      <provider
-            android:name="android.support.v4.content.FileProvider"
+            android:name="androidx.core.content.FileProvider"
            android:authorities="com.drip.provider"
            android:grantUriPermissions="true"
            android:exported="false">
@@ -10,6 +10,6 @@ public class MainActivity extends ReactActivity {
     */
    @Override
    protected String getMainComponentName() {
-        return "home";
+        return "drip";
    }
 }
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:android="http://schemas.android.com/apk/res/android">
+  <font
+    android:font="@font/jost400"
+    android:fontStyle="normal"
+    android:fontWeight="400" />
+</font-family>
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>
@@ -9,4 +9,9 @@

    <!--   a secondary color for controls like checkboxes and text fields -->
    <color name="colorAccent">#4FAFA7</color>
+
+    <!--   custom colors -->
+    <color name="grey">#A5A5A5</color>
+    <color name="orange">#F38337</color>
+    <color name="purple">#3A2671</color>
 </resources>
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#000D19</color>
+    <color name="ic_launcher_background">#3A2671</color>
 </resources>
@@ -3,7 +3,27 @@
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

+    <style name="ButtonBarStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+      <item name="android:textSize">16sp</item>
+      <item name="android:textColor">@color/grey</item>
+    </style>
+
+    <style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+      <item name="android:textSize">16sp</item>
+      <item name="android:textStyle">bold</item>
+      <item name="android:textColor">@color/orange</item>
+    </style>
+
+    <style name="TitleStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+      <item name="android:gravity">left</item>
+      <item name="android:textColor">@color/purple</item>
+      <item name="android:textSize">22sp</item>
+      <item name="android:textStyle">bold</item>
+    </style>
+
 </resources>
@@ -5,11 +5,13 @@ buildscript {
        jcenter()
        google()
    }
+    ext.kotlinVersion = '1.3.10'
    dependencies {
-        classpath 'com.android.tools.build:gradle:3.1.0'
+        classpath 'com.android.tools.build:gradle:3.4.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
    }
 }

@@ -25,24 +27,28 @@ allprojects {
            url 'https://maven.google.com/'
            name 'Google'
        }
+        google()
+        maven {
+            // All of Detox' artifacts are provided via the npm module
+            url "$rootDir/../node_modules/detox/Detox-android"
+        }
    }
 }

 ext {
-    buildToolsVersion = "27.0.3"
-    minSdkVersion = 16
-    compileSdkVersion = 27
-    targetSdkVersion = 27
-    supportLibVersion = "27.1.1"
+    buildToolsVersion = "29.0.3"
+    minSdkVersion = 23
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+    supportLibVersion = "29.0.0"
 }

-subprojects {project ->
-  // https://stackoverflow.com/questions/52613089/getting-verifyreleaseresources-error-after-upgrading-react-native
-  afterEvaluate {
+subprojects {
+    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
-        compileSdkVersion 27
-        buildToolsVersion "27.0.3"
+                compileSdkVersion 29
+                buildToolsVersion '29.0.3'
            }
        }
    }
@@ -16,5 +16,5 @@
 # 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.enableJetifier=true
+android.useAndroidX=true
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip
@@ -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"`
@@ -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=.
@@ -1,18 +0,0 @@
-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
@@ -1,26 +0,0 @@
-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 = {
-  secureTextEntry: PropTypes.bool
-}
-
-AppTextInput.defaultProps = {
-  style: []
-}
@@ -1,27 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import styles from "../styles"
-import Link from './link'
-
-export default function AppText(props) {
-  // we parse for links in case the text contains any
-  return (
-    <Link>
-      <Text
-        style={[styles.appText, props.style]}
-        onPress={props.onPress}
-        numberOfLines={props.numberOfLines}
-      >
-        {props.children}
-      </Text>
-    </Link>
-  )
-}
-
-export function SymptomSectionHeader(props) {
-  return (
-    <AppText style={styles.symptomViewHeading}>
-      {props.children}
-    </AppText>
-  )
-}
@@ -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 './common/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
+
+    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>

-    if (this.state.retrievingLicenseSetting) {
-      return whiteScreen
-    } else if (this.state.showLicense) {
-      return licenseScreen
-    } else if (!this.state.showApp) {
-      return passwordPrompt
-    } else {
-      return <App/>
-    }
  }
 }
@@ -1,130 +1,114 @@
 import React, { Component } from 'react'
-import { View, BackHandler } from 'react-native'
+import { BackHandler, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { connect } from 'react-redux'
+
+import { getDate } from '../slices/date'
+import { getNavigation, navigate, goBack } from '../slices/navigation'
+
 import Header from './header'
 import Menu from './menu'
-import Home from './home'
-import Calendar from './calendar'
-import CycleDay from './cycle-day/cycle-day-overview'
-import symptomViews from './cycle-day/symptoms'
-import Chart from './chart/chart'
-import SettingsMenu from './settings/settings-menu'
-import settingsViews from './settings'
-import Stats from './stats'
-import {headerTitles, menuTitles} from '../i18n/en/labels'
+import { viewsList } from './views'
+import { isSettingsView } from './pages'
+
+import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
+import { getCycleDay, closeDb } from '../db'

-// design wants everyhting lowercased, but we don't
-// have CSS pseudo properties
-const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
-  acc[curr] = headerTitles[curr].toLowerCase()
-  return acc
-}, {})
+class App extends Component {

-const HOME_PAGE = 'Home'
-const CYCLE_DAY_PAGE = 'CycleDay'
-const SETTINGS_MENU_PAGE = 'SettingsMenu'
+  static propTypes = {
+    date: PropTypes.string,
+    navigation: PropTypes.object.isRequired,
+    navigate: PropTypes.func,
+    goBack: PropTypes.func,
+  }

-export default class App extends Component {
  constructor(props) {
    super(props)
-    this.state = {
-      currentPage: HOME_PAGE
+
+    this.backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      this.goBack
+    )
+
+    setupNotifications(this.props.navigate)
  }
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress)
-    setupNotifications(this.navigate)
+
+  goBack = () => {
+    const { currentPage } = this.props.navigation
+
+    if (currentPage === 'Home') {
+      closeDb()
+      BackHandler.exitApp()
+    } else {
+      this.props.goBack()
+    }
+
+    return true
  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

-  navigate = (pageName, props) => {
-    const { currentPage } = this.state
-    // for the back button to work properly, we want to
-    // remember two origins: which menu item we came from
-    // and from where we navigated to the symptom view (day
-    // view or home page)
-    if (this.isMenuItem()) {
-      this.menuOrigin = currentPage
-    }
-    if (!this.isSymptomView()) {
-      this.originForSymptomView = currentPage
-    }
-    this.setState({ currentPage: pageName, currentProps: props })
-  }
-
-  handleBackButtonPress = () => {
-    const { currentPage, currentProps } = this.state
-    if (currentPage === HOME_PAGE) return false
-    if (this.isSymptomView()) {
-      this.navigate(
-        this.originForSymptomView, { date: currentProps.date }
-      )
-    } else if (this.isSettingsView()) {
-      this.navigate(SETTINGS_MENU_PAGE)
-    } else if (currentPage === CYCLE_DAY_PAGE) {
-      this.navigate(this.menuOrigin)
-    } else {
-      this.navigate(HOME_PAGE)
-    }
-    return true
-  }
-
-  isMenuItem() {
-    return Object.keys(menuTitles).includes(this.state.currentPage)
-  }
-
-  isSymptomView() {
-    return Object.keys(symptomViews).includes(this.state.currentPage)
-  }
-
-  isSettingsView() {
-    return Object.keys(settingsViews).includes(this.state.currentPage)
-  }
-
-  isDefaultView() {
-    const { currentPage } = this.state
-    return this.isMenuItem(currentPage) || currentPage === SETTINGS_MENU_PAGE
-  }
-
  render() {
-    const { currentPage, currentProps } = this.state
-    const pages = {
-      Home,
-      Calendar,
-      CycleDay,
-      Chart,
-      SettingsMenu,
-      ...settingsViews,
-      Stats,
-      ...symptomViews
+    const { date, navigation, goBack } = this.props
+    const { currentPage } = navigation
+
+    if (!currentPage) {
+      return false
+    }
+
+    const Page = viewsList[currentPage]
+    const title = headerTitles[currentPage]
+
+    const isSettingsSubView = isSettingsView(currentPage)
+    const isTemperatureEditView = currentPage === 'TemperatureEditView'
+
+    const headerProps = {
+      title,
+      handleBack: isSettingsSubView ? goBack : null,
+    }
+
+    const pageProps = {
+      cycleDay: date && getCycleDay(date),
+      date,
+      isTemperatureEditView,
    }
-    const Page = pages[currentPage]
-    const title = headerTitlesLowerCase[currentPage]

    return (
-      <View style={{flex: 1}}>
-        {this.isDefaultView() &&
-          <Header title={title} />
-        }
-        {(this.isSettingsView()) &&
-          <Header
-            title={title}
-            showBackButton={true}
-            goBack={this.handleBackButtonPress}
-          />
-        }
-
-        <Page
-          navigate={this.navigate}
-          {...currentProps}
-          handleBackButtonPress={this.handleBackButtonPress}
-        />
-
-        {!this.isSymptomView() &&
-          <Menu navigate={this.navigate} currentPage={currentPage} />
-        }
+      <View style={styles.container}>
+        <Header { ...headerProps } />
+        <Page { ...pageProps } />
+        <Menu />
      </View>
    )
  }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
+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)
@@ -1,20 +0,0 @@
-import React from 'react'
-import { TouchableOpacity } from 'react-native'
-import AppText from './app-text'
-import styles from '../styles'
-
-export default function Button(props) {
-  return (
-    <TouchableOpacity
-      onPress={props.onPress}
-      style={[
-        styles.button,
-        props.style,
-        {backgroundColor: props.backgroundColor}
-      ]}>
-      <AppText style={styles.homeButtonText}>
-        {props.children}
-      </AppText>
-    </TouchableOpacity>
-  )
-}
@@ -1,13 +1,28 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
-import { LocalDate } from 'js-joda'
+
+import { connect } from 'react-redux'
+import { setDate } from '../slices/date'
+import { navigate } from '../slices/navigation'
+
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import { shadesOfRed, calendarTheme } from '../styles/index'
-import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
+import {
+  calendarTheme,
+  predictionToCalFormat,
+  toCalFormat,
+  todayToCalFormat,
+} from './helpers/calendar'
+
+class CalendarView extends Component {
+  static propTypes = {
+    setDate: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired,
+  }

-export default class CalendarView extends Component {
  constructor(props) {
    super(props)
    this.bleedingDays = getBleedingDaysSortedByDate()
@@ -15,7 +30,7 @@ export default class CalendarView extends Component {
    this.state = {
      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat()
+      todayInCalFormat: todayToCalFormat(),
    }

    this.bleedingDays.addListener(this.setStateWithCalFormattedDays)
@@ -27,7 +42,7 @@ export default class CalendarView extends Component {
    this.setState({
      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat()
+      todayInCalFormat: todayToCalFormat(),
    })
  }

@@ -36,84 +51,49 @@ 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
-        onDayPress={this.passDateToDayView.bind(this)}
-        markedDates={
-          Object.assign(
+    const {
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat,
+    } = this.state
+    const markedDates = Object.assign(
      {},
-            this.state.todayInCalFormat,
-            this.state.bleedingDaysInCalFormat,
-            this.state.predictedBleedingDaysInCalFormat
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
    )
-        }
-        markingType={'custom'}
+
+    return (
+      <View style={styles.container}>
+        <CalendarList
          // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
          firstDay={1}
+          onDayPress={this.passDateToDayView.bind(this)}
+          markedDates={markedDates}
+          markingType='custom'
          theme={calendarTheme}
+          // Max amount of months allowed to scroll to the past.
+          pastScrollRange={120}
        />
+      </View>
    )
  }
 }

-function toCalFormat(bleedingDaysSortedByDate) {
-  const todayDateString = LocalDate.now().toString()
-  return bleedingDaysSortedByDate.reduce((acc, day) => {
-    acc[day.date] = {
-      customStyles: {
-        container: {
-          backgroundColor: shadesOfRed[day.bleeding.value],
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
  }
 }
-    }
-    if (day.date === todayDateString) {
-      acc[day.date].customStyles.text = styles.calendarToday
-    }
-    return acc
-  }, {})
-}

-function predictionToCalFormat(predictedDays) {
-  if (!predictedDays.length) return {}
-  const todayDateString = LocalDate.now().toString()
-  const middleIndex = (predictedDays[0].length - 1) / 2
-  return predictedDays.reduce((acc, setOfDays) => {
-    setOfDays.reduce((accSet, day, i) => {
-      accSet[day] = {
-        customStyles: {
-          container: {
-            borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2],
-            borderWidth: 3,
-          },
-          text: {
-            marginTop: 1,
-          }
-        }
-      }
-      if (day === todayDateString) {
-        accSet[day].customStyles.text = Object.assign(
-          {},
-          styles.calendarToday,
-          {marginTop: -2}
-        )
-      }
-      return accSet
-    }, acc)
-    return acc
-  }, {})
-}
-
-function todayToCalFormat() {
-  const todayDateString = LocalDate.now().toString()
-  const todayFormated = {}
-  todayFormated[todayDateString] = {
-    customStyles: {
-      text: styles.calendarToday
-    }
-  }
-  return todayFormated
-}
+export default connect(null, mapDispatchToProps)(CalendarView)
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+
+import { Typography } from '../../styles'
+import { CHART_YAXIS_WIDTH } from '../../config'
+import { shared as labels } from '../../i18n/en/labels'
+
+const ChartLegend = ({ height }) => {
+  return (
+    <View style={[styles.container, { height }]}>
+      <AppText style={styles.textBold}>#</AppText>
+      <AppText style={styles.text}>{labels.date}</AppText>
+    </View>
+  )
+}
+
+ChartLegend.propTypes = {
+  height: PropTypes.number.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    width: CHART_YAXIS_WIDTH
+  },
+  text: {
+    ...Typography.label,
+  },
+  textBold: {
+    ...Typography.labelBold
+  }
+})
+
+export default ChartLegend
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
+
+import { Colors } from '../../styles'
+import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../config'
+
+const ChartLine = ({ path, isNfpLine }) => {
+  const color = isNfpLine ? Colors.orange : Colors.grey
+  const width = isNfpLine
+    ? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
+
+  return (
+    <Shape d={path} stroke={color} strokeWidth={width} />
+  )
+}
+
+ChartLine.propTypes = {
+  path: PropTypes.object,
+  isNfpLine: PropTypes.bool,
+}
+
+ChartLine.defaultProps = {
+  isNfpLine: false
+}
+
+export default ChartLine
@@ -1,38 +1,86 @@
 import React, { Component } from 'react'
-import { View, FlatList, ActivityIndicator } from 'react-native'
-import { LocalDate } from 'js-joda'
-import { makeYAxisLabels, makeHorizontalGrid } 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 AppText from '../app-text'
-import AppLoadingView from '../app-loading'
-import { shared as labels } from '../../i18n/en/labels'
-import DripIcon from '../../assets/drip-icons'
-import DripHomeIcon from '../../assets/drip-home-icons'
-import nothingChanged from '../../db/db-unchanged'
+import PropTypes from 'prop-types'
+import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'

-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 AppLoadingView from '../common/app-loading'
+import AppPage from '../common/app-page'
+import AppText from '../common/app-text'
+
+import DayColumn from './day-column'
+import HorizontalGrid from './horizontal-grid'
+import NoData from './no-data'
+import Tutorial from './tutorial'
+import YAxis from './y-axis'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { getCycleDaysSortedByDate } from '../../db'
+import nothingChanged from '../../db/db-unchanged'
+import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import { makeColumnInfo, nfpLines } from '../helpers/chart'
+
+import {
+  CHART_COLUMN_WIDTH,
+  SYMPTOMS,
+  CHART_SYMPTOM_HEIGHT_RATIO,
+  CHART_XAXIS_HEIGHT_RATIO
+} from '../../config'
+import { shared } from '../../i18n/en/labels'
+import { Colors, Spacing } 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.checkShouldShowHint()
+    this.prepareSymptomData()
+  }
+
+  componentWillUnmount() {
+    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
+    this.removeObvListener()
+  }
+
+  checkShouldShowHint = async () => {
+    const flag = await getChartFlag()
+    const shouldShowHint = flag === 'true' ? true : false
+    this.setState({ shouldShowHint })
+  }
+
+  setShouldShowHint = async () => {
+    await setChartFlag()
+    this.setState({ shouldShowHint: false })
+  }
+
+  onLayout = () => {
+    if (this.state.chartHeight) return false
+
+    this.reCalculateChartInfo()
+    this.updateListeners(this.reCalculateChartInfo)
+  }
+
+  prepareSymptomData = () => {
+    this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
+      return this.cycleDaysSortedByDate.some(cycleDay => {
+        return (symptomName !== 'temperature') && cycleDay[symptomName]
+      })
+    })
+    this.chartSymptoms = [...this.symptomRowSymptoms]
+    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+      this.chartSymptoms.push('temperature')
+      this.shouldShowTemperatureColumn = true
+    }
  }

  renderColumn = ({ item, index }) => {
@@ -43,55 +91,30 @@ export default class CycleChart extends Component {
        navigate={this.props.navigate}
        symptomHeight={this.symptomHeight}
        columnHeight={this.columnHeight}
-        chartHeight={this.state.chartHeight}
        symptomRowSymptoms={this.symptomRowSymptoms}
        chartSymptoms={this.chartSymptoms}
+        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
        getFhmAndLtlInfo={this.getFhmAndLtlInfo}
+        xAxisHeight={this.xAxisHeight}
      />
    )
  }

-  onLayout = ({ nativeEvent }) => {
-    if (this.state.chartHeight) return
-    const height = nativeEvent.layout.height
-    const reCalculateChartInfo = () => {
-      // how many symptoms need to be displayed on the chart's upper symptom row?
-      this.symptomRowSymptoms = [
-        'bleeding',
-        'mucus',
-        'cervix',
-        'sex',
-        'desire',
-        'pain',
-        'mood',
-        'note'
-      ].filter((symptomName) => {
-        return this.cycleDaysSortedByDate.some(cycleDay => {
-          return cycleDay[symptomName]
-        })
-      })
+  reCalculateChartInfo = () => {
+    const { width, height } = Dimensions.get('window')

-      this.xAxisHeight = height * config.xAxisHeightPercentage
-      const remainingHeight = height - this.xAxisHeight
-      this.symptomHeight = config.symptomHeightPercentage * remainingHeight
+    this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
+    const remainingHeight = height * 0.7 - this.xAxisHeight
+    this.symptomHeight = remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
    this.symptomRowHeight = this.symptomRowSymptoms.length *
      this.symptomHeight
    this.columnHeight = remainingHeight - this.symptomRowHeight
+    const chartHeight = this.shouldShowTemperatureColumn ?
+      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
+    const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
+    const columns = makeColumnInfo()

-      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.setState({ columns, chartHeight, numberOfColumnsToRender })
  }

  updateListeners(dataUpdateHandler) {
@@ -110,68 +133,50 @@ export default class CycleChart extends Component {
    this.removeObvListener = scaleObservable(dataUpdateHandler, false)
  }

-  componentWillUnmount() {
-    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
-    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() {
-    return (
-      <View
-        onLayout={this.onLayout}
-        style={{ flexDirection: 'row', flex: 1 }}
-      >
-        {!this.state.chartLoaded && <AppLoadingView />}
+    const {
+      chartHeight,
+      chartLoaded,
+      shouldShowHint,
+      numberOfColumnsToRender
+    } = this.state
+    const hasDataToDisplay = this.chartSymptoms.length > 0

-        {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}
+    return (
+      <AppPage
+        contentContainerStyle={styles.pageContainer}
+        onLayout={this.onLayout}
+        scrollViewStyle={styles.page}
      >
-                  {symptomIcons[symptomName]}
-                </View>
-              })}
-            </View>
-            <View style={[styles.yAxis, {height: this.columnHeight}]}>
-              {makeYAxisLabels(this.columnHeight)}
-            </View>
-            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <DripHomeIcon
-                name="circle"
-                size={styles.yAxis.width - 7}
-                color={cycleDayColor}
-              />
-              <AppText style={[styles.yAxisLabels.dateLabel]}>
-                {labels.date.toLowerCase()}
+        {!hasDataToDisplay && <NoData />}
+        {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
+        <View style={styles.chartContainer}>
+          {shouldShowHint && chartLoaded &&
+            <Tutorial onClose={this.setShouldShowHint} />
+          }
+          {hasDataToDisplay && chartLoaded &&
+            !this.shouldShowTemperatureColumn &&
+            <View style={styles.centerItem}>
+              <AppText style={styles.warning}>
+                {shared.noTemperatureWarning}
              </AppText>
            </View>
-          </View>}
-
-
-        {this.state.chartHeight && this.state.chartLoaded &&
-          makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
          }
+          {hasDataToDisplay && (
+            <View style={styles.chartArea}>

-        {this.state.chartHeight &&
+              {chartHeight && chartLoaded && (
+                <YAxis
+                  height={this.columnHeight}
+                  symptomsToDisplay={this.symptomRowSymptoms}
+                  symptomsSectionHeight={this.symptomRowHeight}
+                  shouldShowTemperatureColumn=
+                    {this.shouldShowTemperatureColumn}
+                  xAxisHeight={this.xAxisHeight}
+                />
+              )}
+
+              {chartHeight &&
               <FlatList
                 horizontal={true}
                 inverted={true}
@@ -179,42 +184,72 @@ export default class CycleChart extends Component {
                 data={this.state.columns}
                 renderItem={this.renderColumn}
                 keyExtractor={item => item}
-            initialNumToRender={15}
+                 initialNumToRender={numberOfColumnsToRender}
                 windowSize={30}
                 onLayout={() => this.setState({chartLoaded: true})}
                 onEndReached={() => this.setState({end: true})}
                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
                 updateCellsBatchingPeriod={800}
+                 contentContainerStyle={{ height: chartHeight }}
               />
              }
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  {this.shouldShowTemperatureColumn &&
+                    <HorizontalGrid height={this.columnHeight} />
+                  }
+                </React.Fragment>
+              )}
            </View>
+          )}
+        </View>
+      </AppPage>
    )
  }
 }

-function LoadingMoreView(props) {
+function LoadingMoreView({ end }) {
  return (
-    <View style={styles.loadingMore}>
-      {!props.end &&
-        <ActivityIndicator size={'large'} color={'white'}/>
-      }
+    <View style={styles.loadingContainer}>
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
    </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)
-    }
+LoadingMoreView.propTypes = {
+  end: PropTypes.bool
 }

-  return getDaysInRange(today, [])
+const styles = StyleSheet.create({
+  chartArea: {
+    flexDirection: 'row'
+  },
+  chartContainer: {
+    flexDirection: 'column'
+  },
+  loadingContainer: {
+    height: '100%',
+    backgroundColor: Colors.turquoiseLight,
+    justifyContent: 'center'
+  },
+  page: {
+    marginVertical: Spacing.small
+  },
+  pageContainer: {
+    paddingHorizontal: Spacing.base
+  },
+  warning: {
+    padding: Spacing.large
  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(CycleChart)
@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+import moment from 'moment'
+
+import AppText from '../common/app-text'
+
+import cycleModule from '../../lib/cycle'
+import { getOrdinalSuffix } from '../helpers/home'
+import { Containers, Typography, Sizes } from '../../styles'
+
+const CycleDayLabel = ({ height, date }) => {
+  const cycleDayNumber = cycleModule().getCycleDayNumber(date)
+  const cycleDayLabel = cycleDayNumber ? cycleDayNumber : ' '
+
+  const momentDate = moment(date)
+  const dayOfMonth = momentDate.date()
+  const isFirstDayOfMonth = dayOfMonth === 1
+
+  return (
+    <View style={[styles.container, { height }]}>
+      <AppText style={styles.textBold}>{cycleDayLabel}</AppText>
+      <View style={styles.dateLabel}>
+        <AppText style={styles.text}>
+          {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
+        </AppText>
+        {!isFirstDayOfMonth &&
+          <AppText style={styles.textLight}>
+            {getOrdinalSuffix(dayOfMonth)}
+          </AppText>
+        }
+      </View>
+    </View>
+  )
+}
+
+CycleDayLabel.propTypes = {
+  height: PropTypes.number,
+  date: PropTypes.string,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+    left: 4,
+  },
+  containerRow: {
+    ...Containers.rowContainer
+  },
+  text: {
+    ...Typography.label,
+    fontSize: Sizes.small,
+  },
+  textBold: {
+    ...Typography.labelBold
+  },
+  textLight: {
+    ...Typography.labelLight,
+  },
+  dateLabel: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  }
+})
+
+export default CycleDayLabel
@@ -1,305 +1,138 @@
 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>
+        {shouldShowTemperatureColumn && <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
+          columnHeight={columnHeight}
+        />}
+
+        <CycleDayLabel
+          height={xAxisHeight}
+          date={dateString}
+        />
+
+        { symptomRowSymptoms.map((symptom, i) => {
+          const hasSymptomData = this.data.hasOwnProperty(symptom)
+          return (
+            <SymptomCell
+              index={i}
+              key={symptom}
+              symptom={symptom}
+              symptomValue={hasSymptomData && this.data[symptom]}
+              isSymptomDataComplete={
+                hasSymptomData && isSymptomDataComplete(symptom, dateString)
+              }
+              height={symptomHeight}
+            />)
+        }
+        )}

-        <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)
@@ -1,57 +1,87 @@
 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'
+import { Colors } from '../../styles'
+
+import {
+  CHART_COLUMN_WIDTH,
+  CHART_COLUMN_MIDDLE,
+  CHART_DOT_RADIUS,
+  CHART_STROKE_WIDTH
+} 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])
  }

  render() {
-    const y = this.props.y
-    const exclude = this.props.exclude
-    let lineToRight
-    let lineToLeft
+    const {
+      exclude,
+      leftTemperatureExclude,
+      leftY,
+      rightTemperatureExclude,
+      rightY,
+      y
+    } = this.props
+    let excludeLeftLine, excludeRightLine, lineLeft, lineRight

-    if (this.props.leftY) {
-      const middleY = ((this.props.leftY - y) / 2) + y
-      const excludedLine = this.props.leftTemperatureExclude || exclude
-      lineToLeft = makeLine(y, middleY, 0, excludedLine)
+    if (leftY) {
+      const middleY = ((leftY - y) / 2) + y
+      excludeLeftLine = leftTemperatureExclude || exclude
+      lineLeft = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE, y)
+        .lineTo(0, middleY)
    }
-    if (this.props.rightY) {
-      const middleY = ((y - this.props.rightY) / 2) + this.props.rightY
-      const excludedLine = this.props.rightTemperatureExclude || exclude
-      lineToRight = makeLine(y, middleY, config.columnWidth, excludedLine)
+    if (rightY) {
+      const middleY = ((y - rightY) / 2) + rightY
+      excludeRightLine = rightTemperatureExclude || exclude
+      lineRight = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE, y)
+        .lineTo(CHART_COLUMN_WIDTH, middleY)
    }

-    const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-    const radius = dotStyle.r
-    const dot = (
+    const dot = new Path().moveTo(CHART_COLUMN_MIDDLE , y - CHART_DOT_RADIUS)
+      .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
+      .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
+    const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
+    const lineColorLeft = excludeLeftLine ?
+      Colors.turquoise : Colors.turquoiseDark
+    const lineColorRight = excludeRightLine ?
+      Colors.turquoise : Colors.turquoiseDark
+
+    return(
+      <React.Fragment>
        <Shape
-        d={new Path()
-          .moveTo(config.columnMiddle, y - radius)
-          .arc(0, radius * 2, radius)
-          .arc(0, radius * -2, radius)
-        }
-        fill={dotStyle.fill}
+          d={lineLeft}
+          stroke={lineColorLeft}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y}
+        />
+        <Shape
+          d={lineRight}
+          stroke={lineColorRight}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y + CHART_DOT_RADIUS}
+        />
+        <Shape
+          d={dot}
+          stroke={dotColor}
+          strokeWidth={CHART_STROKE_WIDTH}
+          fill="white"
          key='dot'
        />
+      </React.Fragment>
    )
-    return [lineToLeft, lineToRight, dot]
  }
 }
-
-function makeLine(currY, middleY, x, excludeLine) {
-  const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
-
-  return <Shape
-    stroke={lineStyle.stroke}
-    d={new Path()
-      .moveTo(config.columnMiddle, currY)
-      .lineTo(x, middleY)
-    }
-    key={x.toString()}
-  />
-}
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import { getTickPositions } from '../helpers/chart'
+
+import { Colors } from '../../styles'
+import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
+
+const HorizontalGrid = ({ height }) => {
+  return getTickPositions(height).map(tick => {
+    return (
+      <View key={tick} top={tick} {...styles.line}/>
+    )
+  })
+}
+
+HorizontalGrid.propTypes = {
+  height: PropTypes.number
+}
+
+const styles = StyleSheet.create({
+  line: {
+    borderStyle: 'solid',
+    borderBottomColor: Colors.grey,
+    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    left: CHART_YAXIS_WIDTH,
+    position:'absolute',
+    right: 0
+  }
+})
+
+export default HorizontalGrid
@@ -1,85 +0,0 @@
-import { getCycleStatusForDay } from '../../lib/sympto-adapter'
-import { normalizeToScale } from './y-axis'
-
-export default function () {
-  const cycle = {
-    status: null
-  }
-
-  function updateCurrentCycle(dateString) {
-    // for the NFP lines, we don't care about potentially extending the
-    // preOvu phase, so we don't include all earlier cycles, as that is
-    // an expensive db operation at the moment
-    cycle.status = getCycleStatusForDay(
-      dateString, { excludeEarlierCycles: true }
-    )
-    if(!cycle.status) {
-      cycle.noMoreCycles = true
-      return
-    }
-    if (cycle.status.phases.preOvulatory) {
-      cycle.startDate = cycle.status.phases.preOvulatory.start.date
-    } else {
-      cycle.startDate = cycle.status.phases.periOvulatory.start.date
-    }
-  }
-
-  function dateIsInPeriOrPostPhase(dateString) {
-    return (
-      dateString >= cycle.status.phases.periOvulatory.start.date
-    )
-  }
-
-  function precededByAnotherTempValue(dateString) {
-    return (
-      // we are only interested in days that have a preceding
-      // temp
-      Object.keys(cycle.status.phases).some(phaseName => {
-        return cycle.status.phases[phaseName].cycleDays.some(day => {
-          return day.temperature && day.date < dateString
-        })
-      })
-      // and also a following temp, so we don't draw the line
-      // longer than necessary
-      &&
-      cycle.status.phases.postOvulatory.cycleDays.some(day => {
-        return day.temperature && day.date > dateString
-      })
-    )
-  }
-
-  function isInTempMeasuringPhase(temperature, dateString) {
-    return (
-      temperature || precededByAnotherTempValue(dateString)
-    )
-  }
-
-  return function(dateString, temperature, columnHeight) {
-    const ret = {
-      drawLtlAt: null,
-      drawFhmLine: false
-    }
-    if (!cycle.status && !cycle.noMoreCycles) updateCurrentCycle(dateString)
-    if (cycle.noMoreCycles) return ret
-
-    if (dateString < cycle.startDate) updateCurrentCycle(dateString)
-    if (cycle.noMoreCycles) return ret
-
-    const tempShift = cycle.status.temperatureShift
-
-    if (tempShift) {
-      if (tempShift.firstHighMeasurementDay.date === dateString) {
-        ret.drawFhmLine = true
-      }
-
-      if (
-        dateIsInPeriOrPostPhase(dateString) &&
-        isInTempMeasuringPhase(temperature, dateString)
-      ) {
-        ret.drawLtlAt = normalizeToScale(tempShift.ltl, columnHeight)
-      }
-    }
-
-    return ret
-  }
-}
@@ -0,0 +1,44 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+import Button from '../common/button'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Containers } from '../../styles'
+import { shared } from '../../i18n/en/labels'
+
+const NoData = ({ navigate }) => {
+  return (
+    <View style={styles.container}>
+      <AppText>{shared.noDataWarning}</AppText>
+      <Button isCTA onPress={() => {navigate('CycleDay')}}>
+        {shared.noDataButtonText}
+      </Button>
+    </View>
+  )
+}
+
+NoData.propTypes = {
+  navigate: PropTypes.func.isRequired,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(NoData)
@@ -1,135 +0,0 @@
-import config from '../../config'
-import { shadesOfRed, cycleDayColor } from '../../styles/index'
-
-const colorTemperature = '#765285'
-const colorTemperatureLight = '#a67fb5'
-export const dotRadius = 5
-const lineWidth = 1.5
-const colorLtl = '#feb47b'
-const gridColor = '#d3d3d3'
-const gridLineWidthVertical = 0.6
-const gridLineWidthHorizontal = 0.3
-const numberLabelFontSize = 13
-
-const styles = {
-  curve: {
-    stroke: colorTemperature,
-    strokeWidth: lineWidth,
-  },
-  curveExcluded: {
-    stroke: colorTemperatureLight,
-    strokeWidth: lineWidth
-  },
-  curveDots: {
-    fill: colorTemperature,
-    r: dotRadius
-  },
-  curveDotsExcluded: {
-    fill: colorTemperatureLight,
-    r: dotRadius
-  },
-  column: {
-    label: {
-      date: {
-        color: 'grey',
-        fontSize: 9,
-        fontWeight: '100',
-        textAlign: 'center',
-        paddingTop: 2.5
-      },
-      number: {
-        color: cycleDayColor,
-        fontSize: numberLabelFontSize,
-        textAlign: 'center',
-      }
-    },
-    stroke: {
-      color: gridColor,
-      width: gridLineWidthVertical,
-    }
-  },
-  symptomIcon: {
-    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']
-  },
-  yAxis: {
-    width: 27,
-    borderRightWidth: 1,
-    borderColor: 'lightgrey',
-    borderStyle: 'solid'
-  },
-  yAxisLabels: {
-    tempScale: {
-      position: 'absolute',
-      right: 2,
-      color: 'grey',
-      fontSize: 9,
-      textAlign: 'left'
-    },
-    cycleDayLabel: {
-      textAlign: 'center',
-      justifyContent: 'center',
-      fontSize: Math.ceil(numberLabelFontSize / 2)
-    },
-    dateLabel: {
-      textAlign: 'center',
-      justifyContent: 'center',
-      color: 'grey',
-      fontSize: 9,
-      fontWeight: '100',
-    }
-  },
-  horizontalGrid: {
-    position:'absolute',
-    borderStyle: 'solid',
-    borderBottomColor: gridColor,
-    borderBottomWidth: gridLineWidthHorizontal,
-    width: '100%',
-    left: config.columnWidth
-  },
-  nfpLine: {
-    stroke: colorLtl,
-    strokeWidth: lineWidth,
-  },
-  symptomRow: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  loadingMore: {
-    height: '100%',
-    backgroundColor: 'lightgrey',
-    justifyContent: 'center'
-  }
-}
-
-export default styles
@@ -0,0 +1,74 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import { Colors, Containers } from '../../styles'
+import {
+  CHART_COLUMN_WIDTH,
+  CHART_DOT_RADIUS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH
+} from '../../config'
+
+const SymptomCell = ({
+  height,
+  index,
+  symptom,
+  symptomValue,
+  isSymptomDataComplete
+}) => {
+
+  const shouldDrawDot = symptomValue !== false
+  const styleCell = index !== 0
+    ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+    : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
+  let styleDot
+
+  if (shouldDrawDot) {
+    const styleSymptom = Colors.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
+    styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
+  }
+
+  return (
+    <View style={styleCell} key={symptom}>
+      {shouldDrawDot && <View style={styleDot} />}
+    </View>
+  )
+}
+
+SymptomCell.propTypes = {
+  height: PropTypes.number,
+  index: PropTypes.number.isRequired,
+  symptom: PropTypes.string,
+  symptomValue: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+  ]),
+  isSymptomDataComplete: PropTypes.bool,
+}
+
+const styles = StyleSheet.create({
+  cell: {
+    backgroundColor: 'white',
+    borderBottomColor: Colors.grey,
+    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    borderLeftColor: Colors.grey,
+    borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    ...Containers.centerItems
+  },
+  topBorder: {
+    borderTopColor: Colors.grey,
+    borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  },
+  dot: {
+    width: CHART_DOT_RADIUS * 2,
+    height: CHART_DOT_RADIUS * 2,
+    borderRadius: 50
+  }
+})
+export default SymptomCell
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet , View } from 'react-native'
+
+import DripIcon from '../../assets/drip-icons'
+
+import { Colors, Containers } from '../../styles'
+import { CHART_YAXIS_WIDTH, CHART_ICON_SIZE } from '../../config'
+
+const SymptomIcon = ({ symptom, height }) => {
+  return (
+    <View style={styles.container} width={CHART_YAXIS_WIDTH} height={height}>
+      <DripIcon
+        size={CHART_ICON_SIZE}
+        name={`drip-icon-${symptom}`}
+        color={Colors.iconColors[symptom].color}
+      />
+    </View>
+  )
+}
+
+SymptomIcon.propTypes = {
+  height: PropTypes.number,
+  symptom: PropTypes.string,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
+export default SymptomIcon
@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
+
+import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
+
+import ChartLine from './chart-line'
+import DotAndLine from './dot-and-line'
+
+import { CHART_COLUMN_WIDTH, CHART_STROKE_WIDTH } from '../../config'
+
+const TemperatureColumn = ({
+  horizontalLinePosition,
+  isVerticalLine,
+  data,
+  columnHeight
+}) => {
+  const x = CHART_STROKE_WIDTH / 2
+
+  return (
+    <Surface
+      width={CHART_COLUMN_WIDTH}
+      height={columnHeight}
+      style={styles.container}
+    >
+
+      <ChartLine path={new Path().lineTo(0, columnHeight)}/>
+
+      {horizontalLinePosition && <ChartLine
+        path={new Path()
+          .moveTo(0, horizontalLinePosition)
+          .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)
+        }
+        isNfpLine={true}
+        key='ltl'
+      />}
+
+      {isVerticalLine && <ChartLine
+        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+        isNfpLine={true}
+        key='fhm'
+      />}
+
+      {data && typeof(data.y) !== 'undefined' && <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,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white'
+  }
+})
+
+export default TemperatureColumn
@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import Tick from './tick'
+
+import { getTickList } from '../helpers/chart'
+
+const TickList = ({ height }) => {
+
+  return (
+    <View style={[styles.container, height]}>
+      {
+        getTickList(height)
+          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
+            return (
+              <Tick
+                height={tickHeight}
+                isBold={isBold}
+                key={label}
+                label={label}
+                shouldShowLabel={shouldShowLabel}
+                yPosition={position}
+              />
+            )
+          })
+      }
+    </View>
+  )
+}
+
+TickList.propTypes = {
+  height: PropTypes.number,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
+export default TickList
@@ -0,0 +1,53 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+
+import { Sizes } from '../../styles'
+
+const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
+  const top = yPosition - height / 2
+  const containerStyle = [ styles.container, { flexBasis: height, height, top }]
+  const textStyle = isBold ? styles.textBold : styles.textNormal
+
+  return(
+    <View style={containerStyle}>
+      <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
+    </View>
+  )
+}
+
+Tick.propTypes = {
+  yPosition: PropTypes.number,
+  height: PropTypes.number.isRequired,
+  isBold: PropTypes.bool,
+  shouldShowLabel: PropTypes.bool,
+  label: PropTypes.string,
+}
+
+
+const text = {
+  lineHeight: Sizes.base,
+  right: 4,
+  textAlign: 'right'
+}
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    position: 'absolute',
+    right: 0,
+    width: 40
+  },
+  textBold: {
+    fontSize: Sizes.base,
+    fontWeight: 'bold',
+    ...text
+  },
+  textNormal: {
+    fontSize: Sizes.small,
+    ...text
+  }
+})
+
+export default Tick
@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Image, StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+import CloseIcon from '../common/close-icon'
+
+import { Containers, Spacing } from '../../styles'
+import { chart } from '../../i18n/en/labels'
+
+const image = require('../../assets/swipe.png')
+
+const Tutorial = ({ onClose }) => {
+  return (
+    <View style={styles.container}>
+      <Image resizeMode='contain' source={image} style={styles.image} />
+      <View style={styles.textContainer}>
+        <AppText>{chart.tutorial}</AppText>
+      </View>
+      <CloseIcon onClose={onClose} />
+    </View>
+  )
+}
+
+Tutorial.propTypes = {
+  onClose: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer,
+    padding: Spacing.large
+  },
+  image: {
+    height: 40
+  },
+  textContainer: {
+    width: '70%'
+  }
+})
+
+export default Tutorial
@@ -1,75 +1,52 @@
 import React from 'react'
-import { View } from 'react-native'
-import config from '../../config'
-import styles from './styles'
-import { scaleObservable, unitObservable } from '../../local-storage'
-import AppText from '../app-text'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'

-export function makeYAxisLabels(columnHeight) {
-  const units = unitObservable.value
-  const scaleMax = scaleObservable.value.max
-  const style = styles.yAxisLabels.tempScale
+import SymptomIcon from './symptom-icon'
+import TickList from './tick-list'
+import ChartLegend from './chart-legend'
+
+import { CHART_YAXIS_WIDTH } from '../../config'
+
+const YAxis = ({
+  height,
+  symptomsToDisplay,
+  symptomsSectionHeight,
+  shouldShowTemperatureColumn,
+  xAxisHeight
+}) => {
+  const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length

-  return getTickPositions(columnHeight).map((y, i) => {
-    const tick = scaleMax - i * units
-    const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
-    let showTick
-    let tickBold
-    if (units === 0.1) {
-      showTick =  (tick * 10 % 2) ? false : true
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
-    } else {
-      showTick =  (tick * 10 % 5) ? false : true
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
-    }
-    // this eyeballing is sadly necessary because RN does not
-    // support percentage values for transforms, which we'd need
-    // to reliably place the label vertically centered to the grid
  return (
-      <AppText
-        style={[style, {top: y - 8}, tickBold]}
-        key={i}>
-        {showTick && tickLabel}
-      </AppText>
-    )
-  })
-}
-
-export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
-  return getTickPositions(columnHeight).map(tick => {
-    return (
-      <View
-        top={tick + symptomRowHeight}
-        {...styles.horizontalGrid}
-        key={tick}
+    <View>
+      {shouldShowTemperatureColumn && <TickList height={height} />}
+      <ChartLegend height={xAxisHeight} />
+      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
+        {symptomsToDisplay.map(symptom => (
+          <SymptomIcon
+            key={symptom}
+            symptom={symptom}
+            height={symptomIconHeight}
          />
        )
+        )}
+      </View>
+    </View>
+  )
+}
+
+YAxis.propTypes = {
+  height: PropTypes.number,
+  symptomsToDisplay: PropTypes.array,
+  symptomsSectionHeight: PropTypes.number,
+  shouldShowTemperatureColumn: PropTypes.bool,
+  xAxisHeight: PropTypes.number.isRequired
+}
+
+const styles = StyleSheet.create({
+  yAxis: {
+    width: CHART_YAXIS_WIDTH
+  }
 })
-}

-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
@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
+import Icon from 'react-native-vector-icons/Entypo'
+
+import { Sizes } from '../../styles'
+
+const AppIcon = ({ color, name, style, ...props }) => {
+  const iconStyle = [styles.icon, style, { color }]
+
+  return <Icon name={name} style={iconStyle} {...props} />
+}
+
+AppIcon.propTypes = {
+  color: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  style: PropTypes.object
+}
+
+AppIcon.defaultProps = {
+  color: 'black'
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    fontSize: Sizes.subtitle
+  }
+})
+
+export default AppIcon
@@ -0,0 +1,24 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from './app-text'
+
+import { Containers } from '../../styles'
+
+import { shared } from '../../i18n/en/labels'
+
+const AppLoadingView = () => {
+  return (
+    <View style={styles.container}>
+      <AppText>{shared.loading}</AppText>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
+export default AppLoadingView
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+const AppModal = ({ children, onClose }) => {
+  return(
+    <Modal
+      animationType='fade'
+      onRequestClose={onClose}
+      transparent={true}
+      visible={true}
+    >
+      <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
+      {children}
+    </Modal>
+  )
+}
+
+AppModal.propTypes = {
+  children: PropTypes.node,
+  onClose: PropTypes.func
+}
+
+const styles = StyleSheet.create({
+  blackBackground: {
+    backgroundColor: 'black',
+    flex: 1,
+    opacity: 0.5,
+  }
+})
+
+export default AppModal
@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ScrollView, StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+
+import { Colors, Typography } from '../../styles'
+
+const AppPage = ({
+  children,
+  contentContainerStyle,
+  scrollViewStyle,
+  title,
+  ...props
+}) => {
+  return(
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={[styles.scrollView, contentContainerStyle]}
+        style={scrollViewStyle}
+        {...props}
+      >
+        {title && <AppText style={styles.title}>{title}</AppText>}
+        {children}
+      </ScrollView>
+    </View>
+  )
+}
+
+AppPage.propTypes = {
+  children: PropTypes.node,
+  contentContainerStyle: PropTypes.object,
+  scrollViewStyle: PropTypes.object,
+  title: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.turquoiseLight,
+    flex: 1
+  },
+  scrollView: {
+    backgroundColor: Colors.turquoiseLight,
+    flexGrow: 1
+  },
+  title: {
+    ...Typography.title
+  }
+})
+
+export default AppPage
@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, Switch, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import { Containers } from '../../styles'
+
+const AppSwitch = ({ onToggle, text, value }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <AppText>{text}</AppText>
+      </View>
+      <Switch onValueChange={onToggle} style={styles.switch} value={value} />
+    </View>
+  )
+}
+
+AppSwitch.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  text: PropTypes.string,
+  value: PropTypes.bool
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  },
+  switch: {
+    flex: 1,
+  },
+  textContainer: {
+    flex: 4,
+  }
+})
+
+export default AppSwitch
@@ -0,0 +1,45 @@
+import React from 'react'
+import { KeyboardAvoidingView, StyleSheet, TextInput } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { Colors, Spacing, Typography } from '../../styles'
+
+const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
+  const behavior = isKeyboardOffset ? "padding" : "height"
+  const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      <TextInput style={[styles.input, style]} {...props} />
+    </KeyboardAvoidingView>
+  )
+}
+
+AppTextInput.propTypes = {
+  style: PropTypes.object,
+  isKeyboardOffset: PropTypes.bool,
+}
+
+AppTextInput.defultProps = {
+  isKeyboardOffset: true,
+}
+
+const styles = StyleSheet.create({
+  input: {
+    backgroundColor: 'white',
+    borderColor: Colors.grey,
+    borderRadius: 5,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    color: Colors.greyDark,
+    marginTop: Spacing.base,
+    minWidth: '80%',
+    paddingHorizontal: Spacing.base,
+    ...Typography.mainText
+  }
+})
+
+export default AppTextInput
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, Text } from 'react-native'
+
+import Link from './link'
+
+import { Colors, Typography } from '../../styles'
+
+const AppText = ({ children, linkStyle, style, ...props }) => {
+  // we parse for links in case the text contains any
+  return (
+    <Link style={linkStyle}>
+      <Text style={[styles.text, style]} {...props}>
+        {children}
+      </Text>
+    </Link>
+  )
+}
+
+AppText.propTypes = {
+  children: PropTypes.node,
+  linkStyle: PropTypes.object,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: Colors.greyDark,
+    ...Typography.mainText
+  }
+})
+
+export default AppText
@@ -0,0 +1,87 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+
+import AppIcon from './app-icon'
+import AppText from './app-text'
+
+import { Colors, Fonts, Spacing } from '../../styles'
+
+const Button = ({
+  children,
+  iconName,
+  isCTA,
+  isSmall,
+  onPress,
+  testID,
+  ...props
+}) => {
+  const buttonStyle = isCTA ? styles.cta : styles.regular
+  const textCTA = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
+  const textStyle = [textCTA, isSmall ? textSmall : text]
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={buttonStyle}
+      testID={testID}
+      {...props}
+    >
+      <AppText style={textStyle}>{children}</AppText>
+      {iconName && <AppIcon color={Colors.orange} name={iconName} />}
+    </TouchableOpacity>
+  )
+}
+
+Button.propTypes = {
+  children: PropTypes.node,
+  iconName: PropTypes.string,
+  isCTA: PropTypes.bool,
+  isSmall: PropTypes.bool,
+  onPress: PropTypes.func,
+  testID: PropTypes.string
+}
+
+Button.defaultProps = {
+  isSmall: true
+}
+
+const text = {
+  padding: Spacing.base,
+  textTransform: 'uppercase'
+}
+
+const textSmall = {
+  fontSize: Fonts.small,
+  padding: Spacing.small,
+  textTransform: 'uppercase'
+}
+
+const button = {
+  alignItems: 'center',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  margin: Spacing.base,
+  minWidth: '15%'
+}
+
+const styles = StyleSheet.create({
+  regular: {
+    ...button
+  },
+  cta: {
+    backgroundColor: Colors.orange,
+    borderRadius: 25,
+    ...button
+  },
+  buttonTextBold: {
+    color: 'white',
+    fontFamily: Fonts.bold
+  },
+  buttonTextRegular: {
+    color: Colors.greyDark,
+    fontFamily: Fonts.main
+  }
+})
+
+export default Button
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+
+import AppIcon from './app-icon'
+
+import { Colors, Sizes } from '../../styles'
+
+const CloseIcon = ({ onClose, ...props }) => {
+  return (
+    <TouchableOpacity
+      onPress={onClose}
+      style={styles.container}
+      {...props}
+    >
+      <AppIcon name='cross' color={Colors.orange} />
+    </TouchableOpacity>
+  )
+}
+
+CloseIcon.propTypes = {
+  onClose: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    marginBottom: Sizes.base
+  }
+})
+
+export default CloseIcon
@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Hyperlink from 'react-native-hyperlink'
+import { StyleSheet } from 'react-native'
+
+import { Colors, Typography } from '../../styles'
+
+import links from '../../i18n/en/links'
+
+const Link = ({ children, style }) => {
+  return (
+    <Hyperlink
+      linkStyle={[styles.link, style]}
+      linkText={replaceUrlWithText}
+      linkDefault
+    >
+      {children}
+    </Hyperlink>
+  )
+}
+
+Link.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.object
+}
+
+const styles = StyleSheet.create({
+  link: {
+    color: Colors.purple,
+    textDecorationLine: 'underline',
+    ...Typography.mainText,
+  }
+})
+
+function replaceUrlWithText(url) {
+  const link = Object.values(links).find(l => l.url === url)
+  return (link && link.text) || url
+}
+
+export default Link
@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
+import iconConfig from '../../selection.json'
+
+import { Colors, Sizes } from '../../styles'
+
+const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu')
+
+const MenuIcon = ({ isActive, name }) => {
+  const color = isActive ? Colors.greyDark : Colors.grey
+
+  return <Icon name={name} size={Sizes.icon} color={color} />
+}
+
+MenuIcon.propTypes = {
+  isActive: PropTypes.bool,
+  name: PropTypes.string.isRequired
+}
+
+export default MenuIcon
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from './app-text'
+
+import { Colors, Spacing, Typography } from '../../styles'
+
+const Segment = ({ children, last, title }) => {
+  const containerStyle = last ? styles.containerLast : styles.container
+  const commonStyle = Object.assign({}, containerStyle)
+
+  return (
+    <View style={commonStyle}>
+      {title && <AppText style={styles.title}>{title}</AppText>}
+      {children}
+    </View>
+  )
+}
+
+Segment.propTypes = {
+  children: PropTypes.node,
+  last: PropTypes.bool,
+  style: PropTypes.object,
+  title: PropTypes.string,
+}
+
+const segmentContainer = {
+  marginHorizontal: Spacing.base,
+  marginBottom: Spacing.base,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderStyle: 'solid',
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.greyLight,
+    paddingBottom: Spacing.base,
+    ...segmentContainer,
+  },
+  containerLast: {
+    ...segmentContainer,
+  },
+  title: {
+    ...Typography.subtitle,
+  }
+})
+
+export default Segment
@@ -0,0 +1,80 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import { Sizes, Spacing, Typography } from '../../styles'
+
+const Table = ({ tableContent }) => {
+  return (
+    tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+  )
+}
+
+Table.propTypes = {
+  tableContent: PropTypes.array.isRequired
+}
+
+const Row = ({ rowContent }) => {
+  return(
+    <View style={styles.row}>
+      <Cell content={rowContent[0]} isLeft />
+      <Cell content={rowContent[1]} />
+    </View>
+  )
+}
+
+Row.propTypes = {
+  rowContent: PropTypes.array.isRequired
+}
+
+const Cell = ({ content, isLeft }) => {
+  const styleContainer = isLeft ? styles.cellLeft : styles.cellRight
+  const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange
+  const numberOfLines = isLeft ? 1 : 2
+  const ellipsizeMode = isLeft ? 'clip' : 'tail'
+
+  return(
+    <View style={styleContainer}>
+      <AppText
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsizeMode}
+        style={styleText}
+      >
+        {content}
+      </AppText>
+    </View>
+  )
+}
+
+Cell.propTypes = {
+  content: PropTypes.node.isRequired,
+  isLeft: PropTypes.bool,
+}
+
+const styles = StyleSheet.create({
+  accentOrange: {
+    ...Typography.accentOrange,
+    fontSize: Sizes.small,
+  },
+  accentPurpleBig: {
+    ...Typography.accentPurpleBig,
+    marginRight: Spacing.small,
+  },
+  cellLeft: {
+    alignItems: 'flex-end',
+    flex: 5,
+    justifyContent: 'center',
+  },
+  cellRight: {
+    flex: 6,
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    marginBottom: Spacing.tiny,
+  }
+})
+
+export default Table
@@ -1,318 +1,112 @@
 import React, { Component } from 'react'
-import {
-  ScrollView,
-  View,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
 import { LocalDate } from 'js-joda'
-import Header from '../header'
-import { getCycleDay } from '../../db'
+
+import AppPage from '../common/app-page'
+import SymptomBox from './symptom-box'
+import SymptomPageTitle from './symptom-page-title'
+
+import { connect } from 'react-redux'
+import { getDate, setDate } from '../../slices/date'
+import { navigate } from '../../slices/navigation'
+
 import cycleModule from '../../lib/cycle'
-import styles from '../../styles'
-import * as labels from '../../i18n/en/cycle-day'
-import { headerTitles as symptomTitles } from '../../i18n/en/labels'
-import AppText from '../app-text'
-import DripIcon from '../../assets/drip-icons'
+import { dateToTitle } from '../helpers/format-date'
+import { getCycleDay } from '../../db'
+import { getData } from '../helpers/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
+import { general as labels} from '../../i18n/en/cycle-day'
+import { Spacing } from '../../styles'
+import { SYMPTOMS } from '../../config'
+
+class CycleDayOverView extends Component {
+
+  static propTypes = {
+    navigate: PropTypes.func,
+    setDate: PropTypes.func,
+    cycleDay: PropTypes.object,
+    date: PropTypes.string,
+    isTemperatureEditView: PropTypes.bool,
+  }

-export default class CycleDayOverView extends Component {
  constructor(props) {
    super(props)
-    this.state = {
-      date: this.props.date,
-      cycleDay: getCycleDay(this.props.date)
+
+    this.state = { cycleDay: getCycleDay(props.date), data: null }
+    if (props.isTemperatureEditView) {
+      const todayDateString = LocalDate.now().toString()
+      props.setDate(todayDateString)
    }
  }

-  goToCycleDay = (target) => {
-    const localDate = LocalDate.parse(this.state.date)
-    const targetDate = target === 'before' ?
-      localDate.minusDays(1).toString() :
-      localDate.plusDays(1).toString()
-    this.setState({
-      date: targetDate,
-      cycleDay: getCycleDay(targetDate)
-    })
-  }
-
-  navigate(symptom) {
-    this.props.navigate(symptom, this.state)
-  }
-
-  getLabel(symptomName) {
-    const cycleDay = this.state.cycleDay
-    if (!cycleDay || !cycleDay[symptomName]) return
-
-    const l = {
-      bleeding: bleeding => {
-        if (isNumber(bleeding.value)) {
-          let bleedingLabel = bleedingLabels[bleeding.value]
-          if (bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
-          return bleedingLabel
-        }
-      },
-      temperature: temperature => {
-        if (isNumber(temperature.value)) {
-          let temperatureLabel = `${temperature.value} °C - ${temperature.time}`
-          if (temperature.exclude) {
-            temperatureLabel = "( " + temperatureLabel + " )"
-          }
-          return temperatureLabel
-        }
-      },
-      mucus: mucus => {
-        const filledCategories = ['feeling', 'texture'].filter(c => isNumber(mucus[c]))
-        let label = filledCategories.map(category => {
-          return labels.mucus.subcategories[category] + ': ' + labels.mucus[category].categories[mucus[category]]
-        }).join(', ')
-
-        if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}`
-        if (mucus.exclude) label = `(${label})`
-
-        return label
-      },
-      cervix: cervix => {
-        const filledCategories = ['opening', 'firmness', 'position'].filter(c => isNumber(cervix[c]))
-        let label = filledCategories.map(category => {
-          return labels.cervix.subcategories[category] + ': ' + labels.cervix[category].categories[cervix[category]]
-        }).join(', ')
-
-        if (cervix.exclude) label = `(${label})`
-
-        return label
-      },
-      note: note => {
-        return note.value
-      },
-      desire: desire => {
-        if (isNumber(desire.value)) {
-          const desireLabel = `${intensityLabels[desire.value]}`
-          return desireLabel
-        }
-      },
-      sex: sex => {
-        let sexLabel = []
-        if (sex && Object.values({...sex}).some(val => val)){
-          Object.keys(sex).forEach(key => {
-            if(sex[key] && key !== 'other' && key !== 'note') {
-              sexLabel.push(
-                sexLabels[key] ||
-                contraceptiveLabels[key]
-              )
-            }
-            if(key === 'other' && sex.other) {
-              let label = contraceptiveLabels[key]
-              if(sex.note) {
-                label = `${label} (${sex.note})`
-              }
-              sexLabel.push(label)
-            }
-          })
-          sexLabel = sexLabel.join(', ')
-          return sexLabel
-        }
-      },
-      pain: pain => {
-        let painLabel = []
-        if (pain && Object.values({...pain}).some(val => val)){
-          Object.keys(pain).forEach(key => {
-            if(pain[key] && key !== 'other' && key !== 'note') {
-              painLabel.push(painLabels[key])
-            }
-            if(key === 'other' && pain.other) {
-              let label = painLabels[key]
-              if(pain.note) {
-                label = `${label} (${pain.note})`
-              }
-              painLabel.push(label)
-            }
-          })
-          painLabel = painLabel.join(', ')
-          return painLabel
-        }
-      },
-      mood: mood => {
-        let moodLabel = []
-        if (mood && Object.values({...mood}).some(val => val)){
-          Object.keys(mood).forEach(key => {
-            if(mood[key] && key !== 'other' && key !== 'note') {
-              moodLabel.push(moodLabels[key])
-            }
-            if(key === 'other' && mood.other) {
-              let label = moodLabels[key]
-              if(mood.note) {
-                label = `${label} (${mood.note})`
-              }
-              moodLabel.push(label)
-            }
-          })
-          moodLabel = moodLabel.join(', ')
-          return moodLabel
-        }
-      }
-    }
-
-    const symptomValue = cycleDay[symptomName]
-    return l[symptomName](symptomValue)
+  updateCycleDay = (date) => {
+    this.props.setDate(date)
+    this.setState({ cycleDay: getCycleDay(date) })
  }

  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, isTemperatureEditView } = this.props
+
+    const { getCycleDayNumber } = cycleModule()
+    const cycleDayNumber = getCycleDayNumber(date)
+    const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`

    return (
-      <View style={{ flex: 1 }}>
-        <Header
-          isCycleDayOverView={true}
-          cycleDayNumber={cycleDayNumber}
-          date={this.state.date}
-          goToCycleDay={this.goToCycleDay}
+      <AppPage>
+        <SymptomPageTitle
+          reloadSymptomData={this.updateCycleDay}
+          subtitle={subtitle}
+          title={dateToTitle(date)}
        />
-        <ScrollView>
-          <View style={styles.symptomBoxesView}>
-            <SymptomBox
-              title={symptomTitles.bleeding}
-              onPress={() => this.navigate('BleedingEditView')}
-              data={this.getLabel('bleeding')}
-              disabled={dateInFuture}
-              iconName='drip-icon-bleeding'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.temperature}
-              onPress={() => this.navigate('TemperatureEditView')}
-              data={this.getLabel('temperature')}
-              disabled={dateInFuture}
-              iconName='drip-icon-temperature'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.mucus}
-              onPress={() => this.navigate('MucusEditView')}
-              data={this.getLabel('mucus')}
-              disabled={dateInFuture}
-              iconName='drip-icon-mucus'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.cervix}
-              onPress={() => this.navigate('CervixEditView')}
-              data={this.getLabel('cervix')}
-              disabled={dateInFuture}
-              iconName='drip-icon-cervix'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.desire}
-              onPress={() => this.navigate('DesireEditView')}
-              data={this.getLabel('desire')}
-              disabled={dateInFuture}
-              iconName='drip-icon-desire'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.sex}
-              onPress={() => this.navigate('SexEditView')}
-              data={this.getLabel('sex')}
-              disabled={dateInFuture}
-              iconName='drip-icon-sex'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.pain}
-              onPress={() => this.navigate('PainEditView')}
-              data={this.getLabel('pain')}
-              disabled={dateInFuture}
-              iconName='drip-icon-pain'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.mood}
-              onPress={() => this.navigate('MoodEditView')}
-              data={this.getLabel('mood')}
-              disabled={dateInFuture}
-              iconName='drip-icon-mood'
-            >
-            </SymptomBox>
-            <SymptomBox
-              title={symptomTitles.note}
-              onPress={() => this.navigate('NoteEditView')}
-              data={this.getLabel('note')}
-              iconName='drip-icon-note'
-            >
-            </SymptomBox>
-            {/*  this is just to make the last row adhere to the grid
-        (and) because there are no pseudo properties in RN */}
-            <FillerBoxes />
-          </View>
-        </ScrollView>
-      </View>
-    )
-  }
-}
+        <View style={styles.container}>
+          {SYMPTOMS.map(symptom => {
+            const symptomData = cycleDay && cycleDay[symptom]
+              ? cycleDay[symptom] : null

-
-
-
-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 : {}
+            const isSymptomEdited = isTemperatureEditView && symptom === 'temperature'

            return(
-      <TouchableOpacity
-        onPress={this.props.onPress}
-        disabled={this.props.disabled}
-      >
-        <View style={[styles.symptomBox, boxActive, disabledStyle]}>
-          <DripIcon name={this.props.iconName} size={50} color={hasData ? 'white' : 'black'}/>
-          <AppText
-            style={[textActive, disabledStyle, {fontSize: 15}]}
-            numberOfLines={1}
-          >
-            {this.props.title.toLowerCase()}
-          </AppText>
-        </View>
-        <View style={[styles.symptomDataBox, disabledStyle]}>
-          <AppText
-            style={styles.symptomDataText}
-            numberOfLines={3}
-          >{this.props.data}</AppText>
-        </View>
-      </TouchableOpacity>
-    )
-  }
-}
-
-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()}
+              <SymptomBox
+                key={symptom}
+                symptom={symptom}
+                symptomData={symptomData}
+                symptomDataToDisplay={getData(symptom, symptomData)}
+                updateCycleDayData={this.updateCycleDay}
+                isSymptomEdited={isSymptomEdited}
              />
            )
-    }
-    return fillerBoxes
+          })}
+        </View>
+      </AppPage>
+    )
  }
 }

-function isNumber(val) {
-  return typeof val === 'number'
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    padding: Spacing.base
  }
+})
+
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CycleDayOverView)
@@ -1,34 +1,55 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
-import AppText from '../app-text'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'

-export default class SelectBoxGroup extends Component {
-  render() {
+import AppText from '../common/app-text'
+
+import { Colors, Containers } from '../../styles'
+
+const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
  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)
-          }
+    <View style={styles.container}>
+      {Object.keys(labels).map(key => {
+        const isActive = optionsState[key]
+        const boxStyle = [styles.box, isActive && styles.boxActive]
+        const textStyle = [styles.text, isActive && styles.textActive]
+
        return (
          <TouchableOpacity
-              onPress={() => this.props.onSelect(key)}
            key={key}
+            onPress={() => onSelect(key)}
+            style={boxStyle}
          >
-              <View style={style}>
-                <AppText style={textStyle}>{this.props.labels[key]}</AppText>
-              </View>
+            <AppText style={textStyle}>{labels[key]}</AppText>
          </TouchableOpacity>
        )
      })}
    </View>
  )
 }
+
+SelectBoxGroup.propTypes = {
+  labels: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  optionsState: PropTypes.object.isRequired
 }
+
+const styles = StyleSheet.create({
+  box: {
+    ...Containers.box
+  },
+  boxActive: {
+    ...Containers.boxActive
+  },
+  container: {
+    ...Containers.selectGroupContainer
+  },
+  text: {
+    color: Colors.orange
+  },
+  textActive: {
+    color: 'white'
+  }
+})
+
+export default SelectBoxGroup
@@ -1,41 +1,27 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
-import AppText from '../app-text'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'

-export default class SelectTabGroup extends Component {
-  render() {
+import AppText from '../common/app-text'
+
+import { Colors, Containers } from '../../styles'
+
+export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
  return (
-      <View style={styles.selectTabGroup}>
+    <View style={styles.container}>
      {
-          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
+        buttons.map(({ label, value }, i) => {
+          const isActive = value === activeButton
+          const boxStyle = [styles.box, isActive && styles.boxActive]
+          const textStyle = [styles.text, isActive && styles.textActive]
+
          return (
            <TouchableOpacity
-                onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
+              onPress={() => onSelect(value)}
              key={i}
-                activeOpacity={1}
+              style={boxStyle}
            >
-                <View>
-                  <View style={[
-                    styles.selectTab,
-                    firstOrLastStyle,
-                    activeStyle
-                  ]}>
-                    <AppText style={activeStyle}>{label}</AppText>
-                  </View>
-                </View>
+              <AppText style={textStyle}>{label}</AppText>
            </TouchableOpacity>
          )
        })
@@ -43,4 +29,27 @@ export default class SelectTabGroup extends Component {
    </View>
  )
 }
+
+SelectTabGroup.propTypes = {
+  activeButton: PropTypes.number,
+  buttons: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired
 }
+
+const styles = StyleSheet.create({
+  box: {
+    ...Containers.box
+  },
+  boxActive: {
+    ...Containers.boxActive
+  },
+  container: {
+    ...Containers.selectGroupContainer
+  },
+  text: {
+    color: Colors.orange
+  },
+  textActive: {
+    color: 'white'
+  }
+})
@@ -0,0 +1,168 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View, TouchableOpacity } from 'react-native'
+
+import AppText from '../common/app-text'
+import DripIcon from '../../assets/drip-icons'
+import SymptomEditView from './symptom-edit-view'
+
+import { connect } from 'react-redux'
+import { getDate } from '../../slices/date'
+import { isDateInFuture } from '../helpers/cycle-day'
+
+import { Colors, Sizes, Spacing } from '../../styles'
+import { headerTitles as symptomTitles } from '../../i18n/en/labels'
+
+class SymptomBox extends Component {
+
+  static propTypes = {
+    date: PropTypes.string.isRequired,
+    isSymptomEdited: PropTypes.bool,
+    symptom: PropTypes.string.isRequired,
+    symptomData: PropTypes.object,
+    symptomDataToDisplay: PropTypes.string,
+    updateCycleDayData: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    isSymptomEdited: false,
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isSymptomEdited: props.isSymptomEdited
+    }
+  }
+
+  onFinishEditing = () => {
+    const { date, updateCycleDayData } = this.props
+
+    updateCycleDayData(date)
+    this.setState({ isSymptomEdited: false })
+  }
+
+  onEditSymptom = () => {
+    this.setState({ isSymptomEdited: true })
+  }
+
+  render() {
+    const { date, symptom, symptomData, symptomDataToDisplay } = this.props
+    const { isSymptomEdited } = this.state
+    const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
+    const isExcluded = symptomData !== null ? symptomData.exclude : false
+
+    const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
+    const iconName = `drip-icon-${symptom}`
+    const symptomNameStyle = [
+      styles.symptomName,
+      (isSymptomDisabled && styles.symptomNameDisabled),
+      (isExcluded && styles.symptomNameExcluded)
+    ]
+    const textStyle = [
+      styles.text,
+      (isSymptomDisabled && styles.textDisabled),
+      (isExcluded && styles.textExcluded)
+    ]
+
+    return (
+      <React.Fragment>
+        {isSymptomEdited &&
+          <SymptomEditView
+            symptom={symptom}
+            symptomData={symptomData}
+            onClose={this.onFinishEditing}
+          />
+        }
+
+        <TouchableOpacity
+          disabled={isSymptomDisabled}
+          onPress={this.onEditSymptom}
+          style={styles.container}
+          testID={iconName}
+        >
+          <DripIcon
+            color={iconColor}
+            isActive={!isSymptomDisabled}
+            name={iconName}
+            size={40}
+          />
+          <View style={styles.textContainer}>
+            <AppText style={symptomNameStyle}>
+              {symptomTitles[symptom].toLowerCase()}
+            </AppText>
+            {symptomDataToDisplay &&
+              <AppText style={textStyle} numberOfLines={4}>
+                {symptomDataToDisplay}
+              </AppText>
+            }
+          </View>
+        </TouchableOpacity>
+      </React.Fragment>
+    )
+  }
+}
+
+const hint = {
+  fontSize: Sizes.small,
+  fontStyle: 'italic'
+}
+
+const main = {
+  fontSize: Sizes.base,
+  height: Sizes.base * 2,
+  lineHeight: Sizes.base,
+  marginBottom: (-1) * Sizes.tiny,
+  textAlignVertical: 'center'
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderRadius: 10,
+    elevation: 4,
+    flexDirection: 'row',
+    height: 110,
+    marginBottom: Spacing.base,
+    paddingHorizontal: Spacing.small,
+    paddingVertical: Spacing.base,
+    width: Spacing.symptomTileWidth
+  },
+  symptomName: {
+    color: Colors.purple,
+    ...main
+  },
+  symptomNameDisabled: {
+    color: Colors.grey
+  },
+  symptomNameExcluded: {
+    color: Colors.greyDark,
+  },
+  textContainer: {
+    flexDirection: 'column',
+    marginLeft: Spacing.small,
+    maxWidth: Spacing.textWidth
+  },
+  text: {
+    ...hint
+  },
+  textDisabled: {
+    color: Colors.greyLight
+  },
+  textExcluded: {
+    color: Colors.grey,
+  }
+})
+
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  null,
+)(SymptomBox)
@@ -0,0 +1,287 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
+
+import AppModal from '../common/app-modal'
+import AppSwitch from '../common/app-switch'
+import AppText from '../common/app-text'
+import AppTextInput from '../common/app-text-input'
+import Button from '../common/button'
+import CloseIcon from '../common/close-icon'
+import Segment from '../common/segment'
+import SelectBoxGroup from './select-box-group'
+import SelectTabGroup from './select-tab-group'
+import Temperature from './temperature'
+
+import { connect } from 'react-redux'
+import { getDate } from '../../slices/date'
+import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
+
+import { shared as sharedLabels } from '../../i18n/en/labels'
+import info from '../../i18n/en/symptom-info'
+import { Colors, Containers, Sizes, Spacing } from '../../styles'
+
+class SymptomEditView extends Component {
+
+  static propTypes = {
+    date: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    symptom: PropTypes.string.isRequired,
+    symptomData: PropTypes.object
+  }
+
+  constructor(props) {
+    super(props)
+
+    const { symptomData, symptom } = this.props
+    const data = symptomData ? symptomData : blank[symptom]
+
+    const symptomConfig = symtomPage[symptom]
+    const shouldShowExclude = shouldShow(symptomConfig.excludeText)
+    const shouldShowNote = shouldShow(symptomConfig.note)
+    const shouldBoxGroup = shouldShow(symptomConfig.selectBoxGroups)
+    const shouldTabGroup = shouldShow(symptomConfig.selectTabGroups)
+
+    this.state = {
+      data,
+      shouldShowExclude,
+      shouldShowInfo: false,
+      shouldShowNote,
+      shouldBoxGroup,
+      shouldTabGroup
+    }
+  }
+
+  componentDidUpdate() {
+    this.saveData()
+  }
+
+  getParsedData = () => JSON.parse(JSON.stringify(this.state.data))
+
+  onEditNote = (note) => {
+    const data = this.getParsedData()
+    const { symptom } = this.props
+
+    if (symptom === 'note') {
+      Object.assign(data, { value: note })
+    } else {
+      data['note'] = note
+    }
+
+    this.setState({ data })
+  }
+
+  onExcludeToggle = () => {
+    const data = this.getParsedData()
+    Object.assign(data, { exclude: !data.exclude })
+
+    this.setState({ data })
+  }
+
+  onPressLearnMore = () => {
+    this.setState({ shouldShowInfo: !this.state.shouldShowInfo })
+  }
+
+  onRemove = () => {
+    this.saveData(true)
+    this.props.onClose()
+  }
+
+  onSave = () => {
+    this.saveData()
+    this.props.onClose()
+  }
+
+  onSaveTemperature = (value, field) => {
+    const data = this.getParsedData()
+    const dataToSave = field === 'value'
+      ? { [field]: Number(value) } : { [field]: value }
+    Object.assign(data, { ...dataToSave })
+
+    this.setState({ data })
+  }
+
+  onSelectBox = (key) => {
+    const data = this.getParsedData()
+    if (key === "other") {
+      Object.assign(data, {
+        note: null,
+        [key]: !this.state.data[key]
+      })
+    } else {
+      Object.assign(data, { [key]: !this.state.data[key] })
+    }
+
+    this.setState({ data })
+  }
+
+  onSelectBoxNote= (value) => {
+    const data = this.getParsedData()
+    Object.assign(data, { note: value !== '' ? value : null })
+
+    this.setState({ data })
+  }
+
+  onSelectTab = (group, value) => {
+    const data = this.getParsedData()
+    Object.assign(data, { [group.key]: value })
+
+    this.setState({ data })
+  }
+
+  saveData = (shouldDeleteData) => {
+    const { date, symptom } = this.props
+    const { data } = this.state
+    save[symptom](data, date, shouldDeleteData)
+  }
+
+  render() {
+    const { onClose, symptom } = this.props
+    const { data,
+      shouldShowExclude,
+      shouldShowInfo,
+      shouldShowNote,
+      shouldBoxGroup,
+      shouldTabGroup
+    } = this.state
+    const iconName = shouldShowInfo ? "chevron-down" : "chevron-up"
+    const noteText = symptom === 'note' ? data.value : data.note
+
+    return (
+      <AppModal onClose={onClose}>
+        <ScrollView
+          contentContainerStyle={styles.modalContainer}
+          style={styles.modalWindow}
+        >
+          <View style={styles.headerContainer}>
+            <CloseIcon onClose={onClose} />
+          </View>
+          {symptom === 'temperature' &&
+            <Temperature
+              data={data}
+              save={(value, field) => this.onSaveTemperature(value, field)}
+            />
+          }
+          {shouldTabGroup && symtomPage[symptom].selectTabGroups.map(group => {
+            return (
+              <Segment key={group.key} style={styles.segmentBorder}>
+                <AppText style={styles.title}>{group.title}</AppText>
+                <SelectTabGroup
+                  activeButton={data[group.key]}
+                  buttons={group.options}
+                  onSelect={value => this.onSelectTab(group, value)}
+                />
+              </Segment>
+            )
+          })
+          }
+          {shouldBoxGroup && symtomPage[symptom].selectBoxGroups.map(group => {
+            const isOtherSelected =
+              data['other'] !== null
+              && data['other'] !== false
+              && Object.keys(group.options).includes('other')
+
+            return (
+              <Segment key={group.key} style={styles.segmentBorder} >
+                <AppText style={styles.title}>{group.title}</AppText>
+                <SelectBoxGroup
+                  labels={group.options}
+                  onSelect={value => this.onSelectBox(value)}
+                  optionsState={data}
+                />
+                {isOtherSelected &&
+                  <AppTextInput
+                    multiline={true}
+                    placeholder={sharedLabels.enter}
+                    value={data.note}
+                    onChangeText={value => this.onSelectBoxNote(value)}
+                  />
+                }
+              </Segment>
+            )
+          })
+          }
+          {shouldShowExclude &&
+            <Segment style={styles.segmentBorder} >
+              <AppSwitch
+                onToggle={this.onExcludeToggle}
+                text={symtomPage[symptom].excludeText}
+                value={data.exclude}
+              />
+            </Segment>
+          }
+          {shouldShowNote &&
+            <Segment style={styles.segmentBorder} >
+              <AppText>{symtomPage[symptom].note}</AppText>
+              <AppTextInput
+                multiline={true}
+                numberOfLines={3}
+                onChangeText={this.onEditNote}
+                placeholder={sharedLabels.enter}
+                testID='noteInput'
+                value={noteText !== null ? noteText : ''}
+              />
+            </Segment>
+          }
+          <View style={styles.buttonsContainer}>
+            <Button iconName={iconName} isSmall onPress={this.onPressLearnMore}>
+              {sharedLabels.learnMore}
+            </Button>
+            <Button isSmall onPress={this.onRemove}>
+              {sharedLabels.remove}
+            </Button>
+            <Button isCTA isSmall onPress={this.onSave}>
+              {sharedLabels.save}
+            </Button>
+          </View>
+          {shouldShowInfo &&
+            <Segment last style={styles.segmentBorder} >
+              <AppText>{info[symptom].text}</AppText>
+            </Segment>
+          }
+        </ScrollView>
+      </AppModal>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  buttonsContainer: {
+    ...Containers.rowContainer
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingVertical: Spacing.tiny,
+  },
+  modalContainer: {
+    flex: 1,
+    padding: Spacing.base,
+  },
+  modalWindow: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 10,
+    marginVertical: Sizes.huge * 2,
+    position: 'absolute',
+    minHeight: '40%',
+    maxHeight: Dimensions.get('window').height * 0.7
+  },
+  segmentBorder: {
+    borderBottomColor: Colors.greyLight
+  },
+  title: {
+    fontSize: Sizes.subtitle
+  }
+})
+
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  null,
+)(SymptomEditView)
@@ -0,0 +1,79 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+import AppIcon from '../common/app-icon'
+import AppText from '../common/app-text'
+
+import { connect } from 'react-redux'
+import { getDate, setDate } from '../../slices/date'
+
+import { nextDate, prevDate } from '../helpers/cycle-day'
+import { Colors, Containers, Spacing, Typography } from '../../styles'
+import { HIT_SLOP } from '../../config'
+
+const SymptomPageTitle = ({
+  date,
+  reloadSymptomData,
+  setDate,
+  subtitle,
+  title,
+}) => {
+  const navigate = (isForward) => {
+    const nextDay = isForward ? nextDate(date) : prevDate(date)
+    reloadSymptomData(nextDay)
+    setDate(nextDay)
+  }
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-left' color={Colors.orange}/>
+      </TouchableOpacity>
+      <View style={styles.textContainer}>
+        <AppText style={styles.title}>{title}</AppText>
+        {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
+      </View>
+      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-right' color={Colors.orange}/>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+SymptomPageTitle.propTypes = {
+  date: PropTypes.string.isRequired,
+  reloadSymptomData: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: Spacing.base * 4,
+    marginHorizontal: Spacing.base,
+    marginTop: Spacing.base,
+    ...Containers.rowContainer,
+  },
+  textContainer: {
+    alignItems: 'center',
+  },
+  title: {
+    ...Typography.titleWithoutMargin,
+  },
+})
+
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setDate: (date) => dispatch(setDate(date)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)
@@ -1,70 +0,0 @@
-import React from 'react'
-import {
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { bleeding } from '../../../i18n/en/cycle-day'
-import SelectTabGroup from '../select-tab-group'
-import SymptomSection from './symptom-section'
-import SymptomView from './symptom-view'
-
-export default class Bleeding extends SymptomView {
-  constructor(props) {
-    super(props)
-    const cycleDay = props.cycleDay
-    this.bleeding = cycleDay && cycleDay.bleeding
-    this.state = {
-      currentValue: this.bleeding && this.bleeding.value,
-      exclude: this.bleeding ? this.bleeding.exclude : false
-    }
-  }
-
-  symptomName = 'bleeding'
-
-  autoSave = () => {
-    if (typeof this.state.currentValue != 'number') {
-      this.deleteSymptomEntry()
-      return
-    }
-    this.saveSymptomEntry({
-      value: this.state.currentValue,
-      exclude: this.state.exclude
-    })
-  }
-
-  renderContent() {
-    const bleedingRadioProps = [
-      { label: bleeding.labels[0], value: 0 },
-      { label: bleeding.labels[1], value: 1 },
-      { label: bleeding.labels[2], value: 2 },
-      { label: bleeding.labels[3], value: 3 },
-    ]
-    return (
-      <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>
-    )
-  }
-}
@@ -1,101 +0,0 @@
-import React from 'react'
-import {
-  Switch,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { cervix as labels } from '../../../i18n/en/cycle-day'
-import SelectTabGroup from '../select-tab-group'
-import SymptomSection from './symptom-section'
-import SymptomView from './symptom-view'
-
-export default class Cervix extends SymptomView {
-  constructor(props) {
-    super(props)
-    const cycleDay = props.cycleDay
-    this.cervix = cycleDay && cycleDay.cervix
-    this.state = this.cervix ? this.cervix : {}
-  }
-
-  symptomName = 'cervix'
-
-  autoSave = () => {
-    const nothingEntered = ['opening', 'firmness', 'position'].every(val => typeof this.state[val] != 'number')
-    if (nothingEntered) {
-      this.deleteSymptomEntry()
-      return
-    }
-
-    this.saveSymptomEntry({
-      opening: this.state.opening,
-      firmness: this.state.firmness,
-      position: this.state.position,
-      exclude: Boolean(this.state.exclude)
-    })
-  }
-
-  renderContent() {
-    const cervixOpeningRadioProps = [
-      { label: labels.opening.categories[0], value: 0 },
-      { label: labels.opening.categories[1], value: 1 },
-      { label: labels.opening.categories[2], value: 2 }
-    ]
-    const cervixFirmnessRadioProps = [
-      { label: labels.firmness.categories[0], value: 0 },
-      { label: labels.firmness.categories[1], value: 1 }
-    ]
-    const cervixPositionRadioProps = [
-      { label: labels.position.categories[0], value: 0 },
-      { label: labels.position.categories[1], value: 1 },
-      { label: labels.position.categories[2], value: 2 }
-    ]
-    // TODO saving this info for notice when leaving incomplete data
-    // const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
-    return (
-      <ScrollView style={styles.page}>
-        <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>
-    )
-  }
-}
@@ -1,51 +0,0 @@
-import React from 'react'
-import {
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
-import { intensity, desire } from '../../../i18n/en/cycle-day'
-import SelectTabGroup from '../select-tab-group'
-import SymptomSection from './symptom-section'
-import SymptomView from './symptom-view'
-
-export default class Desire extends SymptomView {
-  constructor(props) {
-    super(props)
-    const cycleDay = props.cycleDay
-    this.desire = cycleDay && cycleDay.desire
-    const desireValue = this.desire && this.desire.value
-    this.state = { currentValue: desireValue }
-  }
-
-  symptomName = 'desire'
-
-  autoSave = () => {
-    if (typeof this.state.currentValue != 'number') {
-      this.deleteSymptomEntry()
-      return
-    }
-    this.saveSymptomEntry({ value: this.state.currentValue })
-  }
-
-  renderContent() {
-    const desireRadioProps = [
-      { label: intensity[0], value: 0 },
-      { label: intensity[1], value: 1 },
-      { label: intensity[2], value: 2 }
-    ]
-    return (
-      <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>
-    )
-  }
-}
--- a/Show More
+++ b/Show More