Setting for ITSAppUsesNonExemptEncryption

Replaces closing/restart functionality with a more friendly app state reset

See merge request bloodyhealth/drip!461

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"],
+}

.bundle/config

@@ -1,2 +0,0 @@
-BUNDLE_PATH: "vendor/bundle"
-BUNDLE_FORCE_RUBY_PLATFORM: 1

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   extends: ['eslint:recommended', 'plugin:react/recommended'],
   env: {
     node: true,
-    jest: true,
+    mocha: true,
     es6: true,
   },
   parser: '@babel/eslint-parser',

.gitignore

@@ -23,6 +23,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+xcshareddata
 ios/Index/DataStore
 
 # Android/IntelliJ
@@ -32,12 +33,12 @@ build/
 .gradle
 local.properties
 *.iml
-*.hprof
 
 # node.js
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 buck-out/
@@ -73,6 +74,7 @@ ios/Podfile.lock
 android/app/src/main/res/drawable-*
 android/app/src/main/assets/*
 
-# yarn
+# nodejs-mobile creates these with every npm install
-.yarn/*
+nodejs-assets/nodejs-project/sample-*
-yarn-error.log
+nodejs-assets/build-native-modules-MacOS-helper-script-node.sh
+nodejs-assets/build-native-modules-MacOS-helper-script-npm.sh

.gitlab-ci.yml

@@ -10,29 +10,3 @@ test_async:
   script:
     - npm install
     - npm test
-
-variables:
-  DEPENDABOT_IMAGE: docker.io/andrcuns/dependabot-gitlab:0.23.0
-
-.dependabot-gitlab:
-  image:
-    name: $DEPENDABOT_IMAGE
-    entrypoint: ['']
-  variables:
-    GIT_STRATEGY: none
-    RAILS_ENV: production
-    SECRET_KEY_BASE: key
-    PACKAGE_MANAGER: npm
-    SETTINGS__GITLAB_URL: $CI_SERVER_URL
-    SETTINGS__STANDALONE: 'true'
-    SETTINGS__LOG_COLOR: 'true'
-  script:
-    - cd /home/dependabot/app
-    - bundle exec rake "dependabot:update[$PROJECT_PATH,$PACKAGE_MANAGER,$DIRECTORY]"
-
-dependabot:
-  extends: .dependabot-gitlab
-  rules:
-    - if: $DEPENDENCY_UPDATES_DISABLED
-      when: never
-    - if: '$CI_PIPELINE_SOURCE == "schedule" && $PACKAGE_MANAGER_SET =~ /(\bnpm|yarn\b)/'

.gitlab/dependabot.yml

@@ -1,16 +1,16 @@
-# Configuration taken from this article:
-# https://paperless.blog/dependabot-on-gitlab
 version: 2
 updates:
-  - package-ecosystem: npm
+  - package-ecosystem: "npm"
-    directory: /
+    directory: "/"
     schedule:
-      interval: daily
+      interval: "monthly"
     open-pull-requests-limit: 3
-    ignore:
+    reviewers:
-      - dependency-name: '*'
+      - "bl00dymarie"
-        update-types: ['version-update:semver-patch']
+      - "mariyaz"
-      - dependency-name: 'realm'
+      - "sdvig"
-      - dependency-name: 'react'
+      - "LisaHill"
-      - dependency-name: 'react-native'
+    allow:
-      - dependency-name: 'react-native-push-notifications'
+      - dependency-type: direct
+      - dependency-type: production
+    rebase-strategy: "auto"

.gitlab/merge_request_templates/Default.md

@@ -1,32 +0,0 @@
-## Why this change?
-
-Closes ticket #
-
-## Description
-
-I have tested this MR:
-
-- [ ] tested this PR on iOS simulator/physical device,
-- [ ] tested this PR on Android simulator/physical device,
-- [ ] ran e2e tests.
-
-A few sentences describing the overall goals of the pull request's commits.
-
-## Steps to Test or Reproduce
-
-Outline the steps to test or reproduce the MR here.
-
-## Reviewing
-
-Here's what I am looking for feedback on in particular:
-
-- additional testing on specific type of the devices,
-- feedback on specific part of the code,
-- etc.
-
-## In addition:
-
-- Screenshots
-- Links to the additional info
-- Migrations
-- Follow-up tickets

.ruby-version

@@ -1 +0,0 @@
-2.7.4

Gemfile

@@ -1,4 +0,0 @@
-source 'https://rubygems.org'
-# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '2.7.4'
-gem 'cocoapods', '~> 1.11', '>= 1.11.2'

Gemfile.lock

@@ -1,96 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    CFPropertyList (3.0.5)
-      rexml
-    activesupport (6.1.5)
-      concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (>= 1.6, < 2)
-      minitest (>= 5.1)
-      tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    algoliasearch (1.27.5)
-      httpclient (~> 2.8, >= 2.8.3)
-      json (>= 1.5.1)
-    atomos (0.1.3)
-    claide (1.1.0)
-    cocoapods (1.11.3)
-      addressable (~> 2.8)
-      claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.11.3)
-      cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.4.0, < 2.0)
-      cocoapods-plugins (>= 1.0.0, < 2.0)
-      cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.4.0, < 2.0)
-      cocoapods-try (>= 1.1.0, < 2.0)
-      colored2 (~> 3.1)
-      escape (~> 0.0.4)
-      fourflusher (>= 2.3.0, < 3.0)
-      gh_inspector (~> 1.0)
-      molinillo (~> 0.8.0)
-      nap (~> 1.0)
-      ruby-macho (>= 1.0, < 3.0)
-      xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.11.3)
-      activesupport (>= 5.0, < 7)
-      addressable (~> 2.8)
-      algoliasearch (~> 1.0)
-      concurrent-ruby (~> 1.1)
-      fuzzy_match (~> 2.0.4)
-      nap (~> 1.0)
-      netrc (~> 0.11)
-      public_suffix (~> 4.0)
-      typhoeus (~> 1.0)
-    cocoapods-deintegrate (1.0.5)
-    cocoapods-downloader (1.5.1)
-    cocoapods-plugins (1.0.0)
-      nap
-    cocoapods-search (1.0.1)
-    cocoapods-trunk (1.6.0)
-      nap (>= 0.8, < 2.0)
-      netrc (~> 0.11)
-    cocoapods-try (1.2.0)
-    colored2 (3.1.2)
-    concurrent-ruby (1.1.9)
-    escape (0.0.4)
-    ethon (0.15.0)
-      ffi (>= 1.15.0)
-    ffi (1.15.5)
-    fourflusher (2.3.1)
-    fuzzy_match (2.0.4)
-    gh_inspector (1.1.3)
-    httpclient (2.8.3)
-    i18n (1.10.0)
-      concurrent-ruby (~> 1.0)
-    json (2.6.1)
-    minitest (5.15.0)
-    molinillo (0.8.0)
-    nanaimo (0.3.0)
-    nap (1.1.0)
-    netrc (0.11.0)
-    public_suffix (4.0.6)
-    rexml (3.2.5)
-    ruby-macho (2.5.1)
-    typhoeus (1.4.0)
-      ethon (>= 0.9.0)
-    tzinfo (2.0.4)
-      concurrent-ruby (~> 1.0)
-    xcodeproj (1.21.0)
-      CFPropertyList (>= 2.3.3, < 4.0)
-      atomos (~> 0.1.3)
-      claide (>= 1.0.2, < 2.0)
-      colored2 (~> 3.1)
-      nanaimo (~> 0.3.0)
-      rexml (~> 3.2.4)
-    zeitwerk (2.5.4)
-PLATFORMS
-  ruby
-DEPENDENCIES
-  cocoapods (~> 1.11, >= 1.11.2)
-RUBY VERSION
-   ruby 2.7.4p191
-BUNDLED WITH
-   2.2.27

README.md

@@ -21,81 +21,81 @@ The app is built in React Native and currently developed for Android.
 
 ## Development setup
 
-### 1. Get this repository
+#### 1. Android Studio
-
-Clone it with SSH
-
-    git clone git@gitlab.com:bloodyhealth/drip.git
-
-or clone it with HTTPS
-
-    git clone https://gitlab.com/bloodyhealth/drip.git
-
-### 2. Node & yarn version
-
-Make sure you are running Node 14 and classic yarn (v.1). It's easiest to switch Node versions using `nvm`, here's how to install NVM: https://github.com/nvm-sh/nvm#installing-and-updating. Once you have nvm you can install node 14:
-
-    nvm install v14.19.3
-
-and then run
-
-    cd drip
-    yarn install
-
-## for Android
-
-### 3.1 Android Studio
 
 Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
 
-### 3.2 More requirements from Android Studio
+#### 2. Node & npm version
 
-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.
+Make sure you are running Node 14 and npm 6.14.17. It's easiest to switch Node versions using `nvm`, here's how to do it:
 
-### 3.3 Run the app on Android
+    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
+    $ nvm install v14.19.3
+
+#### 3. Get this repository
+
+Clone it with SSH
+
+    $ git clone git@gitlab.com:bloodyhealth/drip.git
+
+or clone it with HTTPS
+
+    $ git clone https://gitlab.com/bloodyhealth/drip.git
+
+and run
+
+    $ cd drip
+    $ npm install
+
+#### 4. More requirements from Android Studio
+
+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 on Android
 
 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.
 
-i. Open a terminal and run
+1. Open a terminal and run
 
-    yarn android
+   ```
+   $ npm run android
+   ```
 
-ii. To see logging output, run the following command in another tab:
+2. To see logging output, run the following command in another tab:
 
-    yarn log
+   ```
+   $ npm run log
+   ```
 
-iii. Run the following command and select enable hot reloading (see https://facebook.github.io/react-native/docs/debugging.html):
+3. Run the following command and select enable hot reloading (see https://facebook.github.io/react-native/docs/debugging.html):
 
-    adb shell input keyevent 82
+   ```
+   $ adb shell input keyevent 82
+   ```
 
-iv. We recommend installing an [ESLint plugin in your editor](https://eslint.org/docs/user-guide/integrations#editors). There's an `.eslintrc` file in this project which will be used by the plugin to check your code for style errors and potential bugs.
+4. We recommend installing an [ESLint plugin in your editor](https://eslint.org/docs/user-guide/integrations#editors). There's an `.eslintrc` file in this project which will be used by the plugin to check your code for style errors and potential bugs.
 
-## for iOS
+#### 6. Run app on iOS
-
-### 4.1 Install Cocoapods
-
-"CocoaPods manages library dependencies for your Xcode projects"
-
-    brew install cocoapods
-
-### 4.2 Run app on iOS
 
 Minimum system requirements to run iOS app are as follows:
 
 - MacOS 10.15.7 for Mac users
-- Xcode 13 (command line tools only might be enough)
+- Xcode 12.3 (I assume, that only command line tools might be enough)
 
-i. Install XCode dependencies by running the following command from the root project directory:
+1. Install XCode dependencies by running the following command from the root project directory:
 
-    cd ios && pod install && cd ..
+```
+$ cd ios && pod install && cd ..
+```
 
-ii. To run app either open drip workspace ('drip.xcworkspace' file) with XCode and run "Build" or run the following command:
+2. To run app either open drip workspace ('drip.xcworkspace' file) with XCode and run "Build" or run the following command:
 
-    yarn ios
+```
+$ npm run ios
+```
 
-iii. If you are building the app with XCode make sure you are running this as well:
+3. If you are building the app with XCode make sure you are running this as well:
-
+   `$ npm start`
-    yarn start
 
 ### Troubleshooting
 
@@ -110,24 +110,31 @@ Now, `which java` should output `/Applications/Android Studio.app/Contents/jre/j
 
 #### [MacOS] Ninja
 
-If `yarn` says `CMake was unable to find a build program corresponding to "Ninja".`:
+If `npm` says `CMake was unable to find a build program corresponding to "Ninja".`:
-
+`$ brew install ninja`
-    brew install ninja
 
 ### [MacOS] adb not on the path
 
 If you get error messages about `adb` not being found on your path:
+`$ ln -s ~/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb`
 
-    ln -s ~/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb
+### [MacOS] and XCode 12.5
+
+If you run XCode 12.5, more likely you'll have problems building app for iOS. Please use the following fix: https://stackoverflow.com/a/67320887.
+
+If you experience any further issues, please feel free to check out the following threads:
+
+- [react-native run-ios build failure on XCode 12.5 beta](https://github.com/react-native-community/cli/issues/1365)
+- [Xcode 12.5 troubleshooting guide (RN 0.61/0.62/0.63/0.64)](https://github.com/facebook/react-native/issues/31480)
 
 ### Clearing project cache
 
 If you would like to clear project cache and/or re-install project libraries, you can run clear script as follows:
 
-    yarn clear
+    $ npm run clear
 
 Script accepts the following options:
-"all" - script will delete all caches and re-install project libraries,
+"none" - script will delete all caches and re-install project libraries,
 "ios" - script will delete ios-related cache
 "android" - script will delete android-related cache
 "cache" - script will purge Watchman, Metrobundler, Pachager and React caches
@@ -135,15 +142,14 @@ Script accepts the following options:
 
 For example, if you would like to clear android part of the project and re-install project libraries, you can run the following command:
 
-    yarn clear android npm
+    $ npm run clear android npm
 
 ## Tests
 
 ### Unit tests
 
 You can run the tests with:
-
+`$ npm test`
-    yarn test
 
 ### End to end tests
 
@@ -164,29 +170,18 @@ You can run the tests with:
 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) `yarn android`
+   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: !
 
-### Manual testing
-
-To ensure that core app functionality is working, we developed a [test protocol](https://gitlab.com/bloodyhealth/drip/-/snippets/2283405).
-
 ## Debugging
 
-In order to see logging output from the app, run `yarn log` in a separate terminal. You can output specific code you want to see, with:
+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)`
 or just a random string to check if this piece of code is actually running:
 `console.log("HELLO")`.
 
-## Known issues
-
-### Android emulator
-
-- Import/export to the local drive don't work.
-- Email button on the Hamburger menu > About doesn't work - throws a yellow error message "Possible unhandled promise rejection...".
-
 ## 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).
@@ -197,9 +192,9 @@ More information about how the app calculates fertility status and bleeding pred
 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:
-
+    ```
-        react-native link
+    $ react-native link
-
+    ```
 5.  You should be able to use the icon now within drip, e.g. in Cycle Day Overview and on the chart.
 
 ## Translation

android/app/build.gradle

@@ -15,12 +15,10 @@ import com.android.build.OutputFile
  *   // the name of the generated asset file containing your JS bundle
  *   bundleAssetName: "index.android.bundle",
  *
- *   // the entry file for bundle generation. If none specified and
+ *   // the entry file for bundle generation
- *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
- *   // default. Can be overridden with ENTRY_FILE environment variable.
  *   entryFile: "index.android.js",
  *
- *   // https://reactnative.dev/docs/performance#enable-the-ram-format
+*   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
  *   bundleCommand: "ram-bundle",
  *
  *   // whether to bundle JS and assets in debug mode
@@ -78,6 +76,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
+    entryFile: "index.js",
     enableHermes: false,  // clean and rebuild if changing
 ]
 
@@ -114,22 +113,21 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 /**
  * Whether to enable the Hermes VM.
  *
- * This should be set on project.ext.react and that value will be read here. If it is not set
+ * This should be set on project.ext.react and mirrored here.  If it is not set
  * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
  * and the benefits of using Hermes will therefore be sharply reduced.
  */
 def enableHermes = project.ext.react.get("enableHermes", false);
 
-/**
- * Architectures to build native code for in debug.
- */
-def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
-
 android {
-    ndkVersion rootProject.ext.ndkVersion
     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
@@ -137,7 +135,7 @@ android {
         versionCode 8
         versionName "1.2102.28"
         ndk {
-            abiFilters "armeabi-v7a", "x86", "arm64-v8a"
+            abiFilters "armeabi-v7a", "x86"
         }
         testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
@@ -169,40 +167,26 @@ android {
     buildTypes {
         debug {
             signingConfig signingConfigs.debug
-            if (nativeArchitectures) {
-                ndk {
-                    abiFilters nativeArchitectures.split(',')
-                }
-            }            
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
+            // see https://facebook.github.io/react-native/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
             signingConfig signingConfigs.release
         }
     }
-
-    packagingOptions {
-        pickFirst "lib/armeabi-v7a/libc++_shared.so"
-        pickFirst "lib/arm64-v8a/libc++_shared.so"
-        pickFirst "lib/x86/libc++_shared.so"
-        pickFirst "lib/x86_64/libc++_shared.so"
-    }
-
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ["armeabi-v7a": 1, "x86": 2]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
             }
         }
     }
@@ -210,23 +194,10 @@ android {
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
-    //noinspection GradleDynamicVersion
     implementation 'androidx.appcompat:appcompat:1.0.0'
     implementation 'androidx.annotation:annotation:1.1.0'
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
-    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
-      exclude group:'com.facebook.fbjni'
-    }
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.facebook.flipper'
-        exclude group:'com.squareup.okhttp3', module:'okhttp'
-    }
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.facebook.flipper'
-    }
-
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")
@@ -242,7 +213,7 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.implementation
+    from configurations.compile
     into 'libs'
 }
 

android/app/src/debug/AndroidManifest.xml

@@ -4,10 +4,5 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
-        android:usesCleartextTraffic="true"
-        tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>    
 </manifest>

android/app/src/debug/java/com/drip/ReactNativeFlipper.java

@@ -1,67 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
- * directory of this source tree.
- */
-package com.rndiffapp;
-import android.content.Context;
-import com.facebook.flipper.android.AndroidFlipperClient;
-import com.facebook.flipper.android.utils.FlipperUtils;
-import com.facebook.flipper.core.FlipperClient;
-import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
-import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
-import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
-import com.facebook.flipper.plugins.inspector.DescriptorMapping;
-import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
-import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
-import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
-import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
-import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.network.NetworkingModule;
-import okhttp3.OkHttpClient;
-public class ReactNativeFlipper {
-  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    if (FlipperUtils.shouldEnableFlipper(context)) {
-      final FlipperClient client = AndroidFlipperClient.getInstance(context);
-      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
-      client.addPlugin(new ReactFlipperPlugin());
-      client.addPlugin(new DatabasesFlipperPlugin(context));
-      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
-      client.addPlugin(CrashReporterPlugin.getInstance());
-      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
-      NetworkingModule.setCustomClientBuilder(
-          new NetworkingModule.CustomClientBuilder() {
-            @Override
-            public void apply(OkHttpClient.Builder builder) {
-              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
-            }
-          });
-      client.addPlugin(networkFlipperPlugin);
-      client.start();
-      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
-      // Hence we run if after all native modules have been initialized
-      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-      if (reactContext == null) {
-        reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
-              @Override
-              public void onReactContextInitialized(ReactContext reactContext) {
-                reactInstanceManager.removeReactInstanceEventListener(this);
-                reactContext.runOnNativeModulesQueueThread(
-                    new Runnable() {
-                      @Override
-                      public void run() {
-                        client.addPlugin(new FrescoFlipperPlugin());
-                      }
-                    });
-              }
-            });
-      } else {
-        client.addPlugin(new FrescoFlipperPlugin());
-      }
-    }
-  }
-}

