Introduces NFP section redesign, upgrades slider version

components/settings/nfp-settings/index.js

@@ -1,39 +1,114 @@
 import React, { Component } from 'react'
-import {
-  ScrollView, View
-} from 'react-native'
-import styles from '../../../styles'
-import labels from '../../../i18n/en/settings'
+import { StyleSheet, View } from 'react-native'
+import Slider from '@ptomasroos/react-native-multi-slider'
+
+import alertError from '../shared/alert-error'
+import AppPage from '../../common/app-page'
+import AppSwitch from '../../common/app-switch'
 import AppText from '../../common/app-text'
+import Label from './label'
 import Segment from '../../common/segment'
-import TempSlider from './temp-slider'
-import UseCervixSetting from './use-cervix'
-import Icon from 'react-native-vector-icons/Entypo'
+
+import { useCervixObservable,
+  saveUseCervix,
+  scaleObservable,
+  saveTempScale
+} from '../../../local-storage'
+import { Colors, Sizes } from '../../../styles/redesign'
+import labels from '../../../i18n/en/settings'
+import config from '../../../config'
 
 export default class Settings extends Component {
   constructor(props) {
     super(props)
-    this.state = {}
+
+    this.state = {
+      useCervix: useCervixObservable.value,
+      temperatureScale: { ...scaleObservable.value }
+    }
+  }
+
+  onCervixToggle = (value) => {
+    this.setState({ useCervix: value })
+    saveUseCervix(value)
+  }
+
+  onSliderChange = (values) => {
+    this.setState({ min: values[0], max: values[1] })
+  }
+
+  onSliderChangeFinish = (values) => {
+    this.setState({ min: values[0], max: values[1] })
+
+    try {
+      saveTempScale({ min: values[0], max: values[1] })
+    } catch(err) {
+      alertError(labels.tempScale.saveError)
+    }
   }
 
   render() {
+    const { useCervix } = this.state
+    const cervixText = useCervix ?
+      labels.useCervix.cervixModeOn : labels.useCervix.cervixModeOff
+    const { min, max } = this.state.temperatureScale
     return (
-      <ScrollView>
+      <AppPage>
         <Segment title={labels.useCervix.title}>
-          <UseCervixSetting/>
+          <AppSwitch
+            onToggle={this.onCervixToggle}
+            text={cervixText}
+            value={useCervix}
+          />
         </Segment>
         <Segment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          <TempSlider/>
-        </Segment>
-        <Segment style={styles.framedSegmentLast} >
-          <View style={{flexDirection: 'row', alignItems: 'center'}}>
-            <Icon name="info-with-circle"/>
-            <AppText style={styles.framedSegmentTitle}>{` ${labels.preOvu.title} `}</AppText>
+          <View style={styles.container}>
+            <Slider
+              customLabel={Label}
+              enableLabel={true}
+              markerStyle={styles.marker}
+              markerOffsetY={Sizes.tiny}
+              max={config.temperatureScale.max}
+              min={config.temperatureScale.min}
+              onValuesChange={this.onSliderChange}
+              onValuesChangeFinish={this.onSliderChangeFinish}
+              selectedStyle={styles.sliderAccentBackground}
+              step={config.temperatureScale.step}
+              trackStyle={styles.slider}
+              unselectedStyle={styles.sliderBackground}
+              values={[min, max]}
+            />
           </View>
+        </Segment>
+        <Segment icon="info-with-circle" last title={labels.preOvu.title}>
           <AppText>{labels.preOvu.note}</AppText>
         </Segment>
-      </ScrollView>
+      </AppPage>
     )
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: Sizes.base
+  },
+  marker: {
+    backgroundColor: Colors.tourquiseDark,
+    borderRadius: 50,
+    elevation: 4,
+    height: Sizes.subtitle,
+    width: Sizes.subtitle
+  },
+  slider: {
+    borderRadius: 25,
+    height: Sizes.small
+  },
+  sliderAccentBackground: {
+    backgroundColor: Colors.tourquiseDark
+  },
+  sliderBackground: {
+    backgroundColor: Colors.tourquise
+  },
+})