android/app/src/main/AndroidManifest.xml

@@ -31,15 +31,15 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustResize"
-        android:windowSoftInputMode="adjustPan"
         android:screenOrientation="sensorPortrait">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
       <provider
             android:name="androidx.core.content.FileProvider"
             android:authorities="com.drip.provider"
@@ -75,4 +75,5 @@
             </intent-filter>
         </service>
     </application>
+
 </manifest>

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

@@ -4,7 +4,6 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactInstanceManager;
 import cl.json.ShareApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -45,27 +44,22 @@ public class MainApplication extends Application implements ReactApplication, Sh
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
-    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
   }
   /**
-   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * Loads Flipper in React Native templates.
-   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    *
    * @param context
-   * @param reactInstanceManager   
    */
-  private static void initializeFlipper(
+  private static void initializeFlipper(Context context) {
-      Context context, ReactInstanceManager reactInstanceManager) {
     if (BuildConfig.DEBUG) {
       try {
         /*
          We use reflection here to pick up the class that initializes Flipper,
         since Flipper library is not available in release mode
         */
-        Class<?> aClass = Class.forName("com.rndiffapp.ReactNativeFlipper");
+        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
-        aClass
+        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
-            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
-            .invoke(null, context, reactInstanceManager);
       } catch (ClassNotFoundException e) {
         e.printStackTrace();
       } catch (NoSuchMethodException e) {

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2014 The Android Open Source Project
-     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.
--->
-<inset xmlns:android="http://schemas.android.com/apk/res/android"
-       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
-    <selector>
-        <!-- 
-          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
-          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
-          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
-          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-        -->
-        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
-    </selector>
-</inset>

android/app/src/main/res/values/styles.xml

@@ -1,9 +1,9 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:textColor">#000000</item>
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>

android/build.gradle

@@ -2,12 +2,12 @@
 
 buildscript {
     repositories {
+        jcenter()
         google()
-        mavenCentral()
     }
-    ext.kotlinVersion = "1.4.20"
+    ext.kotlinVersion = '1.3.10'
     dependencies {
-        classpath("com.android.tools.build:gradle:4.2.2")
+        classpath("com.android.tools.build:gradle:3.4.2")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -17,6 +17,7 @@ buildscript {
 
 allprojects {
     repositories {
+        mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url("$rootDir/../node_modules/react-native/android")
@@ -25,15 +26,9 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
-        mavenCentral {
-            // We don't want to fetch react-native from Maven Central as there are
-            // older versions over there.
-            content {
-                excludeGroup "com.facebook.react"
-            }
-        }
         google()
-        maven { url 'https://www.jitpack.io' }
+        jcenter()
+        maven { url 'https://jitpack.io' }
         maven {
             url 'https://maven.google.com/'
             name 'Google'
@@ -49,9 +44,19 @@ ext {
     googlePlayServicesVersion = "+" // default: "+"
     firebaseMessagingVersion = "21.1.0" // default: "+"
 
-    buildToolsVersion = "30.0.2"
+    buildToolsVersion = "29.0.3"
     minSdkVersion = 23
-    compileSdkVersion = 30
+    compileSdkVersion = 29
-    targetSdkVersion = 30
+    targetSdkVersion = 29
-    ndkVersion = "21.4.7075529"
+}
+
+subprojects {
+    afterEvaluate {project ->
+        if (project.hasProperty("android")) {
+            android {
+                compileSdkVersion 29
+                buildToolsVersion '29.0.3'
+            }
+        }
+    }
 }

android/gradle.properties

@@ -9,23 +9,12 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx1024m -XX:MaxPermSize=256m
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
 # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
 # When configured, Gradle will run in incubating parallel mode.
 # 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
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
-
+android.useAndroidX=true
-# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.99.0
-
-# https://github.com/facebook/react-native/issues/30729
-org.gradle.jvmargs=-Xmx4g

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

@@ -7,7 +7,7 @@
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
-#      https://www.apache.org/licenses/LICENSE-2.0
+#      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,
@@ -83,7 +83,6 @@ cd "$SAVED" >&-
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
-
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -127,13 +126,11 @@ if $darwin; then
     GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
 fi
 
-# For Cygwin or MSYS, switch paths to Windows format before running java
+# For Cygwin, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+if $cygwin ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
 
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
     # We build the pattern for arguments to be converted via cygpath
     ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
     SEP=""
@@ -157,30 +154,27 @@ if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
         else
             eval `echo args$i`="\"$arg\""
         fi
-        i=`expr $i + 1`
+        i=$((i+1))
     done
     case $i in
-        0) set -- ;;
+        (0) set -- ;;
-        1) set -- "$args0" ;;
+        (1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
+        (2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;        
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
     esac
 fi
 
-# Escape application args
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
-save () {
+function splitJvmOpts() {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    JVM_OPTS=("$@")
-    echo " "
 }
-APP_ARGS=`save "$@"`
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
 
-# Collect all arguments for the java command, following the shell quoting and substitution rules
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-
-exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -32,15 +32,12 @@ if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
 @rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if "%ERRORLEVEL%" == "0" goto init
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -54,7 +51,7 @@ goto fail
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
-if exist "%JAVA_EXE%" goto execute
+if exist "%JAVA_EXE%" goto init
 
 echo.
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -64,14 +61,34 @@ echo location of your Java installation.
 
 goto fail
 
+:init
+@rem Get command-line arguments, handling Windowz variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+if "%@eval[2+2]" == "4" goto 4NT_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+goto execute
+
+:4NT_args
+@rem Get arguments from the 4NT Shell from JP Software
+set CMD_LINE_ARGS=%$
+
 :execute
 @rem Setup the command line
 
 set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
-
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
 
 :end
 @rem End local scope for the variables with windows NT shell

android/settings.gradle

@@ -1,5 +1,4 @@
 rootProject.name = 'drip'
-
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 
 include ':app'

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-}

components/AcceptLicense.js

@@ -1,43 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { BackHandler, StyleSheet, View } from 'react-native'
-import { useTranslation } from 'react-i18next'
-
-import License from './settings/License'
-import Button from './common/button'
-
-import { saveLicenseFlag } from '../local-storage'
-
-import { Containers } from '../styles'
-
-export default function AcceptLicense({ setLicense }) {
-  const onAcceptLicense = async () => {
-    await saveLicenseFlag()
-    setLicense()
-  }
-
-  const { t } = useTranslation()
-
-  return (
-    <License>
-      <View style={styles.container}>
-        <Button onPress={BackHandler.exitApp} testID="licenseCancelButton">
-          {t('labels.shared.cancel')}
-        </Button>
-        <Button isCTA onPress={onAcceptLicense} testID="licenseOkButton">
-          {t('labels.shared.ok')}
-        </Button>
-      </View>
-    </License>
-  )
-}
-
-AcceptLicense.propTypes = {
-  setLicense: PropTypes.func.isRequired,
-}
-
-const styles = StyleSheet.create({
-  container: {
-    ...Containers.rowContainer,
-  },
-})

components/Home.js

@@ -1,29 +1,31 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 
+import { connect } from 'react-redux'
+import { navigate } from '../slices/navigation'
+import { getDate, setDate } from '../slices/date'
+
 import AppText from './common/app-text'
-import Asterisk from './common/Asterisk'
 import Button from './common/button'
-import Footnote from './common/Footnote'
 
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
-import setupNotifications from '../lib/notifications'
+import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home'
-import {
-  determinePredictionText,
-  formatWithOrdinalSuffix,
-} from './helpers/home'
 
 import { Colors, Fonts, Sizes, Spacing } from '../styles'
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 import { useTranslation } from 'react-i18next'
 
-const Home = ({ navigation }) => {
+const Home = ({ navigate, setDate }) => {
+
   const { t } = useTranslation()
 
-  useEffect(() => setupNotifications(navigation), [])
+  function navigateToCycleDayView() {
+    setDate(todayDateString)
+    navigate('CycleDay')
+  }
 
   const todayDateString = LocalDate.now().toString()
   const { getCycleDayNumber, getPredictedMenses } = cycleModule()
@@ -31,30 +33,23 @@ const Home = ({ navigation }) => {
   const { status, phase, statusText } =
     getFertilityStatusForDay(todayDateString)
   const prediction = determinePredictionText(getPredictedMenses(), t)
-  const cycleDayText = cycleDayNumber
-    ? formatWithOrdinalSuffix(cycleDayNumber)
-    : ''
 
-  function navigateToCycleDayView() {
+  const cycleDayText = cycleDayNumber ? formatWithOrdinalSuffix(cycleDayNumber) : ''
-    navigation.navigate('CycleDayOverview', { date: todayDateString })
-  }
 
   return (
     <ScrollView
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
     >
-      <AppText style={styles.title}>{moment().format('MMM Do YYYY')}</AppText>
+      <AppText style={styles.title}>{moment().format("MMM Do YYYY")}</AppText>
 
-      {cycleDayNumber && (
+      {cycleDayNumber &&
         <View style={styles.line}>
           <AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
-          <AppText style={styles.turquoiseText}>
+          <AppText style={styles.turquoiseText}>{t('labels.home.cycleDay')}</AppText>
-            {t('labels.home.cycleDay')}
-          </AppText>
         </View>
-      )}
+      }
-      {phase && (
+      {phase &&
         <View style={styles.line}>
           <AppText style={styles.whiteSubtitle}>
             {formatWithOrdinalSuffix(phase)}
@@ -65,19 +60,33 @@ const Home = ({ navigation }) => {
           <AppText style={styles.turquoiseText}>{status}</AppText>
           <Asterisk />
         </View>
-      )}
+      }
       <View style={styles.line}>
         <AppText style={styles.turquoiseText}>{prediction}</AppText>
       </View>
       <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
         {t('labels.home.addDataForToday')}
       </Button>
-      {phase && <Footnote colorLabel="greyLight">{statusText}</Footnote>}
+      {phase && (
+        <View style={styles.asteriskLine}>
+          <Asterisk />
+          <AppText linkStyle={styles.whiteText} style={styles.greyText}>
+            {statusText}
+          </AppText>
+        </View>
+      )}
     </ScrollView>
   )
 }
 
+const Asterisk = () => {
+  return <AppText style={styles.asterisk}>*</AppText>
+}
+
 const styles = StyleSheet.create({
+  asterisk: {
+    color: Colors.orange,
+  },
   container: {
     backgroundColor: Colors.purple,
     flex: 1,
@@ -93,6 +102,12 @@ const styles = StyleSheet.create({
     marginBottom: Spacing.tiny,
     marginTop: Spacing.small,
   },
+  asteriskLine: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
   title: {
     color: Colors.purpleLight,
     fontFamily: Fonts.bold,
@@ -107,12 +122,34 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: Sizes.subtitle,
   },
+  whiteText: {
+    color: 'white',
+  },
+  greyText: {
+    color: Colors.greyLight,
+    paddingLeft: Spacing.base,
+  }
 })
 
-Home.propTypes = {
+const mapStateToProps = (state) => {
-  navigation: PropTypes.shape({
+  return ({
-    navigate: PropTypes.func.isRequired,
+    date: getDate(state),
-  }).isRequired,
+  })
 }
 
-export default Home
+const mapDispatchToProps = (dispatch) => {
+  return ({
+    navigate: (page) => dispatch(navigate(page)),
+    setDate: (date) => dispatch(setDate(date)),
+  })
+}
+
+Home.propTypes = {
+  navigate: PropTypes.func,
+  setDate: PropTypes.func
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Home)

components/License.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { BackHandler, StyleSheet, View } from 'react-native'
+import { useTranslation } from 'react-i18next'
+
+import AppPage from './common/app-page'
+import AppText from './common/app-text'
+import Button from './common/button'
+import Segment from './common/segment'
+
+import { saveLicenseFlag } from '../local-storage'
+
+import { Containers } from '../styles'
+
+export default function License({ setLicense }) {
+  const onAcceptLicense = async () => {
+    await saveLicenseFlag()
+    setLicense()
+  }
+
+  const { t } = useTranslation()
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <AppPage testID="licensePage">
+      <Segment last testID="test" title={t("settings.license.title")}>
+        <AppText testID="test">{t("settings.license.text", { currentYear })}</AppText>
+        <View style={styles.container}>
+          <Button onPress={BackHandler.exitApp} testID="licenseCancelButton">
+            {t("labels.shared.cancel")}
+          </Button>
+          <Button isCTA onPress={onAcceptLicense} testID="licenseOkButton">
+            {t("labels.shared.ok")}
+          </Button>
+        </View>
+      </Segment>
+    </AppPage>
+  )
+}
+
+License.propTypes = {
+  setLicense: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  }
+})

components/app-wrapper.js

@@ -1,54 +1,104 @@
-import React, { useState, useEffect } from 'react'
+import React, { Component } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Provider } from 'react-redux'
+import nodejs from 'nodejs-mobile-react-native'
 
 import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
-import { closeDb, openDb } from '../db'
+import { openDb } from '../db'
 
 import App from './app'
 import AppLoadingView from './common/app-loading'
 import AppStatusBar from './common/app-status-bar'
-import AcceptLicense from './AcceptLicense'
+import License from './License'
 import PasswordPrompt from './password-prompt'
 
-export default function AppWrapper() {
+import store from '../store'
-  const [isLoading, setIsLoading] = useState(true)
-  const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
-  const [isDbEncrypted, setIsDbEncrypted] = useState(false)
 
-  const checkIsLicenseAccepted = async () => {
+export default class AppWrapper extends Component {
+  constructor() {
+    super()
+    this.state = {
+      isCheckingLicenseAgreement: true,
+      shouldShowLicenseAgreement: false,
+      shouldShowPasswordPrompt: false,
+      shouldShowApp: false,
+    }
+    nodejs.start('main.js')
+    this.checkLicenseAgreement()
+    this.checkDbPasswordSet()
+  }
+
+  async checkLicenseAgreement() {
     const isLicenseFlagSet = await getLicenseFlag()
-    setIsLicenseAccepted(isLicenseFlagSet)
+    if (!isLicenseFlagSet) {
-    setIsLoading(false)
+      this.enableShowLicenseAgreement()
+    } else {
+      this.setState({ isCheckingLicenseAgreement: false })
+    }
   }
 
-  const checkIsDbEncrypted = async () => {
+  async checkDbPasswordSet() {
-    const isEncrypted = !(await openDb())
+    const canConnectToDb = await openDb()
-    if (isEncrypted) setIsDbEncrypted(true)
+    if (canConnectToDb) {
-    await saveEncryptionFlag(isEncrypted)
+      this.enableShowApp()
+      await saveEncryptionFlag(false)
+      return false
+    }
+    this.setState({ shouldShowPasswordPrompt: true })
+    await saveEncryptionFlag(true)
   }
 
-  useEffect(() => {
+  enableShowLicenseAgreement = () => {
-    checkIsLicenseAccepted()
+    this.setState({
-    checkIsDbEncrypted()
+      shouldShowLicenseAgreement: true,
-
+      isCheckingLicenseAgreement: false,
-    return () => closeDb()
+    })
-  }, [])
-
-  if (isLoading) {
-    return <AppLoadingView />
   }
 
-  if (!isLicenseAccepted) {
+  disableShowLicenseAgreement = () => {
-    return <AcceptLicense setLicense={() => setIsLicenseAccepted(true)} />
+    this.setState({ shouldShowLicenseAgreement: false })
   }
 
-  return (
+  enableShowApp = () => {
-    <>
+    this.setState({
-      <AppStatusBar />
+      shouldShowApp: true,
-      {isDbEncrypted ? (
+      shouldShowPasswordPrompt: false,
-        <PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
+    })
-      ) : (
+  }
-        <App restartApp={() => checkIsDbEncrypted()} />
+
-      )}
+  render() {
-    </>
+    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 restartApp={() => this.checkDbPasswordSet()} />
+    }
+
+    return (
+      <Provider store={store}>
+        <View style={styles.container}>
+          <AppStatusBar />
+          {initialView}
+        </View>
+      </Provider>
+    )
+  }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+})

components/app.js

@@ -1,82 +1,111 @@
-import React from 'react'
+import React, { Component } from 'react'
-import 'react-native-gesture-handler'
+import { BackHandler, StyleSheet, View } from 'react-native'
-import { StyleSheet, Text } from 'react-native'
+import PropTypes from 'prop-types'
-import { NavigationContainer } from '@react-navigation/native'
+
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { connect } from 'react-redux'
-import { createStackNavigator } from '@react-navigation/stack'
+
+import { getDate } from '../slices/date'
+import { getNavigation, navigate, goBack } from '../slices/navigation'
 
-import Home from './Home'
-import Chart from './chart/chart'
-import CalendarView from './calendar'
-import CycleDayOverview from './cycle-day/cycle-day-overview'
-import Stats from './stats'
-import Icon from './common/menu-icon'
 import Header from './header'
+import Menu from './menu'
+import { viewsList } from './views'
+import { isSettingsView } from './pages'
 
-import { Colors, Fonts, Sizes } from '../styles'
+import { headerTitles } from '../i18n/en/labels'
+import setupNotifications from '../lib/notifications'
+import { getCycleDay, closeDb } from '../db'
 
-const HomeStack = createStackNavigator()
+class App extends Component {
+  static propTypes = {
+    date: PropTypes.string,
+    navigation: PropTypes.object.isRequired,
+    navigate: PropTypes.func,
+    goBack: PropTypes.func,
+    restartApp: PropTypes.func,
+  }
 
-function HomeStackScreen() {
+  constructor(props) {
-  return (
+    super(props)
-    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
-      <HomeStack.Screen name="Home" component={Home} />
-      <HomeStack.Screen name="CycleDayOverview" component={CycleDayOverview} />
-    </HomeStack.Navigator>
-  )
-}
 
-const Tab = createBottomTabNavigator()
+    this.backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      this.goBack
+    )
 
-const App = () => {
+    setupNotifications(this.props.navigate)
-  return (
+  }
-    <NavigationContainer>
-      <Tab.Navigator
-        screenOptions={({ route }) => ({
-          header: ({ navigation }) => <Header navigation={navigation} />,
-          tabBarIcon: ({ focused }) => {
-            let icon = 'chart'
 
-            if (route.name === 'CalendarStackScreen') {
+  goBack = () => {
-              icon = 'calendar'
+    const { currentPage } = this.props.navigation
-            } else if (route.name === 'Stats') {
-              icon = 'statistics'
-            }
 
-            return <Icon name={icon} isActive={focused} />
+    if (currentPage === 'Home') {
-          },
+      closeDb()
-          tabBarLabel: ({ color }) => {
+      BackHandler.exitApp()
-            return (
+    } else {
-              <Text style={[styles.text, { color: color }]}>{route.name}</Text>
+      this.props.goBack()
-            )
+    }
-          },
+
-          tabBarActiveTintColor: Colors.orange,
+    return true
-          tabBarInactiveTintColor: Colors.grey,
+  }
-          tabBarStyle: { height: 80 },
+
-        })}
+  componentWillUnmount() {
-      >
+    this.backHandler.remove()
-        <Tab.Screen
+  }
-          name="HomeStackScreen"
+
-          component={HomeStackScreen}
+  render() {
-          options={{ tabBarButton: () => null, tabBarVisible: false }}
+    const { date, navigation, goBack, restartApp } = this.props
-        />
+    const { currentPage } = navigation
-        <Tab.Screen name="Calendar" component={CalendarView} />
+
-        <Tab.Screen name="Chart" component={Chart} />
+    if (!currentPage) {
-        <Tab.Screen name="Stats" component={Stats} />
+      return false
-      </Tab.Navigator>
+    }
-    </NavigationContainer>
+
-  )
+    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,
+    }
+
+    return (
+      <View style={styles.container}>
+        <Header {...headerProps} />
+        <Page {...pageProps} restartApp={restartApp} />
+        <Menu />
+      </View>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  text: {
-    fontFamily: Fonts.bold,
-    fontSize: Sizes.small,
-    textTransform: 'uppercase',
-  },
 })
 
-export default App
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+    navigation: getNavigation(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    navigate: (page) => dispatch(navigate(page)),
+    goBack: () => dispatch(goBack()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)

components/calendar.js

@@ -1,10 +1,15 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
 
+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 nothingChanged from '../db/db-unchanged'
 import {
   calendarTheme,
   predictionToCalFormat,
@@ -12,45 +17,83 @@ import {
   todayToCalFormat,
 } from './helpers/calendar'
 
-const CalendarView = ({ navigation }) => {
+class CalendarView extends Component {
-  const bleedingDays = getBleedingDaysSortedByDate()
+  static propTypes = {
-  const predictedMenses = cycleModule().getPredictedMenses()
+    setDate: PropTypes.func.isRequired,
-
+    navigate: PropTypes.func.isRequired,
-  const passDateToDayView = ({ dateString }) => {
-    navigation.navigate('CycleDayOverview', { date: dateString })
   }
 
-  const markedDates = Object.assign(
+  constructor(props) {
-    {},
+    super(props)
-    todayToCalFormat(),
+    this.bleedingDays = getBleedingDaysSortedByDate()
-    toCalFormat(bleedingDays),
+    const predictedMenses = cycleModule().getPredictedMenses()
-    predictionToCalFormat(predictedMenses)
+    this.state = {
-  )
+      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
+      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+      todayInCalFormat: todayToCalFormat(),
+    }
 
-  return (
+    this.bleedingDays.addListener(this.setStateWithCalFormattedDays)
-    <View style={styles.container}>
+  }
-      <CalendarList
+
-        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+  setStateWithCalFormattedDays = (_, changes) => {
-        firstDay={1}
+    if (nothingChanged(changes)) return
-        onDayPress={passDateToDayView}
+    const predictedMenses = cycleModule().getPredictedMenses()
-        markedDates={markedDates}
+    this.setState({
-        markingType="custom"
+      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
-        theme={calendarTheme}
+      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-        // Max amount of months allowed to scroll to the past.
+      todayInCalFormat: todayToCalFormat(),
-        pastScrollRange={120}
+    })
-      />
+  }
-    </View>
+
-  )
+  componentWillUnmount() {
+    this.bleedingDays.removeListener(this.setStateWithCalFormattedDays)
+  }
+
+  passDateToDayView = (result) => {
+    this.props.setDate(result.dateString)
+    this.props.navigate('CycleDay')
+  }
+
+  render() {
+    const {
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat,
+    } = this.state
+    const markedDates = Object.assign(
+      {},
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    )
+
+    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>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
 })
 
-CalendarView.propTypes = {
+const mapDispatchToProps = (dispatch) => {
-  navigation: PropTypes.shape({
+  return {
-    navigate: PropTypes.func.isRequired,
+    setDate: (date) => dispatch(setDate(date)),
-  }).isRequired,
+    navigate: (page) => dispatch(navigate(page)),
+  }
 }
 
-export default CalendarView
+export default connect(null, mapDispatchToProps)(CalendarView)

components/chart/chart-legend.js

@@ -18,21 +18,21 @@ const ChartLegend = ({ height }) => {
 }
 
 ChartLegend.propTypes = {
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
 }
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     justifyContent: 'flex-end',
-    width: CHART_YAXIS_WIDTH,
+    width: CHART_YAXIS_WIDTH
   },
   text: {
     ...Typography.label,
   },
   textBold: {
-    ...Typography.labelBold,
+    ...Typography.labelBold
-  },
+  }
 })
 
 export default ChartLegend

components/chart/chart-line.js

@@ -1,21 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Shape } from '@react-native-community/art'
+import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
 import { Colors } from '../../styles'
-import {
+import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../config'
-  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_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
-    : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
 
-  return <Shape d={path} stroke={color} strokeWidth={width} />
+  return (
+    <Shape d={path} stroke={color} strokeWidth={width} />
+  )
 }
 
 ChartLine.propTypes = {
@@ -24,7 +22,7 @@ ChartLine.propTypes = {
 }
 
 ChartLine.defaultProps = {
-  isNfpLine: false,
+  isNfpLine: false
 }
 
 export default ChartLine

components/chart/chart.js

@@ -1,157 +1,267 @@
-import React, { useEffect, useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Dimensions, PixelRatio, StyleSheet, View } from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  PixelRatio,
+  StyleSheet,
+  View
+} from 'react-native'
 
+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 MainGrid from './main-grid'
 import NoData from './no-data'
-import NoTemperature from './no-temperature'
 import Tutorial from './tutorial'
 import YAxis from './y-axis'
 
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
 import { getCycleDaysSortedByDate } from '../../db'
-import { getChartFlag, setChartFlag } from '../../local-storage'
+import nothingChanged from '../../db/db-unchanged'
-import { makeColumnInfo } from '../helpers/chart'
+import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
   CHART_COLUMN_WIDTH,
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
-  SYMPTOMS,
+  SYMPTOMS
 } from '../../config'
-import { Spacing } from '../../styles'
+import { shared } from '../../i18n/en/labels'
+import { Colors, Spacing } from '../../styles'
 
-const getSymptomsFromCycleDays = (cycleDays) =>
+class CycleChart extends Component {
-  SYMPTOMS.filter((symptom) => cycleDays.some((cycleDay) => cycleDay[symptom]))
+  static propTypes = {
-
+    navigate: PropTypes.func,
-const CycleChart = ({ navigation }) => {
+    end: PropTypes.bool
-  const [shouldShowHint, setShouldShowHint] = useState(true)
-
-  useEffect(() => {
-    let isMounted = true
-
-    async function checkShouldShowHint() {
-      const flag = await getChartFlag()
-      if (isMounted) {
-        setShouldShowHint(flag === 'true')
-      }
-    }
-
-    checkShouldShowHint()
-
-    return () => {
-      isMounted = false
-    }
-  }, [])
-
-  const hideHint = () => {
-    setShouldShowHint(false)
-    setChartFlag()
   }
 
-  const cycleDaysSortedByDate = getCycleDaysSortedByDate()
+  constructor(props) {
+    super(props)
 
-  const chartSymptoms = getSymptomsFromCycleDays(cycleDaysSortedByDate)
+    this.state = {}
-  const symptomRowSymptoms = chartSymptoms.filter(
+    this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
-    (symptom) => symptom !== 'temperature'
+    this.getFhmAndLtlInfo = nfpLines()
-  )
+    this.shouldShowTemperatureColumn = false
 
-  const shouldShowTemperatureColumn = chartSymptoms.indexOf('temperature') > -1
+    this.checkShouldShowHint()
+    this.prepareSymptomData()
+  }
 
-  const { width, height } = Dimensions.get('window')
+  componentWillUnmount() {
-  const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
+    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
+    this.removeObvListener()
+  }
 
-  const xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
+  checkShouldShowHint = async () => {
-  const remainingHeight = height * 0.7 - xAxisHeight
+    const flag = await getChartFlag()
-  const symptomHeight = PixelRatio.roundToNearestPixel(
+    const shouldShowHint = flag === 'true' ? true : false
-    remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
+    this.setState({ shouldShowHint })
-  )
+  }
-  const symptomRowHeight =
-    PixelRatio.roundToNearestPixel(symptomRowSymptoms.length * symptomHeight) +
-    CHART_GRID_LINE_HORIZONTAL_WIDTH
-  const columnHeight = remainingHeight - symptomRowHeight
 
-  const chartHeight = shouldShowTemperatureColumn
+  setShouldShowHint = async () => {
-    ? height * 0.7
+    await setChartFlag()
-    : symptomRowHeight + xAxisHeight
+    this.setState({ shouldShowHint: false })
+  }
 
-  const columns = makeColumnInfo()
+  onLayout = () => {
+    if (this.state.chartHeight) return false
 
-  const renderColumn = ({ item }) => {
+    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 }) => {
     return (
       <DayColumn
         dateString={item}
-        navigation={navigation}
+        index={index}
-        symptomHeight={symptomHeight}
+        navigate={this.props.navigate}
-        columnHeight={columnHeight}
+        symptomHeight={this.symptomHeight}
-        symptomRowSymptoms={symptomRowSymptoms}
+        columnHeight={this.columnHeight}
-        chartSymptoms={chartSymptoms}
+        symptomRowSymptoms={this.symptomRowSymptoms}
-        shouldShowTemperatureColumn={shouldShowTemperatureColumn}
+        chartSymptoms={this.chartSymptoms}
-        xAxisHeight={xAxisHeight}
+        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
+        getFhmAndLtlInfo={this.getFhmAndLtlInfo}
+        xAxisHeight={this.xAxisHeight}
       />
     )
   }
 
-  const hasDataToDisplay = chartSymptoms.length > 0
+  reCalculateChartInfo = () => {
+    const { width, height } = Dimensions.get('window')
 
-  if (!hasDataToDisplay) {
+    this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
-    return <NoData />
+    const remainingHeight = height * 0.7 - this.xAxisHeight
+    this.symptomHeight = PixelRatio.roundToNearestPixel(
+      remainingHeight
+      * CHART_SYMPTOM_HEIGHT_RATIO
+    )
+    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
+      this.symptomRowSymptoms.length * this.symptomHeight
+    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
+    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.setState({ columns, chartHeight, numberOfColumnsToRender })
   }
 
-  return (
+  updateListeners(dataUpdateHandler) {
-    <AppPage
+    // remove existing listeners
-      contentContainerStyle={styles.pageContainer}
+    if(this.handleDbChange) {
-      scrollViewStyle={styles.page}
+      this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
-    >
+    }
-      <View style={styles.chartContainer}>
+    if (this.removeObvListener) this.removeObvListener()
-        {shouldShowHint && <Tutorial onClose={hideHint} />}
+
-        {!shouldShowTemperatureColumn && <NoTemperature />}
+    this.handleDbChange = (_, changes) => {
-        <View style={styles.chartArea}>
+      if (nothingChanged(changes)) return
-          <YAxis
+      dataUpdateHandler()
-            height={columnHeight}
+    }
-            symptomsToDisplay={symptomRowSymptoms}
+
-            symptomsSectionHeight={symptomRowHeight}
+    this.cycleDaysSortedByDate.addListener(this.handleDbChange)
-            shouldShowTemperatureColumn={shouldShowTemperatureColumn}
+    this.removeObvListener = scaleObservable(dataUpdateHandler, false)
-            xAxisHeight={xAxisHeight}
+  }
-          />
+
-          <MainGrid
+  render() {
-            data={columns}
+    const {
-            renderItem={renderColumn}
+      chartHeight,
-            initialNumToRender={numberOfColumnsToRender}
+      chartLoaded,
-            contentContainerStyle={{ height: chartHeight }}
+      shouldShowHint,
-          />
+      numberOfColumnsToRender
-          {shouldShowTemperatureColumn && (
+    } = this.state
-            <HorizontalGrid height={columnHeight} />
+    const hasDataToDisplay = this.chartSymptoms.length > 0
+
+    return (
+      <AppPage
+        contentContainerStyle={styles.pageContainer}
+        onLayout={this.onLayout}
+        scrollViewStyle={styles.page}
+      >
+        {!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>
+          }
+          {hasDataToDisplay && (
+            <View style={styles.chartArea}>
+
+              {chartHeight && chartLoaded && (
+                <YAxis
+                  height={this.columnHeight}
+                  symptomsToDisplay={this.symptomRowSymptoms}
+                  symptomsSectionHeight={this.symptomRowHeight}
+                  shouldShowTemperatureColumn=
+                    {this.shouldShowTemperatureColumn}
+                  xAxisHeight={this.xAxisHeight}
+                />
+              )}
+
+              {chartHeight &&
+               <FlatList
+                 horizontal={true}
+                 inverted={true}
+                 showsHorizontalScrollIndicator={false}
+                 data={this.state.columns}
+                 renderItem={this.renderColumn}
+                 keyExtractor={item => item}
+                 initialNumToRender={numberOfColumnsToRender}
+                 windowSize={30}
+                 onLayout={() => this.setState({chartLoaded: true})}
+                 onEndReached={() => this.setState({end: true})}
+                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
+                 updateCellsBatchingPeriod={800}
+                 contentContainerStyle={{ height: chartHeight }}
+               />
+              }
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  {this.shouldShowTemperatureColumn &&
+                    <HorizontalGrid height={this.columnHeight} />
+                  }
+                </React.Fragment>
+              )}
+            </View>
           )}
         </View>
-      </View>
+      </AppPage>
-    </AppPage>
+    )
+  }
+}
+
+function LoadingMoreView({ end }) {
+  return (
+    <View style={styles.loadingContainer}>
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
+    </View>
   )
 }
 
-CycleChart.propTypes = {
+LoadingMoreView.propTypes = {
-  navigation: PropTypes.shape({
+  end: PropTypes.bool
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
 }
 
 const styles = StyleSheet.create({
   chartArea: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   chartContainer: {
-    flexDirection: 'column',
+    flexDirection: 'column'
+  },
+  loadingContainer: {
+    height: '100%',
+    backgroundColor: Colors.turquoiseLight,
+    justifyContent: 'center'
   },
   page: {
-    marginVertical: Spacing.small,
+    marginVertical: Spacing.small
   },
   pageContainer: {
-    paddingHorizontal: Spacing.base,
+    paddingHorizontal: Spacing.base
   },
+  warning: {
+    padding: Spacing.large
+  }
 })
 
-export default CycleChart
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(CycleChart)

components/chart/day-column.js

@@ -1,6 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 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'
 
@@ -11,103 +15,125 @@ import CycleDayLabel from './cycle-day-label'
 import {
   symptomColorMethods,
   getTemperatureProps,
-  isSymptomDataComplete,
+  isSymptomDataComplete
-  nfpLines,
 } from '../helpers/chart'
 
-const DayColumn = ({
+class DayColumn extends Component {
-  dateString,
+  static propTypes = {
-  chartSymptoms,
+    dateString: PropTypes.string.isRequired,
-  columnHeight,
+    chartSymptoms: PropTypes.array,
-  navigation,
+    columnHeight: PropTypes.number.isRequired,
-  shouldShowTemperatureColumn,
+    getFhmAndLtlInfo: PropTypes.func.isRequired,
-  symptomHeight,
+    navigate: PropTypes.func.isRequired,
-  symptomRowSymptoms,
+    setDate: PropTypes.func.isRequired,
-  xAxisHeight,
+    shouldShowTemperatureColumn: PropTypes.bool,
-}) => {
+    symptomHeight: PropTypes.number.isRequired,
-  const cycleDayData = getCycleDay(dateString)
+    symptomRowSymptoms: PropTypes.array,
-  let data = {}
+    xAxisHeight: PropTypes.number,
-
-  if (cycleDayData) {
-    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)
-        }
-      }
-
-      return symptomDataToDisplay
-    }, data)
   }
 
-  const fhmAndLtl = nfpLines()(
+  constructor(props) {
-    dateString,
+    super()
-    data.temperature ? data.temperature.value : null,
-    columnHeight
-  )
 
-  const onDaySelect = (date) =>
+    const { dateString, chartSymptoms, columnHeight } = props
-    navigation.navigate('CycleDayOverview', { date })
+    const cycleDayData = getCycleDay(dateString)
+    this.data = {}
 
-  return (
+    if (cycleDayData) {
-    <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
+      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
-      {shouldShowTemperatureColumn && (
+        const symptomData = cycleDayData[symptom]
-        <TemperatureColumn
+
-          horizontalLinePosition={fhmAndLtl.drawLtlAt}
+        if (symptomData && symptom === 'temperature') {
-          isVerticalLine={fhmAndLtl.drawFhmLine}
+          symptomDataToDisplay[symptom] =
-          data={data && data.temperature}
+           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)
+          }
+        }
+
+        return symptomDataToDisplay
+      }, this.data)
+    }
+
+    this.fhmAndLtl = props.getFhmAndLtlInfo(
+      props.dateString,
+      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 { columnHeight,
+      dateString,
+      shouldShowTemperatureColumn,
+      symptomHeight,
+      symptomRowSymptoms,
+      xAxisHeight
+    } = this.props
+
+    return (
+      <TouchableOpacity
+        onPress={() => this.onDaySelect(dateString)}
+        activeOpacity={1}
+      >
+
+        {shouldShowTemperatureColumn && <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
           columnHeight={columnHeight}
+        />}
+
+        <CycleDayLabel
+          height={xAxisHeight}
+          date={dateString}
         />
-      )}
 
-      <CycleDayLabel height={xAxisHeight} date={dateString} />
+        { symptomRowSymptoms.map((symptom, i) => {
+          const hasSymptomData =
+            Object.prototype.hasOwnProperty.call(this.data, symptom)
+          return (
+            <SymptomCell
+              index={i}
+              key={symptom}
+              symptom={symptom}
+              symptomValue={hasSymptomData && this.data[symptom]}
+              isSymptomDataComplete={
+                hasSymptomData && isSymptomDataComplete(symptom, dateString)
+              }
+              height={symptomHeight}
+            />)
+        }
+        )}
 
-      {symptomRowSymptoms.map((symptom, i) => {
+      </TouchableOpacity>
-        const hasSymptomData = Object.prototype.hasOwnProperty.call(
+    )
-          data,
+  }
-          symptom
-        )
-        return (
-          <SymptomCell
-            index={i}
-            key={symptom}
-            symptom={symptom}
-            symptomValue={hasSymptomData && data[symptom]}
-            isSymptomDataComplete={
-              hasSymptomData && isSymptomDataComplete(symptom, dateString)
-            }
-            height={symptomHeight}
-          />
-        )
-      })}
-    </TouchableOpacity>
-  )
 }
 
-DayColumn.propTypes = {
+const mapDispatchToProps = (dispatch) => {
-  dateString: PropTypes.string.isRequired,
+  return({
-  chartSymptoms: PropTypes.array,
+    setDate: (date) => dispatch(setDate(date)),
-  columnHeight: PropTypes.number.isRequired,
+    navigate: (page) => dispatch(navigate(page)),
-  shouldShowTemperatureColumn: PropTypes.bool,
+  })
-  symptomHeight: PropTypes.number.isRequired,
-  symptomRowSymptoms: PropTypes.array,
-  xAxisHeight: PropTypes.number,
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
 }
 
-export default DayColumn
+export default connect(
+  null,
+  mapDispatchToProps,
+)(DayColumn)

components/chart/dot-and-line.js

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Path, Shape } from '@react-native-community/art'
+import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
 import { Colors } from '../../styles'
 
@@ -8,76 +8,80 @@ import {
   CHART_COLUMN_WIDTH,
   CHART_COLUMN_MIDDLE,
   CHART_DOT_RADIUS,
-  CHART_STROKE_WIDTH,
+  CHART_STROKE_WIDTH
 } from '../../config'
 
-const DotAndLine = ({
+export default class DotAndLine extends Component {
-  exclude,
+  static propTypes = {
-  leftTemperatureExclude,
+    exclude: PropTypes.bool,
-  leftY,
+    leftY: PropTypes.number,
-  rightTemperatureExclude,
+    leftTemperatureExclude: PropTypes.bool,
-  rightY,
+    rightY: PropTypes.number,
-  y,
+    rightTemperatureExclude: PropTypes.bool,
-}) => {
+    y: PropTypes.number.isRequired
-  let excludeLeftLine, excludeRightLine, lineLeft, lineRight
-
-  if (leftY) {
-    const middleY = (leftY - y) / 2 + y
-    excludeLeftLine = leftTemperatureExclude || exclude
-    lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
-  }
-  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 dot = new Path()
+  shouldComponentUpdate(newProps) {
-    .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
+    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
-    .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 (
+  render() {
-    <React.Fragment>
+    const {
-      <Shape
+      exclude,
-        d={lineLeft}
+      leftTemperatureExclude,
-        stroke={lineColorLeft}
+      leftY,
-        strokeWidth={CHART_STROKE_WIDTH}
+      rightTemperatureExclude,
-        key={y}
+      rightY,
-      />
+      y
-      <Shape
+    } = this.props
-        d={lineRight}
+    let excludeLeftLine, excludeRightLine, lineLeft, lineRight
-        stroke={lineColorRight}
+
-        strokeWidth={CHART_STROKE_WIDTH}
+    if (leftY) {
-        key={y + CHART_DOT_RADIUS}
+      const middleY = ((leftY - y) / 2) + y
-      />
+      excludeLeftLine = leftTemperatureExclude || exclude
-      <Shape
+      lineLeft = new Path()
-        d={dot}
+        .moveTo(CHART_COLUMN_MIDDLE, y)
-        stroke={dotColor}
+        .lineTo(0, middleY)
-        strokeWidth={CHART_STROKE_WIDTH}
+    }
-        fill="white"
+    if (rightY) {
-        key="dot"
+      const middleY = ((y - rightY) / 2) + rightY
-      />
+      excludeRightLine = rightTemperatureExclude || exclude
-    </React.Fragment>
+      lineRight = new Path()
-  )
+        .moveTo(CHART_COLUMN_MIDDLE, y)
+        .lineTo(CHART_COLUMN_WIDTH, middleY)
+    }
+
+    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={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>
+    )
+  }
 }
-
-DotAndLine.propTypes = {
-  exclude: PropTypes.bool,
-  leftY: PropTypes.number,
-  leftTemperatureExclude: PropTypes.bool,
-  rightY: PropTypes.number,
-  rightTemperatureExclude: PropTypes.bool,
-  y: PropTypes.number.isRequired,
-}
-
-export default DotAndLine

components/chart/horizontal-grid.js

@@ -5,19 +5,18 @@ import { StyleSheet, View } from 'react-native'
 import { getTickPositions } from '../helpers/chart'
 
 import { Colors } from '../../styles'
-import {
+import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
-  CHART_GRID_LINE_HORIZONTAL_WIDTH,
-  CHART_YAXIS_WIDTH,
-} from '../../config'
 
 const HorizontalGrid = ({ height }) => {
-  return getTickPositions(height).map((tick) => {
+  return getTickPositions(height).map(tick => {
-    return <View key={tick} top={tick} {...styles.line} />
+    return (
+      <View key={tick} top={tick} {...styles.line}/>
+    )
   })
 }
 
 HorizontalGrid.propTypes = {
-  height: PropTypes.number,
+  height: PropTypes.number
 }
 
 const styles = StyleSheet.create({
@@ -26,9 +25,9 @@ const styles = StyleSheet.create({
     borderBottomColor: Colors.grey,
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     left: CHART_YAXIS_WIDTH,
-    position: 'absolute',
+    position:'absolute',
-    right: 0,
+    right: 0
-  },
+  }
 })
 
 export default HorizontalGrid

components/chart/loading-more.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ActivityIndicator, StyleSheet, View } from 'react-native'
-
-import { Colors } from '../../styles'
-
-function LoadingMoreView({ end }) {
-  return (
-    <View style={styles.loadingContainer}>
-      {!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
-    </View>
-  )
-}
-
-LoadingMoreView.propTypes = {
-  end: PropTypes.bool,
-}
-
-const styles = StyleSheet.create({
-  loadingContainer: {
-    height: '100%',
-    backgroundColor: Colors.turquoiseLight,
-    justifyContent: 'center',
-  },
-})
-
-export default LoadingMoreView

components/chart/main-grid.js

@@ -1,32 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { FlatList } from 'react-native'
-
-import LoadingMoreView from './loading-more'
-
-const MainGrid = (props) => {
-  const [endReached, setEndReached] = useState(false)
-  return (
-    <FlatList
-      horizontal={true}
-      inverted={true}
-      showsHorizontalScrollIndicator={false}
-      keyExtractor={(item) => item}
-      windowSize={30}
-      onEndReached={() => setEndReached(true)}
-      ListFooterComponent={<LoadingMoreView end={endReached} />}
-      updateCellsBatchingPeriod={800}
-      {...props}
-    />
-  )
-}
-
-MainGrid.propTypes = {
-  height: PropTypes.number,
-  data: PropTypes.array,
-  renderItem: PropTypes.func,
-  initialNumToRender: PropTypes.number,
-  contentContainerStyle: PropTypes.object,
-}
-
-export default MainGrid

components/chart/no-data.js

@@ -5,6 +5,9 @@ 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'
 
@@ -12,12 +15,7 @@ const NoData = ({ navigate }) => {
   return (
     <View style={styles.container}>
       <AppText>{shared.noDataWarning}</AppText>
-      <Button
+      <Button isCTA onPress={() => {navigate('CycleDay')}}>
-        isCTA
-        onPress={() => {
-          navigate('CycleDay')
-        }}
-      >
         {shared.noDataButtonText}
       </Button>
     </View>
@@ -30,8 +28,17 @@ NoData.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems,
+    ...Containers.centerItems
-  },
+  }
 })
 
-export default NoData
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(NoData)

components/chart/no-temperature.js

@@ -1,19 +0,0 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import AppText from '../common/app-text'
-
-import { shared } from '../../i18n/en/labels'
-
-import { Spacing } from '../../styles'
-
-function NoTemperature() {
-  return <AppText style={styles.warning}>{shared.noTemperatureWarning}</AppText>
-}
-
-const styles = StyleSheet.create({
-  warning: {
-    padding: Spacing.large,
-  },
-})
-
-export default NoTemperature

components/chart/symptom-cell.js

@@ -6,7 +6,7 @@ import { Colors, Containers } from '../../styles'
 import {
   CHART_COLUMN_WIDTH,
   CHART_DOT_RADIUS,
-  CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH
 } from '../../config'
 
 const SymptomCell = ({
@@ -14,22 +14,22 @@ const SymptomCell = ({
   index,
   symptom,
   symptomValue,
-  isSymptomDataComplete,
+  isSymptomDataComplete
 }) => {
+
   const shouldDrawDot = symptomValue !== false
-  const styleCell =
+  const styleCell = index !== 0
-    index !== 0
+    ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
-      ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+    : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
-      : [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 isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
-    const backgroundColor =
+    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
-      isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
+      'white' : symptomColor
-    const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
+    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
     const borderColor = symptomColor
     styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
   }
@@ -45,7 +45,10 @@ SymptomCell.propTypes = {
   height: PropTypes.number,
   index: PropTypes.number.isRequired,
   symptom: PropTypes.string,
-  symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  symptomValue: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+  ]),
   isSymptomDataComplete: PropTypes.bool,
 }
 
@@ -56,7 +59,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     borderLeftColor: Colors.grey,
     borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
-    ...Containers.centerItems,
+    ...Containers.centerItems
   },
   topBorder: {
     borderTopColor: Colors.grey,
@@ -65,7 +68,7 @@ const styles = StyleSheet.create({
   dot: {
     width: CHART_DOT_RADIUS * 2,
     height: CHART_DOT_RADIUS * 2,
-    borderRadius: 50,
+    borderRadius: 50
-  },
+  }
 })
 export default SymptomCell

components/chart/symptom-icon.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet , View } from 'react-native'
 
 import DripIcon from '../../assets/drip-icons'
 
@@ -26,8 +26,8 @@ SymptomIcon.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems,
+    ...Containers.centerItems
-  },
+  }
 })
 
 export default SymptomIcon

components/chart/temperature-column.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
 
-import { Surface, Path } from '@react-native-community/art'
+import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
 
 import ChartLine from './chart-line'
 import DotAndLine from './dot-and-line'
@@ -13,7 +13,7 @@ const TemperatureColumn = ({
   horizontalLinePosition,
   isVerticalLine,
   data,
-  columnHeight,
+  columnHeight
 }) => {
   const x = CHART_STROKE_WIDTH / 2
 
@@ -23,37 +23,34 @@ const TemperatureColumn = ({
       height={columnHeight}
       style={styles.container}
     >
-      <ChartLine path={new Path().lineTo(0, columnHeight)} />
 
-      {horizontalLinePosition && (
+      <ChartLine path={new Path().lineTo(0, columnHeight)}/>
-        <ChartLine
-          path={new Path()
-            .moveTo(0, horizontalLinePosition)
-            .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)}
-          isNfpLine={true}
-          key="ltl"
-        />
-      )}
 
-      {isVerticalLine && (
+      {horizontalLinePosition && <ChartLine
-        <ChartLine
+        path={new Path()
-          path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+          .moveTo(0, horizontalLinePosition)
-          isNfpLine={true}
+          .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)
-          key="fhm"
+        }
-        />
+        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'
+      />}
 
-      {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>
   )
 }
@@ -67,8 +64,8 @@ TemperatureColumn.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: 'white',
+    backgroundColor: 'white'
-  },
+  }
 })
 
 export default TemperatureColumn

components/chart/tick-list.js

@@ -7,22 +7,24 @@ 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 }) => {
+        getTickList(height)
-          return (
+          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
-            <Tick
+            return (
-              height={tickHeight}
+              <Tick
-              isBold={isBold}
+                height={tickHeight}
-              key={label}
+                isBold={isBold}
-              label={label}
+                key={label}
-              shouldShowLabel={shouldShowLabel}
+                label={label}
-              yPosition={position}
+                shouldShowLabel={shouldShowLabel}
-            />
+                yPosition={position}
-          )
+              />
-        }
+            )
-      )}
+          })
+      }
     </View>
   )
 }
@@ -33,8 +35,8 @@ TickList.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
-  },
+  }
 })
 
 export default TickList

components/chart/tick.js

@@ -9,10 +9,10 @@ import { CHART_TICK_WIDTH } from '../../config'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
   const top = yPosition - height / 2
-  const containerStyle = [styles.container, { flexBasis: height, height, top }]
+  const containerStyle = [ styles.container, { flexBasis: height, height, top }]
   const textStyle = isBold ? styles.textBold : styles.textNormal
 
-  return (
+  return(
     <View style={containerStyle}>
       <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
     </View>
@@ -27,6 +27,7 @@ Tick.propTypes = {
   label: PropTypes.string,
 }
 
+
 const text = {
   textAlign: 'right',
 }
@@ -35,17 +36,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'absolute',
     right: 0,
-    width: CHART_TICK_WIDTH,
+    width: CHART_TICK_WIDTH
   },
   textBold: {
     fontSize: Sizes.base,
     fontWeight: 'bold',
-    ...text,
+    ...text
   },
   textNormal: {
     fontSize: Sizes.small,
-    ...text,
+    ...text
-  },
+  }
 })
 
 export default Tick

components/chart/tutorial.js

@@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png')
 const Tutorial = ({ onClose }) => {
   return (
     <View style={styles.container}>
-      <Image resizeMode="contain" source={image} style={styles.image} />
+      <Image resizeMode='contain' source={image} style={styles.image} />
       <View style={styles.textContainer}>
         <AppText>{chart.tutorial}</AppText>
       </View>
@@ -23,20 +23,20 @@ const Tutorial = ({ onClose }) => {
 }
 
 Tutorial.propTypes = {
-  onClose: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
 }
 
 const styles = StyleSheet.create({
   container: {
     ...Containers.rowContainer,
-    padding: Spacing.large,
+    padding: Spacing.large
   },
   image: {
-    height: 40,
+    height: 40
   },
   textContainer: {
-    width: '70%',
+    width: '70%'
-  },
+  }
 })
 
-export default Tutorial
+export default Tutorial

components/chart/y-axis.js

@@ -13,7 +13,7 @@ const YAxis = ({
   symptomsToDisplay,
   symptomsSectionHeight,
   shouldShowTemperatureColumn,
-  xAxisHeight,
+  xAxisHeight
 }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
@@ -21,14 +21,15 @@ const YAxis = ({
     <View>
       {shouldShowTemperatureColumn && <TickList height={height} />}
       <ChartLegend height={xAxisHeight} />
-      <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
+      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
-        {symptomsToDisplay.map((symptom) => (
+        {symptomsToDisplay.map(symptom => (
           <SymptomIcon
             key={symptom}
             symptom={symptom}
             height={symptomIconHeight}
           />
-        ))}
+        )
+        )}
       </View>
     </View>
   )
@@ -39,13 +40,13 @@ YAxis.propTypes = {
   symptomsToDisplay: PropTypes.array,
   symptomsSectionHeight: PropTypes.number,
   shouldShowTemperatureColumn: PropTypes.bool,
-  xAxisHeight: PropTypes.number.isRequired,
+  xAxisHeight: PropTypes.number.isRequired
 }
 
 const styles = StyleSheet.create({
   yAxis: {
-    width: CHART_YAXIS_WIDTH,
+    width: CHART_YAXIS_WIDTH
-  },
+  }
 })
 
 export default YAxis

components/common/AppLink.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, Text, Linking } from 'react-native'
-
-import { Colors, Typography } from '../../styles'
-
-const AppLink = ({ children, url, ...props }) => {
-  return (
-    <Text style={styles.link} {...props} onPress={() => Linking.openURL(url)}>
-      {children}
-    </Text>
-  )
-}
-
-AppLink.propTypes = {
-  children: PropTypes.node,
-  url: PropTypes.string,
-}
-
-const styles = StyleSheet.create({
-  link: {
-    ...Typography.mainText,
-    color: Colors.purple,
-    textDecorationLine: 'underline',
-  },
-})
-
-export default AppLink

components/common/Asterisk.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-
-import AppText from './app-text'
-
-import { Colors } from '../../styles'
-
-const Asterisk = () => <AppText style={styles.asterisk}>*</AppText>
-
-const styles = StyleSheet.create({
-  asterisk: {
-    color: Colors.orange,
-  },
-})
-
-export default Asterisk

components/common/Footnote.js

@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
-
-import AppText from '../common/app-text'
-import Asterisk from '../common/Asterisk'
-
-import { Colors, Spacing } from '../../styles'
-
-const Footnote = ({ children, colorLabel }) => {
-  if (!children) return false
-
-  return (
-    <View style={styles.container}>
-      <Asterisk />
-      <AppText
-        linkStyle={styles.link}
-        style={{ ...styles.text, color: Colors[colorLabel] }}
-      >
-        {children}
-      </AppText>
-    </View>
-  )
-}
-
-Footnote.propTypes = {
-  children: PropTypes.node,
-  colorLabel: PropTypes.string,
-}
-
-Footnote.defaultProps = {
-  colorLabel: 'greyDark',
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignContent: 'flex-start',
-    marginBottom: Spacing.tiny,
-    marginTop: Spacing.base,
-  },
-  link: {
-    color: 'white',
-  },
-  text: {
-    paddingLeft: Spacing.small,
-  },
-})
-
-export default Footnote

components/common/app-icon.js

@@ -14,17 +14,17 @@ const AppIcon = ({ color, name, style, ...props }) => {
 AppIcon.propTypes = {
   color: PropTypes.string,
   name: PropTypes.string.isRequired,
-  style: PropTypes.object,
+  style: PropTypes.object
 }
 
 AppIcon.defaultProps = {
-  color: 'black',
+  color: 'black'
 }
 
 const styles = StyleSheet.create({
   icon: {
-    fontSize: Sizes.subtitle,
+    fontSize: Sizes.subtitle
-  },
+  }
 })
 
-export default AppIcon
+export default AppIcon

components/common/app-loading.js

@@ -17,8 +17,8 @@ const AppLoadingView = () => {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems,
+    ...Containers.centerItems
-  },
+  }
 })
 
 export default AppLoadingView

components/common/app-modal.js

@@ -1,37 +1,24 @@
 import React from 'react'
-import {
+import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
-  Dimensions,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
 import PropTypes from 'prop-types'
 
-import CloseIcon from './close-icon'
+const AppModal = ({ children, onClose }) => {
-
+  return(
-import { Sizes, Spacing } from '../../styles'
+    <Modal
-
+      animationType='fade'
-const AppModal = ({ children, onClose }) => (
+      onRequestClose={onClose}
-  <Modal
+      transparent={true}
-    animationType="fade"
+      visible={true}
-    onRequestClose={onClose}
+    >
-    transparent={true}
+      <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
-    visible={true}
-  >
-    <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
-    <View style={styles.modalWindow}>
-      <View style={styles.headerContainer}>
-        <CloseIcon onClose={onClose} />
-      </View>
       {children}
-    </View>
+    </Modal>
-  </Modal>
+  )
-)
+}
 
 AppModal.propTypes = {
   children: PropTypes.node,
-  onClose: PropTypes.func,
+  onClose: PropTypes.func
 }
 
 const styles = StyleSheet.create({
@@ -39,29 +26,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'black',
     flex: 1,
     opacity: 0.5,
-  },
+  }
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingTop: Spacing.base,
-    paddingHorizontal: Spacing.base,
-    position: 'absolute',
-    width: '100%',
-    zIndex: 3, // works on ios
-    elevation: 3, // works on android
-  },
-  modalWindow: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 10,
-    marginTop: Sizes.huge * 2,
-    paddingVertical: Spacing.large * 2,
-    position: 'absolute',
-    maxHeight: Dimensions.get('window').height * 0.7,
-    zIndex: 2, // works on ios
-    elevation: 2, // works on android
-    minWidth: '80%',
-  },
 })
 
 export default AppModal

components/common/app-page.js

@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Colors, Containers, Typography } from '../../styles'
+import { Colors, Typography } from '../../styles'
 
 const AppPage = ({
   children,
@@ -13,7 +13,7 @@ const AppPage = ({
   title,
   ...props
 }) => {
-  return (
+  return(
     <View style={styles.container}>
       <ScrollView
         contentContainerStyle={[styles.scrollView, contentContainerStyle]}
@@ -31,18 +31,21 @@ AppPage.propTypes = {
   children: PropTypes.node,
   contentContainerStyle: PropTypes.object,
   scrollViewStyle: PropTypes.object,
-  title: PropTypes.string,
+  title: PropTypes.string
 }
 
 const styles = StyleSheet.create({
-  container: { ...Containers.pageContainer },
+  container: {
+    backgroundColor: Colors.turquoiseLight,
+    flex: 1
+  },
   scrollView: {
     backgroundColor: Colors.turquoiseLight,
-    flexGrow: 1,
+    flexGrow: 1
   },
   title: {
-    ...Typography.title,
+    ...Typography.title
-  },
+  }
 })
 
-export default AppPage
+export default AppPage

components/common/app-status-bar.js

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
   statusBar: {
     backgroundColor: Colors.purple,
     height: STATUSBAR_HEIGHT,
-  },
+  }
 })
 
 export default AppStatusBar

components/common/app-switch.js

@@ -20,19 +20,19 @@ const AppSwitch = ({ onToggle, text, value }) => {
 AppSwitch.propTypes = {
   onToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
-  value: PropTypes.bool,
+  value: PropTypes.bool
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.rowContainer,
+    ...Containers.rowContainer
   },
   switch: {
     flex: 1,
   },
   textContainer: {
     flex: 4,
-  },
+  }
 })
 
-export default AppSwitch
+export default AppSwitch

components/common/app-text-input.js

@@ -1,15 +1,30 @@
 import React from 'react'
-import { StyleSheet, TextInput } from 'react-native'
+import { KeyboardAvoidingView, StyleSheet, TextInput } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { Colors, Spacing, Typography } from '../../styles'
 
-const AppTextInput = ({ style, ...props }) => (
+const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
-  <TextInput style={[styles.input, style]} {...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({
@@ -24,8 +39,8 @@ const styles = StyleSheet.create({
     minWidth: '80%',
     paddingHorizontal: Spacing.base,
     paddingVertical: Spacing.tiny,
-    ...Typography.mainText,
+    ...Typography.mainText
-  },
+  }
 })
 
 export default AppTextInput

components/common/app-text.js

@@ -2,26 +2,32 @@ 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, style, ...props }) => {
+const AppText = ({ children, linkStyle, style, ...props }) => {
+  // we parse for links in case the text contains any
   return (
-    <Text style={[styles.text, style]} {...props}>
+    <Link style={linkStyle}>
-      {children}
+      <Text style={[styles.text, style]} {...props}>
-    </Text>
+        {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,
+    ...Typography.mainText
-  },
+  }
 })
 
-export default AppText
+export default AppText

components/common/close-icon.js

@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 
 import AppIcon from './app-icon'
 
-import { HIT_SLOP } from '../../config'
+import { HIT_SLOP} from '../../config'
 import { Colors, Sizes } from '../../styles'
 
 const CloseIcon = ({ onClose, color, ...props }) => {
@@ -15,21 +15,21 @@ const CloseIcon = ({ onClose, color, ...props }) => {
       style={styles.container}
       {...props}
     >
-      <AppIcon name="cross" color={color ? color : Colors.orange} />
+      <AppIcon name='cross' color={color ? color : Colors.orange} />
     </TouchableOpacity>
   )
 }
 
 CloseIcon.propTypes = {
   onClose: PropTypes.func.isRequired,
-  color: PropTypes.string,
+  color: PropTypes.string
 }
 
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-start',
     marginBottom: Sizes.base,
-  },
+  }
 })
 
 export default CloseIcon

components/common/link.js

@@ -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

components/common/menu-icon.js

@@ -15,7 +15,7 @@ const MenuIcon = ({ isActive, name }) => {
 
 MenuIcon.propTypes = {
   isActive: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
 }
 
-export default MenuIcon
+export default MenuIcon

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Colors, Containers, Spacing, Typography } from '../../styles'
+import { Colors, Spacing, Typography } from '../../styles'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -25,20 +25,25 @@ Segment.propTypes = {
   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,
-    ...Containers.segmentContainer,
+    ...segmentContainer,
   },
   containerLast: {
-    ...Containers.segmentContainer,
+    ...segmentContainer,
   },
   title: {
     ...Typography.subtitle,
-  },
+  }
 })
 
-export default Segment
+export default Segment

components/common/table.js

@@ -2,40 +2,40 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import AppText from '../common/app-text'
+import AppText from './app-text'
 
 import { Sizes, Spacing, Typography } from '../../styles'
 
-const StatsOverview = ({ data }) => {
+const Table = ({ tableContent }) => {
-  return data.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+  return (
+    tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+  )
 }
 
-StatsOverview.propTypes = {
+Table.propTypes = {
-  data: PropTypes.array.isRequired,
+  tableContent: PropTypes.array.isRequired
 }
 
 const Row = ({ rowContent }) => {
-  const isStandardDeviation = rowContent[1].includes('deviation')
+  return(
-
-  return (
     <View style={styles.row}>
       <Cell content={rowContent[0]} isLeft />
-      <Cell content={rowContent[1]} hasAsterisk={isStandardDeviation} />
+      <Cell content={rowContent[1]} />
     </View>
   )
 }
 
 Row.propTypes = {
-  rowContent: PropTypes.array.isRequired,
+  rowContent: PropTypes.array.isRequired
 }
 
-const Cell = ({ content, isLeft, hasAsterisk }) => {
+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 (
+  return(
     <View style={styleContainer}>
       <AppText
         numberOfLines={numberOfLines}
@@ -43,7 +43,6 @@ const Cell = ({ content, isLeft, hasAsterisk }) => {
         style={styleText}
       >
         {content}
-        {hasAsterisk && <AppText style={styles.accentOrange}>*</AppText>}
       </AppText>
     </View>
   )
@@ -52,7 +51,6 @@ const Cell = ({ content, isLeft, hasAsterisk }) => {
 Cell.propTypes = {
   content: PropTypes.node.isRequired,
   isLeft: PropTypes.bool,
-  hasAsterisk: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
@@ -63,15 +61,22 @@ const styles = StyleSheet.create({
   },
   accentPurpleBig: {
     ...Typography.accentPurpleBig,
-    marginRight: Spacing.tiny,
+    marginRight: Spacing.tiny
   },
   cellLeft: {
     alignItems: 'flex-end',
-    flex: 3,
+    flex: 5,
     justifyContent: 'center',
   },
-  cellRight: { flex: 5 },
+  cellRight: {
-  row: { flexDirection: 'row' },
+    flex: 5,
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    marginBottom: Spacing.tiny,
+    marginLeft: Spacing.tiny
+  }
 })
 
-export default StatsOverview
+export default Table

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

@@ -1,69 +1,87 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
+import { LocalDate } from 'js-joda'
 
 import AppPage from '../common/app-page'
 import SymptomBox from './symptom-box'
 import SymptomPageTitle from './symptom-page-title'
 
-import { getCycleDay } from '../../db'
+import { connect } from 'react-redux'
-import { getData, nextDate, prevDate } from '../helpers/cycle-day'
+import { getDate, setDate } from '../../slices/date'
+import { navigate } from '../../slices/navigation'
 
+import cycleModule from '../../lib/cycle'
+import { dateToTitle } from '../helpers/format-date'
+import { getCycleDay } from '../../db'
+import { getData } from '../helpers/cycle-day'
+
+import { general as labels} from '../../i18n/en/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ route }) => {
+class CycleDayOverView extends Component {
-  const { date, isTemperatureEditView } = route.params
-  const cycleDay = getCycleDay(date)
 
-  const [editedSymptom, setEditedSymptom] = useState(
+  static propTypes = {
-    isTemperatureEditView ? 'temperature' : ''
+    navigate: PropTypes.func,
-  )
+    setDate: PropTypes.func,
-
+    cycleDay: PropTypes.object,
-  const showNextCycleDay = () => {
+    date: PropTypes.string,
-    //setDate(nextDate(date))
+    isTemperatureEditView: PropTypes.bool,
   }
 
-  const showPrevCycleDay = () => {
+  constructor(props) {
-    //setDate(prevDate(date))
+    super(props)
+
+    this.state = { cycleDay: getCycleDay(props.date), data: null }
+    if (props.isTemperatureEditView) {
+      const todayDateString = LocalDate.now().toString()
+      props.setDate(todayDateString)
+    }
   }
 
-  return (
+  updateCycleDay = (date) => {
-    <AppPage>
+    this.props.setDate(date)
-      <SymptomPageTitle
+    this.setState({ cycleDay: getCycleDay(date) })
-        date={date}
+  }
-        onNextCycleDay={showNextCycleDay}
-        onPrevCycleDay={showPrevCycleDay}
-      />
-      <View style={styles.container}>
-        {SYMPTOMS.map((symptom) => {
-          const symptomData =
-            cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
 
-          return (
+  render() {
-            <SymptomBox
+    const { cycleDay } = this.state
-              date={date}
+    const { date, isTemperatureEditView } = this.props
-              key={symptom}
-              symptom={symptom}
-              symptomData={symptomData}
-              symptomDataToDisplay={getData(symptom, symptomData)}
-              editedSymptom={editedSymptom}
-              setEditedSymptom={setEditedSymptom}
-            />
-          )
-        })}
-      </View>
-    </AppPage>
-  )
-}
 
-CycleDayOverView.propTypes = {
+    const { getCycleDayNumber } = cycleModule()
-  route: PropTypes.shape({
+    const cycleDayNumber = getCycleDayNumber(date)
-    params: PropTypes.shape({
+    const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
-      date: PropTypes.string,
+
-      isTemperatureEditView: PropTypes.bool,
+    return (
-    }),
+      <AppPage>
-  }),
+        <SymptomPageTitle
+          reloadSymptomData={this.updateCycleDay}
+          subtitle={subtitle}
+          title={dateToTitle(date)}
+        />
+        <View style={styles.container}>
+          {SYMPTOMS.map(symptom => {
+            const symptomData = cycleDay && cycleDay[symptom]
+              ? cycleDay[symptom] : null
+
+            const isSymptomEdited = isTemperatureEditView && symptom === 'temperature'
+
+            return(
+              <SymptomBox
+                key={symptom}
+                symptom={symptom}
+                symptomData={symptomData}
+                symptomDataToDisplay={getData(symptom, symptomData)}
+                updateCycleDayData={this.updateCycleDay}
+                isSymptomEdited={isSymptomEdited}
+              />
+            )
+          })}
+        </View>
+      </AppPage>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
@@ -71,8 +89,24 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    padding: Spacing.base,
+    padding: Spacing.base
-  },
+  }
 })
 
-export default CycleDayOverView
+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)

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

@@ -9,7 +9,7 @@ import { Colors, Containers } from '../../styles'
 const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
   return (
     <View style={styles.container}>
-      {Object.keys(labels).map((key) => {
+      {Object.keys(labels).map(key => {
         const isActive = optionsState[key]
         const boxStyle = [styles.box, isActive && styles.boxActive]
         const textStyle = [styles.text, isActive && styles.textActive]
@@ -31,25 +31,25 @@ const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
 SelectBoxGroup.propTypes = {
   labels: PropTypes.object.isRequired,
   onSelect: PropTypes.func.isRequired,
-  optionsState: PropTypes.object.isRequired,
+  optionsState: PropTypes.object.isRequired
 }
 
 const styles = StyleSheet.create({
   box: {
-    ...Containers.box,
+    ...Containers.box
   },
   boxActive: {
-    ...Containers.boxActive,
+    ...Containers.boxActive
   },
   container: {
-    ...Containers.selectGroupContainer,
+    ...Containers.selectGroupContainer
   },
   text: {
-    color: Colors.orange,
+    color: Colors.orange
   },
   textActive: {
-    color: 'white',
+    color: 'white'
-  },
+  }
 })
 
 export default SelectBoxGroup

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

@@ -9,21 +9,23 @@ import { Colors, Containers } from '../../styles'
 export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
   return (
     <View style={styles.container}>
-      {buttons.map(({ label, value }, i) => {
+      {
-        const isActive = value === activeButton
+        buttons.map(({ label, value }, i) => {
-        const boxStyle = [styles.box, isActive && styles.boxActive]
+          const isActive = value === activeButton
-        const textStyle = [styles.text, isActive && styles.textActive]
+          const boxStyle = [styles.box, isActive && styles.boxActive]
+          const textStyle = [styles.text, isActive && styles.textActive]
 
-        return (
+          return (
-          <TouchableOpacity
+            <TouchableOpacity
-            onPress={() => onSelect(value)}
+              onPress={() => onSelect(value)}
-            key={i}
+              key={i}
-            style={boxStyle}
+              style={boxStyle}
-          >
+            >
-            <AppText style={textStyle}>{label}</AppText>
+              <AppText style={textStyle}>{label}</AppText>
-          </TouchableOpacity>
+            </TouchableOpacity>
-        )
+          )
-      })}
+        })
+      }
     </View>
   )
 }
@@ -31,23 +33,23 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
 SelectTabGroup.propTypes = {
   activeButton: PropTypes.number,
   buttons: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired
 }
 
 const styles = StyleSheet.create({
   box: {
-    ...Containers.box,
+    ...Containers.box
   },
   boxActive: {
-    ...Containers.boxActive,
+    ...Containers.boxActive
   },
   container: {
-    ...Containers.selectGroupContainer,
+    ...Containers.selectGroupContainer
   },
   text: {
-    color: Colors.orange,
+    color: Colors.orange
   },
   textActive: {
-    color: 'white',
+    color: 'white'
-  },
+  }
-})
+})

components/cycle-day/symptom-box.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
 import { scale } from 'react-native-size-matters'
@@ -7,80 +7,101 @@ 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 { useTranslation } from 'react-i18next'
+import { headerTitles as symptomTitles } from '../../i18n/en/labels'
 
-const SymptomBox = ({
+class SymptomBox extends Component {
-  date,
+  static propTypes = {
-  symptom,
+    date: PropTypes.string.isRequired,
-  symptomData,
+    isSymptomEdited: PropTypes.bool,
-  symptomDataToDisplay,
+    symptom: PropTypes.string.isRequired,
-  editedSymptom,
+    symptomData: PropTypes.object,
-  setEditedSymptom,
+    symptomDataToDisplay: PropTypes.string,
-}) => {
+    updateCycleDayData: PropTypes.func.isRequired,
-  const { t } = useTranslation(null, { keyPrefix: 'cycleDay.symptomBox' })
+  }
-  const isSymptomEdited = editedSymptom === symptom
-  const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
-  const isExcluded = symptomData !== null ? symptomData.exclude : false
 
-  const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
+  static defaultProps = {
-  const iconName = `drip-icon-${symptom}`
+    isSymptomEdited: false,
-  const symptomNameStyle = [
+  }
-    styles.symptomName,
-    isSymptomDisabled && styles.symptomNameDisabled,
-    isExcluded && styles.symptomNameExcluded,
-  ]
-  const textStyle = [
-    styles.text,
-    isSymptomDisabled && styles.textDisabled,
-    isExcluded && styles.textExcluded,
-  ]
 
-  return (
+  constructor(props) {
-    <>
+    super(props)
-      {isSymptomEdited && (
-        <SymptomEditView
-          date={date}
-          symptom={symptom}
-          symptomData={symptomData}
-          onClose={() => setEditedSymptom('')}
-        />
-      )}
 
-      <TouchableOpacity
+    this.state = {
-        disabled={isSymptomDisabled}
+      isSymptomEdited: props.isSymptomEdited,
-        onPress={() => setEditedSymptom(symptom)}
+    }
-        style={styles.container}
+  }
-        testID={iconName}
+
-      >
+  onFinishEditing = () => {
-        <DripIcon
+    const { date, updateCycleDayData } = this.props
-          color={iconColor}
+
-          isActive={!isSymptomDisabled}
+    updateCycleDayData(date)
-          name={iconName}
+    this.setState({ isSymptomEdited: false })
-          size={Sizes.icon}
+  }
-        />
+
-        <View style={styles.textContainer}>
+  onEditSymptom = () => {
-          <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
+    this.setState({ isSymptomEdited: true })
-          {symptomDataToDisplay && (
+  }
-            <AppText style={textStyle} numberOfLines={4}>
+
-              {symptomDataToDisplay}
+  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={Sizes.icon}
+          />
+          <View style={styles.textContainer}>
+            <AppText style={symptomNameStyle}>
+              {symptomTitles[symptom].toLowerCase()}
             </AppText>
-          )}
+            {symptomDataToDisplay && (
-        </View>
+              <AppText style={textStyle} numberOfLines={4}>
-      </TouchableOpacity>
+                {symptomDataToDisplay}
-    </>
+              </AppText>
-  )
+            )}
-}
+          </View>
-
+        </TouchableOpacity>
-SymptomBox.propTypes = {
+      </React.Fragment>
-  date: PropTypes.string.isRequired,
+    )
-  symptom: PropTypes.string.isRequired,
+  }
-  symptomData: PropTypes.object,
-  symptomDataToDisplay: PropTypes.string,
-  editedSymptom: PropTypes.string.isRequired,
-  setEditedSymptom: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
@@ -126,4 +147,10 @@ const styles = StyleSheet.create({
   },
 })
 
-export default SymptomBox
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(SymptomBox)

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

@@ -1,17 +1,20 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
+import { connect } from 'react-redux'
 
 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 { getDate } from '../../slices/date'
 import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
 import { showToast } from '../helpers/general'
 
@@ -19,215 +22,260 @@ import { shared as sharedLabels } from '../../i18n/en/labels'
 import info from '../../i18n/en/symptom-info'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
-const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
+class SymptomEditView extends Component {
-  const symptomConfig = symtomPage[symptom]
+  static propTypes = {
-  const [data, setData] = useState(symptomData ? symptomData : blank[symptom])
+    date: PropTypes.string.isRequired,
-  const [shouldShowInfo, setShouldShowInfo] = useState(false)
+    onClose: PropTypes.func.isRequired,
-  const getParsedData = () => JSON.parse(JSON.stringify(data))
+    symptom: PropTypes.string.isRequired,
-  const onPressLearnMore = () => setShouldShowInfo(!shouldShowInfo)
+    symptomData: PropTypes.object,
+  }
 
-  const onEditNote = (note) => {
+  constructor(props) {
-    const parsedData = getParsedData()
+    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(parsedData, { value: note })
+      Object.assign(data, { value: note })
     } else {
-      parsedData['note'] = note
+      data['note'] = note
     }
 
-    setData(parsedData)
+    this.setState({ data })
   }
 
-  const onExcludeToggle = () => {
+  onExcludeToggle = () => {
-    const parsedData = getParsedData()
+    const data = this.getParsedData()
+    Object.assign(data, { exclude: !data.exclude })
 
-    Object.assign(parsedData, { exclude: !parsedData.exclude })
+    this.setState({ data })
-
-    setData(parsedData)
   }
 
-  const onRemove = () => {
+  onPressLearnMore = () => {
-    save[symptom](data, date, true)
+    this.setState({ shouldShowInfo: !this.state.shouldShowInfo })
+  }
+
+  onRemove = () => {
+    this.saveData(true)
     showToast(sharedLabels.dataDeleted)
-    onClose()
+    this.props.onClose()
   }
 
-  const onSave = () => {
+  onSave = () => {
-    const hasDataChanged = () => {
+    this.saveData()
-      const initialData = symptomData ? symptomData : blank[symptom]
+    showToast(sharedLabels.dataSaved)
-
+    this.props.onClose()
-      return JSON.stringify(data) !== JSON.stringify(initialData)
-    }
-
-    if (hasDataChanged()) {
-      save[symptom](data, date, false)
-      showToast(sharedLabels.dataSaved)
-    }
-
-    onClose()
   }
 
-  const onSaveTemperature = (value, field) => {
+  onSaveTemperature = (value, field) => {
-    const parsedData = getParsedData()
+    const data = this.getParsedData()
     const dataToSave =
       field === 'value' ? { [field]: Number(value) } : { [field]: value }
+    Object.assign(data, { ...dataToSave })
 
-    Object.assign(parsedData, { ...dataToSave })
+    this.setState({ data })
-
-    setData(parsedData)
   }
 
-  const onSelectBox = (key) => {
+  onSelectBox = (key) => {
-    const parsedData = getParsedData()
+    const data = this.getParsedData()
     if (key === 'other') {
-      Object.assign(parsedData, {
+      Object.assign(data, {
         note: null,
-        [key]: !data[key],
+        [key]: !this.state.data[key],
       })
     } else {
-      Object.assign(parsedData, { [key]: !data[key] })
+      Object.assign(data, { [key]: !this.state.data[key] })
     }
 
-    setData(parsedData)
+    this.setState({ data })
   }
 
-  const onSelectBoxNote = (value) => {
+  onSelectBoxNote = (value) => {
-    const parsedData = getParsedData()
+    const data = this.getParsedData()
+    Object.assign(data, { note: value !== '' ? value : null })
 
-    Object.assign(parsedData, { note: value !== '' ? value : null })
+    this.setState({ data })
-
-    setData(parsedData)
   }
 
-  const onSelectTab = (group, value) => {
+  onSelectTab = (group, value) => {
-    const parsedData = getParsedData()
+    const data = this.getParsedData()
+    Object.assign(data, { [group.key]: value })
 
-    Object.assign(parsedData, { [group.key]: value })
+    this.setState({ data })
-
-    setData(parsedData)
-  }
-  const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
-  const noteText = symptom === 'note' ? data.value : data.note
-  const inputProps = {
-    multiline: true,
-    numberOfLines: 3,
-    scrollEnabled: false,
-    style: styles.input,
-    textAlignVertical: 'top',
   }
 
-  return (
+  saveData = (shouldDeleteData) => {
-    <AppModal onClose={onSave}>
+    const { date, symptom } = this.props
-      <ScrollView
+    const { data } = this.state
-        contentContainerStyle={styles.modalContainer}
+    save[symptom](data, date, shouldDeleteData)
-        keyboardDismissMode="on-drag"
+  }
-      >
-        {symptom === 'temperature' && (
-          <Temperature
-            date={date}
-            data={data}
-            save={(value, field) => onSaveTemperature(value, field)}
-          />
-        )}
-        {shouldShow(symptomConfig.selectTabGroups) &&
-          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) => onSelectTab(group, value)}
-                />
-              </Segment>
-            )
-          })}
-        {shouldShow(symptomConfig.selectBoxGroups) &&
-          symtomPage[symptom].selectBoxGroups.map((group) => {
-            const isOtherSelected =
-              data['other'] !== null &&
-              data['other'] !== false &&
-              Object.keys(group.options).includes('other')
 
-            return (
+  closeView = () => {
-              <Segment key={group.key} style={styles.segmentBorder}>
+    const { onClose } = this.props
-                <AppText style={styles.title}>{group.title}</AppText>
+
-                <SelectBoxGroup
+    showToast(sharedLabels.dataSaved)
-                  labels={group.options}
+    onClose()
-                  onSelect={(value) => onSelectBox(value)}
+  }
-                  optionsState={data}
+
-                />
+  render() {
-                {isOtherSelected && (
+    const { symptom } = this.props
-                  <AppTextInput
+    const {
-                    {...inputProps}
+      data,
-                    placeholder={sharedLabels.enter}
+      shouldShowExclude,
-                    value={data.note}
+      shouldShowInfo,
-                    onChangeText={(value) => onSelectBoxNote(value)}
+      shouldShowNote,
+      shouldBoxGroup,
+      shouldTabGroup,
+    } = this.state
+    const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
+    const noteText = symptom === 'note' ? data.value : data.note
+
+    return (
+      <AppModal onClose={this.closeView}>
+        <ScrollView
+          contentContainerStyle={styles.modalContainer}
+          style={styles.modalWindow}
+        >
+          <View style={styles.headerContainer}>
+            <CloseIcon onClose={this.closeView} />
+          </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>
-              </Segment>
+              )
-            )
+            })}
-          })}
+          {shouldBoxGroup &&
-        {shouldShow(symptomConfig.excludeText) && (
+            symtomPage[symptom].selectBoxGroups.map((group) => {
-          <Segment style={styles.segmentBorder}>
+              const isOtherSelected =
-            <AppSwitch
+                data['other'] !== null &&
-              onToggle={onExcludeToggle}
+                data['other'] !== false &&
-              text={symtomPage[symptom].excludeText}
+                Object.keys(group.options).includes('other')
-              value={data.exclude}
-            />
-          </Segment>
-        )}
-        {shouldShow(symptomConfig.note) && (
-          <Segment style={styles.segmentBorder}>
-            <AppText>{symtomPage[symptom].note}</AppText>
-            <AppTextInput
-              {...inputProps}
-              onChangeText={onEditNote}
-              placeholder={sharedLabels.enter}
-              testID="noteInput"
-              value={noteText !== null ? noteText : ''}
-            />
-          </Segment>
-        )}
-        <View style={styles.buttonsContainer}>
-          <Button iconName={iconName} isSmall onPress={onPressLearnMore}>
-            {sharedLabels.learnMore}
-          </Button>
-          <Button isSmall onPress={onRemove}>
-            {sharedLabels.remove}
-          </Button>
-          <Button isCTA isSmall onPress={onSave}>
-            {sharedLabels.save}
-          </Button>
-        </View>
-        {shouldShowInfo && (
-          <Segment last style={styles.segmentBorder}>
-            <AppText>{info[symptom].text}</AppText>
-          </Segment>
-        )}
-      </ScrollView>
-    </AppModal>
-  )
-}
 
-SymptomEditView.propTypes = {
+              return (
-  date: PropTypes.string.isRequired,
+                <Segment key={group.key} style={styles.segmentBorder}>
-  onClose: PropTypes.func.isRequired,
+                  <AppText style={styles.title}>{group.title}</AppText>
-  symptom: PropTypes.string.isRequired,
+                  <SelectBoxGroup
-  symptomData: PropTypes.object,
+                    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,
-    paddingHorizontal: Spacing.base,
-    paddingBottom: Spacing.base,
   },
-  input: {
+  headerContainer: {
-    height: Sizes.base * 5,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingVertical: Spacing.tiny,
   },
   modalContainer: {
-    paddingHorizontal: Spacing.base,
+    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,
@@ -237,4 +285,10 @@ const styles = StyleSheet.create({
   },
 })
 
-export default SymptomEditView
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(SymptomEditView)

components/cycle-day/symptom-page-title.js

@@ -5,34 +5,40 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AppIcon from '../common/app-icon'
 import AppText from '../common/app-text'
 
-import cycleModule from '../../lib/cycle'
+import { connect } from 'react-redux'
-import { dateToTitle } from '../helpers/format-date'
+import { getDate, setDate } from '../../slices/date'
 
-import { general as labels } from '../../i18n/en/cycle-day'
+import { nextDate, prevDate } from '../helpers/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'
 
-const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
+const SymptomPageTitle = ({
-  const title = dateToTitle(date)
+  date,
-
+  reloadSymptomData,
-  const { getCycleDayNumber } = cycleModule()
+  setDate,
-  const cycleDayNumber = getCycleDayNumber(date)
+  subtitle,
-  const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
+  title,
-
+}) => {
-  const formattedTitle =
+  const navigate = (isForward) => {
-    title.length > 21 ? title.substring(0, 18) + '...' : title
+    const nextDay = isForward ? nextDate(date) : prevDate(date)
+    reloadSymptomData(nextDay)
+    setDate(nextDay)
+  }
+  const formattedTitle = title.length > 21
+    ? title.substring(0, 18) + '...'
+    : title
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={onPrevCycleDay} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
-        <AppIcon name="chevron-left" color={Colors.orange} />
+        <AppIcon name='chevron-left' color={Colors.orange}/>
       </TouchableOpacity>
       <View style={styles.textContainer}>
         <AppText style={styles.title}>{formattedTitle}</AppText>
         {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
       </View>
-      <TouchableOpacity onPress={onNextCycleDay} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
-        <AppIcon name="chevron-right" color={Colors.orange} />
+        <AppIcon name='chevron-right' color={Colors.orange}/>
       </TouchableOpacity>
     </View>
   )
@@ -40,8 +46,10 @@ const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
 
 SymptomPageTitle.propTypes = {
   date: PropTypes.string.isRequired,
-  onNextCycleDay: PropTypes.func.isRequired,
+  reloadSymptomData: PropTypes.func.isRequired,
-  onPrevCycleDay: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
@@ -59,4 +67,16 @@ const styles = StyleSheet.create({
   },
 })
 
-export default SymptomPageTitle
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setDate: (date) => dispatch(setDate(date)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)

components/cycle-day/temperature.js

@@ -10,6 +10,8 @@ import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
 import Segment from '../common/segment'
 
+import { connect } from 'react-redux'
+import { getDate } from '../../slices/date'
 import {
   getTemperatureOutOfRangeMessage,
   getPreviousTemperature,
@@ -123,4 +125,10 @@ Temperature.propTypes = {
   save: PropTypes.func.isRequired,
 }
 
-export default Temperature
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(Temperature)

components/header/hamburger-menu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import {
   Modal,
   Platform,
@@ -6,65 +6,73 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import PropTypes from 'prop-types'
-import AppText from '../common/app-text'
 
 import AppIcon from '../common/app-icon'
 import CloseIcon from '../common/close-icon'
+import MenuItem from './menu-item'
 
-import { Colors, Sizes, Typography } from '../../styles'
+import { Colors, Sizes } from '../../styles'
+import settingsLabels from '../../i18n/en/settings'
 import { HIT_SLOP } from '../../config'
-import { useTranslation } from 'react-i18next'
+
+const { menuItems } = settingsLabels
 
 const settingsMenuItems = [
-  { labelKey: 'settings', componentName: 'SettingsMenu' },
+  { name: menuItems.settings, component: 'SettingsMenu' },
-  { labelKey: 'about', componentName: 'About' },
+  { name: menuItems.about, component: 'About' },
-  { labelKey: 'license', componentName: 'License' },
+  { name: menuItems.license, component: 'License' },
-  { labelKey: 'privacyPolicy', componentName: 'PrivacyPolicy' },
+  { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
 ]
 
-const HamburgerMenu = ({ navigate }) => {
+export default class HamburgerMenu extends Component {
-  const [isOpen, setIsOpen] = useState(false)
+  constructor(props) {
-  const closeMenu = () => setIsOpen(false)
+    super(props)
 
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.menuMain' })
+    this.state = { shouldShowMenu: false }
-
-  if (!isOpen)
-    return (
-      <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
-        <AppIcon name="dots-three-vertical" color={Colors.orange} />
-      </TouchableOpacity>
-    )
-
-  function onPress(componentName) {
-    closeMenu()
-    navigate(componentName)
   }
 
-  return (
+  toggleMenu = () => {
-    <Modal animationType="fade" onRequestClose={closeMenu} transparent>
+    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
-      <TouchableOpacity onPress={closeMenu} style={styles.blackBackground} />
+  }
-      <View style={styles.menu}>
+
-        <View style={styles.iconContainer}>
+  render() {
-          <CloseIcon color={'black'} onClose={closeMenu} />
+    const { shouldShowMenu } = this.state
-        </View>
+
-        {settingsMenuItems.map(({ labelKey, componentName }) => (
+    return (
-          <TouchableOpacity
+      <React.Fragment>
-            onPress={() => onPress(componentName)}
+        {!shouldShowMenu && (
-            key={labelKey}
+          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
-          >
+            <AppIcon name="dots-three-vertical" color={Colors.orange} />
-            <AppText style={styles.menuItem}>{t(labelKey)}</AppText>
           </TouchableOpacity>
-        ))}
+        )}
-      </View>
+        {shouldShowMenu && (
-    </Modal>
+          <Modal
-  )
+            animationType="fade"
-}
+            onRequestClose={this.toggleMenu}
-
+            transparent={true}
-export default HamburgerMenu
+            visible={shouldShowMenu}
-
+          >
-HamburgerMenu.propTypes = {
+            <TouchableOpacity
-  navigate: PropTypes.func,
+              onPress={this.toggleMenu}
+              style={styles.blackBackground}
+            ></TouchableOpacity>
+            <View style={styles.menu}>
+              <View style={styles.iconContainer}>
+                <CloseIcon color={'black'} onClose={() => this.toggleMenu()} />
+              </View>
+              {settingsMenuItems.map((item) => (
+                <MenuItem
+                  item={item}
+                  key={item.name}
+                  closeMenu={this.toggleMenu}
+                />
+              ))}
+            </View>
+          </Modal>
+        )}
+      </React.Fragment>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
@@ -86,5 +94,4 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '60%',
   },
-  menuItem: Typography.subtitle,
 })

components/header/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import Logo from './logo'
@@ -7,40 +7,30 @@ import HamburgerMenu from './hamburger-menu'
 
 import { Colors, Containers, Sizes } from '../../styles'
 
-const Header = ({ isStatic, navigation }) => {
+const Header = ({ isSideMenuEnabled }) => {
+
   return (
     <View style={styles.header}>
-      {isStatic ? (
+      <Logo />
-        <Logo />
+      {isSideMenuEnabled && <HamburgerMenu />}
-      ) : (
+    </View >
-        <>
-          <TouchableOpacity onPress={() => navigation.navigate('Home')}>
-            <Logo />
-          </TouchableOpacity>
-          <HamburgerMenu navigate={navigation.navigate} />
-        </>
-      )}
-    </View>
   )
 }
 
 Header.propTypes = {
-  isStatic: PropTypes.bool,
+  isSideMenuEnabled: PropTypes.bool
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
 }
 
 Header.defaultProps = {
-  isStatic: false,
+  isSideMenuEnabled: true
 }
 
 const styles = StyleSheet.create({
   header: {
     backgroundColor: Colors.purple,
     padding: Sizes.base,
-    ...Containers.rowContainer,
+    ...Containers.rowContainer
-  },
+  }
 })
 
-export default Header
+export default Header

components/header/logo.js

@@ -1,20 +1,41 @@
 import React from 'react'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
 
 import AppText from '../common/app-text'
 
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
 import { Colors, Fonts, Sizes } from '../../styles'
 
-const Logo = () => {
+const Logo = ({ navigate }) => {
-  return <AppText style={styles.logo}>drip.</AppText>
+  return(
+    <TouchableOpacity onPress={() => navigate('Home')}>
+      <AppText style={styles.logo}>drip.</AppText>
+    </TouchableOpacity>
+  )
+}
+
+Logo.propTypes = {
+  navigate: PropTypes.func.isRequired
 }
 
 const styles = StyleSheet.create({
   logo: {
     color: Colors.turquoiseDark,
     fontFamily: Fonts.bold,
-    fontSize: Sizes.title,
+    fontSize: Sizes.title
-  },
+  }
 })
 
-export default Logo
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Logo)

components/header/menu-item.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Typography } from '../../styles'
+
+const MenuItem = ({ item, navigate, closeMenu }) => {
+  const { component, name } = item
+  const onPress = () => {
+    closeMenu()
+    navigate(component)
+  }
+
+  return(
+    <TouchableOpacity onPress={onPress}>
+      <AppText style={styles.text}>{name}</AppText>
+    </TouchableOpacity>
+  )
+}
+
+MenuItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
+  closeMenu: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  text: {
+    ...Typography.subtitle
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(MenuItem)

components/helpers/calendar.js

@@ -1,4 +1,4 @@
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 import { verticalScale } from 'react-native-size-matters'
 
 import { Colors, Fonts, Sizes } from '../../styles'
@@ -65,7 +65,7 @@ const styles = {
   calendarToday: {
     fontFamily: 'Jost-Bold',
     fontWeight: 'bold',
-    color: Colors.purple,
+    color: Colors.purple
   },
 }
 

components/helpers/chart.js

@@ -1,4 +1,4 @@
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 
 import { scaleObservable, unitObservable } from '../../local-storage'
 import { getCycleStatusForDay } from '../../lib/sympto-adapter'
@@ -45,6 +45,7 @@ export function getTickList(columnHeight) {
   const tickHeight = columnHeight / numberOfTicks
 
   return getTickPositions(columnHeight).map((tickPosition, i) => {
+
     const tick = scaleMax - i * unit
     const isBold = Number.isInteger(tick) ? true : false
     const label = tick.toFixed(1)
@@ -55,14 +56,14 @@ export function getTickList(columnHeight) {
 
     if (unit === 0.1) {
       // show label with step 0.2
-      shouldShowLabel = !((label * 10) % 2)
+      shouldShowLabel = !(label * 10 % 2)
     } else {
       // show label with step 0.5
-      shouldShowLabel = !((label * 10) % 5)
+      shouldShowLabel = !(label * 10 % 5)
     }
 
     // don't show label, if first or last tick
-    if (i === 0 || i === numberOfTicks - 1) {
+    if ( i === 0 || i === (numberOfTicks - 1) ) {
       shouldShowLabel = false
     }
 
@@ -71,7 +72,7 @@ export function getTickList(columnHeight) {
       label,
       isBold,
       shouldShowLabel,
-      tickHeight,
+      tickHeight
     }
   })
 }
@@ -83,17 +84,17 @@ export function isSymptomDataComplete(symptom, dateString) {
   const symptomData = cycleDayData[symptom]
 
   const dataCompletenessCheck = {
-    cervix: () => {
+    'cervix': () => {
       const { opening, firmness } = symptomData
-      return opening !== null && firmness !== null
+      return (opening !== null) && (firmness !== null)
     },
-    mucus: () => {
+    'mucus': () => {
       const { feeling, texture } = symptomData
-      return feeling !== null && texture !== null
+      return (feeling !== null) && (texture !== null)
     },
-    default: () => {
+    'default': () => {
       return true
-    },
+    }
   }
   return (dataCompletenessCheck[symptom] || dataCompletenessCheck['default'])()
 }
@@ -103,7 +104,7 @@ function getInfoForNeighborColumns(dateString, columnHeight) {
     rightY: null,
     rightTemperatureExclude: null,
     leftY: null,
-    leftTemperatureExclude: null,
+    leftTemperatureExclude: null
   }
   const target = LocalDate.parse(dateString)
   const dayBefore = target.minusDays(1).toString()
@@ -126,57 +127,53 @@ function getInfoForNeighborColumns(dateString, columnHeight) {
 export function getTemperatureProps(symptomData, columnHeight, dateString) {
   const extractedData = {}
   const { value, exclude } = symptomData
-  const neighborTemperatureGraphPoints = getInfoForNeighborColumns(
+  const neighborTemperatureGraphPoints =
-    dateString,
+    getInfoForNeighborColumns(dateString, columnHeight)
-    columnHeight
-  )
 
   for (const key in neighborTemperatureGraphPoints) {
     extractedData[key] = neighborTemperatureGraphPoints[key]
   }
-  return Object.assign(
+  return Object.assign({
-    {
+    value,
-      value,
+    y: normalizeToScale(value, columnHeight),
-      y: normalizeToScale(value, columnHeight),
+    temperatureExclude: exclude,
-      temperatureExclude: exclude,
+  }, extractedData)
-    },
-    extractedData
-  )
 }
 
 export const symptomColorMethods = {
-  mucus: (symptomData) => {
+  'mucus': (symptomData) => {
     const { feeling, texture } = symptomData
     const colorIndex = feeling + texture
     return colorIndex
   },
-  cervix: (symptomData) => {
+  'cervix': (symptomData) => {
     const { opening, firmness } = symptomData
     const isDataComplete = opening !== null && firmness !== null
-    const isClosedAndHard = isDataComplete && opening === 0 && firmness === 0
+    const isClosedAndHard =
+      isDataComplete &&
+      (opening === 0 && firmness === 0)
     const colorIndex = isClosedAndHard ? 0 : 2
     return colorIndex
   },
-  sex: (symptomData) => {
+  'sex': (symptomData) => {
     const { solo, partner } = symptomData
-    const colorIndex =
+    const colorIndex = (solo !== null && partner !== null) ?
-      solo !== null && partner !== null ? solo + 2 * partner - 1 : 0
+      (solo + 2 * partner - 1) : 0
     return colorIndex
   },
-  bleeding: (symptomData) => {
+  'bleeding': (symptomData) => {
     const { value } = symptomData
     const colorIndex = value
     return colorIndex
   },
-  desire: (symptomData) => {
+  'desire': (symptomData) => {
     const { value } = symptomData
     const colorIndex = value
     return colorIndex
   },
-  default: () => {
+  'default': () => { //pain, mood, note
-    //pain, mood, note
     return 0
-  },
+  }
 }
 
 // Chart helpers
@@ -191,7 +188,7 @@ export function makeColumnInfo() {
     amountOfCycleDays += 5
   }
   const localDates = getTodayAndPreviousDays(amountOfCycleDays)
-  return localDates.map((localDate) => localDate.toString())
+  return localDates.map(localDate => localDate.toString())
 }
 
 function getTodayAndPreviousDays(n) {
@@ -213,17 +210,17 @@ function getTodayAndPreviousDays(n) {
 
 export function nfpLines() {
   const cycle = {
-    status: null,
+    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, {
+    cycle.status = getCycleStatusForDay(
-      excludeEarlierCycles: true,
+      dateString, { excludeEarlierCycles: true }
-    })
+    )
-    if (!cycle.status) {
+    if(!cycle.status) {
       cycle.noMoreCycles = true
       return
     }
@@ -235,34 +232,39 @@ export function nfpLines() {
   }
 
   function dateIsInPeriOrPostPhase(dateString) {
-    return dateString >= cycle.status.phases.periOvulatory.start.date
+    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) => {
+      Object.keys(cycle.status.phases).some(phaseName => {
-        return cycle.status.phases[phaseName].cycleDays.some((day) => {
+        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) => {
+      &&
+      cycle.status.phases.postOvulatory.cycleDays.some(day => {
         return day.temperature && day.date > dateString
       })
     )
   }
 
   function isInTempMeasuringPhase(temperature, dateString) {
-    return temperature || precededByAnotherTempValue(dateString)
+    return (
+      temperature || precededByAnotherTempValue(dateString)
+    )
   }
 
-  return function (dateString, temperature, columnHeight) {
+  return function(dateString, temperature, columnHeight) {
     const ret = {
       drawLtlAt: null,
-      drawFhmLine: false,
+      drawFhmLine: false
     }
     if (!cycle.status && !cycle.noMoreCycles) updateCurrentCycle(dateString)
     if (cycle.noMoreCycles) return ret

components/helpers/cycle-day.js

@@ -1,4 +1,4 @@
-import { ChronoUnit, LocalDate, LocalTime } from '@js-joda/core'
+import { ChronoUnit, LocalDate, LocalTime } from 'js-joda'
 
 import {
   getPreviousTemperatureForDate,

components/helpers/format-date.js

@@ -1,4 +1,4 @@
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 import moment from 'moment'
 
 import { general as labels } from '../../i18n/en/cycle-day'
@@ -22,18 +22,3 @@ export function dateToTitle(dateString) {
     ? labels.today
     : moment(dateString).format('ddd DD. MMM YY')
 }
-
-export function humanizeDate(dateString) {
-  if (!dateString) return ''
-
-  const today = LocalDate.now()
-
-  try {
-    const dateToDisplay = LocalDate.parse(dateString)
-    return today.equals(dateToDisplay)
-      ? labels.today
-      : moment(dateString).format('DD. MMM YY')
-  } catch (e) {
-    return ''
-  }
-}

components/helpers/general.js

@@ -1,7 +1,5 @@
 import Toast from 'react-native-simple-toast'
 
-export const showToast = (text) =>
+export const showToast = (text) => Toast.show(
-  Toast.show(text, Toast.SHORT, [
+  text, Toast.SHORT, ['RCTModalHostViewController', 'UIAlertController']
-    'RCTModalHostViewController',
+)
-    'UIAlertController',
-  ])

components/helpers/home.js

@@ -1,4 +1,4 @@
-import { ChronoUnit, LocalDate } from '@js-joda/core'
+import { ChronoUnit, LocalDate } from 'js-joda'
 
 import { formatDateForShortText } from './format-date'
 
@@ -11,18 +11,20 @@ function getTimes(prediction) {
   const todayDate = LocalDate.now()
   const predictedBleedingStart = LocalDate.parse(prediction[0][0])
   /* the range of predicted bleeding days can be either 3 or 5 */
-  const predictedBleedingEnd = LocalDate.parse(
+  const predictedBleedingEnd =
-    prediction[0][prediction[0].length - 1]
+    LocalDate.parse(prediction[0][prediction[0].length - 1])
-  )
   const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
   return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
 }
 
 export function determinePredictionText(bleedingPrediction, t) {
-  if (!bleedingPrediction.length)
+  if (!bleedingPrediction.length) return t('labels.bleedingPrediction.noPrediction')
-    return t('labels.bleedingPrediction.noPrediction')
+  const {
-  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } =
+    todayDate,
-    getTimes(bleedingPrediction)
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(bleedingPrediction)
   if (todayDate.isBefore(predictedBleedingStart)) {
     return predictLabels.predictionInFuture(
       todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
@@ -46,18 +48,19 @@ export function determinePredictionText(bleedingPrediction, t) {
 
 export function getBleedingPredictionRange(prediction) {
   if (!prediction.length) return labels.unknown
-  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } =
+  const {
-    getTimes(prediction)
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(prediction)
   if (todayDate.isBefore(predictedBleedingStart)) {
-    return `${todayDate.until(
+    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
-      predictedBleedingStart,
-      ChronoUnit.DAYS
-    )}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
   }
   if (todayDate.isAfter(predictedBleedingEnd)) {
     return labels.unknown
   }
-  return daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`
+  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
 }
 
 export function getOrdinalSuffix(num) {

components/helpers/labels.js

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

components/helpers/pad-time-with-zeros.js

@@ -1,11 +1,10 @@
+
 export default function (jsDate) {
   const vals = [jsDate.getHours(), jsDate.getMinutes()]
-  return vals
+  return vals.map(val => {
-    .map((val) => {
+    if (parseInt(val) < 10) {
-      if (parseInt(val) < 10) {
+      val = `0${val}`
-        val = `0${val}`
+    }
-      }
+    return val
-      return val
+  }).join(':')
-    })
+}
-    .join(':')
-}

components/menu/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import MenuItem from './menu-item'
+
+import { Containers } from '../../styles'
+import { pages } from '../pages'
+
+const Menu = () => {
+  const menuItems = pages.filter(page => page.isInMenu)
+
+  return (
+    <View style={styles.container}>
+      { menuItems.map(({ icon, label, component }) => {
+        return (
+          <MenuItem
+            component={component}
+            icon={icon}
+            key={label}
+            label={label}
+          />
+        )}
+      )}
+    </View >
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    ...Containers.rowContainer
+  }
+})
+
+export default Menu

components/menu/menu-item.js

@@ -4,48 +4,69 @@ import { StyleSheet, Text, TouchableOpacity } from 'react-native'
 
 import Icon from '../common/menu-icon'
 
+import { connect } from 'react-redux'
+import { getNavigation, navigate } from '../../slices/navigation'
+
 import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'
 
-const MenuItem = ({ isActive, icon, label, onPress }) => {
+const MenuItem = ({ component, icon, label, navigate, navigation }) => {
+  const isActive = (component === navigation.currentPage)
   const textStyle = isActive ? styles.menuTextActive : styles.menuText
   const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
 
   return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
+    <TouchableOpacity
-      <Icon name={icon} isActive={isActive} />
+      style={styles.button}
-      <Text testID={testID} style={textStyle}>
+      onPress={() => navigate(component)}
-        {label}
+    >
-      </Text>
+      <Icon name={icon} isActive={isActive}/>
+      <Text testID={testID} style={textStyle} >{label}</Text>
     </TouchableOpacity>
   )
 }
 
 MenuItem.propTypes = {
-  isActive: PropTypes.bool.isRequired,
+  component: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired,
+  navigation: PropTypes.object,
+  navigate: PropTypes.func,
 }
 
 const text = {
   fontFamily: Fonts.bold,
   fontSize: Sizes.small,
-  textTransform: 'uppercase',
+  textTransform: 'uppercase'
 }
 
 const styles = StyleSheet.create({
   button: {
     padding: Spacing.base,
-    ...Containers.centerItems,
+    ...Containers.centerItems
   },
   menuText: {
     color: Colors.grey,
-    ...text,
+    ...text
   },
   menuTextActive: {
     color: Colors.orange,
-    ...text,
+    ...text
-  },
+  }
 })
 
-export default MenuItem
+const mapStateToProps = (state) => {
+  return({
+    navigation: getNavigation(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(MenuItem)

components/pages.js

@@ -3,6 +3,9 @@ import settingsViews from './settings'
 import settingsLabels from '../i18n/en/settings'
 const labels = settingsLabels.menuItems
 
+export const isSettingsView = (page) =>
+  Object.keys(settingsViews).includes(page)
+
 export const pages = [
   {
     component: 'Home',

components/password-prompt.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
+import { Alert, StyleSheet, View } from 'react-native'
-import { SHA512 } from 'jshashes'
+import nodejs from 'nodejs-mobile-react-native'
 
 import AppPage from './common/app-page'
 import AppTextInput from './common/app-text-input'
@@ -9,95 +9,117 @@ import Button from './common/button'
 import Header from './header'
 
 import { saveEncryptionFlag } from '../local-storage'
-import { deleteDbAndOpenNew, openDb } from '../db'
+import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 import { passwordPrompt as labels, shared } from '../i18n/en/labels'
 import { Containers, Spacing } from '../styles'
 
 const cancelButton = { text: shared.cancel, style: 'cancel' }
 
-const PasswordPrompt = ({ enableShowApp }) => {
+export default class PasswordPrompt extends Component {
-  const [password, setPassword] = useState(null)
+  static propTypes = {
-  const isPasswordEntered = Boolean(password)
+    enableShowApp: PropTypes.func.isRequired
-
-  const unlockApp = async () => {
-    const hash = new SHA512().hex(password)
-    const connected = await openDb(hash)
-
-    if (!connected) {
-      Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
-        {
-          text: shared.tryAgain,
-          onPress: () => setPassword(null),
-        },
-      ])
-      return
-    }
-    enableShowApp()
   }
 
-  const onDeleteDataConfirmation = async () => {
+  constructor(props) {
+    super(props)
+    this.state = { password: null }
+
+    nodejs.channel.addListener('check-pw', this.passHashToDb, this)
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('check-pw', this.passHashToDb)
+  }
+
+  onConfirmDeletion = async () => {
+    Alert.alert(
+      labels.deleteDatabaseTitle,
+      labels.deleteDatabaseExplainer,
+      [cancelButton, { text: labels.deleteData, onPress: this.onDeleteData}]
+    )
+  }
+
+  onDeleteData = () => {
+    Alert.alert(
+      labels.areYouSureTitle,
+      labels.areYouSure,
+      [cancelButton, {
+        text: labels.reallyDeleteData,
+        onPress: this.onDeleteDataConfirmation
+      }]
+    )
+  }
+
+  onDeleteDataConfirmation = async () => {
     await deleteDbAndOpenNew()
     await saveEncryptionFlag(false)
-    enableShowApp()
+    this.props.enableShowApp()
   }
 
-  const onDeleteData = () => {
+  passHashToDb = async hash => {
-    Alert.alert(labels.areYouSureTitle, labels.areYouSure, [
+    const connected = await openDb(hash)
-      cancelButton,
+    if (!connected) {
-      {
+      Alert.alert(
-        text: labels.reallyDeleteData,
+        shared.incorrectPassword,
-        onPress: onDeleteDataConfirmation,
+        shared.incorrectPasswordMessage,
-      },
+        [{
-    ])
+          text: shared.tryAgain,
+          onPress: () => this.setState({ password: null })
+        }]
+      )
+      return
+    }
+    this.props.enableShowApp()
   }
 
-  const onConfirmDeletion = async () => {
+  unlockApp = () => {
-    Alert.alert(labels.deleteDatabaseTitle, labels.deleteDatabaseExplainer, [
+    requestHash('check-pw', this.state.password)
-      cancelButton,
-      { text: labels.deleteData, onPress: onDeleteData },
-    ])
   }
 
-  return (
+  setPassword = (password) => {
-    <>
+    this.setState({ password })
-      <Header isStatic />
+  }
-      <AppPage contentContainerStyle={styles.contentContainer}>
+
-        <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
+  render() {
+    const { password } = this.state
+    const isPasswordEntered = Boolean(password)
+
+    return (
+      <React.Fragment>
+        <Header isSideMenuEnabled={false} />
+        <AppPage contentContainerStyle={styles.contentContainer}>
           <AppTextInput
-            onChangeText={setPassword}
+            isKeyboardOffset={false}
+            onChangeText={this.setPassword}
             secureTextEntry={true}
             placeholder={labels.enterPassword}
           />
           <View style={styles.containerButtons}>
-            <Button onPress={onConfirmDeletion}>{labels.forgotPassword}</Button>
+            <Button onPress={this.onConfirmDeletion}>
+              {labels.forgotPassword}
+            </Button>
             <Button
               disabled={!isPasswordEntered}
               isCTA={isPasswordEntered}
-              onPress={unlockApp}
+              onPress={this.unlockApp}
             >
               {labels.title}
             </Button>
           </View>
-        </KeyboardAvoidingView>
+        </AppPage>
-      </AppPage>
+      </React.Fragment>
-    </>
+    )
-  )
+  }
-}
-
-PasswordPrompt.propTypes = {
-  enableShowApp: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   contentContainer: {
     flex: 1,
     justifyContent: 'center',
-    marginHorizontal: Spacing.base,
+    marginHorizontal: Spacing.base
   },
   containerButtons: {
     ...Containers.rowContainer,
-    justifyContent: 'space-around',
+    justifyContent: 'space-around'
-  },
+  }
 })
-
-export default PasswordPrompt

components/settings/License.js

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useTranslation } from 'react-i18next'
-
-import AppPage from '../common/app-page'
-import AppText from '../common/app-text'
-import AppLink from '../common/AppLink'
-import Segment from '../common/segment'
-
-const License = ({ children }) => {
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.license' })
-  const currentYear = new Date().getFullYear()
-  const link = 'https://www.gnu.org/licenses/gpl-3.0.html'
-  return (
-    <AppPage title={t('title')}>
-      <Segment last>
-        <AppText>{t('text', { currentYear })}</AppText>
-        <AppLink url={link}>{link}</AppLink>
-        {children}
-      </Segment>
-    </AppPage>
-  )
-}
-
-License.propTypes = {
-  children: PropTypes.node,
-}
-
-export default License

components/settings/about.js

@@ -3,21 +3,18 @@ import { Platform, Linking } from 'react-native'
 
 import AppPage from '../common/app-page'
 import AppText from '../common/app-text'
-import AppLink from '../common/AppLink'
 import Segment from '../common/segment'
 import Button from '../common/button'
 import ButtonRow from '../common/button-row'
 
+import labels from '../../i18n/en/settings'
 import links from '../../i18n/en/links'
-import { useTranslation } from 'react-i18next'
 
 const AboutSection = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.about' })
-
   return (
-    <AppPage title={t('title')}>
+    <AppPage title={labels.aboutSection.title}>
       <Segment>
-        <AppText>{t('intro.text')}</AppText>
+        <AppText>{labels.aboutSection.text}</AppText>
         <ButtonRow>
           {[links.email, links.gitlab, links.website].map((link) => (
             <Button
@@ -31,35 +28,25 @@ const AboutSection = () => {
           ))}
         </ButtonRow>
       </Segment>
-      <Segment title={t('philosophy.title')}>
+      <Segment title={labels.philosophy.title}>
-        <AppText>{t('philosophy.text')}</AppText>
+        <AppText>{labels.philosophy.text}</AppText>
       </Segment>
-      <Segment title={t('credits.title')}>
+      <Segment title={labels.credits.title}>
-        <AppText>
+        <AppText>{labels.credits.note}</AppText>
-          {t('credits.text')}{' '}
-          <AppLink url={links.flaticon.url}>flaticon</AppLink>.{' '}
-        </AppText>
-        <AppText>
-          {t('credits.madeBy')}{' '}
-          <AppLink url={links.smashicons.url}>smashicons</AppLink>,{' '}
-          <AppLink url={links.pause08.url}>pause08</AppLink>,{' '}
-          <AppLink url={links.kazachek.url}>kazachek</AppLink>,{' '}
-          <AppLink url={links.freepik.url}>freepik</AppLink>.
-        </AppText>
       </Segment>
-      <Segment title={t('donate.title')}>
+      <Segment title={labels.donate.title}>
-        <AppText>{t('donate.text')}</AppText>
+        <AppText>{labels.donate.note}</AppText>
         {Platform.OS !== 'ios' && (
           <Button
             isCTA
             isSmall
             onPress={() => Linking.openURL(links.donate.url)}
           >
-            {t('donate.button')}
+            {links.donate.text}
           </Button>
         )}
       </Segment>
-      <Segment title={t('version.title')} last>
+      <Segment title={labels.version.title} last>
         <AppText>{require('../../package.json').version}</AppText>
       </Segment>
     </AppPage>

components/settings/common/alert-error.js

@@ -3,4 +3,4 @@ import { shared as sharedLabels } from '../../../i18n/en/labels'
 
 export default function alertError(msg) {
   Alert.alert(sharedLabels.errorTitle, msg)
-}
+}

components/settings/common/confirm-with-password.js

@@ -1,76 +1,102 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
+import { Alert, StyleSheet, View } from 'react-native'
-import { SHA512 } from 'jshashes'
+import nodejs from 'nodejs-mobile-react-native'
 
 import AppTextInput from '../../common/app-text-input'
 import Button from '../../common/button'
 
-import { openDb } from '../../../db'
+import { requestHash, openDb } from '../../../db'
 import { Containers } from '../../../styles'
 import settings from '../../../i18n/en/settings'
 import { shared } from '../../../i18n/en/labels'
 
-const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
+export default class ConfirmWithPassword extends Component {
-  const [password, setPassword] = useState(null)
+  constructor() {
+    super()
 
-  const checkPassword = async () => {
+    this.state = { password: null }
-    const hash = new SHA512().hex(password)
+    nodejs.channel.addListener('password-check', this.checkPassword, this)
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('password-check', this.checkPassword)
+  }
+
+  resetPasswordInput = () => {
+    this.setState({ password: null })
+  }
+
+
+  onIncorrectPassword = () => {
+    Alert.alert(
+      shared.incorrectPassword,
+      shared.incorrectPasswordMessage,
+      [{
+        text: shared.cancel,
+        onPress: this.props.onCancel
+      }, {
+        text: shared.tryAgain,
+        onPress: this.resetPasswordInput
+      }]
+    )
+  }
+
+  checkPassword = async hash => {
     try {
       await openDb(hash)
-      onSuccess()
+      this.props.onSuccess()
     } catch (err) {
-      onIncorrectPassword()
+      this.onIncorrectPassword()
     }
   }
 
-  const onIncorrectPassword = () => {
+  handlePasswordInput = (password) => {
-    Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
+    this.setState({ password })
-      {
-        text: shared.cancel,
-        onPress: onCancel,
-      },
-      {
-        text: shared.tryAgain,
-        onPress: () => setPassword(null),
-      },
-    ])
   }
 
-  const labels = settings.passwordSettings
+  initPasswordCheck = () => {
-  const isPassword = password !== null
+    requestHash('password-check', this.state.password)
+  }
 
-  return (
+  render() {
-    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
+    const { password } = this.state
-      <AppTextInput
+    const labels = settings.passwordSettings
-        onChangeText={setPassword}
+    const isPassword = password !== null
-        placeholder={labels.enterCurrent}
+
-        value={password}
+    return (
-        secureTextEntry
+      <React.Fragment>
-      />
+        <AppTextInput
-      <View style={styles.container}>
+          onChangeText={this.handlePasswordInput}
-        <Button onPress={onCancel}>{shared.cancel}</Button>
+          placeholder={labels.enterCurrent}
-        <Button
+          value={password}
-          disabled={!isPassword}
+          secureTextEntry={true}
-          isCTA={isPassword}
+        />
-          onPress={checkPassword}
+        <View style={styles.container}>
-        >
+          <Button onPress={this.props.onCancel}>
-          {shared.confirmToProceed}
+            {shared.cancel}
-        </Button>
+          </Button>
-      </View>
+          <Button
-    </KeyboardAvoidingView>
+            disabled={!isPassword}
-  )
+            isCTA={isPassword}
+            onPress={this.initPasswordCheck}
+          >
+            {shared.confirmToProceed}
+          </Button>
+        </View>
+      </React.Fragment>
+    )
+
+  }
 }
 
 ConfirmWithPassword.propTypes = {
   onSuccess: PropTypes.func,
-  onCancel: PropTypes.func,
+  onCancel: PropTypes.func
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.rowContainer,
+    ...Containers.rowContainer
-  },
+  }
-})
+})
-
-export default ConfirmWithPassword

components/settings/common/password-field.js

@@ -6,7 +6,11 @@ import styles from '../../../styles'
 
 export default function PasswordField(props) {
   return (
-    <AppTextInput style={styles.passwordField} secureTextEntry {...props} />
+    <AppTextInput
+      style={ styles.passwordField }
+      secureTextEntry
+      {...props}
+    />
   )
 }
 
@@ -14,5 +18,5 @@ PasswordField.propTypes = {
   placeholder: PropTypes.string,
   value: PropTypes.string,
   onChangeText: PropTypes.func,
-  autoFocus: PropTypes.bool,
+  autoFocus: PropTypes.bool
 }

components/settings/common/settings-button.js

@@ -12,17 +12,15 @@ const SettingsButton = ({ children, style, secondary, ...props }) => {
         styles.settingsButton,
         secondary ? null : styles.settingsButtonAccent,
         props.disabled ? styles.settingsButtonDisabled : null,
-        style,
+        style
       ]}
-      {...props}
+      { ...props }
     >
-      <AppText
+      <AppText style={
-        style={
+        secondary ?
-          secondary
+          styles.settingsButtonSecondaryText :
-            ? styles.settingsButtonSecondaryText
+          styles.settingsButtonText
-            : styles.settingsButtonText
+      }>
-        }
-      >
         {children}
       </AppText>
     </TouchableOpacity>
@@ -34,7 +32,7 @@ SettingsButton.propTypes = {
   disabled: PropTypes.bool,
   onPress: PropTypes.func.isRequired,
   secondary: PropTypes.bool,
-  style: PropTypes.object,
+  style: PropTypes.object
 }
 
-export default SettingsButton
+export default SettingsButton

components/settings/data-management/constants.js

@@ -1 +1 @@
-export const EXPORT_FILE_NAME = 'drip-data.csv'
+export const EXPORT_FILE_NAME = 'drip-data.csv'

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import RNFS from 'react-native-fs'
 import { Alert } from 'react-native'
 import PropTypes from 'prop-types'
@@ -17,83 +17,92 @@ import { EXPORT_FILE_NAME } from './constants'
 
 const exportedFilePath = `${RNFS.DocumentDirectoryPath}/${EXPORT_FILE_NAME}`
 
-const DeleteData = ({ onStartDeletion, isDeletingData }) => {
+export default class DeleteData extends Component {
-  const isPasswordSet = hasEncryptionObservable.value
+  constructor() {
-  const [isConfirmingWithPassword, setIsConfirmingWithPassword] =
+    super()
-    useState(false)
 
-  const onAlertConfirmation = () => {
+    this.state = {
-    onStartDeletion()
+      isPasswordSet: hasEncryptionObservable.value,
-    if (isPasswordSet) {
+      isConfirmingWithPassword: false
-      setIsConfirmingWithPassword(true)
-    } else {
-      deleteAppData()
     }
   }
 
-  const alertBeforeDeletion = async () => {
+  onAlertConfirmation = () => {
+    this.props.onStartDeletion()
+    if (this.state.isPasswordSet) {
+      this.setState({ isConfirmingWithPassword: true })
+    } else {
+      this.deleteAppData()
+    }
+  }
+
+  alertBeforeDeletion = async () => {
     const { question, message, confirmation, errors } = settings.deleteSegment
-    if (isDbEmpty() && !(await RNFS.exists(exportedFilePath))) {
+    if (isDbEmpty() && !await RNFS.exists(exportedFilePath)) {
       alertError(errors.noData)
     } else {
-      Alert.alert(question, message, [
+      Alert.alert(
-        {
+        question,
+        message,
+        [{
           text: confirmation,
-          onPress: onAlertConfirmation,
+          onPress: this.onAlertConfirmation
-        },
+        }, {
-        {
           text: sharedLabels.cancel,
           style: 'cancel',
-          onPress: cancelConfirmationWithPassword,
+          onPress: this.cancelConfirmationWithPassword
-        },
+        }]
-      ])
+      )
     }
   }
 
-  const deleteExportedFile = async () => {
+  deleteExportedFile = async () => {
     if (await RNFS.exists(exportedFilePath)) {
       await RNFS.unlink(exportedFilePath)
     }
   }
 
-  const deleteAppData = async () => {
+  deleteAppData = async () => {
     const { errors, success } = settings.deleteSegment
 
     try {
       if (!isDbEmpty()) {
         clearDb()
       }
-      await deleteExportedFile()
+      await this.deleteExportedFile()
       showToast(success.message)
     } catch (err) {
       alertError(errors.couldNotDeleteFile)
     }
-    cancelConfirmationWithPassword()
+    this.cancelConfirmationWithPassword()
   }
 
-  const cancelConfirmationWithPassword = () => {
+  cancelConfirmationWithPassword = () => {
-    setIsConfirmingWithPassword(false)
+    this.setState({ isConfirmingWithPassword: false })
   }
 
-  if (isConfirmingWithPassword && isDeletingData) {
+  render() {
+    const { isConfirmingWithPassword } = this.state
+    const { isDeletingData } = this.props
+
+    if (isConfirmingWithPassword && isDeletingData) {
+      return (
+        <ConfirmWithPassword
+          onSuccess={this.deleteAppData}
+          onCancel={this.cancelConfirmationWithPassword}
+        />
+      )
+    }
+
     return (
-      <ConfirmWithPassword
+      <Button isCTA onPress={this.alertBeforeDeletion}>
-        onSuccess={deleteAppData}
+        {settings.deleteSegment.title}
-        onCancel={cancelConfirmationWithPassword}
+      </Button>
-      />
     )
   }
-
-  return (
-    <Button isCTA onPress={alertBeforeDeletion}>
-      {settings.deleteSegment.title}
-    </Button>
-  )
 }
 
 DeleteData.propTypes = {
   isDeletingData: PropTypes.bool,
-  onStartDeletion: PropTypes.func.isRequired,
+  onStartDeletion: PropTypes.func.isRequired
 }
-
-export default DeleteData

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

@@ -27,7 +27,7 @@ export function openImportDialog(onImportData) {
 export async function getFileContent() {
   let fileInfo
   try {
-    fileInfo = await DocumentPicker.pickSingle({
+    fileInfo = await DocumentPicker.pick({
       type: [DocumentPicker.types.csv, 'text/comma-separated-values'],
     })
   } catch (error) {

components/settings/data-management/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 
 import AppLoadingView from '../../common/app-loading'
 import AppPage from '../../common/app-page'
@@ -13,56 +13,79 @@ import DeleteData from './delete-data'
 import labels from '../../../i18n/en/settings'
 import { ACTION_DELETE, ACTION_EXPORT, ACTION_IMPORT } from '../../../config'
 
-const DataManagement = () => {
+export default class DataManagement extends Component {
-  const [isLoading, setIsLoading] = useState(false)
-  const [currentAction, setCurrentAction] = useState(null)
 
-  const startImportFlow = async (shouldDeleteExistingData) => {
+  constructor(props) {
-    setIsLoading(true)
+    super(props)
+
+    this.state = {
+      isLoading: false,
+      currentAction: null
+    }
+  }
+
+  startLoading = () => {
+    this.setState({ isLoading: true })
+  }
+
+  endLoading = () => {
+    this.setState({ isLoading: false })
+  }
+
+  startImportFlow = async (shouldDeleteExistingData) => {
+    this.startLoading()
     const fileContent = await getFileContent()
     if (fileContent) {
       await importData(shouldDeleteExistingData, fileContent)
     }
-    setIsLoading(false)
+    this.endLoading()
   }
 
-  const startExport = () => {
+  startExport = () => {
-    setCurrentAction(ACTION_EXPORT)
+    this.setCurrentAction(ACTION_EXPORT)
     openShareDialogAndExport()
   }
 
-  const startImport = () => {
+  startImport = () => {
-    setCurrentAction(ACTION_IMPORT)
+    this.setCurrentAction(ACTION_IMPORT)
-    openImportDialog(startImportFlow)
+    openImportDialog(this.startImportFlow)
   }
 
-  if (isLoading) return <AppLoadingView />
+  setCurrentAction = (action) => {
+    this.setState({ currentAction: action })
+  }
 
-  const isDeletingData = currentAction === ACTION_DELETE
+  render() {
+    const { currentAction, isLoading } = this.state
+    const isDeletingData = currentAction === ACTION_DELETE
 
-  return (
+    return (
-    <AppPage>
+      <React.Fragment>
-      <Segment title={labels.export.button}>
+        {isLoading && <AppLoadingView />}
-        <AppText>{labels.export.segmentExplainer}</AppText>
+        {!isLoading &&
-        <Button isCTA onPress={startExport}>
+          <AppPage>
-          {labels.export.button}
+            <Segment title={labels.export.button}>
-        </Button>
+              <AppText>{labels.export.segmentExplainer}</AppText>
-      </Segment>
+              <Button isCTA onPress={this.startExport}>
-      <Segment title={labels.import.button}>
+                {labels.export.button}
-        <AppText>{labels.import.segmentExplainer}</AppText>
+              </Button>
-        <Button isCTA onPress={startImport}>
+            </Segment>
-          {labels.import.button}
+            <Segment title={labels.import.button}>
-        </Button>
+              <AppText>{labels.import.segmentExplainer}</AppText>
-      </Segment>
+              <Button isCTA onPress={this.startImport}>
-      <Segment title={labels.deleteSegment.title} last>
+                {labels.import.button}
-        <AppText>{labels.deleteSegment.explainer}</AppText>
+              </Button>
-        <DeleteData
+            </Segment>
-          isDeletingData={isDeletingData}
+            <Segment title={labels.deleteSegment.title} last>
-          onStartDeletion={() => setCurrentAction(ACTION_DELETE)}
+              <AppText>{labels.deleteSegment.explainer}</AppText>
-        />
+              <DeleteData
-      </Segment>
+                isDeletingData = {isDeletingData}
-    </AppPage>
+                onStartDeletion = {() => this.setCurrentAction(ACTION_DELETE)}
-  )
+              />
-}
+            </Segment>
-
+          </AppPage>
-export default DataManagement
+        }
+      </React.Fragment>
+    )
+  }
+}

components/settings/index.js

@@ -2,8 +2,8 @@ import Reminders from './reminders/reminders'
 import NfpSettings from './nfp-settings'
 import DataManagement from './data-management'
 import Password from './password'
-import About from './About'
+import About from './about'
-import License from './License'
+import License from './license'
 import PrivacyPolicy from './privacy-policy'
 
 export default {